moved color settings to dedicated tab

src/components/FooterBar/FooterBar.tsx

@@ -1,15 +1,14 @@
-import { Box, Stack, useTheme } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import { useSettings } from "../../contexts/SettingsContext";
+import { hexToRgba } from "../../lib/utils/color";
 import { Settings } from "../HeaderBar/Settings/Settings";
 import { WindowButtons } from "../HeaderBar/WindowButtons";
-import { hexToRgba } from "../../lib/utils/color";
 
 export const FooterBar = () => {
   // contexts
   const { settings } = useSettings();
-  const theme = useTheme();
 
-  const { r, g, b, a } = hexToRgba(theme.palette.background.paper);
+  const { r, g, b, a } = hexToRgba(settings.colors.footer_color);
 
   return (
     <Box
@@ -27,7 +26,7 @@ export const FooterBar = () => {
         sx={{
           alignItems: "center",
           backdropFilter: `blur(${settings.style.blur_radius}px)`,
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          backgroundColor: `rgba(${r}, ${g}, ${b}, 0.5)`,
           borderRadius: settings.style.radius + "px",
           display: "flex",
           flexDirection: "row",

src/components/Generic/Layout.tsx

@@ -40,18 +40,9 @@ export const Layout = () => {
           display: "flex",
           flexGrow: 1,
           overflow: "auto",
+          p: 1,
         }}
-      >
-        <Box>
-          <button
-            onClick={() => {
-              console.log(settings);
-            }}
-          >
-            testing
-          </button>
-        </Box>
-      </Box>
+      ></Box>
       <FooterBar />
     </Box>
   );

src/components/HeaderBar/Settings/Settings.tsx

@@ -1,6 +1,7 @@
 import {
   BugReportOutlined,
   FormatPaintOutlined,
+  PaletteOutlined,
   SettingsOutlined,
   WallpaperOutlined,
   WebAssetOutlined,
@@ -16,6 +17,7 @@ import { Background } from "./SettingsTabs/Background";
 import { Debug } from "./SettingsTabs/Debug";
 import { Style } from "./SettingsTabs/Style";
 import { Window } from "./SettingsTabs/Window";
+import { Colors } from "./SettingsTabs/Colors";
 
 export const Settings = () => {
   // contexts
@@ -89,6 +91,7 @@ export const Settings = () => {
               scrollButtons={true}
               sx={{
                 borderBottom: "1px solid " + theme.palette.divider,
+                height: "84px",
               }}
               variant="scrollable"
             >
@@ -97,6 +100,11 @@ export const Settings = () => {
                 label="Style"
                 value="style"
               />
+              <Tab
+                icon={<PaletteOutlined />}
+                label="Colors"
+                value="colors"
+              />
               <Tab
                 icon={<WallpaperOutlined />}
                 label="Background"
@@ -127,6 +135,12 @@ export const Settings = () => {
               >
                 <Style />
               </TabPanel>
+              <TabPanel
+                sx={{ p: 2 }}
+                value="colors"
+              >
+                <Colors />
+              </TabPanel>
               <TabPanel
                 sx={{ p: 2 }}
                 value="background"

src/components/HeaderBar/Settings/SettingsTabs/Background.tsx

@@ -217,45 +217,6 @@ export const Background: FC<BackgroundProps> = ({ sx }) => {
           </Button>
         </Stack>
       </Box>
-      <CategoryTitle title="Colors" />
-      <SettingsItem
-        defaultText={defaultSettings.background.background_color}
-        description="Background color"
-        input={
-          <TextField
-            name="background_color"
-            onChange={(e) => {
-              handleSettingsBackgroundValueChange(e.target.name, e.target.value);
-            }}
-            sx={{
-              width: "100%",
-            }}
-            size="small"
-            type="color"
-            value={stagedSettings.background.background_color}
-            variant="standard"
-          />
-        }
-      />
-      <SettingsItem
-        defaultText={defaultSettings.background.background_color_popup}
-        description="Popup background color"
-        input={
-          <TextField
-            name="background_color_popup"
-            onChange={(e) => {
-              handleSettingsBackgroundValueChange(e.target.name, e.target.value);
-            }}
-            sx={{
-              width: "100%",
-            }}
-            size="small"
-            type="color"
-            value={stagedSettings.background.background_color_popup}
-            variant="standard"
-          />
-        }
-      />
     </Box>
   );
 };

src/components/HeaderBar/Settings/SettingsTabs/Colors.tsx

@@ -0,0 +1,112 @@
+import { Box, TextField } from "@mui/material";
+import { useAtom } from "jotai";
+import { FC } from "react";
+import { defaultSettings } from "../../../../lib/settings";
+import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
+import { CategoryTitle } from "../CategoryTitle";
+import { SettingsItem } from "../SettingsItem";
+
+interface ColorsProps {
+  sx?: any;
+}
+
+export const Colors: FC<ColorsProps> = ({ sx }) => {
+  // atoms
+  const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
+
+  // states
+  const handleSettingsColorsValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => {
+    const newSettings = {
+      ...stagedSettings,
+      colors: {
+        ...stagedSettings.colors,
+        [settingKey]: settingValue,
+      },
+    };
+    setStagedSettings(newSettings);
+
+    return newSettings;
+  };
+
+  return (
+    <Box sx={{ sx }}>
+      <CategoryTitle title="Colors" />
+      <SettingsItem
+        defaultText={defaultSettings.colors.accent_color}
+        description="Accent color"
+        input={
+          <TextField
+            name="accent_color"
+            onChange={(e) => {
+              handleSettingsColorsValueChange(e.target.name, e.target.value);
+            }}
+            sx={{
+              width: "100%",
+            }}
+            size="small"
+            type="color"
+            value={stagedSettings.colors.accent_color}
+            variant="standard"
+          />
+        }
+      />
+      <SettingsItem
+        defaultText={defaultSettings.colors.background_color}
+        description="Background color"
+        input={
+          <TextField
+            name="background_color"
+            onChange={(e) => {
+              handleSettingsColorsValueChange(e.target.name, e.target.value);
+            }}
+            sx={{
+              width: "100%",
+            }}
+            size="small"
+            type="color"
+            value={stagedSettings.colors.background_color}
+            variant="standard"
+          />
+        }
+      />
+      <SettingsItem
+        defaultText={defaultSettings.colors.background_color_popup}
+        description="Popup background color"
+        input={
+          <TextField
+            name="background_color_popup"
+            onChange={(e) => {
+              handleSettingsColorsValueChange(e.target.name, e.target.value);
+            }}
+            sx={{
+              width: "100%",
+            }}
+            size="small"
+            type="color"
+            value={stagedSettings.colors.background_color_popup}
+            variant="standard"
+          />
+        }
+      />
+      <SettingsItem
+        defaultText={defaultSettings.colors.footer_color}
+        description="Footer color"
+        input={
+          <TextField
+            name="footer_color"
+            onChange={(e) => {
+              handleSettingsColorsValueChange(e.target.name, e.target.value);
+            }}
+            sx={{
+              width: "100%",
+            }}
+            size="small"
+            type="color"
+            value={stagedSettings.colors.footer_color}
+            variant="standard"
+          />
+        }
+      />
+    </Box>
+  );
+};

src/components/HeaderBar/Settings/SettingsTabs/Style.tsx

@@ -50,25 +50,6 @@ export const Style: FC<StyleProps> = ({ sx }) => {
           />
         }
       />
-      <SettingsItem
-        defaultText={defaultSettings.style.accent_color}
-        description="Accent color"
-        input={
-          <TextField
-            name="accent_color"
-            onChange={(e) => {
-              handleSettingsStyleValueChange(e.target.name, e.target.value);
-            }}
-            sx={{
-              width: "100%",
-            }}
-            size="small"
-            type="color"
-            value={stagedSettings.style.accent_color}
-            variant="standard"
-          />
-        }
-      />
       <SettingsItem
         defaultText={defaultSettings.style.font_family}
         description="Font family"

src/contexts/ThemeContext.tsx

@@ -15,12 +15,12 @@ export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
   const userPalette = {
     primary: {
       // light: '#a1c3f9',
-      main: settings.style.accent_color || "#8ab4f8",
+      main: settings.colors.accent_color || "#8ab4f8",
       // dark: '#4285f4',
     },
     secondary: {
       // light: '#a1c3f9',
-      main: settings.style.accent_color || "#8ab4f8",
+      main: settings.colors.accent_color || "#8ab4f8",
       // dark: '#4285f4',
     },
     error: {
@@ -60,8 +60,8 @@ export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
       A700: "#616161",
     },
     background: {
-      paper: settings.style.dark_mode ? settings.background.background_color_popup : "#fff",
-      default: settings.style.dark_mode ? settings.background.background_color : "#fff",
+      paper: settings.style.dark_mode ? settings.colors.background_color_popup : "#fff",
+      default: settings.style.dark_mode ? settings.colors.background_color : "#fff",
     },
   };
 

src/lib/settings.ts

@@ -3,12 +3,15 @@ import { readTomlFile, writeTomlFile } from "./utils/toml";
 
 export const defaultSettings = {
   background: {
-    background_color: "#202124" as string,
-    background_color_popup: "#303134" as string,
     background_image_path: "" as string,
   },
-  style: {
+  colors: {
     accent_color: "#8ab4f8" as string,
+    background_color: "#202124" as string,
+    background_color_popup: "#303134" as string,
+    footer_color: "#000000" as string,
+  },
+  style: {
     blur_radius: 10 as number,
     dark_mode: true as boolean,
     font_family: "monospace" as string,