feat: Add useTheme hook to components

src/features/metrics/components/disks/disk.info.tsx

@@ -7,6 +7,7 @@ import DynamicProgress from "@/components/dynamic-progress";
 import useDisksStore from "@/features/metrics/stores/disk.store";
 import useSystemStoreSelectors from "@/features/metrics/stores/system.store";
 import formatBytes from "@/features/metrics/utils/format-bytes";
+import useTheme from "@/hooks/useTheme";
 import { commands, Disk } from "@/lib";
 import hasBytesTextChanged from "@/utils/has-text-changed";
 import {
@@ -118,6 +119,7 @@ const DiskInfoSection: React.FC<{ disk?: Disk }> = ({ disk }) => {
 
 const DiskActionGroup: React.FC<{ disk: Disk }> = ({ disk }) => {
   const { classes } = useStyles();
+  const { isMidnight } = useTheme();
   const setSelectedDisk = useDisksStore.use.setSelectedDisk();
   const navigate = useNavigate();
   const system = useSystemStoreSelectors(useShallow((state) => state.info));
@@ -137,7 +139,7 @@ const DiskActionGroup: React.FC<{ disk: Disk }> = ({ disk }) => {
 
   return (
     <Group mt="xs">
-      <Button radius="md" style={{ flex: 1 }} onClick={onShowDetailsClick}>
+      <Button radius="md" style={{ flex: 1 }} onClick={onShowDetailsClick} variant={isMidnight ? "white" : "default"}>
         Disk Analysis
       </Button>
       <ActionIcon variant="default" radius="md" size={36} onClick={showDirectory}>

src/features/processes/components/processes.table.tsx

@@ -23,7 +23,7 @@ interface ProcessTableProps {
 ModuleRegistry.registerModules([ClientSideRowModelModule]);
 
 const ProcessTable: React.FC<ProcessTableProps> = ({ title, columnDefs }) => {
-  const { currentTheme } = useTheme();
+  const { isMidnight } = useTheme();
   const processes = useProcessesSelectors.use.processes();
   const [columnDefState, setColumnDefsState] = React.useState<ColDef[]>(columnDefs);
   const [opened, setOpened] = React.useState(false);
@@ -68,10 +68,7 @@ const ProcessTable: React.FC<ProcessTableProps> = ({ title, columnDefs }) => {
         </Group>
 
         <Space h={12} />
-        <div
-          style={{ height: "100%", width: "100%" }}
-          className={currentTheme === THEME_OPTION.SLATE ? "ag-theme-slate" : "ag-theme-midnight"}
-        >
+        <div style={{ height: "100%", width: "100%" }} className={isMidnight ? "ag-theme-midnight" : "ag-theme-slate"}>
           <AgGridReact
             rowData={processes}
             columnDefs={columnDefState as any}

src/layout/index.tsx

@@ -5,14 +5,13 @@ import useTheme from "@/hooks/useTheme";
 import Navbar from "@/layout/components/navbar";
 import { AppShell, Styles, useMantineTheme } from "@mantine/core";
 
-import { THEME_OPTION } from "../contants";
 import AppFooter from "./components/footer";
 import Header from "./components/header";
 
 const Layout: React.FC = () => {
   const theme = useMantineTheme();
-  const { currentTheme } = useTheme();
-  const isMidnight = currentTheme === THEME_OPTION.MIDNIGHT;
+  const { isMidnight } = useTheme();
+
   const styles: Styles<"body" | "main" | "root", never> | undefined = {
     main: {
       background: theme.colors.dark[8],

src/providers/theme.provider.tsx

@@ -14,16 +14,19 @@ interface ThemeProviderProps {
 interface ThemeContextType {
   currentTheme: THEME_OPTION;
   setTheme: (theme: THEME_OPTION) => void;
+  isMidnight: boolean;
 }
 
 export const ThemeContext = createContext<ThemeContextType>({
   currentTheme: THEME_OPTION.SLATE,
   setTheme: () => {},
+  isMidnight: true,
 });
 
 const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   const [theme, setTheme] = useState<MantineThemeOverride>(themes[THEME_OPTION.MIDNIGHT]);
   const [currentTheme, setCurrentTheme] = useState<THEME_OPTION>(THEME_OPTION.MIDNIGHT);
+  const [isMidnight, setIsMidnight] = useState<boolean>(true);
 
   useEffect(() => {
     const loadTheme = async () => {
@@ -34,6 +37,7 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
       }
       handleSetTheme(THEME_OPTION.SLATE);
     };
+    setIsMidnight(currentTheme === THEME_OPTION.MIDNIGHT);
     loadTheme();
   }, []);
 
@@ -46,7 +50,7 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   };
 
   return (
-    <ThemeContext.Provider value={{ setTheme: handleSetTheme, currentTheme }}>
+    <ThemeContext.Provider value={{ setTheme: handleSetTheme, currentTheme, isMidnight }}>
       <MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
         {children}
       </MantineProvider>