From 08c2c1063e4f02d53662ba621b007c0cdcb246f6 Mon Sep 17 00:00:00 2001
From: A Repko <arenrepko7@gmail.com>
Date: Fri, 21 Jun 2024 15:00:33 +0200
Subject: [PATCH 1/7] Fixes to theme and pages

---
 CoVAR-app/src/evaluate/evaluate.tsx          |  6 +-
 CoVAR-app/src/sidebar/sidebar.tsx            | 78 +++++++++++++++++---
 CoVAR-app/src/styles/customThemeProvider.tsx |  2 +-
 CoVAR-app/src/styles/dashboardStyle.tsx      |  4 +-
 CoVAR-app/src/styles/evaluateStyle.tsx       | 15 +---
 CoVAR-app/src/styles/sidebarStyle.tsx        |  6 +-
 CoVAR-app/src/styles/themes.tsx              | 20 ++---
 7 files changed, 89 insertions(+), 42 deletions(-)

diff --git a/CoVAR-app/src/evaluate/evaluate.tsx b/CoVAR-app/src/evaluate/evaluate.tsx
index 63f192c..e0ca8ab 100644
--- a/CoVAR-app/src/evaluate/evaluate.tsx
+++ b/CoVAR-app/src/evaluate/evaluate.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Box, Button, Typography, Paper } from '@mui/material';
 import { mainContentStyles } from '../styles/sidebarStyle';
