* Library component: moved header logic + css to Modal component. Updated sprite alignment

* Close button component: large: added similar transition to add button
* Filter component: added autofocs, made full width

src/components/close-button/close-button.css

@@ -6,40 +6,46 @@
     align-items: center;
     justify-content: center;
 
-    color: gray;
-    background-color: $blue;
-
+    overflow: hidden;  /* Mask the icon animation */
+    background-color: rgba(0, 0, 0, 0.1);
     border-radius: 50%;
-    border-color: #dbdbdb;
-    border-style: solid;
-
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    cursor: pointer;
     user-select: none;
-    transition: all 0.15s ease-out; /* @todo: standardize with var */
+    cursor: pointer;
+    transition: all 0.15s ease-out;
+}
+
+.close-button.large:hover {
+    transform: scale(1.1, 1.1);
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
 }
 
 .small {
     width: 1rem;
     height: 1rem;
-    border-width: 1px;
+    color: #FFF;
+    background-color: $blue;
 }
 
 .large {
-    width: 2.75rem;
-    height: 2.75rem;
-    border-width: 2px;
+    width: 2rem;
+    height: 2rem;
 }
 
-.close-button:hover {
-    transform: scale(1.1, 1.1);
-}
-
-/*  Same icon as Sprite Selector Add button, but rotated.
-    @todo: reuse?
-*/
 .close-icon {
+    position: relative;
+    margin: 0.25rem;
+    user-select: none;
     transform-origin: 50%;
     transform: rotate(45deg);
+}
+
+.small .close-icon {
     width: 40%;
 }
+
+.large .close-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+}

src/components/close-button/close-button.jsx

@@ -11,8 +11,8 @@ const CloseButton = props => (
             styles.closeButton,
             props.className,
             {
-                [styles.large]: props.size === CloseButton.SIZE_LARGE,
-                [styles.small]: props.size === CloseButton.SIZE_SMALL
+                [styles.small]: props.size === CloseButton.SIZE_SMALL,
+                [styles.large]: props.size === CloseButton.SIZE_LARGE
             }
         )}
         onClick={props.onClick}
@@ -24,13 +24,13 @@ const CloseButton = props => (
     </div>
 );
 
-CloseButton.SIZE_LARGE = 'large';
 CloseButton.SIZE_SMALL = 'small';
+CloseButton.SIZE_LARGE = 'large';
 
 CloseButton.propTypes = {
     className: PropTypes.string,
     onClick: PropTypes.func.isRequired,
-    size: PropTypes.oneOf([CloseButton.SIZE_LARGE, CloseButton.SIZE_SMALL])
+    size: PropTypes.oneOf([CloseButton.SIZE_SMALL, CloseButton.SIZE_LARGE])
 };
 
 CloseButton.defaultProps = {

src/components/filter/filter.css

@@ -5,12 +5,16 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+     /*
+        Should we use width 100% instead, for cases when component's
+        parent is not a flexbox container?
+    */
+    flex-grow: 1;
 
     padding: 0.3rem 0.5rem;
     background: rgba(0, 0, 0, 0.10);
     border: 1px solid rgba(255, 255, 255, 0.10);
     border-radius: 10rem;
-
     user-select: none;
 }
 
@@ -37,7 +41,7 @@
     overflow: hidden;  /* Mask the icon animation */
     height: 1.25rem;
     width: 1.25rem;
-    margin: 0 0.25rem 0 0.5rem;
+    margin: 0 0.25rem 0 0.5rem; /* @todo: move to parent to make component*/
 
     border-radius: 50%;
     cursor: pointer;

src/components/filter/filter.jsx

@@ -25,6 +25,7 @@ const FilterComponent = props => {
                 src={filterIcon}
             ></img>
             <input
+                autoFocus
                 className={styles.filterInput}
                 type='text'
                 placeholder={placeholderText}

src/components/library/library.css

@@ -5,19 +5,10 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: flex-start;
 
     height: 100%;
     overflow-y: scroll;
     padding: 1rem 1rem 5rem 1rem;
+    background: $ui-pane-gray;
 }
