Use Box in libraries and modal

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

 .library-item {
-    float: left;
-    width: 140px;
-    margin-left: 5px;
-    margin-right: 5px;
-    text-align: center;
     cursor: pointer;
+    text-align: center;
 }
 .library-item.is-selected {
     background: #aaa;

src/components/library-item/library-item.jsx

@@ -2,6 +2,7 @@ const classNames = require('classnames');
 const bindAll = require('lodash.bindall');
 const React = require('react');
 
+const Box = require('../box/box.jsx');
 const CostumeCanvas = require('../costume-canvas/costume-canvas.jsx');
 const styles = require('./library-item.css');
 
@@ -16,16 +17,20 @@ class LibraryItem extends React.Component {
     }
     render () {
         return (
-            <div
+            <Box
+                alignContent="center"
+                alignItems="center"
                 className={classNames({
                     [styles.libraryItem]: true,
                     [styles.isSelected]: this.props.selected
                 })}
+                direction="column"
+                width={140}
                 onClick={this.handleClick}
             >
                 <CostumeCanvas url={this.props.iconURL} />
                 <p>{this.props.name}</p>
-            </div>
+            </Box>
         );
     }
 }

src/components/library/library.css

 .library-scroll-grid {
-    overflow: scroll;
-    position: absolute;
-    top: 70px;
-    bottom: 20px;
-    left: 30px;
-    right: 30px;
+    overflow-y: auto;
 }

src/components/library/library.jsx

 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');
 
@@ -27,7 +28,12 @@ class LibraryComponent extends React.Component {
                 onRequestClose={this.props.onRequestClose}
             >
                 <h1>{this.props.title}</h1>
-                <div className={styles.libraryScrollGrid}>
+                <Box
+                    className={styles.libraryScrollGrid}
+                    grow={1}
+                    justifyContent="space-around"
+                    wrap="wrap"
+                >
                     {this.props.data.map((dataItem, itemId) => {
                         const scratchURL = dataItem.md5 ?
                             `https://cdn.assets.scratch.mit.edu/internalapi/asset/${dataItem.md5}/get/` :
@@ -43,7 +49,7 @@ class LibraryComponent extends React.Component {
                             />
                         );
                     })}
-                </div>
+                </Box>
             </ModalComponent>
         );
     }

src/components/modal/modal.css

@@ -10,7 +10,7 @@
 .modal-content {
     outline: none;
     position: absolute;
-    overflow: visible;
+    overflow: hidden;
     -webkit-overflow-scrolling: 'touch';
     border: 1px solid #ccc;
     border-radius: 6px;
@@ -21,6 +21,11 @@
     left: 5%;
     background: #fcfcfc;
 }
+.modal-children {
+    overflow: hidden;
+    height: 100%;
+    z-index: 0;
+}
 .modal-close-button {
     color: rgb(255, 255, 255);
     background: rgb(50, 50, 50);
@@ -32,5 +37,6 @@
     position: absolute;
     right: 3px;
     top: 3px;
-    cursor: pointer
+    cursor: pointer;
+    z-index: 1;
 }

src/components/modal/modal.jsx

 const React = require('react');
 const ReactModal = require('react-modal');
 
+const Box = require('../box/box.jsx');
+
 const styles = require('./modal.css');
 
 class ModalComponent extends React.Component {
@@ -19,7 +21,12 @@ class ModalComponent extends React.Component {
                 >
                     {'x'}
                 </div>
-                {this.props.children}
+                <Box
+                    className={styles.modalChildren}
+                    direction="column"
+                >
+                    {this.props.children}
+                </Box>
             </ReactModal>
         );
     }