-// import { dashboardContainerStyles } from '../styles/dashboardStyle';
 import { uploadBoxStyles, uploadButtonStyles } from '../styles/evaluateStyle';
 
 const Evaluate: React.FC = () => {
@@ -15,7 +14,6 @@ const Evaluate: React.FC = () => {
   };
 
   const handleSubmitFile = () => {
-    // Handle file submit
     console.log('File submitted:', selectedFile);
 
   };
@@ -23,7 +21,7 @@ const Evaluate: React.FC = () => {
   return (
       <Box sx={mainContentStyles}>
         <Paper sx={uploadBoxStyles}>
-          <Typography variant="h6" sx={{ color: '#CAD2C5', marginBottom: 2 }}>
+          <Typography variant="h6">
             Upload a Vulnerability Assessment
           </Typography>
           <input
@@ -40,7 +38,7 @@ const Evaluate: React.FC = () => {
           </label>
           {selectedFile && (
             <>
-              <Typography sx={{ marginTop: 1, color: '#CAD2C5' }} variant="body2">
+              <Typography variant="body2">
                 Selected File: {selectedFile.name}
               </Typography>
               <Button
diff --git a/CoVAR-app/src/sidebar/sidebar.tsx b/CoVAR-app/src/sidebar/sidebar.tsx
index 1d94c29..282d855 100644
--- a/CoVAR-app/src/sidebar/sidebar.tsx
+++ b/CoVAR-app/src/sidebar/sidebar.tsx
@@ -1,6 +1,6 @@
-import React, { useContext} from 'react';
+import React, { useContext } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-import { Box, List, ListItem, ListItemText, ListItemIcon, Typography, Button } from '@mui/material';
+import { Box, List, ListItem, ListItemText, ListItemIcon, Typography, Button, useTheme } from '@mui/material';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import AssessmentIcon from '@mui/icons-material/Assessment';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
@@ -9,19 +9,25 @@ import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 import LockIcon from '@mui/icons-material/Lock';
 import GroupsIcon from '@mui/icons-material/Groups'; 
-import { sidebarStyles, sidebarItemStyles, iconStyles, logoStyles, logoutButtonStyles } from '../styles/sidebarStyle';
+import {
+  sidebarStyles,
+  sidebarItemStyles,
+  iconStyles,
+  logoStyles,
+  logoutButtonStyles
+} from '../styles/sidebarStyle';
 import { doSignOut } from '../firebase/auth';
 import useUserRole from './components/userRole';
 import { ThemeContext } from '../styles/customThemeProvider';
 
 const Sidebar: React.FC = () => {
   const userRole = useUserRole();
-
   const isAdmin = userRole === 'admin';
   const isVA = userRole === 'VA';
 
   const navigate = useNavigate();
   const location = useLocation();
+  const theme = useTheme();
 
   const signOut = async () => {
     try {
@@ -41,46 +47,96 @@ const Sidebar: React.FC = () => {
     );
   };
 
+  const isActive = (path: string) => location.pathname === path;
+
   return (
     <Box sx={sidebarStyles}>
       <Typography variant="h6" sx={{ display: 'flex', alignItems: 'center', ...logoStyles }}>
-        <LockIcon sx={{ fontSize: 'inherit', marginRight: 1, color: '#52796F' }} /> CoVAR
+        <LockIcon sx={{ fontSize: 'inherit', marginRight: 1, color: theme.palette.primary.main }} /> CoVAR
       </Typography>
       <List>
-        <ListItem button component={Link} to="/" sx={{ ...sidebarItemStyles, backgroundColor: location.pathname === '/' ? '#52796F !important' : 'inherit' }}>
+        <ListItem
+          button
+          component={Link}
+          to="/"
+          sx={{
+            ...sidebarItemStyles,
+            backgroundColor: isActive('/') ? theme.palette.primary.main : 'inherit'
+          }}
+        >
           <ListItemIcon>
             <DashboardIcon sx={iconStyles} />
           </ListItemIcon>
           <ListItemText primary="Dashboard" />
         </ListItem>
         {(isAdmin || isVA) && (
-          <ListItem button component={Link} to="/evaluate" sx={{ ...sidebarItemStyles, backgroundColor: location.pathname === '/evaluate' ? '#52796F !important' : 'inherit' }}>
+          <ListItem
+            button
+            component={Link}
+            to="/evaluate"
+            sx={{
+              ...sidebarItemStyles,
+              backgroundColor: isActive('/evaluate') ? theme.palette.primary.main : 'inherit'
+            }}
+          >
             <ListItemIcon>
               <AssessmentIcon sx={iconStyles} />
             </ListItemIcon>
             <ListItemText primary="Evaluate" />
           </ListItem>
         )}
-        <ListItem button component={Link} to="/account" sx={{ ...sidebarItemStyles, backgroundColor: location.pathname === '/account' ? '#52796F !important' : 'inherit' }}>
+        <ListItem
+          button
+          component={Link}
+          to="/account"
+          sx={{
+            ...sidebarItemStyles,
+            backgroundColor: isActive('/account') ? theme.palette.primary.main : 'inherit'
+          }}
+        >
           <ListItemIcon>
             <AccountCircleIcon sx={iconStyles} />
           </ListItemIcon>
           <ListItemText primary="Account" />
         </ListItem>
-        <ListItem button component={Link} to="/organisation" sx={{ ...sidebarItemStyles, backgroundColor: location.pathname === '/organisation' ? '#52796F !important' : 'inherit' }}>
+        <ListItem
+          button
+          component={Link}
+          to="/organisation"
+          sx={{
+            ...sidebarItemStyles,
+            backgroundColor: isActive('/organisation') ? theme.palette.primary.main : 'inherit'
+          }}
+        >
           <ListItemIcon>
             <GroupsIcon sx={iconStyles} />
           </ListItemIcon>
           <ListItemText primary="Organisation" />
         </ListItem>
-        <ListItem button component={Link} to="/settings" sx={{ ...sidebarItemStyles, backgroundColor: location.pathname === '/settings' ? '#52796F !important' : 'inherit' }}>
+        <ListItem
+          button
+          component={Link}
+          to="/settings"
+          sx={{
+            ...sidebarItemStyles,
+            backgroundColor: isActive('/settings') ? theme.palette.primary.main : 'inherit'
+          }}
+        >
           <ListItemIcon>
             <SettingsIcon sx={iconStyles} />
           </ListItemIcon>
           <ListItemText primary="Settings" />
         </ListItem>
         {isAdmin && (
-          <ListItem button component={Link} to="/admin-tools" sx={{ ...sidebarItemStyles, backgroundColor: location.pathname === '/admin-tools' ? '#52796F !important' : 'inherit' }}>
+          <ListItem
+            button
+            component={Link}
+            to="/admin-tools"
+            sx={{
+              ...sidebarItemStyles,
+              backgroundColor: isActive('/admin-tools') ? theme.palette.primary.main : 'inherit'
+            }}
+          >
             <ListItemIcon>
               <AdminPanelSettingsIcon sx={iconStyles} />
             </ListItemIcon>
diff --git a/CoVAR-app/src/styles/customThemeProvider.tsx b/CoVAR-app/src/styles/customThemeProvider.tsx
index 0498538..27171ee 100644
--- a/CoVAR-app/src/styles/customThemeProvider.tsx
+++ b/CoVAR-app/src/styles/customThemeProvider.tsx
@@ -1,6 +1,6 @@
 import React, { createContext, useState, useMemo, ReactNode } from 'react';
 import { ThemeProvider } from '@mui/material/styles';
-import { lightTheme, darkTheme } from './themes'; // Adjust the import path as necessary
+import { lightTheme, darkTheme } from './themes';
 
 const ThemeContext = createContext({ toggleTheme: () => {} });
 
diff --git a/CoVAR-app/src/styles/dashboardStyle.tsx b/CoVAR-app/src/styles/dashboardStyle.tsx
index c3e0664..6cadcca 100644
--- a/CoVAR-app/src/styles/dashboardStyle.tsx
+++ b/CoVAR-app/src/styles/dashboardStyle.tsx
@@ -2,7 +2,7 @@ import { SxProps, Theme } from '@mui/material/styles';
 
 export const chartContainerStyles: SxProps<Theme> = (theme) => ({
   padding: theme.spacing(2),
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
   color: theme.palette.text.primary,
   display: 'flex',
   flexDirection: 'column',
@@ -26,7 +26,7 @@ export const chartContainerStyles: SxProps<Theme> = (theme) => ({
 // Updated listContainerStyles to use theme
 export const listContainerStyles: SxProps<Theme> = (theme) => ({
   padding: theme.spacing(2),
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
   color: theme.palette.text.primary,
   height: '100%',
 });
diff --git a/CoVAR-app/src/styles/evaluateStyle.tsx b/CoVAR-app/src/styles/evaluateStyle.tsx
index 09062b4..81ea58b 100644
--- a/CoVAR-app/src/styles/evaluateStyle.tsx
+++ b/CoVAR-app/src/styles/evaluateStyle.tsx
@@ -1,31 +1,24 @@
 import { SxProps, Theme } from '@mui/material/styles';
 
-export const evaluateContainerStyles: SxProps<Theme> = (theme) => ({
-  display: 'flex',
-  height: '100vh',
-  backgroundColor: theme.palette.background.default, // Use theme's background color
-});
-
 export const uploadBoxStyles: SxProps<Theme> = (theme) => ({
   flexGrow: 1,
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: theme.palette.background.paper, // Use theme's paper background color
-  padding: theme.spacing(3), // Use theme's spacing
+  backgroundColor: theme.palette.background.paper,
+  padding: theme.spacing(3),
 });
 
 export const uploadButtonStyles: SxProps<Theme> = (theme) => ({
   marginTop: theme.spacing(3),
   marginBottom: theme.spacing(2),
-  backgroundColor: theme.palette.primary.main, // Use theme's primary color
-  color: theme.palette.primary.contrastText, // Use theme's primary contrast text color
+  color: theme.palette.primary.contrastText,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   padding: '10px 20px',
   '&:hover': {
-    backgroundColor: theme.palette.primary.dark, // Use theme's dark primary color
+    backgroundColor: theme.palette.primary.dark,
   },
 });
diff --git a/CoVAR-app/src/styles/sidebarStyle.tsx b/CoVAR-app/src/styles/sidebarStyle.tsx
index 52919de..8f47821 100644
--- a/CoVAR-app/src/styles/sidebarStyle.tsx
+++ b/CoVAR-app/src/styles/sidebarStyle.tsx
@@ -22,11 +22,11 @@ export const mainContentStyles: SxProps<Theme> = (theme) => ({
 
 export const sidebarItemStyles: SxProps<Theme> = (theme) => ({
   width: '100%',
-  color: theme.palette.text.primary, // Ensure text color is primary
+  color: theme.palette.text.primary,
+  borderRadius: theme.shape.borderRadius,
   '&:hover': {
     backgroundColor: theme.palette.action.hover,
   },
-  borderRadius: theme.shape.borderRadius,
 });
 
 export const iconStyles: SxProps<Theme> = (theme) => ({
@@ -67,4 +67,4 @@ export const GoogleButton = styled(Button)(({ theme }) => ({
   '& svg': {
     marginRight: theme.spacing(1),
   },
-}));
+}));
\ No newline at end of file
diff --git a/CoVAR-app/src/styles/themes.tsx b/CoVAR-app/src/styles/themes.tsx
index 78fff6d..a920e09 100644
--- a/CoVAR-app/src/styles/themes.tsx
+++ b/CoVAR-app/src/styles/themes.tsx
@@ -5,19 +5,19 @@ const lightTheme = createTheme({
   palette: {
     mode: 'light',
     primary: {
-      main: '#84A98C',
-      dark: '#52796F',
+      main: '#ADB5BD',
+      dark: '#6C757D',
     },
     background: {
-      default: '#F0F4F8',
-      paper: '#FFFFFF',
+      default: '#CED4DA',
+      paper: '#F8F9FA',
     },
     text: {
-      primary: '#1F282E',
-      secondary: '#52796F',
+      primary: '#212529',
+      secondary: '#343A40',
     },
     action: {
-      hover: '#E0E0E0',
+      hover: '#ADB5BD',
     },
   },
   typography: {
@@ -72,7 +72,7 @@ const darkTheme = createTheme({
     },
     background: {
       default: '#1F282E',
-      paper: '#1F282E',
+      paper: '#2D3E44',
     },
     text: {
       primary: '#CAD2C5',
@@ -96,14 +96,14 @@ const darkTheme = createTheme({
     MuiInputBase: {
       styleOverrides: {
         input: {
-          color: '#CAD2C5',
+          color: '#',
         },
       },
     },
     MuiFormLabel: {
       styleOverrides: {
         root: {
-          color: '#CAD2C5',
+          color: '#',
         },
       },
     },

From 62379881274c577edbd32c48b3b47d26b61ad210 Mon Sep 17 00:00:00 2001
From: daniel-geerdink <dangeerdink@gmail.com>
Date: Fri, 21 Jun 2024 15:11:47 +0200
Subject: [PATCH 2/7] Changed the logo text to have a increased weight

---
 CoVAR-app/src/login/loginForm.tsx  | 2 +-
 CoVAR-app/src/login/signupForm.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CoVAR-app/src/login/loginForm.tsx b/CoVAR-app/src/login/loginForm.tsx
index b056583..9479279 100644
--- a/CoVAR-app/src/login/loginForm.tsx
+++ b/CoVAR-app/src/login/loginForm.tsx
@@ -102,7 +102,7 @@ const Login: React.FC<LoginProps> = ({ toggleForm }) => {
         </Box>
         <Card sx={{ backgroundColor: theme.palette.background.paper, padding: 4, borderRadius: 1, borderStyle: 'solid', borderWidth: 1, borderColor: theme.palette.divider }}>
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            <Typography variant="h4" component="h2" gutterBottom>
+            <Typography variant="h4" component="h2" fontWeight={550} gutterBottom>
               Sign In
             </Typography>
             <Box component="form" sx={{ width: '100%', mt: 1 }} onSubmit={onSubmit}>
diff --git a/CoVAR-app/src/login/signupForm.tsx b/CoVAR-app/src/login/signupForm.tsx
index deb0361..b7e6154 100644
--- a/CoVAR-app/src/login/signupForm.tsx
+++ b/CoVAR-app/src/login/signupForm.tsx
@@ -85,7 +85,7 @@ const Signup: React.FC<SignupProps> = ({ toggleForm }) => {
       <CssBaseline />
       <Container maxWidth="xl" sx={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
         <Box sx={{ textAlign: 'center', margin: '20px auto', width: '100%' }}>
-          <Typography variant="h1" color="textPrimary" gutterBottom>
+          <Typography variant="h1" color="textPrimary" fontWeight={550} gutterBottom >
             CoVAR
           </Typography>
           <LockOutlinedIcon sx={{ fontSize: 150, color: theme.palette.primary.main }} />

From 75c6b698443c060724528f10840c8190cb5231c4 Mon Sep 17 00:00:00 2001
From: A Repko <arenrepko7@gmail.com>
Date: Fri, 21 Jun 2024 15:45:42 +0200
Subject: [PATCH 3/7] Organisation page theme

---
 CoVAR-app/src/organisation/organisation.tsx | 114 +++++++-------------
 CoVAR-app/src/styles/organisationStyle.tsx  |  69 ++++++------
 2 files changed, 71 insertions(+), 112 deletions(-)

diff --git a/CoVAR-app/src/organisation/organisation.tsx b/CoVAR-app/src/organisation/organisation.tsx
index e78d2a3..6c3ef29 100644
--- a/CoVAR-app/src/organisation/organisation.tsx
+++ b/CoVAR-app/src/organisation/organisation.tsx
@@ -5,7 +5,7 @@ import { doc, getDoc, updateDoc, collection, getDocs, addDoc } from 'firebase/fi
 import { db } from '../firebase/firebaseConfig';
 import { Timestamp } from 'firebase/firestore';
 import { Box } from '@mui/system';
-import { mainContentStyles, cardStyles, headingBoxStyles } from '../styles/organisationStyle';
+import { mainContentStyles, cardStyles, headingBoxStyles, textFieldStyles, buttonStyles } from '../styles/organisationStyle';
 
 type User = {
     id: string;
@@ -65,7 +65,7 @@ const Organisation = () => {
                 name: 'New User',
                 role: 'Member',
                 createdAt: Timestamp.now(),
-                organisation: 'YourOrganisation', 
+                organisation: 'YourOrganisation',
             });
             const newUserSnap = await getDoc(newUserRef);
             if (newUserSnap.exists()) {
@@ -117,9 +117,9 @@ const Organisation = () => {
     if (loading) {
         return (
             <Box sx={mainContentStyles}>
-                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+                <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
                     <CircularProgress />
-                </div>
+                </Box>
             </Box>
         );
     }
@@ -131,59 +131,57 @@ const Organisation = () => {
                     Organisation
                 </Typography>
             </Box>
-            <div style={{ height: '50vh', width: '100%', overflow: 'auto', marginBottom: '1rem' }}>
+            <Box sx={{ height: '50vh', width: '100%', overflow: 'auto', marginBottom: '1rem' }}>
                 <DataGrid
                     rows={users}
                     columns={columns}
                     sx={{
                         width: '100%',
-                        '& .MuiDataGrid-root': {
-                            bgcolor: '#52796F',
-                            color: '#CAD2C5',
-                            borderColor: '#52796F',
-                        },
+                        // bgcolor: 'primary.main',
+                        color: 'text.primary',
+                        borderColor: 'primary.main',
                         '& .MuiDataGrid-columnHeader': {
-                            backgroundColor: '#2F3E46',
-                            color: '#CAD2C5',
+                            backgroundColor: 'primary.main',
+                            color: 'text.primary',
                         },
                         '& .MuiDataGrid-columnHeaderTitle': {
-                            color: '#CAD2C5',
+                            color: 'text.primary',
                         },
                         '& .MuiDataGrid-columnSeparator': {
-                            color: '#52796F',
+                            color: 'primary.main',
                         },
                         '& .MuiDataGrid-cell': {
-                            color: '#CAD2C5',
-                            borderColor: '#52796F',
+                            color: 'text.primary',
+                            borderColor: 'primary.main',
                         },
                         '& .MuiDataGrid-footerContainer': {
-                            backgroundColor: '#2F3E46',
-                            color: '#CAD2C5',
+                            backgroundColor: 'primary.main',
+                            color: 'text.primary',
                         },
                         '& .MuiTablePagination-root': {
-                            color: '#CAD2C5',
+                            color: 'text.primary',
                         },
                         '& .MuiSvgIcon-root': {
-                            color: '#CAD2C5',
+                            color: 'text.primary',
                         },
                         '& .MuiDataGrid-toolbarContainer button': {
-                            color: '#CAD2C5',
+                            color: 'text.primary',
                         },
                         '& .MuiDataGrid-topContainer, & .MuiDataGrid-container--top': {
-                            backgroundColor: '#52796F',
+                            backgroundColor: 'primary.main',
                         },
                         '& .MuiDataGrid-overlay': {
-                            backgroundColor: '#1F282E',
-                            color: '#CAD2C5',
+                            backgroundColor: 'background.default',
+                            color: 'text.primary',
                         },
                     }}
                 />
-            </div>
-            <Box sx={{ display: 'flex', gap: 30, marginTop: 6 }}>
-                <Card sx={{ ...cardStyles}}>
+            </Box>
+            <Box sx={{ display: 'flex', gap: 3, marginTop: 6 }}>
+                <Card sx={cardStyles}>
                     <CardContent>
                         <Typography variant="h6">Add a Member</Typography>
-                         <TextField
+                        <TextField
                             margin="normal"
                             fullWidth
                             id="email"
@@ -191,71 +189,33 @@ const Organisation = () => {
                             name="email"
                             autoComplete="email"
                             autoFocus
-                            InputLabelProps={{
-                            style: { color: '#CAD2C5' },
-                            }}
+                            InputLabelProps={{ style: { color: 'text.primary' } }}
                             value={newMemberEmail}
                             onChange={(e) => setNewMemberEmail(e.target.value)}
-                            sx={{
-                            '& .MuiOutlinedInput-root': {
-                                '& fieldset': {
-                                borderColor: '#CAD2C5',
-                                },
-                                '&:hover fieldset': {
-                                borderColor: '#CAD2C5',
-                                },
-                                '&.Mui-focused fieldset': {
-                                borderColor: '#52796F',
-                                },
-                            },
-                            }}
+                            sx={textFieldStyles}
                         />
-                        <br />
-                        <br />
-                        <Button
-                            variant="contained"
-                            sx={{ backgroundColor: '#52796F', color: '#CAD2C5', width: '100%' }}
-                            onClick={handleAddMember}
-                        >
+                        <Button variant="contained" sx={buttonStyles} onClick={handleAddMember}>
                             Add Member
                         </Button>
                     </CardContent>
                 </Card>
-                <Card sx={{ ...cardStyles}}>
+                <Card sx={cardStyles}>
                     <CardContent>
                         <Typography variant="h6">Change Organisation Name</Typography>
                         <TextField
                             margin="normal"
                             fullWidth
-                            id="organisationName"
-                            label="New Organisation Name"
+                            id="organisation-name"
+                            label="Organisation Name"
+                            name="organisation-name"
+                            autoComplete="organisation-name"
                             autoFocus
-                            InputLabelProps={{
-                            style: { color: '#CAD2C5' },
-                            }}
+                            InputLabelProps={{ style: { color: 'text.primary' } }}
                             value={organisationName}
                             onChange={(e) => setOrganisationName(e.target.value)}
-                            sx={{
-                            '& .MuiOutlinedInput-root': {
-                                '& fieldset': {
-                                borderColor: '#CAD2C5',
-                                },
-                                '&:hover fieldset': {
-                                borderColor: '#CAD2C5',
-                                },
-                                '&.Mui-focused fieldset': {
-                                borderColor: '#52796F',
-                                },
-                            },
-                            }}
+                            sx={textFieldStyles}
                         />
-                        <br />
-                        <br />
-                        <Button
-                            variant="contained"
-                            sx={{ backgroundColor: '#52796F', color: '#CAD2C5', width: '100%' }}
-                            onClick={handleChangeOrganisationName}
-                        >
+                        <Button variant="contained" sx={buttonStyles} onClick={handleChangeOrganisationName}>
                             Change Name
                         </Button>
                     </CardContent>
diff --git a/CoVAR-app/src/styles/organisationStyle.tsx b/CoVAR-app/src/styles/organisationStyle.tsx
index a26a305..209fd90 100644
--- a/CoVAR-app/src/styles/organisationStyle.tsx
+++ b/CoVAR-app/src/styles/organisationStyle.tsx
@@ -1,55 +1,54 @@
-import { SxProps } from '@mui/material/styles';
+import { SxProps, Theme } from '@mui/system';
 
-export const mainContentStyles: SxProps = {
+export const mainContentStyles: SxProps<Theme> = {
     flexGrow: 1,
-    backgroundColor: '#1F282E',
-    padding: 3,
-    color: '#CAD2C5',
+    backgroundColor: (theme) => theme.palette.background.default,
+    padding: (theme) => theme.spacing(3),
+    color: (theme) => theme.palette.text.primary,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    overflow : 'hidden',
+    overflow: 'hidden',
 };
 
-export const cardStyles: SxProps = {
+export const cardStyles: SxProps<Theme> = {
     width: 450,
     height: 220,
-    backgroundColor: '#2F3E46',
-    color: '#CAD2C5',
-    padding: 2,
+    backgroundColor: (theme) => theme.palette.background.paper,
+    color: (theme) => theme.palette.text.secondary,
+    padding: (theme) => theme.spacing(2),
 };
 
-export const headingBoxStyles: SxProps = {
-    backgroundColor: '#2D3E44',
+export const headingBoxStyles: SxProps<Theme> = {
     width: '98%',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 2,
-    marginBottom: 2,
+    padding: (theme) => theme.spacing(2),
+    marginBottom: (theme) => theme.spacing(2),
 };
 
-export const textFieldStyles: SxProps = {
-  color: '#CAD2C5',
-  '& .MuiOutlinedInput-root': {
-    '& fieldset': {
-      borderColor: '#CAD2C5',
-    },
-    '&:hover fieldset': {
-      borderColor: '#CAD2C5',
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: '#52796F',
-    },
-  },
+export const textFieldStyles: SxProps<Theme> = {
+    // '& .MuiOutlinedInput-root': {
+    //     '& fieldset': {
+    //         borderColor: (theme) => theme.palette.text.secondary,
+    //     },
+    //     '&:hover fieldset': {
+    //         borderColor: (theme) => theme.palette.text.primary,
+    //     },
+    //     '&.Mui-focused fieldset': {
+    //         borderColor: (theme) => theme.palette.primary.main,
+    //     },
+    // },
 };
 
-export const buttonStyles: SxProps = {
-  mt: 3,
-  mb: 2,
-  backgroundColor: 'primary.main',
-  color: 'white',
-  '&:hover': {
-    backgroundColor: 'primary.dark',
-  },
+export const buttonStyles: SxProps<Theme> = {
+    mt: 3,
+    mb: 2,
+    backgroundColor: (theme) => theme.palette.primary.main,
+    color: (theme) => theme.palette.primary.contrastText,
+    '&:hover': {
+        backgroundColor: (theme) => theme.palette.primary.dark,
+    },
+    width: '100%',
 };

From 505bed60afbb00af4d7ae0c6d6d0620da6ddb554 Mon Sep 17 00:00:00 2001
From: daniel-geerdink <dangeerdink@gmail.com>
Date: Fri, 21 Jun 2024 15:54:43 +0200
Subject: [PATCH 4/7] Updated the theme's colours and fonts

---
 CoVAR-app/src/login/loginForm.tsx  |  2 +-
 CoVAR-app/src/login/signupForm.tsx |  4 ++--
 CoVAR-app/src/sidebar/sidebar.tsx  | 12 ++++++------
 CoVAR-app/src/styles/themes.tsx    | 12 +++++++++---
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/CoVAR-app/src/login/loginForm.tsx b/CoVAR-app/src/login/loginForm.tsx
index 9479279..02ba6c5 100644
--- a/CoVAR-app/src/login/loginForm.tsx
+++ b/CoVAR-app/src/login/loginForm.tsx
@@ -95,7 +95,7 @@ const Login: React.FC<LoginProps> = ({ toggleForm }) => {
       <CssBaseline />
       <Container maxWidth="xl" sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
         <Box sx={{ textAlign: 'center', marginRight: 'auto', marginLeft: 'auto' }}>
-          <Typography variant="h1" color="textPrimary" gutterBottom>
+          <Typography variant="h1" color="textPrimary" fontWeight={550} gutterBottom>
             CoVAR
           </Typography>
           <LockOutlinedIcon sx={{ fontSize: 150, color: theme.palette.primary.main }} />
diff --git a/CoVAR-app/src/login/signupForm.tsx b/CoVAR-app/src/login/signupForm.tsx
index b7e6154..a97f754 100644
--- a/CoVAR-app/src/login/signupForm.tsx
+++ b/CoVAR-app/src/login/signupForm.tsx
@@ -88,11 +88,11 @@ const Signup: React.FC<SignupProps> = ({ toggleForm }) => {
           <Typography variant="h1" color="textPrimary" fontWeight={550} gutterBottom >
             CoVAR
           </Typography>
-          <LockOutlinedIcon sx={{ fontSize: 150, color: theme.palette.primary.main }} />
+          <LockOutlinedIcon sx={{ fontSize: 150, color: theme.palette.secondary.main }} />
         </Box>
         <Card sx={{ backgroundColor: theme.palette.background.paper, padding: 4, borderRadius: 1, borderStyle: 'solid', borderWidth: 1, borderColor: theme.palette.divider }}>
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            <Typography variant="h4" component="h2" gutterBottom>
+            <Typography variant="h4" component="h2" fontWeight={550} gutterBottom>
               Sign Up
             </Typography>
             <Box component="form" onSubmit={handleSubmit} sx={{ width: '100%', mt: 1 }}>
diff --git a/CoVAR-app/src/sidebar/sidebar.tsx b/CoVAR-app/src/sidebar/sidebar.tsx
index 282d855..0ea60f2 100644
--- a/CoVAR-app/src/sidebar/sidebar.tsx
+++ b/CoVAR-app/src/sidebar/sidebar.tsx
@@ -61,7 +61,7 @@ const Sidebar: React.FC = () => {
           to="/"
           sx={{
             ...sidebarItemStyles,
-            backgroundColor: isActive('/') ? theme.palette.primary.main : 'inherit'
+            backgroundColor: isActive('/') ? theme.palette.primary.main : 'inherit', borderRadius: '10px'
           }}
         >
           <ListItemIcon>
@@ -76,7 +76,7 @@ const Sidebar: React.FC = () => {
             to="/evaluate"
             sx={{
               ...sidebarItemStyles,
-              backgroundColor: isActive('/evaluate') ? theme.palette.primary.main : 'inherit'
+              backgroundColor: isActive('/evaluate') ? theme.palette.primary.main : 'inherit', borderRadius: '10px'
             }}
           >
             <ListItemIcon>
@@ -91,7 +91,7 @@ const Sidebar: React.FC = () => {
           to="/account"
           sx={{
             ...sidebarItemStyles,
-            backgroundColor: isActive('/account') ? theme.palette.primary.main : 'inherit'
+            backgroundColor: isActive('/account') ? theme.palette.primary.main : 'inherit', borderRadius: '10px'
           }}
         >
           <ListItemIcon>
@@ -105,7 +105,7 @@ const Sidebar: React.FC = () => {
           to="/organisation"
           sx={{
             ...sidebarItemStyles,
-            backgroundColor: isActive('/organisation') ? theme.palette.primary.main : 'inherit'
+            backgroundColor: isActive('/organisation') ? theme.palette.primary.main : 'inherit', borderRadius: '10px'
           }}
         >
           <ListItemIcon>
@@ -119,7 +119,7 @@ const Sidebar: React.FC = () => {
           to="/settings"
           sx={{
             ...sidebarItemStyles,
-            backgroundColor: isActive('/settings') ? theme.palette.primary.main : 'inherit'
+            backgroundColor: isActive('/settings') ? theme.palette.primary.main : 'inherit', borderRadius: '10px'
           }}
         >
           <ListItemIcon>
@@ -134,7 +134,7 @@ const Sidebar: React.FC = () => {
             to="/admin-tools"
             sx={{
               ...sidebarItemStyles,
-              backgroundColor: isActive('/admin-tools') ? theme.palette.primary.main : 'inherit'
+              backgroundColor: isActive('/admin-tools') ? theme.palette.primary.main : 'inherit', borderRadius: '10px'
             }}
           >
             <ListItemIcon>
diff --git a/CoVAR-app/src/styles/themes.tsx b/CoVAR-app/src/styles/themes.tsx
index a920e09..84abe34 100644
--- a/CoVAR-app/src/styles/themes.tsx
+++ b/CoVAR-app/src/styles/themes.tsx
@@ -5,8 +5,11 @@ const lightTheme = createTheme({
   palette: {
     mode: 'light',
     primary: {
-      main: '#ADB5BD',
-      dark: '#6C757D',
+      main: '#52796F',
+      dark: '#DEDEDE',
+    },
+    secondary: {
+      main: '#52796F',
     },
     background: {
       default: '#CED4DA',
@@ -17,7 +20,7 @@ const lightTheme = createTheme({
       secondary: '#343A40',
     },
     action: {
-      hover: '#ADB5BD',
+      hover: '#DEDEDE',
     },
   },
   typography: {
@@ -70,6 +73,9 @@ const darkTheme = createTheme({
       main: '#52796F',
       dark: '#405d51',
     },
+    secondary: {
+      main: '#52796F',
+    },
     background: {
       default: '#1F282E',
       paper: '#2D3E44',

From 7e708bf56a47c3617997aadaf8ee7de421c44e27 Mon Sep 17 00:00:00 2001
From: daniel-geerdink <dangeerdink@gmail.com>
Date: Fri, 21 Jun 2024 19:45:41 +0200
Subject: [PATCH 5/7] Updated the themes on the organisation and admin tools
 pages to match the new design

---
 .../src/adminTools/components/userList.tsx    |  51 +++++----
 CoVAR-app/src/organisation/organisation.tsx   | 103 +++++++++++++++---
 CoVAR-app/src/sidebar/sidebar.tsx             |  78 +++++++++----
 CoVAR-app/src/styles/sidebarStyle.tsx         |   4 +-
 CoVAR-app/src/styles/themes.tsx               |   4 +-
 5 files changed, 176 insertions(+), 64 deletions(-)

diff --git a/CoVAR-app/src/adminTools/components/userList.tsx b/CoVAR-app/src/adminTools/components/userList.tsx
index 3093f08..4a1cdbf 100644
--- a/CoVAR-app/src/adminTools/components/userList.tsx
+++ b/CoVAR-app/src/adminTools/components/userList.tsx
@@ -297,46 +297,53 @@ const UserList = () => {
                 sx={{
                     height: 600,
                     flex: '1 auto',
-                    '& .MuiDataGrid-root': {
-                        bgcolor: '#52796F',
-                        color: '#CAD2C5',
-                        borderColor: '#52796F',
-                    },
-                    '& .MuiDataGrid-columnHeader': {
-                        backgroundColor: '#2F3E46',
-                        color: '#CAD2C5',
-                    },
+                    fontWeight: 500,
+                    borderColor: 'text.primary', 
                     '& .MuiDataGrid-columnHeaderTitle': {
-                        color: '#CAD2C5',
+                        color: 'text.primary',
                     },
                     '& .MuiDataGrid-columnSeparator': {
-                        color: '#52796F',
+                        color: 'text.primary',
                     },
                     '& .MuiDataGrid-cell': {
-                        color: '#CAD2C5',
-                        borderColor: '#52796F',
+                        color: 'text.primary',
+                        borderColor: 'text.primary', 
                     },
                     '& .MuiDataGrid-footerContainer': {
-                        backgroundColor: '#2F3E46',
-                        color: '#CAD2C5',
+                        backgroundColor: 'background.paper',
+                        color: 'text.primary',
                     },
                     '& .MuiTablePagination-root': {
-                        color: '#CAD2C5',
+                        color: 'text.primary',
                     },
                     '& .MuiSvgIcon-root': {
-                        color: '#CAD2C5',
+                        color: 'text.primary',
                     },
                     '& .MuiDataGrid-toolbarContainer button': {
-                        color: '#CAD2C5',
+                        color: 'text.primary',
                     },
                     '& .MuiDataGrid-topContainer, & .MuiDataGrid-container--top': {
-                        backgroundColor: '#52796F',
+                        backgroundColor: 'primary.main',
                     },
                     '& .MuiDataGrid-overlay': {
-                        backgroundColor: '#1F282E',
-                        color: '#CAD2C5',
+                        backgroundColor: 'background.default',
+                        color: 'text.primary',
+                    },
+                    '& .MuiDataGrid-filler': {
+                        backgroundColor: 'background.paper',
+                        color: 'text.primary',
+                    },
+                    '& .MuiDataGrid-scrollbarFiller': {
+                        backgroundColor: 'background.paper',
+                    },
+                    '& .MuiDataGrid-scrollbarFiller--header': {
+                        backgroundColor: 'background.paper', 
+                    },
+                    '& .MuiDataGrid-columnHeader': {
+                        backgroundColor: 'background.paper',
+                        color: 'text.primary',
                     },
-                }}
+            }}
             />
             <Menu
                 anchorEl={anchorEl}
diff --git a/CoVAR-app/src/organisation/organisation.tsx b/CoVAR-app/src/organisation/organisation.tsx
index 6c3ef29..dfc3472 100644
--- a/CoVAR-app/src/organisation/organisation.tsx
+++ b/CoVAR-app/src/organisation/organisation.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { CircularProgress, Button, Typography, Card, CardContent, TextField } from '@mui/material';
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
-import { doc, getDoc, updateDoc, collection, getDocs, addDoc } from 'firebase/firestore';
+import { doc, getDoc, updateDoc, collection, getDocs, addDoc, deleteDoc } from 'firebase/firestore';
 import { db } from '../firebase/firebaseConfig';
 import { Timestamp } from 'firebase/firestore';
 import { Box } from '@mui/system';
@@ -20,6 +20,8 @@ const Organisation = () => {
     const [loading, setLoading] = useState(true);
     const [newMemberEmail, setNewMemberEmail] = useState('');
     const [organisationName, setOrganisationName] = useState('');
+    const [confirmOrganisationName, setConfirmOrganisationName] = useState('');
+    const [deleteConfirmed, setDeleteConfirmed] = useState(false);
 
     useEffect(() => {
         const fetchUsers = async () => {
@@ -78,9 +80,29 @@ const Organisation = () => {
     };
 
     const handleChangeOrganisationName = async () => {
-        // Implement the logic to change the organisation name
-        console.log('Change organisation name to:', organisationName);
-        setOrganisationName('');
+        // Verify if confirmOrganisationName matches organisationName
+        if (confirmOrganisationName !== organisationName) {
+            console.error('Organisation names do not match. Aborting.');
+            return;
+        }
+
+        try {
+            // Implement the logic to delete the organisation
+            console.log('Disbanding organisation:', organisationName);
+
+            // Example deletion using Firestore
+            const organisationRef = doc(db, 'organizations', 'your-organisation-id');
+            await deleteDoc(organisationRef);
+
+            // After deletion, you may want to clear state or redirect
+
+            // Reset fields after successful deletion
+            setOrganisationName('');
+            setConfirmOrganisationName('');
+            setDeleteConfirmed(false);
+        } catch (error) {
+            console.error('Error deleting organisation:', error);
+        }
     };
 
     const columns: GridColDef[] = [
@@ -137,25 +159,25 @@ const Organisation = () => {
                     columns={columns}
                     sx={{
                         width: '100%',
-                        // bgcolor: 'primary.main',
                         color: 'text.primary',
-                        borderColor: 'primary.main',
+                        fontWeight: 500,
+                        borderColor: 'text.primary',
                         '& .MuiDataGrid-columnHeader': {
-                            backgroundColor: 'primary.main',
+                            backgroundColor: 'background.paper',
                             color: 'text.primary',
                         },
                         '& .MuiDataGrid-columnHeaderTitle': {
                             color: 'text.primary',
                         },
                         '& .MuiDataGrid-columnSeparator': {
-                            color: 'primary.main',
+                            color: 'text.primary',
                         },
                         '& .MuiDataGrid-cell': {
                             color: 'text.primary',
-                            borderColor: 'primary.main',
+                            borderColor: 'text.primary',
                         },
                         '& .MuiDataGrid-footerContainer': {
-                            backgroundColor: 'primary.main',
+                            backgroundColor: 'background.paper',
                             color: 'text.primary',
                         },
                         '& .MuiTablePagination-root': {
@@ -174,14 +196,25 @@ const Organisation = () => {
                             backgroundColor: 'background.default',
                             color: 'text.primary',
                         },
+                        '& .MuiDataGrid-filler': {
+                            backgroundColor: 'background.paper',
+                            color: 'text.primary',
+                        },
+                        '& .MuiDataGrid-scrollbarFiller': {
+                            backgroundColor: 'background.paper',
+                        },
+                        '& .MuiDataGrid-scrollbarFiller--header': {
+                            backgroundColor: 'background.paper',
+                        },
                     }}
                 />
             </Box>
-            <Box sx={{ display: 'flex', gap: 3, marginTop: 6 }}>
+            <Box sx={{ display: 'flex', gap: 10, marginTop: 6 }}>
                 <Card sx={cardStyles}>
                     <CardContent>
-                        <Typography variant="h6">Add a Member</Typography>
+                        <Typography variant="h6" color="text.primary">Add a Member</Typography>
                         <TextField
+                            required
                             margin="normal"
                             fullWidth
                             id="email"
@@ -189,7 +222,8 @@ const Organisation = () => {
                             name="email"
                             autoComplete="email"
                             autoFocus
-                            InputLabelProps={{ style: { color: 'text.primary' } }}
+                            InputLabelProps={{ sx: { color: 'text.primary' } }}
+                            InputProps={{ sx: { color: 'text.primary' } }}
                             value={newMemberEmail}
                             onChange={(e) => setNewMemberEmail(e.target.value)}
                             sx={textFieldStyles}
@@ -201,8 +235,9 @@ const Organisation = () => {
                 </Card>
                 <Card sx={cardStyles}>
                     <CardContent>
-                        <Typography variant="h6">Change Organisation Name</Typography>
+                        <Typography variant="h6" color="text.primary">Change Organisation Name</Typography>
                         <TextField
+                            required
                             margin="normal"
                             fullWidth
                             id="organisation-name"
@@ -210,7 +245,8 @@ const Organisation = () => {
                             name="organisation-name"
                             autoComplete="organisation-name"
                             autoFocus
-                            InputLabelProps={{ style: { color: 'text.primary' } }}
+                            InputLabelProps={{ sx: { color: 'text.primary' } }}
+                            InputProps={{ sx: { color: 'text.primary' } }}
                             value={organisationName}
                             onChange={(e) => setOrganisationName(e.target.value)}
                             sx={textFieldStyles}
@@ -220,6 +256,43 @@ const Organisation = () => {
                         </Button>
                     </CardContent>
                 </Card>
+                <Card sx={cardStyles}>
+                    <CardContent>
+                        <Typography variant="h6" color="text.primary">Disband Organisation</Typography>
+                        <TextField
+                            required
+                            margin="normal"
+                            fullWidth
+                            id="confirm-organisation-name"
+                            label="Confirm Organisation Name"
+                            name="confirm-organisation-name"
+                            autoComplete="organisation-name"
+                            autoFocus
+                            InputLabelProps={{ sx: { color: 'text.primary' } }}
+                            InputProps={{ sx: { color: 'text.primary' } }}
+                            value={confirmOrganisationName}
+                            onChange={(e) => setConfirmOrganisationName(e.target.value)}
+                            sx={textFieldStyles}
+                        />
+                        <br></br>
+                        <br></br>
+                        <Button
+                            variant="contained"
+                            sx={{
+                                backgroundColor: '#D11C45',
+                                color: '#FFFFFF',
+                                width: '100%',
+                                '&:hover': {
+                                    backgroundColor: '#B2163B',
+                                },
+                            }}
+                            onClick={handleChangeOrganisationName}
+                            disabled={confirmOrganisationName !== organisationName || deleteConfirmed}
+                        >
+                            Delete Organisation
+                        </Button>
+                    </CardContent>
+                </Card>
             </Box>
         </Box>
     );
diff --git a/CoVAR-app/src/sidebar/sidebar.tsx b/CoVAR-app/src/sidebar/sidebar.tsx
index 0ea60f2..5ec2e56 100644
--- a/CoVAR-app/src/sidebar/sidebar.tsx
+++ b/CoVAR-app/src/sidebar/sidebar.tsx
@@ -56,89 +56,119 @@ const Sidebar: React.FC = () => {
       </Typography>
       <List>
         <ListItem
-          button
           component={Link}
           to="/"
           sx={{
             ...sidebarItemStyles,
-            backgroundColor: isActive('/') ? theme.palette.primary.main : 'inherit', borderRadius: '10px'
+            backgroundColor: isActive('/') ? theme.palette.primary.main : 'inherit',
+            color: isActive('/') ? 'white' : theme.palette.text.primary,
+            borderRadius: '10px',
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover,
+              color: theme.palette.text.primary,
+            },
           }}
         >
-          <ListItemIcon>
-            <DashboardIcon sx={iconStyles} />
+          <ListItemIcon sx={{ ...iconStyles, color: isActive('/') ? 'white' : theme.palette.text.primary }}>
+            <DashboardIcon />
           </ListItemIcon>
           <ListItemText primary="Dashboard" />
         </ListItem>
         {(isAdmin || isVA) && (
           <ListItem
-            button
             component={Link}
             to="/evaluate"
             sx={{
               ...sidebarItemStyles,
-              backgroundColor: isActive('/evaluate') ? theme.palette.primary.main : 'inherit', borderRadius: '10px'
+              backgroundColor: isActive('/evaluate') ? theme.palette.primary.main : 'inherit',
+              color: isActive('/evaluate') ? 'white' : theme.palette.text.primary,
+              borderRadius: '10px',
+              '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+                color: theme.palette.text.primary,
+              },
             }}
           >
-            <ListItemIcon>
-              <AssessmentIcon sx={iconStyles} />
+            <ListItemIcon sx={{ ...iconStyles, color: isActive('/evaluate') ? 'white' : theme.palette.text.primary }}>
+              <AssessmentIcon />
             </ListItemIcon>
             <ListItemText primary="Evaluate" />
           </ListItem>
         )}
         <ListItem
-          button
           component={Link}
           to="/account"
           sx={{
             ...sidebarItemStyles,
-            backgroundColor: isActive('/account') ? theme.palette.primary.main : 'inherit', borderRadius: '10px'
+            backgroundColor: isActive('/account') ? theme.palette.primary.main : 'inherit',
+            color: isActive('/account') ? 'white' : theme.palette.text.primary,
+            borderRadius: '10px',
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover,
+              color: theme.palette.text.primary,
+            },
           }}
         >
-          <ListItemIcon>
-            <AccountCircleIcon sx={iconStyles} />
+          <ListItemIcon sx={{ ...iconStyles, color: isActive('/account') ? 'white' : theme.palette.text.primary }}>
+            <AccountCircleIcon />
           </ListItemIcon>
           <ListItemText primary="Account" />
         </ListItem>
         <ListItem
-          button
           component={Link}
           to="/organisation"
           sx={{
             ...sidebarItemStyles,
-            backgroundColor: isActive('/organisation') ? theme.palette.primary.main : 'inherit', borderRadius: '10px'
+            backgroundColor: isActive('/organisation') ? theme.palette.primary.main : 'inherit',
+            color: isActive('/organisation') ? 'white' : theme.palette.text.primary,
+            borderRadius: '10px',
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover,
+              color: theme.palette.text.primary,
+            },
           }}
         >
-          <ListItemIcon>
-            <GroupsIcon sx={iconStyles} />
+          <ListItemIcon sx={{ ...iconStyles, color: isActive('/organisation') ? 'white' : theme.palette.text.primary }}>
+            <GroupsIcon />
           </ListItemIcon>
           <ListItemText primary="Organisation" />
         </ListItem>
         <ListItem
-          button
           component={Link}
           to="/settings"
           sx={{
             ...sidebarItemStyles,
-            backgroundColor: isActive('/settings') ? theme.palette.primary.main : 'inherit', borderRadius: '10px'
+            backgroundColor: isActive('/settings') ? theme.palette.primary.main : 'inherit',
+            color: isActive('/settings') ? 'white' : theme.palette.text.primary,
+            borderRadius: '10px',
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover,
+              color: theme.palette.text.primary,
+            },
           }}
         >
-          <ListItemIcon>
-            <SettingsIcon sx={iconStyles} />
+          <ListItemIcon sx={{ ...iconStyles, color: isActive('/settings') ? 'white' : theme.palette.text.primary }}>
+            <SettingsIcon />
           </ListItemIcon>
           <ListItemText primary="Settings" />
         </ListItem>
         {isAdmin && (
           <ListItem
-            button
             component={Link}
             to="/admin-tools"
             sx={{
               ...sidebarItemStyles,
-              backgroundColor: isActive('/admin-tools') ? theme.palette.primary.main : 'inherit', borderRadius: '10px'
+              backgroundColor: isActive('/admin-tools') ? theme.palette.primary.main : 'inherit',
+              color: isActive('/admin-tools') ? 'white' : theme.palette.text.primary,
+              borderRadius: '10px',
+              '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+                color: theme.palette.text.primary,
+              },
             }}
           >
-            <ListItemIcon>
-              <AdminPanelSettingsIcon sx={iconStyles} />
+            <ListItemIcon sx={{ ...iconStyles, color: isActive('/admin-tools') ? 'white' : theme.palette.text.primary }}>
+              <AdminPanelSettingsIcon />
             </ListItemIcon>
             <ListItemText primary="Admin Tools" />
           </ListItem>
diff --git a/CoVAR-app/src/styles/sidebarStyle.tsx b/CoVAR-app/src/styles/sidebarStyle.tsx
index 8f47821..1e333d1 100644
--- a/CoVAR-app/src/styles/sidebarStyle.tsx
+++ b/CoVAR-app/src/styles/sidebarStyle.tsx
@@ -26,6 +26,7 @@ export const sidebarItemStyles: SxProps<Theme> = (theme) => ({
   borderRadius: theme.shape.borderRadius,
   '&:hover': {
     backgroundColor: theme.palette.action.hover,
+    
   },
 });
 
@@ -43,9 +44,10 @@ export const logoutButtonStyles: SxProps<Theme> = (theme) => ({
   marginBottom: theme.spacing(2),
   width: '90%',
   backgroundColor: theme.palette.primary.main,
-  color: theme.palette.primary.contrastText, // Use contrast text color
+  color: theme.palette.primary.contrastText, 
   '&:hover': {
     backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.text.primary,
   },
 });
 
diff --git a/CoVAR-app/src/styles/themes.tsx b/CoVAR-app/src/styles/themes.tsx
index 84abe34..3f80cd0 100644
--- a/CoVAR-app/src/styles/themes.tsx
+++ b/CoVAR-app/src/styles/themes.tsx
@@ -116,14 +116,14 @@ const darkTheme = createTheme({
     MuiButton: {
       styleOverrides: {
         root: {
-          borderRadius: 4, // ensuring button border radius matches the theme
+          borderRadius: 4, 
         },
       },
     },
     MuiPaper: {
       styleOverrides: {
         root: {
-          padding: 8, // ensure all papers have consistent padding
+          padding: 8, 
         },
       },
     },

From 1621481926e54be6f7c9bee6e00ad540776ef920 Mon Sep 17 00:00:00 2001
From: daniel-geerdink <dangeerdink@gmail.com>
Date: Sat, 22 Jun 2024 12:08:06 +0200
Subject: [PATCH 6/7] Changed the hover colour in light mode

---
 CoVAR-app/src/styles/sidebarStyle.tsx | 1 -
 CoVAR-app/src/styles/themes.tsx       | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/CoVAR-app/src/styles/sidebarStyle.tsx b/CoVAR-app/src/styles/sidebarStyle.tsx
index 1e333d1..d254ae2 100644
--- a/CoVAR-app/src/styles/sidebarStyle.tsx
+++ b/CoVAR-app/src/styles/sidebarStyle.tsx
@@ -47,7 +47,6 @@ export const logoutButtonStyles: SxProps<Theme> = (theme) => ({
   color: theme.palette.primary.contrastText, 
   '&:hover': {
     backgroundColor: theme.palette.primary.dark,
-    color: theme.palette.text.primary,
   },
 });
 
diff --git a/CoVAR-app/src/styles/themes.tsx b/CoVAR-app/src/styles/themes.tsx
index 3f80cd0..32a3625 100644
--- a/CoVAR-app/src/styles/themes.tsx
+++ b/CoVAR-app/src/styles/themes.tsx
@@ -6,7 +6,7 @@ const lightTheme = createTheme({
     mode: 'light',
     primary: {
       main: '#52796F',
-      dark: '#DEDEDE',
+      dark: '#3d5b53',
     },
     secondary: {
       main: '#52796F',

From 1731cd370b956cdeb49edbd4b361eb9cda37329c Mon Sep 17 00:00:00 2001
From: daniel-geerdink <dangeerdink@gmail.com>
Date: Sat, 22 Jun 2024 12:16:20 +0200
Subject: [PATCH 7/7] Changed the organisation delete function

---
 CoVAR-app/src/organisation/organisation.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/CoVAR-app/src/organisation/organisation.tsx b/CoVAR-app/src/organisation/organisation.tsx
index dfc3472..7b1f364 100644
--- a/CoVAR-app/src/organisation/organisation.tsx
+++ b/CoVAR-app/src/organisation/organisation.tsx
@@ -79,7 +79,7 @@ const Organisation = () => {
         }
     };
 
-    const handleChangeOrganisationName = async () => {
+    const handleDeleteOrganisation = async () => {
         // Verify if confirmOrganisationName matches organisationName
         if (confirmOrganisationName !== organisationName) {
             console.error('Organisation names do not match. Aborting.');
@@ -105,6 +105,10 @@ const Organisation = () => {
         }
     };
 
+    const handleChangeOrganisationName = async () => {
+        //logic to change organisation name
+    }
+
     const columns: GridColDef[] = [
         { field: 'name', headerName: 'Name', flex: 1, headerAlign: 'left', resizable: false },
         { field: 'email', headerName: 'Email', flex: 1, headerAlign: 'left', resizable: false },
@@ -267,7 +271,6 @@ const Organisation = () => {
                             label="Confirm Organisation Name"
                             name="confirm-organisation-name"
                             autoComplete="organisation-name"
-                            autoFocus
                             InputLabelProps={{ sx: { color: 'text.primary' } }}
                             InputProps={{ sx: { color: 'text.primary' } }}
                             value={confirmOrganisationName}
@@ -286,7 +289,7 @@ const Organisation = () => {
                                     backgroundColor: '#B2163B',
                                 },
                             }}
-                            onClick={handleChangeOrganisationName}
+                            onClick={handleDeleteOrganisation}
                             disabled={confirmOrganisationName !== organisationName || deleteConfirmed}
                         >
                             Delete Organisation