feat: add teacher theme

pyphilia · pyphilia · commit d95398b982c8 · 2020-06-24T10:23:22.000+02:00
closes #283
diff --git a/src/App.js b/src/App.js
@@ -7,6 +7,7 @@ import { withStyles } from '@material-ui/core';
 import { withTranslation } from 'react-i18next';
 import WifiIcon from '@material-ui/icons/Wifi';
 import WifiOffIcon from '@material-ui/icons/WifiOff';
+import { MuiThemeProvider } from '@material-ui/core/styles';
 import Home from './Home';
 import VisitSpace from './components/VisitSpace';
 import SpacesNearby from './components/SpacesNearby';
@@ -22,6 +23,7 @@ import SignInScreen from './components/signin/SignInScreen';
 import Authorization from './components/Authorization';
 import Classrooms from './components/classrooms/Classrooms';
 import ImportDataScreen from './components/classrooms/ImportDataScreen';
+import { OnlineTheme, OfflineTheme } from './themes';
 import {
   SETTINGS_PATH,
   SYNC_SPACE_PATH,
@@ -81,6 +83,7 @@ export class App extends Component {
       toastrIcon: PropTypes.string.isRequired,
     }).isRequired,
     connexionStatus: PropTypes.bool.isRequired,
+    userMode: PropTypes.oneOf(USER_MODES).isRequired,
   };
 
   static defaultProps = {
@@ -155,86 +158,93 @@ export class App extends Component {
 
   render() {
     const { height } = this.state;
+    const { userMode, connexionStatus } = this.props;
 
     return (
-      <Router>
-        <div className="app" style={{ height }}>
-          <Switch>
-            <Route exact path={SIGN_IN_PATH} component={SignInScreen} />
-            <Route exact path={HOME_PATH} component={Authorization()(Home)} />
-            <Route
-              exact
-              path={SAVED_SPACES_PATH}
-              component={Authorization()(SavedSpaces)}
-            />
-            <Route
-              exact
-              path={SPACES_NEARBY_PATH}
-              component={Authorization()(SpacesNearby)}
-            />
-            <Route
-              exact
-              path={VISIT_PATH}
-              component={Authorization()(VisitSpace)}
-            />
-            <Route
-              exact
-              path={LOAD_SPACE_PATH}
-              component={Authorization()(LoadSpace)}
-            />
-            <Route
-              exact
-              path={LOAD_SELECTION_SPACE_PATH}
-              component={Authorization()(LoadSelectionScreen)}
-            />
-            <Route
-              exact
-              path={SETTINGS_PATH}
-              component={Authorization()(Settings)}
-            />
-            <Route
-              exact
-              path={SYNC_SPACE_PATH}
-              component={Authorization()(SyncScreen)}
-            />
-            <Route
-              exact
-              path={buildExportSelectionPathForSpaceId()}
-              component={Authorization()(ExportSelectionScreen)}
-            />
-            <Route
-              exact
-              path={SPACE_PATH}
-              component={Authorization()(SpaceScreen)}
-            />
-            <Route
-              exact
-              path={DASHBOARD_PATH}
-              component={Authorization()(Dashboard)}
-            />
-            <Route
-              exact
-              path={buildClassroomPath()}
-              component={Authorization([USER_MODES.TEACHER])(ClassroomScreen)}
-            />
-            <Route
-              exact
-              path={CLASSROOMS_PATH}
-              component={Authorization([USER_MODES.TEACHER])(Classrooms)}
-            />
-            <Route
-              exact
-              path={buildImportDataInClassroomPath()}
-              component={Authorization([USER_MODES.TEACHER])(ImportDataScreen)}
-            />
-            <Route
-              exact
-              path={DEVELOPER_PATH}
-              component={Authorization()(DeveloperScreen)}
-            />
-          </Switch>
-        </div>
-      </Router>
+      <MuiThemeProvider
+        theme={connexionStatus ? OnlineTheme(userMode) : OfflineTheme}
+      >
+        <Router>
+          <div className="app" style={{ height }}>
+            <Switch>
+              <Route exact path={SIGN_IN_PATH} component={SignInScreen} />
+              <Route exact path={HOME_PATH} component={Authorization()(Home)} />
+              <Route
+                exact
+                path={SAVED_SPACES_PATH}
+                component={Authorization()(SavedSpaces)}
+              />
+              <Route
+                exact
+                path={SPACES_NEARBY_PATH}
+                component={Authorization()(SpacesNearby)}
+              />
+              <Route
+                exact
+                path={VISIT_PATH}
+                component={Authorization()(VisitSpace)}
+              />
+              <Route
+                exact
+                path={LOAD_SPACE_PATH}
+                component={Authorization()(LoadSpace)}
+              />
+              <Route
+                exact
+                path={LOAD_SELECTION_SPACE_PATH}
+                component={Authorization()(LoadSelectionScreen)}
+              />
+              <Route
+                exact
+                path={SETTINGS_PATH}
+                component={Authorization()(Settings)}
+              />
+              <Route
+                exact
+                path={SYNC_SPACE_PATH}
+                component={Authorization()(SyncScreen)}
+              />
+              <Route
+                exact
+                path={buildExportSelectionPathForSpaceId()}
+                component={Authorization()(ExportSelectionScreen)}
+              />
+              <Route
+                exact
+                path={SPACE_PATH}
+                component={Authorization()(SpaceScreen)}
+              />
+              <Route
+                exact
+                path={DASHBOARD_PATH}
+                component={Authorization()(Dashboard)}
+              />
+              <Route
+                exact
+                path={buildClassroomPath()}
+                component={Authorization([USER_MODES.TEACHER])(ClassroomScreen)}
+              />
+              <Route
+                exact
+                path={CLASSROOMS_PATH}
+                component={Authorization([USER_MODES.TEACHER])(Classrooms)}
+              />
+              <Route
+                exact
+                path={buildImportDataInClassroomPath()}
+                component={Authorization([USER_MODES.TEACHER])(
+                  ImportDataScreen
+                )}
+              />
+              <Route
+                exact
+                path={DEVELOPER_PATH}
+                component={Authorization()(DeveloperScreen)}
+              />
+            </Switch>
+          </div>
+        </Router>
+      </MuiThemeProvider>
     );
   }
 }
@@ -246,6 +256,7 @@ const mapStateToProps = ({ authentication }) => ({
     'settings',
     'geolocationEnabled',
   ]),
+  userMode: authentication.getIn(['user', 'settings', 'userMode']),
 });
 
 const mapDispatchToProps = {
diff --git a/src/components/common/DrawerHeader.js b/src/components/common/DrawerHeader.js
@@ -4,17 +4,20 @@ import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import IconButton from '@material-ui/core/IconButton';
-import { Online, Offline } from 'react-detect-offline';
 import Typography from '@material-ui/core/Typography/Typography';
-import CloudIcon from '@material-ui/icons/Cloud';
-import CloudOffIcon from '@material-ui/icons/CloudOff';
+import PersonIcon from '@material-ui/icons/Person';
 import { withTranslation } from 'react-i18next';
 import ListItem from '@material-ui/core/ListItem';
+import TeacherIcon from '@material-ui/icons/School';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import { DRAWER_HEADER_HEIGHT } from '../../config/constants';
+import {
+  DRAWER_HEADER_HEIGHT,
+  USER_MODES,
+  THEME_COLORS,
+} from '../../config/constants';
 
 const styles = () => ({
   drawerHeader: {
@@ -27,22 +30,30 @@ const styles = () => ({
   secondaryAction: {
     right: '5px',
   },
+  teacherColor: {
+    color: THEME_COLORS[USER_MODES.TEACHER],
+  },
 });
 
-const DrawerHeader = ({ classes, theme, handleDrawerClose, username }) => {
+const DrawerHeader = ({
+  classes,
+  theme,
+  handleDrawerClose,
+  username,
+  isTeacher,
+}) => {
   return (
     <ListItem
       classes={{ root: classes.drawerHeader }}
       divider
       ContainerComponent="div"
     >
       <ListItemIcon>
-        <Online>
-          <CloudIcon />
-        </Online>
-        <Offline>
-          <CloudOffIcon />
-        </Offline>
+        {isTeacher ? (
+          <TeacherIcon className={classes.teacherColor} />
+        ) : (
+          <PersonIcon />
+        )}
       </ListItemIcon>
 
       <Tooltip title={username}>
@@ -74,16 +85,21 @@ DrawerHeader.propTypes = {
     username: PropTypes.string.isRequired,
     secondaryAction: PropTypes.string.isRequired,
     drawerHeader: PropTypes.string.isRequired,
+    teacherColor: PropTypes.string.isRequired,
   }).isRequired,
   theme: PropTypes.shape({
     direction: PropTypes.string.isRequired,
   }).isRequired,
   handleDrawerClose: PropTypes.func.isRequired,
   username: PropTypes.string.isRequired,
+  isTeacher: PropTypes.bool.isRequired,
 };
 
 const mapStateToProps = ({ authentication }) => ({
   username: authentication.getIn(['user', 'username']),
+  isTeacher:
+    authentication.getIn(['user', 'settings', 'userMode']) ===
+    USER_MODES.TEACHER,
 });
 
 const ConnectedComponent = connect(mapStateToProps, null)(DrawerHeader);
diff --git a/src/config/constants.js b/src/config/constants.js
@@ -14,6 +14,11 @@ export const USER_MODES = {
   TEACHER: 'teacher',
 };
 export const DEFAULT_USER_MODE = USER_MODES.TEACHER;
+export const THEME_COLORS = {
+  [DEFAULT_USER_MODE]: '#5050d2',
+  [USER_MODES.STUDENT]: '#5050d2',
+  [USER_MODES.TEACHER]: '#3A31AF',
+};
 export const SHORT_ID_LENGTH = 6;
 export const LONG_ID_LENGTH = 24;
 export const SMART_GATEWAY_HOST = 'gateway.golabz.eu';
diff --git a/src/index.js b/src/index.js
@@ -5,7 +5,6 @@ import { Provider } from 'react-redux';
 import * as Sentry from '@sentry/browser';
 import ReduxToastr from 'react-redux-toastr';
 import { Detector } from 'react-detect-offline';
-import { MuiThemeProvider } from '@material-ui/core/styles';
 import { I18nextProvider } from 'react-i18next';
 import katex from 'katex';
 import i18nConfig from './config/i18n';
@@ -14,7 +13,6 @@ import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 import 'katex/dist/katex.min.css';
 import 'react-quill/dist/quill.core.css';
 import App from './App';
-import { OnlineTheme, OfflineTheme } from './themes';
 import configureStore from './store/configure';
 
 // bind katex to the window object
@@ -42,14 +40,14 @@ ReactDOM.render(
     <I18nextProvider i18n={i18nConfig}>
       <Detector
         render={({ online }) => (
-          <MuiThemeProvider theme={online ? OnlineTheme : OfflineTheme}>
+          <>
             <ReduxToastr
               transitionIn="fadeIn"
               preventDuplicates
               transitionOut="fadeOut"
             />
             <App connexionStatus={online} />
-          </MuiThemeProvider>
+          </>
         )}
       />
     </I18nextProvider>
diff --git a/src/themes/OnlineTheme.js b/src/themes/OnlineTheme.js
@@ -1,13 +1,23 @@
 import { createMuiTheme } from '@material-ui/core/styles';
+import { THEME_COLORS, DEFAULT_USER_MODE } from '../config/constants';
 
-const OnlineTheme = createMuiTheme({
-  typography: {
-    useNextVariants: true,
-  },
-  palette: {
-    primary: { light: '#5050d2', main: '#5050d2', dark: '#5050d2' },
-    secondary: { light: '#ffffff', main: '#ffffff', dark: '#ffffff' },
-  },
-});
+const OnlineTheme = userMode => {
+  // user mode define primary colors
+  const themeColor =
+    userMode in THEME_COLORS
+      ? THEME_COLORS[userMode]
+      : THEME_COLORS[DEFAULT_USER_MODE];
+  const primary = { light: themeColor, main: themeColor, dark: themeColor };
+
+  return createMuiTheme({
+    typography: {
+      useNextVariants: true,
+    },
+    palette: {
+      primary,
+      secondary: { light: '#ffffff', main: '#ffffff', dark: '#ffffff' },
+    },
+  });
+};
 
 export default OnlineTheme;
