From 6118feeecfe265702d1e6a25068cdcbadcc96483 Mon Sep 17 00:00:00 2001
From: Dispatcharr <leroy.d.smith2@outlook.com>
Date: Fri, 7 Mar 2025 19:51:08 -0600
Subject: [PATCH] Centralize theme config

Updated theme.js to include common styling properties.
Updated app.js to use common styling properties
Updated Sidebar.js to use common styling properties
---
 frontend/src/App.js                |  4 +-
 frontend/src/components/Sidebar.js | 25 ++++++------
 frontend/src/theme.js              | 65 ++++++++++++++++++------------
 3 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 334246ec..5c758891 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -98,14 +98,14 @@ const App = () => {
             toggleDrawer={toggleDrawer}
           />
 
-          {/* Main content area, no AppBar, so no marginTop */}
+          {/* Main content area */}
           <Box
             sx={{
               display: 'flex',
               flexDirection: 'column',
               ml: `${open ? drawerWidth : miniDrawerWidth}px`,
               transition: 'margin-left 0.3s',
-              backgroundColor: '#18181b',
+              backgroundColor: 'background.default',
               minHeight: '100vh',
               color: 'text.primary',
             }}
diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js
index cb0370bc..b873d879 100644
--- a/frontend/src/components/Sidebar.js
+++ b/frontend/src/components/Sidebar.js
@@ -11,6 +11,7 @@ import {
   ListItemIcon,
   ListItemText,
 } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import {
   ListOrdered,
   Play,
@@ -25,17 +26,14 @@ const navItems = [
   { label: 'Channels', icon: <ListOrdered size={20} />, path: '/channels' },
   { label: 'M3U', icon: <Play size={20} />, path: '/m3u' },
   { label: 'EPG', icon: <Database size={20} />, path: '/epg' },
-  {
-    label: 'Stream Profiles',
-    icon: <SlidersHorizontal size={20} />,
-    path: '/stream-profiles',
-  },
+  { label: 'Stream Profiles', icon: <SlidersHorizontal size={20} />, path: '/stream-profiles' },
   { label: 'TV Guide', icon: <LayoutGrid size={20} />, path: '/guide' },
   { label: 'Settings', icon: <LucideSettings size={20} />, path: '/settings' },
 ];
 
 const Sidebar = ({ open, drawerWidth, miniDrawerWidth, toggleDrawer }) => {
   const location = useLocation();
+  const theme = useTheme();
 
   return (
     <Drawer
@@ -45,7 +43,7 @@ const Sidebar = ({ open, drawerWidth, miniDrawerWidth, toggleDrawer }) => {
           width: open ? drawerWidth : miniDrawerWidth,
           overflowX: 'hidden',
           transition: 'width 0.3s',
-          backgroundColor: '#18181b',
+          backgroundColor: theme.palette.background.default,
           color: 'text.primary',
           display: 'flex',
           flexDirection: 'column',
@@ -118,16 +116,18 @@ const Sidebar = ({ open, drawerWidth, miniDrawerWidth, toggleDrawer }) => {
                   borderRadius: 1,
                   width: open ? '208px' : 'auto',
                   transition: 'all 0.2s ease',
-                  bgcolor: isActive ? 'rgba(21, 69, 62, 0.67)' : 'transparent',
+                  bgcolor: isActive
+                    ? theme.custom.sidebar.activeBackground
+                    : 'transparent',
                   border: isActive
-                    ? '1px solid #14917e'
+                    ? `1px solid ${theme.custom.sidebar.activeBorder}`
                     : '1px solid transparent',
                   color: 'text.primary',
                   px: 1,
                   py: 0.25,
                   '&:hover': {
-                    bgcolor: '#27272a',
-                    border: '1px solid #3f3f46',
+                    bgcolor: theme.custom.sidebar.hoverBackground,
+                    border: `1px solid ${theme.custom.sidebar.hoverBorder}`,
                   },
                 }}
               >
@@ -148,9 +148,10 @@ const Sidebar = ({ open, drawerWidth, miniDrawerWidth, toggleDrawer }) => {
                       sx: {
                         fontSize: '14px',
                         fontWeight: 400,
-                        color: isActive ? '##d4d4d8' : '##d4d4d8',
-                        fontFamily: 'Inter, sans-serif',
+                        fontFamily: theme.custom.sidebar.fontFamily,
                         letterSpacing: '-0.3px',
+                        // Keeping the text color as it is in your original
+                        color: isActive ? '#d4d4d8' : '#d4d4d8',
                       },
                     }}
                   />
diff --git a/frontend/src/theme.js b/frontend/src/theme.js
index 9c70a255..2164d6df 100644
--- a/frontend/src/theme.js
+++ b/frontend/src/theme.js
@@ -1,38 +1,44 @@
-// frontend/src/theme.js
+// src/theme.js
 import { createTheme } from '@mui/material/styles';
 
+const sharedColors = {
+  primary: '#4A90E2',
+  secondary: '#F5A623',
+  background: '#18181b', // Global background color on every page
+  paper: '#333539',
+  textPrimary: '#FFFFFF',
+  textSecondary: '#C3C3C3',
+};
+
+const sharedTypography = {
+  fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(','),
+  h1: { fontSize: '2.5rem', fontWeight: 700 },
+  h2: { fontSize: '2rem', fontWeight: 700 },
+  body1: { fontSize: '1rem' },
+};
+
 const theme = createTheme({
   palette: {
     mode: 'dark',
     background: {
-      default: '#2B2C30', // Dark background
-      paper: '#333539',   // Slightly lighter panel background
+      default: sharedColors.background, // This is now #18181b
+      paper: sharedColors.paper,
     },
     primary: {
-      // Adjust accent color if your Figma calls for a different highlight
-      main: '#4A90E2',
-      contrastText: '#FFFFFF',
+      main: sharedColors.primary,
+      contrastText: sharedColors.textPrimary,
     },
     secondary: {
-      main: '#F5A623',
-      contrastText: '#FFFFFF',
+      main: sharedColors.secondary,
+      contrastText: sharedColors.textPrimary,
     },
     text: {
-      primary: '#FFFFFF',
-      secondary: '#C3C3C3',
-    },
-  },
-  typography: {
-    fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(','),
-    // Example typography tweaks
-    h6: {
-      fontWeight: 500,
-      fontSize: '0.95rem',
-    },
-    body1: {
-      fontSize: '0.875rem',
+      primary: sharedColors.textPrimary,
+      secondary: sharedColors.textSecondary,
     },
   },
+  typography: sharedTypography,
+  spacing: 8,
   components: {
     MuiButton: {
       styleOverrides: {
@@ -46,20 +52,27 @@ const theme = createTheme({
     MuiDrawer: {
       styleOverrides: {
         paper: {
-          backgroundColor: '#333539',
-          color: '#FFFFFF',
+          backgroundColor: sharedColors.paper,
+          color: sharedColors.textPrimary,
         },
       },
     },
-    // We remove the AppBar override since we won't be using it in App.js anymore
     MuiAppBar: {
       styleOverrides: {
         root: {
-          backgroundColor: '#2B2C30',
+          backgroundColor: sharedColors.background,
         },
       },
     },
-    // Feel free to override more MUI components as needed...
+  },
+  custom: {
+    sidebar: {
+      activeBackground: 'rgba(21, 69, 62, 0.67)',
+      activeBorder: '#14917e',
+      hoverBackground: '#27272a',
+      hoverBorder: '#3f3f46',
+      fontFamily: 'Inter, sans-serif',
+    },
   },
 });