refactor(front-end): add logout icon to the header

striker-ui/components/Header.tsx

@@ -1,43 +1,41 @@
 import { useState } from 'react';
 import AppBar from '@material-ui/core/AppBar';
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { Box, Button } from '@material-ui/core';
 import { ICONS, ICON_SIZE } from '../lib/consts/ICONS';
 import { BORDER_RADIUS, RED } from '../lib/consts/DEFAULT_THEME';
 import AnvilDrawer from './AnvilDrawer';
 
-const useStyles = makeStyles((theme) =>
+const useStyles = makeStyles((theme) => ({
-  createStyles({
+  appBar: {
-    appBar: {
+    paddingTop: theme.spacing(0.5),
-      paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
-      paddingBottom: theme.spacing(0.5),
+    paddingLeft: theme.spacing(3),
-      paddingLeft: theme.spacing(3),
+    paddingRight: theme.spacing(3),
-      paddingRight: theme.spacing(3),
+    borderBottom: 'solid 1px',
-      borderBottom: 'solid 1px',
+    borderBottomColor: RED,
-      borderBottomColor: RED,
+  },
+  input: {
+    height: '2.8em',
+    width: '30vw',
+    backgroundColor: theme.palette.secondary.main,
+    borderRadius: BORDER_RADIUS,
+  },
+  barElement: {
+    padding: 0,
+  },
+  icons: {
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
     },
-    input: {
+  },
-      height: '2.8em',
+  searchBar: {
-      width: '30vw',
+    [theme.breakpoints.down('sm')]: {
-      backgroundColor: theme.palette.secondary.main,
+      flexGrow: 1,
-      borderRadius: BORDER_RADIUS,
+      paddingLeft: '15vw',
     },
-    barElement: {
+  },
-      padding: 0,
+}));
-    },
-    icons: {
-      [theme.breakpoints.down('sm')]: {
-        display: 'none',
-      },
-    },
-    searchBar: {
-      [theme.breakpoints.down('sm')]: {
-        flexGrow: 1,
-        paddingLeft: '15vw',
-      },
-    },
-  }),
-);
 
 const Header = (): JSX.Element => {
   const classes = useStyles();

striker-ui/lib/consts/ICONS.ts

@@ -29,6 +29,11 @@ export const ICONS = [
     image: '/pngs/email_on.png',
     uri: '/striker?email=true',
   },
+  {
+    text: 'Logout',
+    image: '/pngs/users_icon_on.png',
+    uri: '/striker?logout=true',
+  },
   {
     text: 'Help',
     image: '/pngs/help_icon_on.png',