Merge pull request #45 from Strexas/JTE/PKFE-25

JTE/PKFE 25
Strexas · Aug 25, 2024 · 7824a49 · 7824a49
2 parents e142859 + d90b94b
commit 7824a49
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 83 deletions.
diff --git a/app/front-end/index.html b/app/front-end/index.html
@@ -10,45 +10,53 @@
         font-family: 'Nunito', sans-serif;
       }
     </style>
-    <link rel="icon" type="image/svg+xml" href="/Kath_OnlyLogo.svg" />
-    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <link rel="icon" type="image/svg+xml" href="/Kath_Favicon.svg" />
+    <link
+      rel="preload"
+      href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+    />
     <noscript>
-      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap">
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
+      />
     </noscript>
     <title>Kath</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
     <script>
-		// Retrieve color mode from localStorage
-		const colorMode = localStorage.getItem('color-mode');
+      // Retrieve color mode from localStorage
+      const colorMode = localStorage.getItem('color-mode');
 
-		// Function to set background color based on color mode
-		function setBackgroundColor(colorMode) {
-			if (colorMode === 'dark') {
-				document.body.style.backgroundColor = '#203238'; // Dark background color
-			} else {
-				document.body.style.backgroundColor = '#4C7380'; // Light background color
-			}
-		}
+      // Function to set background color based on color mode
+      function setBackgroundColor(colorMode) {
+        if (colorMode === 'dark') {
+          document.body.style.backgroundColor = '#1C2427'; // Dark background color
+        } else {
+          document.body.style.backgroundColor = '#4C7380'; // Light background color
+        }
+      }
 
-		// Check if color mode is stored in localStorage
-		if (colorMode) {
-			setBackgroundColor(colorMode);
-		} else {
-			// Retrieve system's preferred color mode using matchMedia
-			const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      // Check if color mode is stored in localStorage
+      if (colorMode) {
+        setBackgroundColor(colorMode);
+      } else {
+        // Retrieve system's preferred color mode using matchMedia
+        const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-			// Set color mode based on system preference
-			const systemColorMode = prefersDarkMode ? 'dark' : 'light';
+        // Set color mode based on system preference
+        const systemColorMode = prefersDarkMode ? 'dark' : 'light';
 
-			// Store the system color mode in localStorage
-			localStorage.setItem('color-mode', systemColorMode);
+        // Store the system color mode in localStorage
+        localStorage.setItem('color-mode', systemColorMode);
 
-			// Set background color based on system color mode
-			setBackgroundColor(systemColorMode);
-		}
-	</script>
+        // Set background color based on system color mode
+        setBackgroundColor(systemColorMode);
+      }
+    </script>
   </body>
 </html>
diff --git a/app/front-end/public/Kath_Favicon.svg b/app/front-end/public/Kath_Favicon.svg
diff --git a/app/front-end/public/Kath_OnlyLogo.svg b/app/front-end/public/Kath_OnlyLogo.svg
diff --git a/app/front-end/src/components/buttons/IconTitleButton.tsx b/app/front-end/src/components/buttons/IconTitleButton.tsx
@@ -1,5 +1,5 @@
 import { Colors } from '@/types';
