pietrop · pietrop · Apr 12, 2021 · Apr 12, 2021 · Apr 12, 2021 · Apr 12, 2021
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.js b/src/App.js
@@ -1,22 +1,37 @@
-import React, { useState, Suspense, lazy } from 'react';
+import React, { useState, Suspense, lazy, useEffect } from 'react';
 import { Switch, Route } from 'react-router-dom';
 import CustomAlert from './Components/lib/CustomAlert';
 import Container from '@material-ui/core/Container';
 import Grid from '@material-ui/core/Grid';
 import Skeleton from '@material-ui/lab/Skeleton';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';
+import { blue, red } from '@material-ui/core/colors';
+
 import CustomNavbar from './CustomNavbar';
 import firebase from './Firebase.js';
 import useOnlineStatus from './Components/lib/useOnlineStatus';
 
+import Brightness3Icon from '@material-ui/icons/Brightness3';
+import Brightness4Icon from '@material-ui/icons/Brightness4';
+import Brightness5Icon from '@material-ui/icons/Brightness5';
+import WbSunnyIcon from '@material-ui/icons/WbSunny';
+
 // const Projects = lazy(() => import('./Components/Projects/index.js'));
 // const Project = lazy(() => import('./Components/Projects/Project.js'));
 // const TranscriptCorrect = lazy(() => import('./Components/Transcripts/TranscriptCorrect.js'));
 // const PaperEdit = lazy(() => import('./Components/PaperEdits/PaperEdit'));
+
 import Projects from './Components/Projects/index.js';
 import Project from './Components/Projects/Project.js';
 import TranscriptCorrect from './Components/Transcripts/TranscriptCorrect.js';
 import PaperEdit from './Components/PaperEdits/PaperEdit';
 
+const lightModePrimary = blue['900'];
+const lightModeSecondary = red['900'];
+const darkModePrimary = blue['400'];
+const darkModeSecondary = red['700'];
+
 const demoWarningMessage = (
   <>
     <p>
@@ -36,6 +51,39 @@ const NoMatch = () => {
 function App(props) {
   const online = useOnlineStatus();
   const [user, setUser] = useState(null);
+  const initialDarkModeState = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const [darkState, setDarkState] = useState(initialDarkModeState);
+  const palletType = darkState ? 'dark' : 'light';
+  const mainPrimaryColor = darkState ? darkModePrimary : lightModePrimary;
+  const mainSecondaryColor = darkState ? darkModeSecondary : lightModeSecondary;
+
+  const darkTheme = createMuiTheme({
+    palette: {
+      type: palletType,
+      primary: {
+        main: mainPrimaryColor,
+      },
+      secondary: {
+        main: mainSecondaryColor,
+      },
+    },
+  });
+  const handleThemeChange = () => {
+    setDarkState(!darkState);
+  };
+
+  useEffect(() => {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+      if (event.matches) {
+        //dark mode
+        setDarkState(true);
+      } else {
+        //light mode
+        setDarkState(false);
+      }
+    });
+    // TODO: add a remove listener for the colro scheme change
+  }, []);
 
   const handleUserChange = (isUserSignedIn) => {
     setUser(isUserSignedIn);
@@ -57,49 +105,69 @@ function App(props) {
       <>
         <br />
         <Container>
-          <CustomAlert variant={'warning'} heading={'Offline warning'} message={"You don't seem to be connected to the internet "} />
+          <CustomAlert
+            variant={'warning'}
+            heading={'Offline warning'}
+            message={"You don't seem to be connected to the internet "}
+          />
         </Container>
       </>
     );
   }
 
   return (
     <>
-      {envWarning}
-      {offlineWarning}
-      <CustomNavbar firebase={firebase} handleUserChange={handleUserChange} />
-
-      {user ? (
-        <Suspense
-          fallback={
-            <Container>
-              <br />
-              <Grid>
-                <Skeleton variant="rect" width={'100%'} height={50} />
-              </Grid>
-              <br />
-              <Grid>
-                <Skeleton variant="rect" width={'100%'} height={600} />
-              </Grid>
-            </Container>
-          }
-        >
-          <Switch>
-            <Route exact path={['/', '/projects']} component={Projects} />
-            <Route exact path="/projects/:projectId" component={Project} />
-            <Route exact path="/projects/:projectId/transcripts/:transcriptId/correct" component={TranscriptCorrect} />
-            <Route exact path="/projects/:projectId/paperedits/:papereditId" component={PaperEdit} />
-            <Route component={NoMatch} />
-          </Switch>
-        </Suspense>
-      ) : (
-        <Container>
-          <br />
-          <p className="text-center">
-            <i>You need to login</i>
-          </p>
-        </Container>
-      )}
+      <ThemeProvider theme={darkTheme}>
+        <CssBaseline />
+        {envWarning}
+        {offlineWarning}
+        <CustomNavbar firebase={firebase} handleUserChange={handleUserChange}>
+          <span style={{ cursor: 'pointer' }} onClick={handleThemeChange}>
+            {' '}
+            {darkState ? <Brightness5Icon /> : <Brightness4Icon />}
+          </span>
+        </CustomNavbar>
+
+        {user ? (
+          <Suspense
+            fallback={
+              <Container>
+                <br />
+                <Grid>
+                  <Skeleton variant="rect" width={'100%'} height={50} />
+                </Grid>
+                <br />
+                <Grid>
+                  <Skeleton variant="rect" width={'100%'} height={600} />
+                </Grid>
+              </Container>
+            }
+          >
+            <Switch>
+              <Route exact path={['/', '/projects']} component={Projects} />
+              <Route exact path="/projects/:projectId" component={Project} />
+              <Route
+                exact
+                path="/projects/:projectId/transcripts/:transcriptId/correct"
+                component={TranscriptCorrect}
+              />
+              <Route
+                exact
+                path="/projects/:projectId/paperedits/:papereditId"
+                component={PaperEdit}
+              />
+              <Route component={NoMatch} />
+            </Switch>
+          </Suspense>
+        ) : (
+          <Container>
+            <br />
+            <p className="text-center">
+              <i>You need to login</i>
+            </p>
+          </Container>
+        )}
+      </ThemeProvider>
     </>
   );
 }

