Libraries: Design pass (scratchfoundation#160)

* Design pass on libraries to make sprites look more like they do in the SpriteSelector. Fixed scrolling overflow when reaching the bottom
* Started a colors variables file
* Added a light transform on sprite item hover

Related scratchfoundation#12

Author: lifeinchords

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

@@ -7,26 +7,29 @@
     justify-content: center;
     flex-basis: 160px;
     height: 160px;
+    margin: calc($space / 2);
     padding: 1rem 1rem 0 1rem;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: #575e75;
-    border-radius: $space;
-    border-color: transparent;
-    border-width: 1px;
+    background: white;
+    border-width: 2px;
     border-style: solid;
+    border-color: #e9eef2;
+    border-radius: $space;
+    text-align: center;
     cursor: pointer;
-    transition: all 1s ease-out;  /* slower fade out */ 
 }
 
 .library-item:hover {
-    border-color: #e1e1e1;
-    transition: 0.25s ease-out;
-    background: #f0f0f0;
+    border-width: 2px;
+    border-color: #1dacf4;
+    transition: 0.1s ease-out;
+    transform: scale(1.02, 1.02);
 }
 
 .library-item.is-selected {
+    border-width: 2px;
     border-color: #1dacf4;
-    background: #f0f0f0;
     transition: 0.25s ease-out;
 }
 

src/components/library/library.css

@@ -1,16 +1,24 @@
 .library-scroll-grid {
     display: flex;
+    flex-grow: 1;
+    justify-content: space-between;
+    flex-wrap: wrap;
     overflow-y: scroll;
-    height: 100%;
+    height: calc(100% - 6rem); /* @todo: fix hackiness */
+
+    /* 
+        Gives sprites a bit of room so they don't get cut off when they grow on hover
+        @todo: this can be synced with the transform value as a var
+    */
+    padding: 0.15rem; 
 }
 
 .modal-header {
     width: 100%;
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
     padding: 0.5rem;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 1.5rem;
     font-weight: normal;
     color: #8e8f95;
-    border-bottom: 1px solid lightgray;
 }

src/components/library/library.jsx

@@ -1,7 +1,6 @@
 const bindAll = require('lodash.bindall');
 const React = require('react');
 
-const Box = require('../box/box.jsx');
 const LibraryItem = require('../library-item/library-item.jsx');
 const ModalComponent = require('../modal/modal.jsx');
 
@@ -30,12 +29,7 @@ class LibraryComponent extends React.Component {
                 onRequestClose={this.props.onRequestClose}
             >
                 <h1 className={styles.modalHeader}>{this.props.title}</h1>
-                <Box
-                    className={styles.libraryScrollGrid}
-                    grow={1}
-                    justifyContent="space-around"
-                    wrap="wrap"
-                >
+                <div className={styles.libraryScrollGrid}>
                     {this.props.data.map((dataItem, itemId) => {
                         const scratchURL = dataItem.md5 ?
                             `https://cdn.assets.scratch.mit.edu/internalapi/asset/${dataItem.md5}/get/` :
@@ -51,7 +45,7 @@ class LibraryComponent extends React.Component {
                             />
                         );
                     })}
-                </Box>
+                </div>
             </ModalComponent>
         );
     }

src/components/modal/modal.css

@@ -1,3 +1,6 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
 .modal-overlay {
     position: fixed;
     top: 0;
@@ -14,20 +17,20 @@
     overflow-y: scroll;
     -webkit-overflow-scrolling: 'touch';
     border: 1px solid #ccc;
-    border-radius: 6px;
     padding: 0;
     top: 5%;
     right: 5%;
     bottom: 5%;
     left: 5%;
-    background: #fcfcfc;
+    border-radius: $space;
 }
 
 .modal-children {
     overflow: hidden;
     height: 100%;
     z-index: 0;
     padding: 2rem;
+    background: $ui-pane-gray;
 }
 
 .modal-close-button {
@@ -37,13 +40,13 @@
     align-items: center;
     justify-content: center;
 
-    top: 2rem;
-    right: 2rem;
+    top: 1rem;
+    right: 1rem;
     width: 2.75rem !important;
     height: 2.75rem !important;
 
     color: gray;
-    background-color: #cbcbcb;
+    background-color: $blue;
 
     border-radius: 50% !important;
     border: 2px solid #dbdbdb;

src/css/colors.css

@@ -0,0 +1,2 @@
+$ui-pane-gray: #f9f9f9;
+$blue: #4c97ff;