Add dark mode toggle #354

public/res/default.json

@@ -12,7 +12,8 @@
     "login-error-msg": "Failed to log in. Invalid username or password.",
     "login-redirect-error-msg": "Failed to log in. Re-direct token is invalid.",
     "token-invalid-msg": "Your session token has expired or been invalidated, please sign in again.",
-    "manage-cookies-button": "Manage cookies"
+    "manage-cookies-button": "Manage cookies",
+    "toggle-dark-mode": "Toggle Dark Mode"
   },
   "home-page": {
     "title": "SciGateway",

src/App.tsx

@@ -1,4 +1,3 @@
-import { MuiThemeProvider } from '@material-ui/core/styles';
 import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
 import { createBrowserHistory } from 'history';
 import * as log from 'loglevel';
@@ -7,22 +6,16 @@ import { Provider } from 'react-redux';
 import { AnyAction, applyMiddleware, compose, createStore } from 'redux';
 import { createLogger } from 'redux-logger';
 import thunk, { ThunkDispatch } from 'redux-thunk';
-import MainAppBar from './mainAppBar/mainAppBar.component';
-import NavigationDrawer from './navigationDrawer/navigationDrawer.component';
-import Routing from './routing/routing.component';
 import { configureSite } from './state/actions/scigateway.actions';
 import ScigatewayMiddleware, {
   listenToPlugins,
 } from './state/middleware/scigateway.middleware';
 import AppReducer from './state/reducers/App.reducer';
 import { StateType } from './state/state.types';
 import './index.css';
-import { buildTheme } from './theming';
-import Preloader from './preloader/preloader.component';
-import CookieConsent from './cookieConsent/cookieConsent.component';
+import { ConnectedThemeProvider } from './theming';
 import ReduxToastr from 'react-redux-toastr';
-import Tour from './tour/tour.component';
-
+import PageContainer from './pageContainer.component';
 import {
   StylesProvider,
   createGenerateClassName,
@@ -63,17 +56,6 @@ listenToPlugins(store.dispatch, getState);
 const dispatch = store.dispatch as ThunkDispatch<StateType, null, AnyAction>;
 dispatch(configureSite());
 
-const pageContent = (): React.ReactNode => (
-  <React.Fragment>
-    <Preloader />
-    <MainAppBar />
-    <NavigationDrawer />
-    <Tour />
-    <CookieConsent />
-    <Routing />
-  </React.Fragment>
-);
-
 const toastrConfig = (): React.ReactElement => (
   <ReduxToastr
     timeOut={0}
@@ -92,10 +74,10 @@ class App extends React.Component {
         <Provider store={store}>
           <ConnectedRouter history={history}>
             <StylesProvider generateClassName={generateClassName}>
-              <MuiThemeProvider theme={buildTheme()}>
+              <ConnectedThemeProvider>
                 {toastrConfig()}
-                {pageContent()}
-              </MuiThemeProvider>
+                <PageContainer />
+              </ConnectedThemeProvider>
             </StylesProvider>
           </ConnectedRouter>
         </Provider>

src/__snapshots__/pageContainer.test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageContainer - Tests renders correctly 1`] = `
+<div
+  className="PageContainer-root-1"
+>
+  <Connect(WithStyles(Preloader)) />
+  <Connect(WithStyles(MainAppBar)) />
+  <Connect(WithStyles(NavigationDrawer)) />
+  <Connect(WithTheme(Tour)) />
+  <Connect(WithStyles(CookieConsent)) />
+  <Connect(WithStyles(Routing)) />
+</div>
+`;

src/cookieConsent/__snapshots__/cookiesPage.component.test.tsx.snap

@@ -40,7 +40,7 @@ exports[`Cookies page component should render correctly 1`] = `
       className="CookiesPage-cookieTypes-5"
       container={true}
       direction="column"
-      spacing={8}
+      spacing={4}
     >
       <WithStyles(ForwardRef(Grid))
         alignItems="center"

src/cookieConsent/cookieConsent.component.test.tsx

@@ -59,7 +59,7 @@ describe('Cookie consent component', () => {
     mount.cleanUp();
   });
 
-  const theme = buildTheme();
+  const theme = buildTheme(false);
 
   it('should render correctly', () => {
     const wrapper = shallow(<CookieConsentWithoutStyles {...props} />);
@@ -76,10 +76,7 @@ describe('Cookie consent component', () => {
       </MuiThemeProvider>
     );
 
-    wrapper
-      .find('button')
-      .first()
-      .simulate('click');
+    wrapper.find('button').first().simulate('click');
 
     expect(testStore.getActions().length).toEqual(1);
     expect(testStore.getActions()[0]).toEqual(push('/cookies'));
@@ -96,10 +93,7 @@ describe('Cookie consent component', () => {
       </MuiThemeProvider>
     );
 
-    wrapper
-      .find('button')
-      .last()
-      .simulate('click');
+    wrapper.find('button').last().simulate('click');
 
     expect(Cookies.set).toHaveBeenCalled();
     const mockCookies = (Cookies.set as jest.Mock).mock;
@@ -111,7 +105,7 @@ describe('Cookie consent component', () => {
   it("initalises analytics if cookie consent is true but analytics hasn't yet been initialised", () => {
     Cookies.getJSON = jest
       .fn()
-      .mockImplementationOnce(name =>
+      .mockImplementationOnce((name) =>
         name === 'cookie-consent' ? { analytics: true } : null
       );
 
@@ -152,7 +146,7 @@ describe('Cookie consent component', () => {
   it('should set open to false if cookie-consent cookie is set', () => {
     Cookies.get = jest
       .fn()
-      .mockImplementationOnce(name =>
+      .mockImplementationOnce((name) =>
         name === 'cookie-consent' ? { analytics: true } : null
       );
 

src/cookieConsent/cookieConsent.component.tsx

@@ -24,6 +24,7 @@ import { Location } from 'history';
 const styles = (theme: Theme): StyleRules =>
   createStyles({
     root: {
+      color: theme.palette.primary.contrastText,
       backgroundColor: (theme as UKRITheme).ukri.deep.green,
     },
     button: {

src/cookieConsent/cookiesPage.component.test.tsx

@@ -36,7 +36,7 @@ describe('Cookies page component', () => {
     mount.cleanUp();
   });
 
-  const theme = buildTheme();
+  const theme = buildTheme(false);
 
   it('should render correctly', () => {
     const wrapper = shallow(
@@ -77,7 +77,7 @@ describe('Cookies page component', () => {
 
     Cookies.getJSON = jest
       .fn()
-      .mockImplementationOnce(name =>
+      .mockImplementationOnce((name) =>
         name === 'cookie-consent' ? { analytics: true } : null
       );
 

src/cookieConsent/cookiesPage.component.tsx

@@ -21,17 +21,19 @@ import { push } from 'connected-react-router';
 const styles = (theme: Theme): StyleRules =>
   createStyles({
     root: {
-      margin: theme.spacing(2),
+      padding: theme.spacing(2),
+      backgroundColor: theme.palette.background.default,
     },
     container: {
       display: 'flex',
       flexDirection: 'column',
       marginTop: theme.spacing(2),
       marginBottom: theme.spacing(2),
+      color: theme.palette.text.primary,
     },
     titleText: {
       fontWeight: 'bold',
-      color: theme.palette.primary.main,
+      color: theme.palette.secondary.main,
     },
     cookiePolicy: {
       marginTop: theme.spacing(2),
@@ -60,7 +62,7 @@ interface CookiesPageDispatchProps {
   navigateToHome: () => Action;
 }
 
-type CombinedCookiesPageProps = CookiesPageProps &
+export type CombinedCookiesPageProps = CookiesPageProps &
   CookiesPageDispatchProps &
   WithStyles<typeof styles>;
 
@@ -108,7 +110,7 @@ const CookiesPage = (props: CombinedCookiesPageProps): React.ReactElement => {
         </Typography>
         <Grid
           container
-          spacing={8}
+          spacing={4}
           direction="column"
           className={props.classes.cookieTypes}
         >
@@ -156,7 +158,7 @@ const CookiesPage = (props: CombinedCookiesPageProps): React.ReactElement => {
               <Switch
                 checked={analytics}
                 color="primary"
-                onChange={e => setAnalytics(e.target.checked)}
+                onChange={(e) => setAnalytics(e.target.checked)}
                 inputProps={{
                   'aria-labelledby': 'analytics-cookies-title',
                   'aria-describedby': 'analytics-cookies-description',

src/homePage/homePage.component.tsx

@@ -38,10 +38,11 @@ const styles = (theme: Theme): StyleRules =>
       paddingLeft: '10vw',
       paddingRight: '10vw',
       paddingTop: 30,
+      backgroundColor: theme.palette.background.default,
     },
     howItWorksTitle: {
       fontWeight: 'bold',
-      color: theme.palette.secondary.dark,
+      color: theme.palette.text.primary,
       paddingBottom: 30,
     },
     howItWorksGridItem: {
@@ -62,18 +63,18 @@ const styles = (theme: Theme): StyleRules =>
     },
     howItWorksGridItemCaption: {
       textAlign: 'center',
-      color: theme.palette.primary.main,
+      color: theme.palette.secondary.main,
     },
     strapline: {
       paddingTop: 50,
       fontStyle: 'italic',
-      color: theme.palette.secondary.main,
+      color: theme.palette.text.secondary,
     },
     purpose: {
       paddingTop: 20,
       fontWeight: 'bold',
       fontStyle: 'italic',
-      color: theme.palette.primary.main,
+      color: theme.palette.secondary.main,
     },
   });
 

src/index.css

@@ -1,6 +1,7 @@
 body {
   margin: 0;
   padding: 0;
+  background-color: #212121;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;

src/loginPage/loginPage.component.test.tsx

@@ -74,7 +74,7 @@ describe('Login page component', () => {
     state.scigateway.authorisation = props.auth;
   });
 
-  const theme = buildTheme();
+  const theme = buildTheme(false);
 
   it('credential component renders correctly', () => {
     const wrapper = shallow(

src/mainAppBar/__snapshots__/userProfile.component.test.tsx.snap

@@ -42,6 +42,17 @@ exports[`User profile component renders default avatar if signed in 1`] = `
           primary="manage-cookies-button"
         />
       </WithStyles(ForwardRef(MenuItem))>
+      <WithStyles(ForwardRef(MenuItem))
+        id="item-dark-mode"
+        onClick={[Function]}
+      >
+        <WithStyles(ForwardRef(ListItemIcon))>
+          <Brightness4Icon />
+        </WithStyles(ForwardRef(ListItemIcon))>
+        <WithStyles(ForwardRef(ListItemText))
+          primary="toggle-dark-mode"
+        />
+      </WithStyles(ForwardRef(MenuItem))>
       <WithStyles(ForwardRef(Divider)) />
       <WithStyles(ForwardRef(MenuItem))
         id="item-sign-out"
@@ -147,6 +158,17 @@ exports[`User profile component renders user avatar if signed in with avatar url
           primary="manage-cookies-button"
         />
       </WithStyles(ForwardRef(MenuItem))>
+      <WithStyles(ForwardRef(MenuItem))
+        id="item-dark-mode"
+        onClick={[Function]}
+      >
+        <WithStyles(ForwardRef(ListItemIcon))>
+          <Brightness4Icon />
+        </WithStyles(ForwardRef(ListItemIcon))>
+        <WithStyles(ForwardRef(ListItemText))
+          primary="toggle-dark-mode"
+        />
+      </WithStyles(ForwardRef(MenuItem))>
       <WithStyles(ForwardRef(Divider)) />
       <WithStyles(ForwardRef(MenuItem))
         id="item-sign-out"

src/mainAppBar/mainAppBar.component.test.tsx

@@ -31,7 +31,7 @@ describe('Main app bar component', () => {
     mount.cleanUp();
   });
 
-  const theme = buildTheme();
+  const theme = buildTheme(false);
 
   it('app bar renders correctly', () => {
     const wrapper = shallow(<MainAppBarComponent store={mockStore(state)} />);
@@ -61,10 +61,7 @@ describe('Main app bar component', () => {
       </MuiThemeProvider>
     );
 
-    wrapper
-      .find('button')
-      .first()
-      .simulate('click');
+    wrapper.find('button').first().simulate('click');
 
     expect(testStore.getActions().length).toEqual(1);
     expect(testStore.getActions()[0]).toEqual(toggleDrawer());
@@ -80,10 +77,7 @@ describe('Main app bar component', () => {
       </MuiThemeProvider>
     );
 
-    wrapper
-      .find(Typography)
-      .first()
-      .simulate('click');
+    wrapper.find(Typography).first().simulate('click');
 
     expect(testStore.getActions().length).toEqual(1);
     expect(testStore.getActions()[0]).toEqual(push('/'));
@@ -99,10 +93,7 @@ describe('Main app bar component', () => {
       </MuiThemeProvider>
     );
 
-    wrapper
-      .find('button[aria-label="Help"]')
-      .first()
-      .simulate('click');
+    wrapper.find('button[aria-label="Help"]').first().simulate('click');
 
     expect(testStore.getActions().length).toEqual(1);
     expect(testStore.getActions()[0]).toEqual(toggleHelp());

src/mainAppBar/mainAppBar.component.tsx

@@ -44,6 +44,7 @@ const styles = (theme: Theme): StyleRules =>
       width: '100%',
     },
     appBar: {
+      backgroundColor: theme.palette.primary.main,
       transition: theme.transitions.create(['margin', 'width'], {
         easing: theme.transitions.easing.easeIn,
         duration: theme.transitions.duration.leavingScreen,