From 900f01c2d5d89495d22cd89e668888d6c7504582 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Wed, 14 Sep 2016 12:46:54 -0400
Subject: [PATCH] more dark theme stuff

---
 client/modules/App/App.js                  |  15 +-
 client/modules/IDE/pages/IDEView.js        | 290 +++++++++++----------
 client/routes.js                           |   2 +-
 client/styles/abstracts/_placeholders.scss |   8 +-
 client/styles/base/_base.scss              |  16 +-
 client/styles/layout/_ide.scss             |  15 +-
 6 files changed, 176 insertions(+), 170 deletions(-)

diff --git a/client/modules/App/App.js b/client/modules/App/App.js
index 0c69c4e6..5598225d 100644
--- a/client/modules/App/App.js
+++ b/client/modules/App/App.js
@@ -1,12 +1,10 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import DevTools from './components/DevTools';
-import classNames from 'classnames';
 
 class App extends React.Component {
   constructor(props, context) {
     super(props, context);
-    console.log(props);
     this.state = { isMounted: false };
   }
 
@@ -15,14 +13,8 @@ class App extends React.Component {
   }
 
   render() {
-    const theme = this.props.route.theme;
-    const appClass = classNames({
-      app: true,
-      light: theme === 'light',
-      dark: theme === 'dark'
-    });
     return (
-      <div className={appClass}>
+      <div className="app">
         {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
         {this.props.children}
       </div>
@@ -31,10 +23,7 @@ class App extends React.Component {
 }
 
 App.propTypes = {
-  children: PropTypes.object,
-  route: PropTypes.shape({
-    theme: PropTypes.string.isRequired
-  }).isRequired
+  children: PropTypes.object
 };
 
 export default connect()(App);
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 1db87882..3f1eaaf3 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -27,6 +27,7 @@ import SplitPane from 'react-split-pane';
 import Overlay from '../../App/components/Overlay';
 import SketchList from '../components/SketchList';
 import About from '../components/About';
+import classNames from 'classnames';
 
 class IDEView extends React.Component {
   constructor(props) {
@@ -156,156 +157,163 @@ class IDEView extends React.Component {
   }
 
   render() {
+    let ideClass = classNames({
+      ide: true,
+      light: this.props.preferences.theme === 'light',
+      dark: this.props.preferences.theme === 'dark',
+    });
     return (
-      <div className="ide">
-        {this.props.toast.isVisible && <Toast />}
-        <Nav
-          user={this.props.user}
-          newProject={this.props.newProject}
-          saveProject={this.props.saveProject}
-          exportProjectAsZip={this.props.exportProjectAsZip}
-          cloneProject={this.props.cloneProject}
-          project={this.props.project}
-          logoutUser={this.props.logoutUser}
-          stopSketch={this.props.stopSketch}
-          showShareModal={this.props.showShareModal}
-        />
-        <Toolbar
-          className="Toolbar"
-          isPlaying={this.props.ide.isPlaying}
-          startSketch={this.props.startSketch}
-          stopSketch={this.props.stopSketch}
-          startTextOutput={this.props.startTextOutput}
-          stopTextOutput={this.props.stopTextOutput}
-          projectName={this.props.project.name}
-          setProjectName={this.props.setProjectName}
-          showEditProjectName={this.props.showEditProjectName}
-          hideEditProjectName={this.props.hideEditProjectName}
-          openPreferences={this.props.openPreferences}
-          preferencesIsVisible={this.props.ide.preferencesIsVisible}
-          setTextOutput={this.props.setTextOutput}
-          owner={this.props.project.owner}
-          project={this.props.project}
-        />
-        <Preferences
-          isVisible={this.props.ide.preferencesIsVisible}
-          closePreferences={this.props.closePreferences}
-          fontSize={this.props.preferences.fontSize}
-          indentationAmount={this.props.preferences.indentationAmount}
-          setIndentation={this.props.setIndentation}
-          indentWithSpace={this.props.indentWithSpace}
-          indentWithTab={this.props.indentWithTab}
-          isTabIndent={this.props.preferences.isTabIndent}
-          setFontSize={this.props.setFontSize}
-          autosave={this.props.preferences.autosave}
-          setAutosave={this.props.setAutosave}
-          lintWarning={this.props.preferences.lintWarning}
-          setLintWarning={this.props.setLintWarning}
-          textOutput={this.props.preferences.textOutput}
-          setTextOutput={this.props.setTextOutput}
-          theme={this.props.preferences.theme}
-          setTheme={this.props.setTheme}
-        />
-        <div className="editor-preview-container">
-          <SplitPane
-            split="vertical"
-            defaultSize={this.sidebarSize}
-            ref="sidebarPane"
-            onDragFinished={this._handleSidebarPaneOnDragFinished}
-            allowResize={this.props.ide.sidebarIsExpanded}
-            minSize={20}
-          >
-            <Sidebar
-              files={this.props.files}
-              setSelectedFile={this.props.setSelectedFile}
-              newFile={this.props.newFile}
-              isExpanded={this.props.ide.sidebarIsExpanded}
-              expandSidebar={this.props.expandSidebar}
-              collapseSidebar={this.props.collapseSidebar}
-              showFileOptions={this.props.showFileOptions}
-              hideFileOptions={this.props.hideFileOptions}
-              deleteFile={this.props.deleteFile}
-              showEditFileName={this.props.showEditFileName}
-              hideEditFileName={this.props.hideEditFileName}
-              updateFileName={this.props.updateFileName}
-              projectOptionsVisible={this.props.ide.projectOptionsVisible}
-              openProjectOptions={this.props.openProjectOptions}
-              closeProjectOptions={this.props.closeProjectOptions}
-              newFolder={this.props.newFolder}
-            />
+      <div className={ideClass}>
+        <div className="ide-content">
+          {this.props.toast.isVisible && <Toast />}
+          <Nav
+            user={this.props.user}
+            newProject={this.props.newProject}
+            saveProject={this.props.saveProject}
+            exportProjectAsZip={this.props.exportProjectAsZip}
+            cloneProject={this.props.cloneProject}
+            project={this.props.project}
+            logoutUser={this.props.logoutUser}
+            stopSketch={this.props.stopSketch}
+            showShareModal={this.props.showShareModal}
+          />
+          <Toolbar
+            className="Toolbar"
+            isPlaying={this.props.ide.isPlaying}
+            startSketch={this.props.startSketch}
+            stopSketch={this.props.stopSketch}
+            startTextOutput={this.props.startTextOutput}
+            stopTextOutput={this.props.stopTextOutput}
+            projectName={this.props.project.name}
+            setProjectName={this.props.setProjectName}
+            showEditProjectName={this.props.showEditProjectName}
+            hideEditProjectName={this.props.hideEditProjectName}
+            openPreferences={this.props.openPreferences}
+            preferencesIsVisible={this.props.ide.preferencesIsVisible}
+            setTextOutput={this.props.setTextOutput}
+            owner={this.props.project.owner}
+            project={this.props.project}
+          />
+          <Preferences
+            isVisible={this.props.ide.preferencesIsVisible}
+            closePreferences={this.props.closePreferences}
+            fontSize={this.props.preferences.fontSize}
+            indentationAmount={this.props.preferences.indentationAmount}
+            setIndentation={this.props.setIndentation}
+            indentWithSpace={this.props.indentWithSpace}
+            indentWithTab={this.props.indentWithTab}
+            isTabIndent={this.props.preferences.isTabIndent}
+            setFontSize={this.props.setFontSize}
+            autosave={this.props.preferences.autosave}
+            setAutosave={this.props.setAutosave}
+            lintWarning={this.props.preferences.lintWarning}
+            setLintWarning={this.props.setLintWarning}
+            textOutput={this.props.preferences.textOutput}
+            setTextOutput={this.props.setTextOutput}
+            theme={this.props.preferences.theme}
+            setTheme={this.props.setTheme}
+          />
+          <div className="editor-preview-container">
             <SplitPane
               split="vertical"
-              defaultSize={'50%'}
-              onChange={() => (this.refs.overlay.style.display = 'block')}
-              onDragFinished={() => (this.refs.overlay.style.display = 'none')}
+              defaultSize={this.sidebarSize}
+              ref="sidebarPane"
+              onDragFinished={this._handleSidebarPaneOnDragFinished}
+              allowResize={this.props.ide.sidebarIsExpanded}
+              minSize={20}
             >
+              <Sidebar
+                files={this.props.files}
+                setSelectedFile={this.props.setSelectedFile}
+                newFile={this.props.newFile}
+                isExpanded={this.props.ide.sidebarIsExpanded}
+                expandSidebar={this.props.expandSidebar}
+                collapseSidebar={this.props.collapseSidebar}
+                showFileOptions={this.props.showFileOptions}
+                hideFileOptions={this.props.hideFileOptions}
+                deleteFile={this.props.deleteFile}
+                showEditFileName={this.props.showEditFileName}
+                hideEditFileName={this.props.hideEditFileName}
+                updateFileName={this.props.updateFileName}
+                projectOptionsVisible={this.props.ide.projectOptionsVisible}
+                openProjectOptions={this.props.openProjectOptions}
+                closeProjectOptions={this.props.closeProjectOptions}
+                newFolder={this.props.newFolder}
+              />
               <SplitPane
-                split="horizontal"
-                primary="second"
-                defaultSize={this.consoleSize}
-                minSize={29}
-                ref="consolePane"
-                onDragFinished={this._handleConsolePaneOnDragFinished}
-                allowResize={this.props.ide.consoleIsExpanded}
+                split="vertical"
+                defaultSize={'50%'}
+                onChange={() => (this.refs.overlay.style.display = 'block')}
+                onDragFinished={() => (this.refs.overlay.style.display = 'none')}
               >
-                <Editor
-                  lintWarning={this.props.preferences.lintWarning}
-                  lintMessages={this.props.editorAccessibility.lintMessages}
-                  updateLineNumber={this.props.updateLineNumber}
-                  updateLintMessage={this.props.updateLintMessage}
-                  clearLintMessage={this.props.clearLintMessage}
-                  file={this.props.selectedFile}
-                  updateFileContent={this.props.updateFileContent}
-                  fontSize={this.props.preferences.fontSize}
-                  indentationAmount={this.props.preferences.indentationAmount}
-                  isTabIndent={this.props.preferences.isTabIndent}
-                  files={this.props.files}
-                  lintMessages={this.props.editorAccessibility.lintMessages}
-                  lineNumber={this.props.editorAccessibility.lineNumber}
-                  editorOptionsVisible={this.props.ide.editorOptionsVisible}
-                  showEditorOptions={this.props.showEditorOptions}
-                  closeEditorOptions={this.props.closeEditorOptions}
-                  showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
-                  setUnsavedChanges={this.props.setUnsavedChanges}
-                />
-                <Console
-                  consoleEvent={this.props.ide.consoleEvent}
-                  isPlaying={this.props.ide.isPlaying}
-                  isExpanded={this.props.ide.consoleIsExpanded}
-                  expandConsole={this.props.expandConsole}
-                  collapseConsole={this.props.collapseConsole}
-                />
-              </SplitPane>
-              <div>
-                <div className="preview-frame-overlay" ref="overlay">
-                </div>
+                <SplitPane
+                  split="horizontal"
+                  primary="second"
+                  defaultSize={this.consoleSize}
+                  minSize={29}
+                  ref="consolePane"
+                  onDragFinished={this._handleConsolePaneOnDragFinished}
+                  allowResize={this.props.ide.consoleIsExpanded}
+                >
+                  <Editor
+                    lintWarning={this.props.preferences.lintWarning}
+                    lintMessages={this.props.editorAccessibility.lintMessages}
+                    updateLineNumber={this.props.updateLineNumber}
+                    updateLintMessage={this.props.updateLintMessage}
+                    clearLintMessage={this.props.clearLintMessage}
+                    file={this.props.selectedFile}
+                    updateFileContent={this.props.updateFileContent}
+                    fontSize={this.props.preferences.fontSize}
+                    indentationAmount={this.props.preferences.indentationAmount}
+                    isTabIndent={this.props.preferences.isTabIndent}
+                    files={this.props.files}
+                    lintMessages={this.props.editorAccessibility.lintMessages}
+                    lineNumber={this.props.editorAccessibility.lineNumber}
+                    editorOptionsVisible={this.props.ide.editorOptionsVisible}
+                    showEditorOptions={this.props.showEditorOptions}
+                    closeEditorOptions={this.props.closeEditorOptions}
+                    showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
+                    setUnsavedChanges={this.props.setUnsavedChanges}
+                  />
+                  <Console
+                    consoleEvent={this.props.ide.consoleEvent}
+                    isPlaying={this.props.ide.isPlaying}
+                    isExpanded={this.props.ide.consoleIsExpanded}
+                    expandConsole={this.props.expandConsole}
+                    collapseConsole={this.props.collapseConsole}
+                  />
+                </SplitPane>
                 <div>
-                {(() => {
-                  if ((this.props.preferences.textOutput && this.props.ide.isPlaying) || this.props.ide.isTextOutputPlaying) {
-                    return (
-                      <TextOutput />
-                    );
-                  }
-                  return '';
-                })()}
+                  <div className="preview-frame-overlay" ref="overlay">
+                  </div>
+                  <div>
+                  {(() => {
+                    if ((this.props.preferences.textOutput && this.props.ide.isPlaying) || this.props.ide.isTextOutputPlaying) {
+                      return (
+                        <TextOutput />
+                      );
+                    }
+                    return '';
+                  })()}
+                  </div>
+                  <PreviewFrame
+                    htmlFile={this.props.htmlFile}
+                    jsFiles={this.props.jsFiles}
+                    cssFiles={this.props.cssFiles}
+                    files={this.props.files}
+                    content={this.props.selectedFile.content}
+                    head={
+                      <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
+                    }
+                    isPlaying={this.props.ide.isPlaying}
+                    isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
+                    textOutput={this.props.preferences.textOutput}
+                    dispatchConsoleEvent={this.props.dispatchConsoleEvent}
+                  />
                 </div>
-                <PreviewFrame
-                  htmlFile={this.props.htmlFile}
-                  jsFiles={this.props.jsFiles}
-                  cssFiles={this.props.cssFiles}
-                  files={this.props.files}
-                  content={this.props.selectedFile.content}
-                  head={
-                    <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
-                  }
-                  isPlaying={this.props.ide.isPlaying}
-                  isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
-                  textOutput={this.props.preferences.textOutput}
-                  dispatchConsoleEvent={this.props.dispatchConsoleEvent}
-                />
-              </div>
+              </SplitPane>
             </SplitPane>
-          </SplitPane>
+          </div>
         </div>
         {(() => {
           if (this.props.ide.modalIsVisible) {
diff --git a/client/routes.js b/client/routes.js
index f4549ed7..b47056bc 100644
--- a/client/routes.js
+++ b/client/routes.js
@@ -14,7 +14,7 @@ const checkAuth = (store) => {
 
 const routes = (store) =>
   (
-  <Route path="/" component={App} theme={store.getState().preferences.theme}>
+  <Route path="/" component={App}>
     <IndexRoute component={IDEView} onEnter={checkAuth(store)} />
     <Route path="/login" component={LoginView} />
     <Route path="/signup" component={SignupView} />
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 2ad442eb..4b4a66fb 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -111,10 +111,12 @@
 }
 
 %modal {
-	background-color: $light-modal-background-color;
-	border: 1px solid $light-modal-border-color;
+	@include themify() {
+		background-color: getThemifyVariable('modal-background-color');
+		border: 1px solid getThemifyVariable('modal-border-color');
+		box-shadow: 0 12px 12px getThemifyVariable('shadow-color');
+	}
 	border-radius: 2px;
-	box-shadow: 0 12px 12px $light-shadow-color;
 	z-index: 20;
 }
 
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 4883cc52..7fbb393b 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -13,22 +13,20 @@ body, input, button {
 	font-family: 'Avenir Next', Montserrat, sans-serif;
 }
 
-body {
-	background-color: $light-background-color;
-}
-
 .root-app, .app {
 	min-height: 100%;
 	height: 100%;
 }
 
 a {
-	text-decoration: none;
-	color: $light-inactive-text-color;
-	cursor: pointer;
-	&:hover {
+	@include themify() {
 		text-decoration: none;
-		color: $light-primary-text-color;
+		color: getThemifyVariable('inactive-text-color');
+		cursor: pointer;
+		&:hover {
+			text-decoration: none;
+			color: getThemifyVariable('primary-text-color');
+		}
 	}
 }
 
diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss
index 7312f78d..c1eb8b3e 100644
--- a/client/styles/layout/_ide.scss
+++ b/client/styles/layout/_ide.scss
@@ -1,8 +1,17 @@
 .ide {
-	display: flex;
-	flex-direction: column;
 	height: 100%;
-	flex-wrap: wrap;
+  width: 100%;
+}
+
+.ide-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-wrap: wrap;
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+    background-color: getThemifyVariable('background-color');
+  }
 }
 
 .editor-preview-container {