style : theme colors refacto and change

src/components/LinearProgressBar.tsx

@@ -1,3 +1,4 @@
+import { LINEAR_PROGRESS_BAR_COLOR } from "@/constants";
 import {
   Grid2 as Grid,
   LinearProgress,
@@ -37,7 +38,7 @@ const LinearProgressBar = (
             },
             [`& .${linearProgressClasses.bar}`]: {
               borderRadius: 5,
-              backgroundColor: "#308fe8",
+              backgroundColor: LINEAR_PROGRESS_BAR_COLOR,
             },
           })}
         />

src/constants.ts

@@ -1,5 +1,9 @@
 import { EngineName, MoveClassification } from "./types/enums";
 
+export const MAIN_THEME_COLOR = "#3B9AC6";
+export const TAB_ICONS_COLOR = "#FE7F2D";
+export const LINEAR_PROGRESS_BAR_COLOR = "#3B9AC6";
+
 export const CLASSIFICATION_COLORS: Record<MoveClassification, string> = {
   [MoveClassification.Book]: "#dbac86",
   [MoveClassification.Forced]: "#dbac86",

src/pages/index.tsx

@@ -26,6 +26,7 @@ import { Icon } from "@iconify/react";
 import EngineSettingsButton from "@/sections/engineSettings/engineSettingsButton";
 import GraphTab from "@/sections/analysis/panelBody/graphTab";
 import { PageTitle } from "@/components/pageTitle";
+import { TAB_ICONS_COLOR } from "@/constants";
 
 export default function GameAnalysis() {
   const theme = useTheme();
@@ -118,7 +119,9 @@ export default function GameAnalysis() {
             <Tab
               label="Analysis"
               id="tab0"
-              icon={<Icon icon="mdi:magnify" color="#27f019" height={15} />}
+              icon={
+                <Icon icon="mdi:magnify" color={TAB_ICONS_COLOR} height={15} />
+              }
               iconPosition="start"
               sx={{
                 textTransform: "none",
@@ -134,7 +137,7 @@ export default function GameAnalysis() {
               icon={
                 <Icon
                   icon="mdi:format-list-bulleted"
-                  color="#27f019"
+                  color={TAB_ICONS_COLOR}
                   height={15}
                 />
               }
@@ -151,7 +154,13 @@ export default function GameAnalysis() {
             <Tab
               label="Graph"
               id="tab2"
-              icon={<Icon icon="mdi:chart-line" color="#27f019" height={15} />}
+              icon={
+                <Icon
+                  icon="mdi:chart-line"
+                  color={TAB_ICONS_COLOR}
+                  height={15}
+                />
+              }
               iconPosition="start"
               sx={{
                 textTransform: "none",

src/sections/layout/index.tsx

@@ -3,6 +3,7 @@ import { PropsWithChildren, useMemo } from "react";
 import NavBar from "./NavBar";
 import { red } from "@mui/material/colors";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
+import { MAIN_THEME_COLOR } from "@/constants";
 
 export default function Layout({ children }: PropsWithChildren) {
   const [isDarkMode, setDarkMode] = useLocalStorage("useDarkMode", true);
@@ -16,7 +17,7 @@ export default function Layout({ children }: PropsWithChildren) {
             main: red[400],
           },
           primary: {
-            main: "#5a9943",
+            main: MAIN_THEME_COLOR,
           },
           secondary: {
             main: isDarkMode ? "#424242" : "#ffffff",