pass on form styling, x icon hover

src/components/library-item/library-item.css

@@ -7,7 +7,7 @@
     justify-content: center;
     flex-basis: 160px;
     height: 160px;
-    margin: calc($space / 2);
+    margin: $space;
     padding: 1rem 1rem 0 1rem;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: #575e75;

src/components/library/library.css

@@ -5,9 +5,11 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    justify-content: space-between;
+    justify-content: center;
 
+    height: 100%;
     overflow-y: scroll;
+    padding: 1rem 1rem 5rem 1rem;
 }
 
 .modal-header {
@@ -20,6 +22,9 @@
     color: #8e8f95;
 }
 
+/*
+    @todo: move to Modal component?
+*/
 .full-modal-header {
     display: flex;
     flex-direction: row;
@@ -40,7 +45,6 @@
     display: flex;
     align-items: center;
     padding: 1rem;
-    cursor: pointer;
     text-decoration: none;
     color: white;
     user-select: none;
@@ -48,7 +52,6 @@
 
 /*
     Modal header has 3 items:
-
     |filter     title       x|
 
     Use the same width for both side item containers,
@@ -66,6 +69,9 @@ $sides: 20rem;
     flex-grow: 1;
     flex-shrink: 0;
     justify-content: center;
+    user-select: none;
+    cursor: default;
+    letter-spacing: 0.4px;
 }
 
 .header-item-close {
@@ -76,34 +82,50 @@ $sides: 20rem;
 /* @todo: make filter component */
 .filter-component {
     display: flex;
+    box-sizing: border-box;
     flex-direction: row;
     align-content: center;
     align-items: center;
 
-    padding: $space;
+    padding: 0.3rem 0.5rem;
     background: rgba(0, 0, 0, 0.10);
     border: 1px solid rgba(255, 255, 255, 0.10);
     border-radius: 10rem;
-    cursor: initial;
+
+    user-select: none;
+    transition: all 0.15s ease-out;
+}
+
+.filter-component:hover {
+    background: rgba(0, 0, 0, 0.15);
 }
 
 .filter-icon {
-    height: 1rem;
-    width: 1rem;
+    height: 0.9rem;
+    width: 0.9rem;
     margin: 0 0.5rem 0 0.75rem;
-    cursor: initial;
+}
+
+.x-icon-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    height: 1.25rem;
+    width: 1.25rem;
+    margin: 0 0.25rem 0 0.5rem;
+
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.x-icon-wrapper:hover {
+    background-color: rgba(255, 255, 255, 0.2);
 }
 
 .x-icon {
-    position: relative;
-    margin: 0 0.75rem 0 0.5rem;
-}
-
-.x-icon:hover:before {
-    position: absolute;
-    height: 1.25rem;
-    width: 1.25rem;
-    background: rgba(255, 255, 255, 0.10);
+    margin: 0.25rem;
+    user-select: none;
 }
 
 .filter-input {

src/components/library/library.jsx

@@ -54,18 +54,29 @@ class LibraryComponent extends React.Component {
                                 placeholder='what are you looking for?'
                             >
                             </input>
-                            <img
-                                className={styles.xIcon}
-                                src={xIcon}
-                            ></img>
+                            <div className={styles.xIconWrapper}>
+                                <img
+                                    className={styles.xIcon}
+                                    src={xIcon}
+                                ></img>
+                            </div>
                         </div>
                     </div>
                     <div
                         className={classNames(
                             styles.modalHeaderItem,
                             styles.headerItemTitle
-                        )}>{this.props.title}</div>
-                    <div className={classNames(styles.modalHeaderItem, styles.headerItemClose)}></div>
+                        )}
+                    >
+                        {this.props.title}
+                    </div>
+                    <div
+                        className={classNames(
+                            styles.modalHeaderItem,
+                            styles.headerItemClose
+                        )}
+                    >
+                    </div>
                 </div>
 
                 <div className={styles.libraryScrollGrid}>