Report first pass

Report button opens a modal with the report project form. All the content is currently in `preview/presentation` because components cannot have their own l10n files.

src/_colors.scss

@@ -18,8 +18,9 @@ $ui-border: hsla(0, 0, 85, 1); //#D9D9D9
 
 /* 3.0 colors */
 /* Using www naming convention for now, should be consistent with gui */
-$ui-green: hsla(163, 83, 40, 1); //#0fbd8c Pen Primary
-$ui-coral: hsla(350, 100, 70, 1); //#FF6680 More Priamry
+$ui-green: hsla(163, 83, 40, 1); // #0fbd8c Pen Primary
+$ui-coral: hsla(350, 100, 70, 1); // #FF6680 More Primary
+$ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More tertiary
 $ui-blue-10percent: hsla(215, 100, 65, .1);
 $ui-orange-25percent: hsla(35, 90, 55, .25);
 

src/components/modal/report/modal.jsx

+const PropTypes = require('prop-types');
+const React = require('react');
+const Modal = require('../base/modal.jsx');
+
+require('../../forms/button.scss');
+require('./modal.scss');
+
+const ReportModal = props => (
+    <Modal
+        className="mod-report"
+        {...props}
+    >
+        <div>
+            <div className="report-modal-header">
+                <div className="report-content-label">
+                    {props.contentLabel}
+                </div>
+            </div>
+
+            <div className="report-modal-content">
+                {props.children}
+            </div>
+        </div>
+        
+    </Modal>
+);
+
+ReportModal.propTypes = {
+    children: PropTypes.node,
+    contentLabel: PropTypes.string,
+    onRequestClose: PropTypes.func
+};
+
+module.exports = ReportModal;

src/components/modal/report/modal.scss

+@import "../../../colors";
+@import "../../../frameless";
+
+.mod-report * {
+    box-sizing: border-box;
+}
+
+.mod-report {
+    margin: 100px auto;
+    width: 30rem;
+    outline: none;
+    padding: 0;
+    user-select: none;
+
+    overflow: hidden;
+}
+
+.report-modal-header {
+    height: 3rem;
+    padding-top: .75rem;
+
+    box-sizing: border-box;
+    width: 100%;
+    background-color: $ui-coral;
+    box-shadow: inset 0 -1px 0 0 $ui-coral-dark;
+}
+
+.report-content-label {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 1rem;
+    font-weight: bold;
+    color: $type-white;
+    text-align: center;
+}
+
+.report-modal-content {
+    width: 80%;
+    margin: 1rem auto;
+    font-size: .875rem;
+    line-height: 1.5rem;
+}

src/views/preview/preview.jsx

@@ -69,6 +69,19 @@ class Preview extends React.Component {
     componentWillUnmount () {
         this.removeEventListeners();
     }
+    initState () {
+        const pathname = window.location.pathname.toLowerCase();
+        const parts = pathname.split('/').filter(Boolean);
+        // parts[0]: 'preview'
+        // parts[1]: either :id or 'editor'
+        // parts[2]: undefined if no :id, otherwise either 'editor' or 'fullscreen'
+        return {
+            editable: false,
+            favoriteCount: 0,
+            loveCount: 0,
+            projectId: parts[1] === 'editor' ? 0 : parts[1]
+        };
+    }
     addEventListeners () {
         window.addEventListener('popstate', this.handlePopState);
     }
@@ -108,19 +121,6 @@ class Preview extends React.Component {
             );
         }
     }
-    initState () {
-        const pathname = window.location.pathname.toLowerCase();
-        const parts = pathname.split('/').filter(Boolean);
-        // parts[0]: 'preview'
-        // parts[1]: either :id or 'editor'
-        // parts[2]: undefined if no :id, otherwise either 'editor' or 'fullscreen'
-        return {
-            editable: false,
-            favoriteCount: 0,
-            loveCount: 0,
-            projectId: parts[1] === 'editor' ? 0 : parts[1]
-        };
-    }
     handleFavoriteToggle () {
         this.props.setFavedStatus(
             !this.props.faved,
@@ -269,15 +269,6 @@ Preview.propTypes = {
             root: PropTypes.number
         })
     }),
-    faved: PropTypes.bool,
-    fullScreen: PropTypes.bool,
-    getCreditInfo: PropTypes.func.isRequired,
-    getFavedStatus: PropTypes.func.isRequired,
-    getLovedStatus: PropTypes.func.isRequired,
-    getProjectInfo: PropTypes.func.isRequired,
-    getRemixes: PropTypes.func.isRequired,
-    getStudios: PropTypes.func.isRequired,
-    loved: PropTypes.bool,
     playerMode: PropTypes.bool,
     projectInfo: PropTypes.shape({
         author: PropTypes.shape({

src/views/preview/preview.scss

@@ -462,3 +462,8 @@ $stage-height: 406px;
         }
     }
 }
+
+.report-text textarea {
+    // override min-height from default settings (for teacher registration)
+    min-height: 8rem;
+}
\ No newline at end of file