diff --git a/src/Components/PaperEdits/PaperEdit/Transcripts/LabelsList/LabelModal.js b/src/Components/PaperEdits/PaperEdit/Transcripts/LabelsList/LabelModal.js
@@ -57,7 +57,14 @@ const LabelModal = ({ color, label, description, labelId, onLabelSaved, openBtn
             <SettingsOutlinedIcon />
             Label
           </Typography>
-          <LabelForm onLabelSaved={onLabelSaved} label={label} description={description} color={color} labelId={labelId} handleClose={handleClose} />
+          <LabelForm
+            onLabelSaved={onLabelSaved}
+            label={label}
+            description={description}
+            color={color}
+            labelId={labelId}
+            handleClose={handleClose}
+          />
         </div>
       </Modal>
     </>

diff --git a/src/Components/PaperEdits/PaperEdit/Transcripts/LabelsList/select-color-styles.js b/src/Components/PaperEdits/PaperEdit/Transcripts/LabelsList/select-color-styles.js
@@ -2,12 +2,13 @@
 // https://react-select.com/styles
 // import chroma from 'chroma-js';
 
+const customBabckgroundColor = 'white';
 const colourStyles = {
-  control: styles => ({ ...styles, backgroundColor: 'white' }),
+  control: (styles) => ({ ...styles, backgroundColor: customBabckgroundColor }),
   option: (styles, { data, isDisabled, isFocused, isSelected }) => {
     // const color = chroma(data.color);
 
-    const tmpBackgroundColor = null;// 'black;
+    const tmpBackgroundColor = customBabckgroundColor; //null; //
     // if (isDisabled) {
     //   tmpBackgroundColor = null;
     // }
@@ -31,11 +32,12 @@ const colourStyles = {
     return {
       ...styles,
       backgroundColor: tmpBackgroundColor,
+      color: 'black',
       borderLeft: '1.5em solid',
       borderColor: tmpColor,
       marginBottom: '0.4em',
       // color: tmpColor,
-      cursor: isDisabled ? 'not-allowed' : 'default'
+      cursor: isDisabled ? 'not-allowed' : 'default',
     };
   },
   //   return {
@@ -69,7 +71,7 @@ const colourStyles = {
     return {
       ...styles,
       // backgroundColor: color.alpha(0.1).css()
-      backgroundColor: 'white',
+      backgroundColor: customBabckgroundColor,
       border: '0.05em solid',
       borderLeft: '1.2em solid',
       borderColor: data.color,
@@ -86,7 +88,7 @@ const colourStyles = {
     //   backgroundColor: data.color,
     //   color: 'white'
     // }
-  })
+  }),
 };
 
 export default colourStyles;
diff --git a/src/Components/PaperEdits/PaperEdit/Transcripts/SearchBar/index.js b/src/Components/PaperEdits/PaperEdit/Transcripts/SearchBar/index.js
@@ -12,6 +12,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Select from 'react-select';
 import colourStyles from '../LabelsList/select-color-styles.js';
 import speakersColorStyles from './select-speakers-color-styles.js';
+import { withTheme } from '@material-ui/styles';
 
 class SearchBar extends Component {
   constructor(props) {
@@ -23,6 +24,7 @@ class SearchBar extends Component {
       showSpeakersSearchPreferences: false,
       showLabelsSearchPreferences: false,
     };
+    const { theme } = props;
   }
 
   handleSpeakersSearchChange = (selectedOptionSpeakerSearch) => {

diff --git a/src/Components/PaperEdits/PaperEdit/Transcripts/SearchBar/select-speakers-color-styles.js b/src/Components/PaperEdits/PaperEdit/Transcripts/SearchBar/select-speakers-color-styles.js
@@ -2,32 +2,31 @@
 // https://react-select.com/styles
 
 const speakersColorStyles = {
-  control: styles => ({ ...styles, backgroundColor: 'white' }),
+  control: (styles) => ({ ...styles, backgroundColor: 'white' }),
   option: (styles) => {
-
-    const tmpBackgroundColor = null;
+    const tmpBackgroundColor = 'white'; //null;
 
     return {
       ...styles,
+      color: 'black',
       backgroundColor: tmpBackgroundColor,
-      cursor:'default'
+      cursor: 'default',
     };
   },
 
   multiValue: (styles) => {
-
     return {
       ...styles,
       backgroundColor: 'white',
-      border: '0.05em solid grey'
+      border: '0.05em solid grey',
     };
   },
   multiValueLabel: (styles) => ({
-    ...styles
+    ...styles,
   }),
   multiValueRemove: (styles) => ({
-    ...styles
-  })
+    ...styles,
+  }),
 };
 
 export default speakersColorStyles;
diff --git a/...nts/PaperEdits/PaperEdit/Transcripts/SearchBarTranscripts/select-speakers-color-styles.js b/...nts/PaperEdits/PaperEdit/Transcripts/SearchBarTranscripts/select-speakers-color-styles.js
@@ -2,32 +2,31 @@
 // https://react-select.com/styles
 
 const speakersColorStyles = {
-  control: styles => ({ ...styles, backgroundColor: 'white' }),
+  control: (styles) => ({ ...styles, backgroundColor: 'white' }),
   option: (styles) => {
-
-    const tmpBackgroundColor = null;
+    const tmpBackgroundColor = 'white'; // null;
 
     return {
       ...styles,
+      color: 'black',
       backgroundColor: tmpBackgroundColor,
-      cursor:'default'
+      cursor: 'default',
     };
   },
 
   multiValue: (styles) => {
-
     return {
       ...styles,
       backgroundColor: 'white',
-      border: '0.05em solid grey'
+      border: '0.05em solid grey',
     };
   },
   multiValueLabel: (styles) => ({
-    ...styles
+    ...styles,
   }),
   multiValueRemove: (styles) => ({
-    ...styles
-  })
+    ...styles,
+  }),
 };
 
 export default speakersColorStyles;