Merge branch 'master' of...

Merge branch 'master' of https://gitlab.stud.idi.ntnu.no/it2810-h21/team-24/project2-it2810 into 13-create-page-for-visualizing-commits-per-branch

src/App.tsx

 import { ThemeProvider } from '@material-ui/styles';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import './App.css';
 import CommonLogic from './components/CommonLogic/index';
 import NavBar from './components/NavBar';
 import { OpenSettingsContext } from './helpers/context';
-import { backgroundTheme } from './helpers/themes';
+import { themes } from './helpers/themes';
 import BarChartPage from './pages/BarChartPage';
 import Home from './pages/Home/index';
 import SettingsPage from './pages/SettingsPage/index';
 import FeatsVsFixesPage from './pages/FeatsVsFixesPage';
 import CommitsPerBranchPage from './pages/CommitsPerBranch';
 import TimePerIssueLabelPage from './pages/TimePerIssueLabelPage/index';
+import { Theme } from '@material-ui/core';
+import { useLocalStorage } from './helpers/hooks';
 
 function App() {
   const [openSettings, setOpenSettings] = useState(false);
+  const [theme, setTheme] = useState<Theme>(themes.light);
+  const [themeName, setThemeName] = useLocalStorage<keyof typeof themes>(`theme`, 'light');
+
+  // Get the theme from localstorage
+  useEffect(() => {
+    if (themeName !== undefined) {
+      setTheme(themes[themeName]);
+    }
+  }, []);
+
   return (
     <div className="App">
       <OpenSettingsContext.Provider value={[openSettings, setOpenSettings]}>
-        <ThemeProvider theme={backgroundTheme}>
+        <ThemeProvider theme={theme}>
+          <SettingsPage
+            open={openSettings}
+            onClose={() => setOpenSettings(false)}
+            setTheme={setTheme}
+            themeName={themeName}
+            setThemeName={setThemeName}
+          />
           <NavBar title="CoolWebsiteName" />
-          <SettingsPage open={openSettings} onClose={() => setOpenSettings(false)} />
           <Router>
             <CommonLogic />
             <Switch>

src/components/NavBar/index.tsx

@@ -38,7 +38,7 @@ export default function NavBar(props: MenuProps) {
 
   return (
     <div>
-      <AppBar position="sticky" color="secondary">
+      <AppBar position="sticky" className={classes.appBar}>
         <Toolbar className={classes.toolBar}>
           <Link href={'/'} underline={'none'}>
             <Typography variant="h6" component="div" className={classes.title}>

src/components/NavBar/styles.ts

@@ -9,12 +9,15 @@ const useStyles = makeStyles((theme) =>
       color: theme.palette.secondary.contrastText,
     },
     menuItem: {
-      color: theme.palette.secondary.main,
+      color: 'black',
     },
     toolBar: {
       display: 'flex',
       justifyContent: 'space-between',
     },
+    appBar: {
+      backgroundColor: theme.palette.secondary.main,
+    },
     linkContainer: {
       display: 'flex',
     },

src/components/PageContainer/index.tsx

@@ -9,7 +9,7 @@ type PageContainerProps = {
 export default function PageContainer(props: PageContainerProps) {
   const style = useStyles();
   return (
-    <Grid container>
+    <Grid container className={style.background}>
       <Container className={style.main} maxWidth="md">
         {props.title ? <h3>{props.title}</h3> : false}
         {props.children}

src/components/PageContainer/styles.ts

@@ -11,6 +11,11 @@ const useStyles = makeStyles((theme) =>
         borderRadius: '0 0 10px 10px',
       },
     },
+    background: {
+      backgroundColor: theme.palette.background.default,
+      width: '100%',
+      minHeight: '100vh',
+    },
   }),
 );
 

src/components/Popup/index.tsx

@@ -2,9 +2,10 @@ import { XIcon } from '@heroicons/react/outline';
 import { Dialog, DialogProps } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import { useStyles } from './styles';
+import { ReactNode } from 'react';
 
 type PopupProps = {
-  children?: JSX.Element;
+  children?: ReactNode;
   open: boolean;
   onClose: () => void;
   title: string;

src/components/Popup/styles.ts

@@ -16,6 +16,7 @@ export const useStyles = makeStyles((theme: Theme) =>
     },
     dialog: {
       backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
     },
   }),
 );

src/components/ThemeRadioGroup/index.tsx

+import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from '@material-ui/core';
+import { useStyles } from './styles';
+import { ChangeEvent } from 'react';
+import { themes } from '../../helpers/themes';
+
+type ThemeRadioGroupProps = {
+  onChange: (event: ChangeEvent<HTMLInputElement>, value: string) => void;
+  themeName: string;
+};
+
+/**
+ * A component giving the user the choice between all the current themes
+ */
+export default function ThemeRadioGroup(props: ThemeRadioGroupProps) {
+  const classes = useStyles();
+  return (
+    <FormControl component="fieldset">
+      <FormLabel component="legend" className={classes.legend}>
+        Theme
+      </FormLabel>
+      <RadioGroup onChange={props.onChange}>
+        {Object.keys(themes).map((themeName) => {
+          return (
+            <FormControlLabel
+              className={classes.radio}
+              key={themeName}
+              value={themeName}
+              checked={themeName === props.themeName}
+              label={themeName}
+              control={<Radio className={classes.radio} />}
+            />
+          );
+        })}
+      </RadioGroup>
+    </FormControl>
+  );
+}

src/components/ThemeRadioGroup/styles.ts

+import { createStyles, makeStyles, Theme } from '@material-ui/core';
+
+export const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    radio: {
+      color: theme.palette.primary.contrastText + '!important',
+    },
+    legend: {
+      color: theme.palette.primary.contrastText + '!important',
+      marginBottom: '1rem',
+    },
+  }),
+);

