Merge pull request #671 from cboard-org/push-dark-theme

Push dark theme
cboard-org · Apr 3, 2020 · 320766a · 320766a
2 parents 0fcdae8 + d3ca45d
commit 320766a
Show file tree

Hide file tree

Showing 18 changed files with 155 additions and 32 deletions.
diff --git a/src/components/App/App.reducer.js b/src/components/App/App.reducer.js
@@ -18,7 +18,8 @@ const initialState = {
     uiSize: DISPLAY_SIZE_STANDARD,
     fontSize: DISPLAY_SIZE_STANDARD,
     hideOutputActive: false,
-    labelPosition: LABEL_POSITION_BELOW
+    labelPosition: LABEL_POSITION_BELOW,
+    darkThemeActive: false
   },
   navigationSettings: {
     active: false,

diff --git a/src/components/Board/Board.component.js b/src/components/Board/Board.component.js
@@ -232,7 +232,8 @@ export class Board extends Component {
       navigationSettings,
       deactivateScanner,
       publishBoard,
-      emptyVoiceAlert
+      emptyVoiceAlert,
+      displaySettings
     } = this.props;
 
     const tiles = this.renderTiles(board.tiles);
@@ -275,6 +276,7 @@ export class Board extends Component {
             userData={userData}
             publishBoard={publishBoard}
             showNotification={this.props.showNotification}
+            dark={displaySettings.darkThemeActive}
           />
           {emptyVoiceAlert && (
             <Alert variant="filled" severity="error">
@@ -319,6 +321,7 @@ export class Board extends Component {
                   edit={isSelecting && !isSaving}
                   cols={cols}
                   updateTiles={this.updateTiles}
+                  dark={displaySettings.darkThemeActive}
                 >
                   {tiles}
                 </Grid>

diff --git a/src/components/Board/Navbar/Navbar.css b/src/components/Board/Navbar/Navbar.css
@@ -7,6 +7,11 @@
   color: #fff;
 }
 
+.Navbar--dark {
+  color: #000;
+  background: #fff;
+}
+
 .Navbar__title {
   display: flex;
   order: 2;

diff --git a/src/components/Board/Navbar/Navbar.js b/src/components/Board/Navbar/Navbar.js
@@ -110,14 +110,17 @@ export class Navbar extends React.Component {
       onBackClick,
       onDeactivateScannerClick,
       onLockClick,
-      onLockNotify
+      onLockNotify,
+      dark
     } = this.props;
 
     const isPublic = board && board.isPublic;
     const isOwnBoard = board && board.email === userData.email;
 
     return (
-      <div className={classNames('Navbar', className)}>
+      <div
+        className={classNames('Navbar', { 'Navbar--dark': dark }, className)}
+      >
         {isLocked && <h2 className="Navbar__title">{title}</h2>}
         <div className="Navbar__group Navbar__group--start">
           <div className={this.state.backButton ? 'scanner__focused' : ''}>
@@ -211,7 +214,8 @@ Navbar.propTypes = {
    */
   onLockClick: PropTypes.func,
   isScannerActive: PropTypes.bool,
-  onDeactivateScannerClick: PropTypes.func
+  onDeactivateScannerClick: PropTypes.func,
+  dark: PropTypes.bool
 };
 
 export default injectIntl(Navbar);
diff --git a/src/components/Board/Output/Output.container.js b/src/components/Board/Output/Output.container.js
@@ -197,7 +197,7 @@ export class OutputContainer extends Component {
   };
 
   render() {
-    const { output, navigationSettings } = this.props;
+    const { output, navigationSettings, dark } = this.props;
 
     const tabIndex = output.length ? '0' : '-1';
 
@@ -211,6 +211,7 @@ export class OutputContainer extends Component {
         symbols={this.state.translatedOutput}
         tabIndex={tabIndex}
         navigationSettings={navigationSettings}
+        dark={dark}
       />
     );
   }
@@ -219,7 +220,8 @@ export class OutputContainer extends Component {
 const mapStateToProps = ({ board, app }) => {
   return {
     output: board.output,
-    navigationSettings: app.navigationSettings
+    navigationSettings: app.navigationSettings,
+    dark: app.displaySettings.darkThemeActive
   };
 };
 

diff --git a/src/components/Board/Output/SymbolOutput/SymbolOutput.css b/src/components/Board/Output/SymbolOutput/SymbolOutput.css
@@ -5,6 +5,11 @@
   background: #fff;
 }
 
+.SymbolOutput--dark {
+  color: #fff;
+  background: #303030;
+}
+
 .SymbolOutput__value {
   height: calc(100% - 10px);
   width: 100px;

diff --git a/src/components/Board/Output/SymbolOutput/SymbolOutput.js b/src/components/Board/Output/SymbolOutput/SymbolOutput.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
+import classNames from 'classnames';
 import ClearIcon from '@material-ui/icons/Clear';
 import IconButton from '@material-ui/core/IconButton';
 
@@ -24,7 +25,8 @@ class SymbolOutput extends PureComponent {
         /**
          * Label to display
          */
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+        dark: PropTypes.bool
       })
     )
   };
@@ -40,6 +42,7 @@ class SymbolOutput extends PureComponent {
       onRemoveClick,
       symbols,
       navigationSettings,
+      dark,
       ...other
     } = this.props;
 
@@ -56,7 +59,9 @@ class SymbolOutput extends PureComponent {
     };
 
     return (
-      <div className="SymbolOutput">
+      <div
+        className={classNames('SymbolOutput', { 'SymbolOutput--dark': dark })}
+      >
         <Scroll {...other}>
           {symbols.map(({ image, label }, index) => (
             <div className="SymbolOutput__value" key={index}>

diff --git a/src/components/Communicator/CommunicatorDialog/CommunicatorDialog.component.js b/src/components/Communicator/CommunicatorDialog/CommunicatorDialog.component.js
@@ -45,7 +45,8 @@ const CommunicatorDialog = ({
   updateMyBoard,
   setRootBoard,
   publishBoard,
-  showNotification
+  showNotification,
+  dark
 }) => (
   <FullScreenDialog
     disableSubmit={true}
@@ -62,7 +63,7 @@ const CommunicatorDialog = ({
       />
     }
   >
-    <Paper>
+    <Paper className={dark ? 'is-dark' : ''}>
       <FullScreenDialogContent className="CommunicatorDialog__container">
         <Tabs
           value={selectedTab}
@@ -133,6 +134,7 @@ const CommunicatorDialog = ({
                     communicator={communicator}
                     showNotification={showNotification}
                     activeBoardId={activeBoardId}
+                    dark={dark}
                   />
                 ))}
 
@@ -208,7 +210,8 @@ CommunicatorDialog.propTypes = {
   copyBoard: PropTypes.func.isRequired,
   setRootBoard: PropTypes.func.isRequired,
   publishBoard: PropTypes.func.isRequired,
-  showNotification: PropTypes.func.isRequired
+  showNotification: PropTypes.func.isRequired,
+  dark: PropTypes.bool
 };
 
 export default CommunicatorDialog;
diff --git a/src/components/Communicator/CommunicatorDialog/CommunicatorDialog.container.js b/src/components/Communicator/CommunicatorDialog/CommunicatorDialog.container.js
@@ -542,7 +542,7 @@ const mapStateToProps = ({ board, communicator, language, app }, ownProps) => {
     board => currentCommunicator.boards.indexOf(board.id) >= 0
   );
 
-  const { userData } = app;
+  const { userData, displaySettings } = app;
   const cboardBoards = board.boards.filter(
     board => board.email === 'support@cboard.io'
   );
@@ -555,7 +555,8 @@ const mapStateToProps = ({ board, communicator, language, app }, ownProps) => {
     cboardBoards,
     availableBoards: board.boards,
     userData,
-    activeBoardId: board.activeBoardId
+    activeBoardId: board.activeBoardId,
+    dark: displaySettings.darkThemeActive
   };
 };
 

diff --git a/src/components/Communicator/CommunicatorDialog/CommunicatorDialog.css b/src/components/Communicator/CommunicatorDialog/CommunicatorDialog.css
@@ -11,6 +11,11 @@
   color: #fff;
 }
 
+.is-dark .CommunicatorDialog__tabs {
+  background-color: #607d8b;
+  color: #fff;
+}
+
 .CommunicatorDialog__tabs [class^='TabIndicator-'] {
   background-color: #fff;
   height: 3px;
@@ -22,6 +27,10 @@
   padding: 0;
 }
 
+.is-dark .CommunicatorDialog__content {
+  background-color: #5e5e5e;
+}
+
 .CommunicatorDialog__content .CommunicatorDialog__spinner {
   margin: 40px auto;
   display: block;
@@ -31,6 +40,9 @@
   background: #eee;
   padding: 16px 16px 28px;
 }
+.is-dark .CommunicatorDialog__communicatorData {
+  background: rgba(36, 36, 36, 0.933);
+}
 
 .CommunicatorDialog__communicatorData__title {
   font-size: 1.14rem;
@@ -47,12 +59,20 @@
   padding: 20px 16px;
 }
 
+.is-dark .CommunicatorDialog__boards {
+  background-color: #424242;
+}
+
 .CommunicatorDialog__boards__item {
   display: flex;
   min-height: 150px;
   margin-bottom: 10px;
 }
 
+.is-dark .CommunicatorDialog__boards__item {
+  background-color: #424242;
+}
+
 .CommunicatorDialog__boards__item__data {
   position: relative;
   width: 50%;
@@ -75,7 +95,7 @@
   right: 8px;
   padding: 5px;
   min-width: 20px;
-  background-color: #5e5e5e;
+  background-color: #838383;
 }
 
 .CommunicatorDialog__boards__item__image_container svg {
@@ -86,7 +106,7 @@
 .CommunicatorDialog__boards__item__actions {
   position: relative;
   width: 10%;
-  color: #5e5e5e;
+  color: #838383;
 }
 
 .CommunicatorDialog__boards__item__image img {
@@ -107,7 +127,7 @@
   right: 8px;
   padding: 5px;
   min-width: 20px;
-  background-color: #5e5e5e;
+  background-color: #838383;
 }
 
 .CommunicatorDialog__boards__item__image__empty button svg {

diff --git a/src/components/Grid/Grid.container.js b/src/components/Grid/Grid.container.js
@@ -23,7 +23,8 @@ export class GridContainer extends PureComponent {
     breakpoints: colsRowsShape,
     gap: PropTypes.number,
     children: PropTypes.node,
-    edit: PropTypes.bool
+    edit: PropTypes.bool,
+    dark: PropTypes.bool
   };
 
   static defaultProps = {
@@ -119,10 +120,16 @@ export class GridContainer extends PureComponent {
   };
 
   render() {
-    const { size, cols, gap, edit, breakpoints, children } = this.props;
+    const { size, cols, gap, edit, breakpoints, children, dark } = this.props;
 
     return (
-      <div className={classNames('Grid', { dragging: this.state.dragging })}>
+      <div
+        className={classNames(
+          'Grid',
+          { dragging: this.state.dragging },
+          { 'Grid--dark': dark }
+        )}
+      >
         <ResponsiveReactGridLayout
           breakpoints={breakpoints}
           cols={cols}

diff --git a/src/components/Grid/Grid.css b/src/components/Grid/Grid.css
@@ -3,6 +3,10 @@
   width: 100%;
 }
 
+.Grid--dark {
+  background: #303030;
+}
+
 .react-grid-item.cssTransforms {
   transition-property: none;
 }

diff --git a/src/components/Settings/Display/Display.component.js b/src/components/Settings/Display/Display.component.js
@@ -49,6 +49,12 @@ class Display extends React.Component {
     });
   };
 
+  toggleDarkTheme = () => {
+    this.setState({
+      darkThemeActive: !this.state.darkThemeActive
+    });
+  };
+
   onDisplaySettingsChange(displaySetting, event) {
     const {
       target: { value }
@@ -176,6 +182,24 @@ class Display extends React.Component {
                 {this.renderRadioGroup('labelPosition')}
               </ListItemSecondaryAction>
             </ListItem>
+            <Divider />
+            <ListItem>
+              <ListItemText
+                className="Display__ListItemText"
+                primary={<FormattedMessage {...messages.darkTheme} />}
+                secondary={
+                  <FormattedMessage {...messages.darkThemeSecondary} />
+                }
+              />
+              <ListItemSecondaryAction className="Display__Options">
+                <Switch
+                  checked={this.state.darkThemeActive}
+                  onChange={this.toggleDarkTheme}
+                  value="active"
+                  color="primary"
+                />
+              </ListItemSecondaryAction>
+            </ListItem>
           </List>
         </Paper>
       </FullScreenDialog>

diff --git a/src/components/Settings/Display/Display.container.js b/src/components/Settings/Display/Display.container.js
@@ -7,16 +7,22 @@ import Display from './Display.component';
 import API from '../../../api';
 
 export class DisplayContainer extends PureComponent {
-  updateDisplaySettings = async (displaySettings) => {
+  updateDisplaySettings = async displaySettings => {
     try {
       await API.updateSettings({ display: displaySettings });
-    } catch (e) { }
+    } catch (e) {}
     this.props.updateDisplaySettingsAction(displaySettings);
   };
 
   render() {
     const { history } = this.props;
-    return <Display {...this.props} updateDisplaySettings={this.updateDisplaySettings} onClose={history.goBack} />;
+    return (
+      <Display
+        {...this.props}
+        updateDisplaySettings={this.updateDisplaySettings}
+        onClose={history.goBack}
+      />
+    );
   }
 }