moving stuff into modal

src/components/library/library.css

@@ -12,7 +12,7 @@
     padding: 1rem 1rem 5rem 1rem;
 }
 
-.modal-header {
+/*.modal-header {
     width: 100%;
     margin-bottom: 2rem;
     padding: 0.5rem;
@@ -20,60 +20,4 @@
     font-size: 1.5rem;
     font-weight: normal;
     color: #8e8f95;
-}
-
-/*
-    @todo: move to Modal component?
-*/
-.full-modal-header {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-
-    box-sizing: border-box;
-    width: 100%;
-    background-color: $blue;
-
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 1rem;
-    font-weight: normal;
-}
-
-.modal-header-item {
-    display: flex;
-    align-items: center;
-    padding: 1rem;
-    text-decoration: none;
-    color: white;
-    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;
-}
-
-.header-item-title {
-    flex-grow: 1;
-    flex-shrink: 0;
-    justify-content: center;
-    user-select: none;
-    letter-spacing: 0.4px;
-    cursor: default;
-}
-
-.header-item-close {
-    flex-basis: $sides;
-    justify-content: flex-end;
-}
+}*/

src/components/library/library.jsx

@@ -5,8 +5,6 @@ const React = require('react');
 
 const LibraryItem = require('../library-item/library-item.jsx');
 const ModalComponent = require('../modal/modal.jsx');
-const Filter = require('../../containers/filter.jsx');
-const CloseButton = require('../close-button/close-button.jsx');
 
 const styles = require('./library.css');
 
@@ -36,32 +34,6 @@ class LibraryComponent extends React.Component {
                 visible={this.props.visible}
                 onRequestClose={this.props.onRequestClose}
             >
-                <div className={classNames(styles.menuBar, styles.fullModalHeader)}>
-                    <div className={classNames(styles.modalHeaderItem, styles.headerItemFilter)}>
-                        <Filter></Filter>
-                    </div>
-                    <div
-                        className={classNames(
-                            styles.modalHeaderItem,
-                            styles.headerItemTitle
-                        )}
-                    >
-                        {this.props.title}
-                    </div>
-                    <div
-                        className={classNames(
-                            styles.modalHeaderItem,
-                            styles.headerItemClose
-                        )}
-                    >
-                        <CloseButton
-                            // className={styles.deleteButton}
-                            size={CloseButton.SIZE_SMALL}
-                            onClick={this.props.onRequestClose}
-                        />
-                    </div>
-                </div>
-
                 <div className={styles.libraryScrollGrid}>
                     {this.props.data.map((dataItem, itemId) => {
                         const scratchURL = dataItem.md5 ?

src/components/modal/modal.css

@@ -56,3 +56,60 @@
     z-index: 0;
     background: $ui-pane-gray;
 }
+
+
+/*
+    @todo: move to Modal component?
+*/
+.full-modal-header {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+
+    box-sizing: border-box;
+    width: 100%;
+    background-color: $blue;
+
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 1rem;
+    font-weight: normal;
+}
+
+.modal-header-item {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    text-decoration: none;
+    color: white;
+    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;
+}
+
+.header-item-title {
+    flex-grow: 1;
+    flex-shrink: 0;
+    justify-content: center;
+    user-select: none;
+    letter-spacing: 0.4px;
+    cursor: default;
+}
+
+.header-item-close {
+    flex-basis: $sides;
+    justify-content: flex-end;
+}

src/components/modal/modal.jsx

+const classNames = require('classnames');
 const PropTypes = require('prop-types');
 const React = require('react');
 const ReactModal = require('react-modal');
 
 const Box = require('../box/box.jsx');
 const CloseButton = require('../close-button/close-button.jsx');
+const Filter = require('../../containers/filter.jsx');
 
 const styles = require('./modal.css');
 
@@ -16,16 +18,36 @@ class ModalComponent extends React.Component {
                 isOpen={this.props.visible}
                 overlayClassName={styles.modalOverlay}
                 ref={m => (this.modal = m)}
-                onRequestClose={this.props.onRequestClose}
             >
-                <CloseButton
-                    className={styles.closeButton}
-                    onClick={this.props.onRequestClose}
-                />
                 <Box
                     className={styles.fullModalChildren}
                     direction="column"
                 >
+                    <div className={classNames(styles.menuBar, styles.fullModalHeader)}>
+                        <div className={classNames(styles.modalHeaderItem, styles.headerItemFilter)}>
+                            <Filter></Filter>
+                        </div>
+                        <div
+                            className={classNames(
+                                styles.modalHeaderItem,
+                                styles.headerItemTitle
+                            )}
+                        >
+                            {this.props.contentLabel}
+                        </div>
+                        <div
+                            className={classNames(
+                                styles.modalHeaderItem,
+                                styles.headerItemClose
+                            )}
+                        >
+                            <CloseButton
+                                // className={styles.deleteButton}
+                                size={CloseButton.SIZE_LARGE}
+                                onClick={this.props.onRequestClose}
+                            />
+                        </div>
+                    </div>
                     {this.props.children}
                 </Box>
             </ReactModal>
@@ -36,7 +58,6 @@ class ModalComponent extends React.Component {
 ModalComponent.propTypes = {
     children: PropTypes.node,
     contentLabel: PropTypes.string.isRequired,
-    onRequestClose: PropTypes.func.isRequired,
     visible: PropTypes.bool.isRequired
 };