Updated colors for light and dark modes, made a new favicon

Strexas · Aug 24, 2024 · 1d0cae1 · 1d0cae1
1 parent 464c772
commit 1d0cae1
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 32 deletions.
diff --git a/app/front-end/index.html b/app/front-end/index.html
@@ -10,7 +10,7 @@
         font-family: 'Nunito', sans-serif;
       }
     </style>
-    <link rel="icon" type="image/svg+xml" href="/Kath_OnlyLogo.svg" />
+    <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"

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
@@ -42,7 +42,7 @@ export const IconTitleButton: React.FC<Props> = ({ icon, title, width, height, b
           transition: 'background-color 0.5s ease',
           ':hover': {
             backgroundColor: alpha(Theme.palette.primary.contrastText, 0.2),
-          }, // TODO: fix this to be responsive to theme
+          },
         }}
         onClick={onClick}
       >

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.main,
+      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/stores/themeContextProvider.tsx b/app/front-end/src/stores/themeContextProvider.tsx
@@ -62,7 +62,7 @@ export const ThemeContextProvider: React.FC<Props> = ({ children }) => {
           mode: mode as PaletteMode,
           primary: {
             main: mode === 'light' ? Colors.primaryLight : Colors.primaryDark,
-            contrastText: Colors.contrastTextLight,
+            contrastText: mode === 'light' ? Colors.contrastTextLight : Colors.contrastTextDark,
           },
           secondary: {
             main: mode === 'light' ? Colors.secondaryLight : Colors.secondaryDark,

diff --git a/app/front-end/src/types/enums/colors.ts b/app/front-end/src/types/enums/colors.ts
@@ -71,16 +71,18 @@
 export enum Colors {
   // Light mode
   mainNavigationBackgroundLight = '#4C7380',
-  primaryLight = '#4C7380',
+  primaryLight = '#336e82',
   secondaryLight = '#D8E4E8',
 
   textPrimaryLight = '#404040',
-  textSecondaryLight = '#999999',
+  textSecondaryLight = '#525252',
 
   backgroundPrimaryLight = '#F9FBFB',
   backgroundSecondaryLight = '#EDEDED',
   backgroundActiveLight = '#CDCDCD',
 
+  contrastTextLight = '#F9FBFB',
+
   // Dark mode
   mainNavigationBackgroundDark = '#1C2427',
   primaryDark = '#6AA1AD',
@@ -91,10 +93,11 @@ export enum Colors {
 
   backgroundPrimaryDark = '#292929',
   backgroundSecondaryDark = '#252525',
-  backgroundActiveDark = '#313131',
+  backgroundActiveDark = '#333333',
+
+  contrastTextDark = '#F9FBFB',
 
   // Global
-  contrastTextLight = '#F9FBFB',
   error = '#FF6961',
   success = '#77DD77',
   warning = '#FFB347',