From bd11919a98fbf22031cec85687c5766ac50ff623 Mon Sep 17 00:00:00 2001
From: Mitchell Magro <mitchell222131@gmail.com>
Date: Wed, 18 Jun 2025 16:27:53 +0200
Subject: [PATCH] Added more to theming

---
 app/components/sidebar/SideBarLink.tsx |  7 +++---
 app/components/sidebar/Sidebar.tsx     |  2 +-
 config/theme.ts                        | 33 +++++++-------------------
 3 files changed, 12 insertions(+), 30 deletions(-)

diff --git a/app/components/sidebar/SideBarLink.tsx b/app/components/sidebar/SideBarLink.tsx
index 498d70b..17601cf 100644
--- a/app/components/sidebar/SideBarLink.tsx
+++ b/app/components/sidebar/SideBarLink.tsx
@@ -8,20 +8,19 @@ const LinkContainer = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   padding: '12px 1px',
-//   borderRadius: theme.shape.borderRadius,s
-//   color: theme.palette.text.primary,
+  borderRadius: '4px',
+  color: theme.palette.text.tertiary,
   textDecoration: 'none',
   transition: 'background 0.2s ease-in-out',
 
   '&:hover': {
     color: 'rgb(255, 255, 255)',
     background: 'rgba(255, 255, 255, 0.08)',
-    // backgroundColor: theme.palette.action.hover,
+    backgroundColor: theme.palette.action.hover,
     cursor: 'pointer',
   },
 }));
 
-// background-color: rgb(69, 190, 171);
 const LinkText = styled('span')(({ theme }) => ({
   color: theme.palette.text.tertiary,
   marginLeft: '12px',
diff --git a/app/components/sidebar/Sidebar.tsx b/app/components/sidebar/Sidebar.tsx
index 128dd40..b0b56d9 100644
--- a/app/components/sidebar/Sidebar.tsx
+++ b/app/components/sidebar/Sidebar.tsx
@@ -9,7 +9,7 @@ import SidebarLink from './SideBarLink';
 // Sidebar Container (styled using MUI System)
 export const Sidebar = styled('div')(({ theme }) => ({
   width: '240px',
-  backgroundColor: 'rgb(69, 190, 171)',
+  backgroundColor:  theme.palette.background.primary,
   color: 'white',
   padding: theme.spacing(2),
   height: '100vh',
diff --git a/config/theme.ts b/config/theme.ts
index 375685e..c1b46e5 100644
--- a/config/theme.ts
+++ b/config/theme.ts
@@ -1,42 +1,27 @@
 import { createTheme } from '@mui/material/styles';
 
-// Define your color palette
-const lightPalette = {
+const palette = {
   primary: {
-    main: '#1976d2', // Blue color
+    main: '#1976d2', 
   },
   secondary: {
-    main: '#d32f2f', // Red color
+    main: '#d32f2f',
   },
   background: {
     default: '#fafafa',
     paper: '#ffffff',
+    primary: 'rgb(69, 190, 171)',
   },
   text: {
     primary: '#000000',
     secondary: '#555555',
     tertiary: '#fff',
   },
-};
-
-const darkPalette = {
-  primary: {
-    main: '#90caf9', // Light blue
-  },
-  secondary: {
-    main: '#f48fb1', // Light pink
-  },
-  background: {
-    default: '#121212',
-    paper: '#1d1d1d',
-  },
-  text: {
-    primary: '#ffffff',
-    secondary: '#bbbbbb',
+  action: {
+    hover: 'rgba(0, 0, 0, 0.08)',
   },
 };
 
-// Typography customization
 const typography = {
   fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
   h1: {
@@ -57,11 +42,9 @@ const typography = {
 const theme = createTheme({
   palette: {
     mode: 'light', // Change this to 'dark' for dark mode
-    ...(process.env.NODE_ENV === 'development' // Switch for dev mode
-      ? lightPalette
-      : darkPalette),
+   ...palette
   },
-  typography,
+  // typography,
   breakpoints: {
     values: {
       xs: 0,