Merge pull request #44 from COS301-SE-2024/fix/organisation

Finished implementing the light/dark mode theme's and made adjustments to the organisation's page
COS301-SE-2024 · Jun 22, 2024 · 3432e4a · 3432e4a
2 parents 3bb01d3 + 1731cd3
commit 3432e4a
Show file tree

Hide file tree

Showing 12 changed files with 327 additions and 201 deletions.
diff --git 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/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,15 +14,14 @@ const Evaluate: React.FC = () => {
   };
 
   const handleSubmitFile = () => {
-    // Handle file submit
     console.log('File submitted:', selectedFile);
 
   };
 
   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/login/loginForm.tsx b/CoVAR-app/src/login/loginForm.tsx
@@ -107,14 +107,14 @@ 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 }} />
         </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
@@ -106,14 +106,14 @@ 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 }} />
+          <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 }}>