-
-/*.modal-header {
-    width: 100%;
-    margin-bottom: 2rem;
-    padding: 0.5rem;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 1.5rem;
-    font-weight: normal;
-    color: #8e8f95;
-}*/

src/components/modal/modal.css

@@ -11,36 +11,7 @@
     background-color: rgba(0, 0, 0, .75);
 }
 
-.modal-content {
-    position: absolute;
-    outline: none;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: 'touch';
-    border: 1px solid #ccc;
-    padding: 0;
-    top: 5%;
-    right: 5%;
-    bottom: 5%;
-    left: 5%;
-    border-radius: $space;
-    user-select: none;
-}
-
-.modal-children {
-    overflow: hidden;
-    height: 100%;
-    z-index: 0;
-    padding: 2rem;
-    background: $ui-pane-gray;
-}
-
-.close-button {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    z-index: 2;
-}
-
+/* @todo: extract to type: full ? */
 .full-modal-content {
     position: absolute;
     outline: none;
@@ -50,18 +21,16 @@
     height: 100%;
 }
 
-.full-modal-children {
-    overflow: hidden;
-    height: 100%;
-    z-index: 0;
-    background: $ui-pane-gray;
-}
-
-
 /*
-    @todo: move to Modal component?
+    Modal header has 3 items:
+    |filter     title       x|
+
+    Use the same width for both side item containers,
+    so that title remains centered
 */
-.full-modal-header {
+$sides: 20rem;
+
+.header {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
@@ -76,7 +45,7 @@
     font-weight: normal;
 }
 
-.modal-header-item {
+.header-item {
     display: flex;
     align-items: center;
     padding: 1rem;
@@ -85,19 +54,10 @@
     user-select: none;
 }
 
-/*
-    Modal header has 3 items:
-    |filter     title       x|
-
-    Use the same width for both side item containers,
-    so that title remains centered
-*/
-$sides: 20rem;
-
 .header-item-filter {
     display: flex;
     flex-basis: $sides;
-    justify-content: flex-end;
+    justify-content: flex-start;
 }
 
 .header-item-title {
@@ -113,3 +73,28 @@ $sides: 20rem;
     flex-basis: $sides;
     justify-content: flex-end;
 }
+
+
+/*.base-modal-content {
+    position: absolute;
+    outline: none;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: 'touch';
+    border: 1px solid #ccc;
+    padding: 0;
+    top: 5%;
+    right: 5%;
+    bottom: 5%;
+    left: 5%;
+    border-radius: $space;
+    user-select: none;
+}*/
+
+
+/*
+.base-close-button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    z-index: 2;
+}*/

src/components/modal/modal.jsx

@@ -20,16 +20,15 @@ class ModalComponent extends React.Component {
                 ref={m => (this.modal = m)}
             >
                 <Box
-                    className={styles.fullModalChildren}
                     direction="column"
                 >
-                    <div className={classNames(styles.menuBar, styles.fullModalHeader)}>
-                        <div className={classNames(styles.modalHeaderItem, styles.headerItemFilter)}>
+                    <div className={styles.header}>
+                        <div className={classNames(styles.headerItem, styles.headerItemFilter)}>
                             <Filter></Filter>
                         </div>
                         <div
                             className={classNames(
-                                styles.modalHeaderItem,
+                                styles.headerItem,
                                 styles.headerItemTitle
                             )}
                         >
@@ -37,12 +36,11 @@ class ModalComponent extends React.Component {
                         </div>
                         <div
                             className={classNames(
-                                styles.modalHeaderItem,
+                                styles.headerItem,
                                 styles.headerItemClose
                             )}
                         >
                             <CloseButton
-                                // className={styles.deleteButton}
                                 size={CloseButton.SIZE_LARGE}
                                 onClick={this.props.onRequestClose}
                             />