start to add preferences styling

client/modules/IDE/components/Preferences.jsx

@@ -1,16 +1,13 @@
 import React, { PropTypes } from 'react';
 import InlineSVG from 'react-inlinesvg';
-import classNames from 'classnames';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 // import { bindActionCreators } from 'redux';
 // import { connect } from 'react-redux';
 // import * as PreferencesActions from '../actions/preferences';
 
-const exitUrl = require('../../../images/exit.svg');
 const plusUrl = require('../../../images/plus.svg');
 const minusUrl = require('../../../images/minus.svg');
 const beepUrl = require('../../../sounds/audioAlert.mp3');
-// import { debounce } from 'lodash';
 
 class Preferences extends React.Component {
   constructor(props) {
@@ -54,24 +51,9 @@ class Preferences extends React.Component {
 
   render() {
     const beep = new Audio(beepUrl);
-    const preferencesContainerClass = classNames({
-      'preferences': true,
-      'preferences--selected': this.props.isVisible
-    });
 
     return (
-      <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
-        <div className="preferences__heading">
-          <h2 className="preferences__title">Settings</h2>
-          <button
-            className="preferences__exit-button"
-            onClick={this.props.closePreferences}
-            title="exit"
-            aria-label="exit preferences"
-          >
-            <InlineSVG src={exitUrl} alt="Exit Preferences" />
-          </button>
-        </div>
+      <section className="preferences" tabIndex="0" title="preference-menu">
         <Tabs>
           <TabList>
             <div className="preference__subheadings">
@@ -320,8 +302,6 @@ class Preferences extends React.Component {
 }
 
 Preferences.propTypes = {
-  isVisible: PropTypes.bool.isRequired,
-  closePreferences: PropTypes.func.isRequired,
   fontSize: PropTypes.number.isRequired,
   indentationAmount: PropTypes.number.isRequired,
   setIndentation: PropTypes.func.isRequired,

client/modules/IDE/pages/IDEView.jsx

@@ -246,9 +246,13 @@ class IDEView extends React.Component {
           currentUser={this.props.user.username}
           showHelpModal={this.props.showHelpModal}
         />
+        {this.props.ide.preferencesIsVisible &&
+          <Overlay
+            title="Settings"
+            ariaLabel="settings"
+            closeOverlay={this.props.closePreferences}
+          >
             <Preferences
-          isVisible={this.props.ide.preferencesIsVisible}
-          closePreferences={this.props.closePreferences}
               fontSize={this.props.preferences.fontSize}
               indentationAmount={this.props.preferences.indentationAmount}
               setIndentation={this.props.setIndentation}
@@ -269,6 +273,8 @@ class IDEView extends React.Component {
               theme={this.props.preferences.theme}
               setTheme={this.props.setTheme}
             />
+          </Overlay>
+        }
         <div className="editor-preview-container">
           <SplitPane
             split="vertical"
@@ -361,25 +367,23 @@ class IDEView extends React.Component {
                 <div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
                 </div>
                 <div>
-                  {(() => {
-                    if (
+                  {(
                       (
                         (this.props.preferences.textOutput ||
                           this.props.preferences.gridOutput ||
                           this.props.preferences.soundOutput
-                        ) && this.props.ide.isPlaying
-                      ) || this.props.ide.isAccessibleOutputPlaying) {
-                      return (
+                        ) &&
+                          this.props.ide.isPlaying
+                      ) ||
+                        this.props.ide.isAccessibleOutputPlaying
+                    ) &&
                       <AccessibleOutput
                         isPlaying={this.props.ide.isPlaying}
                         previewIsRefreshing={this.props.ide.previewIsRefreshing}
                         textOutput={this.props.preferences.textOutput}
                         gridOutput={this.props.preferences.gridOutput}
                       />
-                      );
                   }
-                    return '';
-                  })()}
                 </div>
                 <PreviewFrame
                   htmlFile={this.props.htmlFile}

client/styles/components/_preferences.scss

@@ -1,20 +1,10 @@
 .preferences {
-	@extend %modal;
-	position: absolute;
-	top: #{113 / $base-font-size}rem;
-	right: #{192 / $base-font-size}rem;
-	width: #{640 / $base-font-size}rem;
-	height: #{540 / $base-font-size}rem;
-	bottom: #{371 / $base-font-size}rem;
-	margin-bottom: #{100 / $base-font-size}rem;
-	margin-right: #{100 / $base-font-size}rem;
-	display: none;
+	width: 100%;
+	max-width: #{640 / $base-font-size}rem;
 	z-index: 9999;
 	padding: #{14 / $base-font-size}rem #{20 / $base-font-size}rem #{2 / $base-font-size}rem  #{20 / $base-font-size}rem ;
-	&--selected {
 	display: flex;
 	flex-direction: column;
-	}
 	@include themify() {
 		background-color: getThemifyVariable('editor-gutter-color');
 	}
@@ -173,13 +163,12 @@
 	}
 	font-size: #{12 / $base-font-size}rem;
 	height: #{25 / $base-font-size}rem;
-	margin-top: #{30 / $base-font-size}rem;
 	margin-left: #{5 / $base-font-size}rem;
 	margin-bottom: #{0.1 / $base-font-size}rem;
 	margin-right: #{60 / $base-font-size}rem;
 	padding-right: #{10 / $base-font-size}rem;
 	font-family: Montserrat;
-	width: #{110 / $base-font-size}rem;
+	width: 100%;
 }
 
 .preference__vertical-list {