src/helpers/hooks.ts

@@ -16,8 +16,10 @@ function useStorage<ValueType>(
   storageObject: StorageObject,
 ): [ValueType, Dispatch<SetStateAction<ValueType>>] {
   const [value, setValue] = useState<ValueType>(() => {
-    const jsonValue = storageObject.getItem(key);
-    if (jsonValue != null) return JSON.parse(jsonValue);
+    const value = storageObject.getItem(key);
+    if (value != null) {
+      return JSON.parse(value);
+    }
     return defaultValue;
   });
 

src/helpers/themes.ts

 import { createTheme } from '@material-ui/core';
 
-export const backgroundTheme = createTheme({
+const lightTheme = createTheme(
+  {
     palette: {
       primary: {
-      main: '#f1f1e9', // Temporary secondary theme
+        main: '#f8f6f3',
         contrastText: '#1b1f28',
       },
       secondary: {
-      main: '#342f32', // Temporary primary theme
+        main: '#1f1f1e',
         contrastText: '#dedede',
       },
       info: {
-      main: '#f1f6f6', // Temporary info theme
+        main: '#f1f6f6',
         contrastText: '#3d393e',
       },
+      background: {
+        default: '#f4fffe',
       },
-});
+    },
+  },
+  { name: 'light' },
+);
+
+const darkTheme = createTheme(
+  {
+    palette: {
+      primary: {
+        main: '#0c0c0c',
+        contrastText: '#d4daec',
+      },
+      secondary: {
+        main: '#222020',
+        contrastText: '#d7cdcd',
+      },
+      info: {
+        main: '#323737',
+        contrastText: '#afa7b1',
+      },
+      background: {
+        default: '#070606',
+      },
+    },
+  },
+  { name: 'dark' },
+);
+
+const funkTheme = createTheme(
+  {
+    palette: {
+      primary: {
+        main: '#a70f0f',
+        contrastText: '#022c53',
+      },
+      secondary: {
+        main: '#316d72',
+        contrastText: '#31ff0d',
+      },
+      info: {
+        main: '#941681',
+        contrastText: '#e9cb14',
+      },
+      background: {
+        default: '#03801f',
+      },
+    },
+  },
+  { name: 'dark' },
+);
+
+export const themes = { light: lightTheme, dark: darkTheme, wayTooManyColors: funkTheme };

src/pages/FeatsVsFixesPage/index.tsx

@@ -6,6 +6,7 @@ import { getAllCommitsFromAPI } from '../../helpers/api-calls';
 import { useSessionStorage } from '../../helpers/hooks';
 import { CommitAuthor } from '../../helpers/types';
 import { parseCommitData } from './utils';
+import { useStyles } from './styles';
 
 export default function FeatsVsFixesPage() {
   // The retrieved athor data form the api.
@@ -16,6 +17,7 @@ export default function FeatsVsFixesPage() {
     new Array(authorData.length).fill(true),
   );
 
+  const classes = useStyles();
   const featsFixesGraphData: Array<{ commitType: string; val: number }> = [
     { commitType: 'feat', val: 0 },
     { commitType: 'fix', val: 0 },
@@ -54,6 +56,7 @@ export default function FeatsVsFixesPage() {
             <div key={JSON.stringify(m)}>
               Person {i + 1}
               <Checkbox
+                className={classes.checkbox}
                 checked={selectedAuthors[i]}
                 onChange={() => {
                   if (!selectedAuthors) return; // selectedAuthors will never be undefined

src/pages/FeatsVsFixesPage/styles.ts

+import { createStyles, makeStyles, Theme } from '@material-ui/core';
+
+export const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    checkbox: {
+      color: theme.palette.primary.contrastText + '!important',
+    },
+  }),
+);

src/pages/SettingsPage/index.tsx

 import Popup from '../../components/Popup';
+import { Theme } from '@material-ui/core';
+import { themes } from '../../helpers/themes';
+import { ChangeEvent } from 'react';
+import ThemeRadioGroup from '../../components/ThemeRadioGroup';
 
 type SettingsPageProps = {
   open: boolean;
   onClose: () => void;
+  setTheme: (t: Theme) => void;
+  themeName: string;
+  setThemeName: (theme: keyof typeof themes) => void;
 };
 
 export default function SettingsPage(props: SettingsPageProps) {
+  function changeTheme(event: ChangeEvent<HTMLInputElement>, value: string) {
+    const theme = value as keyof typeof themes;
+    props.setTheme(themes[theme]);
+    props.setThemeName(theme);
+  }
   return (
     <Popup title="Settings" open={props.open} onClose={props.onClose} maxWidth="sm">
-      <div>Here comes the settings page</div>
+      <ThemeRadioGroup onChange={changeTheme} themeName={props.themeName} />
     </Popup>
   );
 }

src/pages/TimePerIssueLabelPage/index.tsx

@@ -52,10 +52,11 @@ export default function TimePerIssueLabelPage() {
       </p>
       <div>
         <FormControl className={classes.dropdown}>
-          <InputLabel id="demo-simple-select-label">Showing labels</InputLabel>
+          <InputLabel>Showing labels</InputLabel>
           <Select
             labelId="demo-simple-select-label"
             id="demo-simple-select"
+            className={classes.select}
             value={selected}
             onChange={(e) => {
               const newValue = e.target.value as string;

src/pages/TimePerIssueLabelPage/styles.ts

-import { createStyles, makeStyles } from '@material-ui/core';
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     dropdown: {
       width: '10em',
+      '& label': {
+        color: theme.palette.primary.contrastText + '!important',
+      },
+    },
+    select: {
+      color: theme.palette.info.contrastText + '!important',
+      backgroundColor: theme.palette.info.main,
+      paddingLeft: '1rem',
     },
   }),
 );