From 5fe420eb671e3ecc1943ec8f74d132897be7aad6 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Thu, 15 Jul 2021 11:55:15 -0400
Subject: [PATCH] refactor(front-end): add logout icon to the header

---
 striker-ui/components/Header.tsx | 60 +++++++++++++++-----------------
 striker-ui/lib/consts/ICONS.ts   |  5 +++
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/striker-ui/components/Header.tsx b/striker-ui/components/Header.tsx
index 436b1138..05db2909 100644
--- a/striker-ui/components/Header.tsx
+++ b/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) =>
-  createStyles({
-    appBar: {
-      paddingTop: theme.spacing(0.5),
-      paddingBottom: theme.spacing(0.5),
-      paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(3),
-      borderBottom: 'solid 1px',
-      borderBottomColor: RED,
+const useStyles = makeStyles((theme) => ({
+  appBar: {
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
+    paddingLeft: theme.spacing(3),
+    paddingRight: theme.spacing(3),
+    borderBottom: 'solid 1px',
+    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',
-      width: '30vw',
-      backgroundColor: theme.palette.secondary.main,
-      borderRadius: BORDER_RADIUS,
+  },
+  searchBar: {
+    [theme.breakpoints.down('sm')]: {
+      flexGrow: 1,
+      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();
diff --git a/striker-ui/lib/consts/ICONS.ts b/striker-ui/lib/consts/ICONS.ts
index 9b807830..b1567aef 100644
--- a/striker-ui/lib/consts/ICONS.ts
+++ b/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',