Push dark theme

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,

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>

src/components/Board/Navbar/Navbar.css

@@ -7,6 +7,11 @@
   color: #fff;
 }
 
+.Navbar__dark {
+  color: #000;
+  background: #fff;
+}
+
 .Navbar__title {
   display: flex;
   order: 2;

src/components/Board/Navbar/Navbar.js

@@ -110,14 +110,15 @@ 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 +212,8 @@ Navbar.propTypes = {
    */
   onLockClick: PropTypes.func,
   isScannerActive: PropTypes.bool,
-  onDeactivateScannerClick: PropTypes.func
+  onDeactivateScannerClick: PropTypes.func,
+  dark: PropTypes.bool
 };
 
 export default injectIntl(Navbar);

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
   };
 };
 

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;

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';
 
@@ -9,6 +10,7 @@ import BackspaceButton from './BackspaceButton';
 import ClearButton from './ClearButton';
 import Scroll from './Scroll';
 import './SymbolOutput.css';
+import { dark } from '@material-ui/core/styles/createPalette';
 
 class SymbolOutput extends PureComponent {
   static propTypes = {
@@ -24,7 +26,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 +43,7 @@ class SymbolOutput extends PureComponent {
       onRemoveClick,
       symbols,
       navigationSettings,
+      dark,
       ...other
     } = this.props;
 
@@ -56,7 +60,7 @@ 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}>

src/components/Communicator/CommunicatorDialog/CommunicatorDialog.component.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import FullScreenDialog, {
   FullScreenDialogContent
 } from '../../UI/FullScreenDialog';
@@ -45,7 +46,8 @@ const CommunicatorDialog = ({
   updateMyBoard,
   setRootBoard,
   publishBoard,
-  showNotification
+  showNotification,
+  dark
 }) => (
   <FullScreenDialog
     disableSubmit={true}
@@ -67,7 +69,9 @@ const CommunicatorDialog = ({
         <Tabs
           value={selectedTab}
           onChange={onTabChange}
-          className="CommunicatorDialog__tabs"
+          className={classNames('CommunicatorDialog__tabs', {
+            CommunicatorDialog__tabs__dark: dark
+          })}
           fixed="top"
           variant="scrollable"
           scrollButtons="off"
@@ -91,11 +95,20 @@ const CommunicatorDialog = ({
           />
         </Tabs>
 
-        <div className="CommunicatorDialog__content">
+        <div
+          className={classNames('CommunicatorDialog__content', {
+            CommunicatorDialog__content__dark: dark
+          })}
+        >
           {!loading && (
             <React.Fragment>
               {selectedTab === TAB_INDEXES.COMMUNICATOR_BOARDS && (
-                <div className="CommunicatorDialog__communicatorData">
+                <div
+                  className={classNames(
+                    'CommunicatorDialog__communicatorData',
+                    { CommunicatorDialog__communicatorData__dark: dark }
+                  )}
+                >
                   <React.Fragment>
                     <div className="CommunicatorDialog__communicatorData__title">
                       {communicator.name}
@@ -109,7 +122,11 @@ const CommunicatorDialog = ({
                 </div>
               )}
 
-              <div className="CommunicatorDialog__boards">
+              <div
+                className={classNames('CommunicatorDialog__boards', {
+                  CommunicatorDialog__boards__dark: dark
+                })}
+              >
                 {!boards.length && (
                   <div className="CommunicatorDialog__boards__emptyMessage">
                     <FormattedMessage {...messages.emptyBoardsList} />
@@ -133,6 +150,7 @@ const CommunicatorDialog = ({
                     communicator={communicator}
                     showNotification={showNotification}
                     activeBoardId={activeBoardId}
+                    dark={dark}
                   />
                 ))}
 
@@ -208,7 +226,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;

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
   };
 };
 

src/components/Communicator/CommunicatorDialog/CommunicatorDialog.css

@@ -11,6 +11,11 @@
   color: #fff;
 }
 
+.CommunicatorDialog__tabs__dark {
+  background-color: #607d8b;
+  color: #fff;
+}
+
 .CommunicatorDialog__tabs [class^='TabIndicator-'] {
   background-color: #fff;
   height: 3px;
@@ -22,6 +27,10 @@
   padding: 0;
 }
 
+.CommunicatorDialog__content__dark {
+  background-color: #5e5e5e;
+}
+
 .CommunicatorDialog__content .CommunicatorDialog__spinner {
   margin: 40px auto;
   display: block;
@@ -31,6 +40,9 @@
   background: #eee;
   padding: 16px 16px 28px;
 }
+.CommunicatorDialog__communicatorData__dark {
+  background: rgba(36, 36, 36, 0.933);
+}
 
 .CommunicatorDialog__communicatorData__title {
   font-size: 1.14rem;
@@ -47,12 +59,20 @@
   padding: 20px 16px;
 }
 
+.CommunicatorDialog__boards__dark {
+  background-color: #424242;
+}
+
 .CommunicatorDialog__boards__item {
   display: flex;
   min-height: 150px;
   margin-bottom: 10px;
 }
 
+.CommunicatorDialog__boards__item__dark {
+  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 {

src/components/Communicator/CommunicatorDialog/CommunicatorDialogBoardItem.component.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { intlShape } from 'react-intl';
+import classNames from 'classnames';
 import moment from 'moment';
 import PublicIcon from '@material-ui/icons/Public';
 import KeyIcon from '@material-ui/icons/VpnKey';
@@ -226,7 +227,8 @@ class CommunicatorDialogBoardItem extends React.Component {
       userData,
       communicator,
       activeBoardId,
-      addOrRemoveBoard
+      addOrRemoveBoard,
+      dark
     } = this.props;
     const title = board.name || board.id;
     const displayActions =
@@ -246,7 +248,11 @@ class CommunicatorDialogBoardItem extends React.Component {
         : this.state.imageBoard;
 
     return (
-      <div className="CommunicatorDialog__boards__item">
+      <div
+        className={classNames('CommunicatorDialog__boards__item', {
+          CommunicatorDialog__boards__item__dark: dark
+        })}
+      >
         <div className="CommunicatorDialog__boards__item__image">
           {!!boardCaption && (
             <div className="CommunicatorDialog__boards__item__image_container">
@@ -645,7 +651,8 @@ CommunicatorDialogBoardItem.propTypes = {
   publishBoard: PropTypes.func.isRequired,
   setRootBoard: PropTypes.func.isRequired,
   showNotification: PropTypes.func.isRequired,
-  selectedIds: PropTypes.arrayOf(PropTypes.string)
+  selectedIds: PropTypes.arrayOf(PropTypes.string),
+  dark: PropTypes.bool
 };
 
 export default CommunicatorDialogBoardItem;