-import { Box, IconButton, Typography } from '@mui/material';
+import { alpha, Box, IconButton, Typography, useTheme } from '@mui/material';
 
 interface Props {
   icon: React.ReactNode;
@@ -30,6 +30,7 @@ interface Props {
  * @returns {JSX.Element} The `IconTitleButton` component rendering an icon button and an optional title.
  */
 export const IconTitleButton: React.FC<Props> = ({ icon, title, width, height, borderRadius, onClick }) => {
+  const Theme = useTheme();
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
       <IconButton
@@ -39,7 +40,9 @@ export const IconTitleButton: React.FC<Props> = ({ icon, title, width, height, b
           height: height || '3rem',
           borderRadius: borderRadius || '1rem',
           transition: 'background-color 0.5s ease',
-          ':hover': { backgroundColor: 'rgba(216, 228, 232, 0.5)' }, // TODO: fix this to be responsive to theme
+          ':hover': {
+            backgroundColor: alpha(Theme.palette.primary.contrastText, 0.2),
+          },
         }}
         onClick={onClick}
       >

diff --git a/app/front-end/src/components/layouts/baseLayout.tsx b/app/front-end/src/components/layouts/baseLayout.tsx
@@ -28,7 +28,14 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
   const Theme = useTheme();
   const ThemeContext = useThemeContext();
   return (
-    <Box sx={{ width: 'calc(100vw - 5px)', height: 'calc(100vh - 5px)', bgcolor: Theme.palette.primary.main }}>
+    <Box
+      sx={{
+        width: '100vw',
+        height: '100vh',
+        bgcolor:
+          Theme.palette.mode === 'light' ? Colors.mainNavigationBackgroundLight : Colors.mainNavigationBackgroundDark,
+      }}
+    >
       <Box sx={{ width: '100%', height: 'max(4%, 2.5rem)', display: 'flex', flexDirection: 'row' }}>
         <Box
           sx={{
@@ -78,7 +85,7 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
           Version 1.0.02 {/* TODO: add application context provider to get values of it */}
         </Typography>
       </Box>
-      <Box sx={{ width: '100%', height: '96%', display: 'flex', flexDirection: 'row' }}>
+      <Box sx={{ width: '100%', height: 'calc(100vh - max(4%, 2.5rem))', display: 'flex', flexDirection: 'row' }}>
         <Box sx={{ width: 'max(4%, 4.688rem) ', height: '100%', display: 'flex', flexDirection: 'column' }}>
           <Box
             sx={{

diff --git a/app/front-end/src/features/editor/components/editorView/editorToolbar.tsx b/app/front-end/src/features/editor/components/editorView/editorToolbar.tsx
@@ -1,5 +1,4 @@
 import { socket } from '@/lib';
-import { Colors } from '@/types';
 import { Done as DoneIcon, Error as ErrorIcon } from '@mui/icons-material';
 import { Box, Button, CircularProgress, useTheme } from '@mui/material';
 import {
@@ -78,18 +77,25 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({ disabled, handleSa
           setIsSaving(true);
           handleSave();
         }}
-        disabled={disabled}
+        disabled={disabled || isSaving}
         startIcon={
           isSaving ? (
-            <CircularProgress size={16} sx={{ color: Colors.backgroundPrimaryLight }} />
+            <CircularProgress size={16} sx={{ color: Theme.palette.primary.main }} />
           ) : saveStatus ? (
-            <DoneIcon sx={{ color: Theme.palette.success.main }} />
+            <DoneIcon sx={{ color: Theme.palette.primary.main }} />
           ) : (
             <ErrorIcon sx={{ color: Theme.palette.error.main }} />
           )
         }
         size='small'
-        variant='contained'
+        variant='outlined'
+        sx={{
+          color: saveStatus === false ? Theme.palette.error.main : Theme.palette.primary.main,
+          borderColor: saveStatus === false ? Theme.palette.error.main : Theme.palette.primary.main,
+          '&:hover': {
+            borderColor: saveStatus === false ? Theme.palette.error.dark : Theme.palette.primary.dark,
+          },
+        }}
       >
         Save
       </Button>

diff --git a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItem.tsx
@@ -16,7 +16,8 @@ import React from 'react';
 import { FileTreeItemLabel } from '.';
 
 const StyledFileTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
-  color: theme.palette.mode === 'light' ? theme.palette.grey[800] : theme.palette.grey[400],
+  //color: theme.palette.mode === 'light' ? theme.palette.grey[800] : theme.palette.grey[400],
+  color: theme.palette.text.secondary,
   position: 'relative',
   [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: theme.spacing(3.5),
@@ -33,7 +34,7 @@ const StyledFileTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
   fontWeight: 500,
   ['&.Mui-expanded ']: {
     '&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon': {
-      color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.primary.dark,
+      color: theme.palette.primary.main,
     },
     '&::before': {
       content: '""',
@@ -43,15 +44,16 @@ const StyledFileTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
       top: '44px',
       height: 'calc(100% - 48px)',
       width: '1.5px',
-      backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[700],
+      backgroundColor: theme.palette.secondary.main,
     },
   },
   '&:hover': {
     backgroundColor: alpha(theme.palette.primary.main, 0.1),
-    color: theme.palette.mode === 'light' ? theme.palette.primary.main : 'white',
+    color: theme.palette.primary.main,
   },
   ['&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused']: {
-    backgroundColor: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.primary.dark,
+    backgroundColor:
+      theme.palette.mode === 'light' ? alpha(theme.palette.primary.main, 0.7) : alpha(theme.palette.primary.main, 0.5),
     color: theme.palette.primary.contrastText,
   },
 }));

diff --git a/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx b/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx
@@ -1,7 +1,7 @@
 import { useWorkspaceContext } from '@/features/editor/hooks';
 import { FileTypes } from '@/types';
 import { Close as CloseIcon } from '@mui/icons-material';
-import { Box, IconButton, Typography, useTheme } from '@mui/material';
+import { alpha, Box, IconButton, Typography, useTheme } from '@mui/material';
 
 export interface FilebarGroupItemProps {
   fileId: string;
@@ -40,9 +40,12 @@ export const FilebarGroupItem: React.FC<FilebarGroupItemProps> = ({ fileId, file
         pl: '1rem',
         pr: '0.5rem',
         bgcolor: Workspace.fileId === fileId ? Theme.palette.background.default : Theme.palette.action.selected,
-        borderRadius: '0rem 0rem 0.625rem 0.625rem',
+        borderRadius: '0rem',
         ':hover': {
-          backgroundColor: Theme.palette.background.paper,
+          backgroundColor:
+            Workspace.fileId === fileId
+              ? Theme.palette.background.default
+              : alpha(Theme.palette.background.default, 0.5),
         },
         cursor: 'pointer',
         display: 'flex',

diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupItem.tsx
@@ -1,5 +1,5 @@
 import { SvgIconComponent } from '@mui/icons-material';
-import { Box, Button, useTheme } from '@mui/material';
+import { alpha, Box, Button, useTheme } from '@mui/material';
 
 export interface ToolbarGroupItemProps {
   group: string;
@@ -44,11 +44,11 @@ export const ToolbarGroupItem: React.FC<ToolbarGroupItemProps> = ({ icon: Icon,
         onClick={() => onClick()}
         sx={{
           color: Theme.palette.text.primary,
-          bgcolor: Theme.palette.background.default,
+          backgroundColor: alpha(Theme.palette.action.selected, 0.5),
           borderRadius: '0.625rem',
           px: '1rem',
           '&:hover': {
-            bgcolor: Theme.palette.action.hover,
+            backgroundColor: Theme.palette.action.selected,
           },
         }}
       >

diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroupsSelectorItem.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroupsSelectorItem.tsx
@@ -1,4 +1,5 @@
 import { Button, useTheme } from '@mui/material';
+import { alpha } from '@mui/system';
 
 export interface ToolbarGroupsSelectorItemProps {
   id: string;
@@ -42,12 +43,13 @@ export const ToolbarGroupsSelectorItem: React.FC<ToolbarGroupsSelectorItemProps>
       sx={{
         height: '100%',
         bgcolor: groupRef === id ? Theme.palette.background.paper : Theme.palette.action.selected,
-        borderRadius: '0.625rem 0.625rem 0rem 0rem',
+        borderRadius: '0rem',
         px: '3rem',
         fontWeight: 'bold',
         color: Theme.palette.text.primary,
         ':hover': {
-          backgroundColor: Theme.palette.background.paper,
+          backgroundColor:
+            groupRef === id ? Theme.palette.background.paper : alpha(Theme.palette.background.paper, 0.5),
         },
       }}
       onClick={() => onClick()}

diff --git a/app/front-end/src/stores/themeContextProvider.tsx b/app/front-end/src/stores/themeContextProvider.tsx
@@ -62,6 +62,7 @@ export const ThemeContextProvider: React.FC<Props> = ({ children }) => {
           mode: mode as PaletteMode,
           primary: {
             main: mode === 'light' ? Colors.primaryLight : Colors.primaryDark,
+            contrastText: mode === 'light' ? Colors.contrastTextLight : Colors.contrastTextDark,
           },
           secondary: {
             main: mode === 'light' ? Colors.secondaryLight : Colors.secondaryDark,
@@ -75,7 +76,6 @@ export const ThemeContextProvider: React.FC<Props> = ({ children }) => {
             paper: mode === 'light' ? Colors.backgroundSecondaryLight : Colors.backgroundSecondaryDark,
           },
           action: {
-            hover: mode === 'light' ? Colors.secondaryLight : Colors.secondaryDark,
             selected: mode === 'light' ? Colors.backgroundActiveLight : Colors.backgroundActiveDark,
           },
           error: {