From 0dceaf49c8937f6b88d59a0957f8a4a9c30314ec Mon Sep 17 00:00:00 2001
From: HasanMu <obitorin.or@gmail.com>
Date: Wed, 12 Feb 2025 10:08:44 +0700
Subject: [PATCH] fix: icon active/deactive in sidebar

---
 src/assets/speedometer.svg             | 4 ++--
 src/layouts/Dashboard/Sidebar.tsx      | 2 +-
 src/pages/auth/Login.tsx               | 2 +-
 src/theme/components/Checkbox.tsx      | 8 ++++----
 src/theme/components/ListItemButton.ts | 3 +++
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/assets/speedometer.svg b/src/assets/speedometer.svg
index ddc12ee..ab6f1e7 100644
--- a/src/assets/speedometer.svg
+++ b/src/assets/speedometer.svg
@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="current" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <mask id="mask0_28_37448" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
 <g clip-path="url(#clip0_28_37448)">
 <path opacity="0.32" d="M21.1808 16.9703C20.8971 17.6255 20.2225 18 19.5086 18H14.8154C14.8462 17.9145 14.8735 17.8269 14.8971 17.7373C15.1709 16.6974 14.8825 15.639 14.2214 14.8963C14.4654 12.9091 14.6177 10.8733 14.7108 9.26516C14.7569 8.46731 13.7795 8.20081 13.4274 8.91526C12.7178 10.3553 11.8493 12.1958 11.0842 14.041C10.1467 14.3479 9.3768 15.1177 9.10295 16.1576C8.93642 16.7899 8.97782 17.4291 9.18451 18H4.49141C3.77747 18 3.10288 17.6255 2.81918 16.9703C2.29212 15.7533 2 14.4108 2 13C2 7.47715 6.47715 3 12 3C17.5229 3 22 7.47715 22 13C22 14.4108 21.7079 15.7533 21.1808 16.9703Z" fill="#1877F2"/>
@@ -6,7 +6,7 @@
 </g>
 </mask>
 <g mask="url(#mask0_28_37448)">
-<rect width="24" height="24" fill="#637381"/>
+<rect width="24" height="24" fill="currentColor"/>
 </g>
 <defs>
 <clipPath id="clip0_28_37448">
diff --git a/src/layouts/Dashboard/Sidebar.tsx b/src/layouts/Dashboard/Sidebar.tsx
index baa2457..302ccfb 100644
--- a/src/layouts/Dashboard/Sidebar.tsx
+++ b/src/layouts/Dashboard/Sidebar.tsx
@@ -110,7 +110,7 @@ export default function Sidebar({
                   selected={menu.link === location.pathname}
                 >
                   <ListItemIcon>
-                    <ReactSVG src={menu.icon} fill="#f0d0d0" />
+                    <ReactSVG src={menu.icon} />
                   </ListItemIcon>
                   <ListItemText primary={menu.title} />
                 </ListItemButton>
diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
index f7bac7c..df5cef0 100644
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@@ -48,7 +48,7 @@ export default function Login() {
         <Grid container justifyContent={"space-between"} alignItems={"center"}>
           <Grid>
             <FormControlLabel
-              control={<Checkbox value="remember" color="primary" />}
+              control={<Checkbox value="remember" color="secondary" />}
               label="Remember me"
             />
           </Grid>
diff --git a/src/theme/components/Checkbox.tsx b/src/theme/components/Checkbox.tsx
index 3966029..8e380fe 100644
--- a/src/theme/components/Checkbox.tsx
+++ b/src/theme/components/Checkbox.tsx
@@ -75,14 +75,14 @@ export default function Checkbox(theme: Theme) {
     MuiCheckbox: {
       defaultProps: {
         className: 'size-medium',
-        icon: <Stop />,
-        checkedIcon: <TickSquare variant="Bold" />,
-        indeterminateIcon: <MinusSquare variant="Bold" />
+        icon: <Stop color={palette.secondary[400]} />,
+        checkedIcon: <TickSquare variant="Bold" color={palette.primary.main} />,
+        indeterminateIcon: <MinusSquare variant="Bold" color={palette.primary.main} />
       },
       styleOverrides: {
         root: {
           borderRadius: 0,
-          color: palette.secondary[300],
+          color: palette.secondary[400],
           '&.size-small': {
             ...checkboxStyle('small')
           },
diff --git a/src/theme/components/ListItemButton.ts b/src/theme/components/ListItemButton.ts
index 72e8170..f37930e 100644
--- a/src/theme/components/ListItemButton.ts
+++ b/src/theme/components/ListItemButton.ts
@@ -16,6 +16,9 @@ export default function ListItemButton(theme: Theme) {
               color: theme.palette.primary.main,
             },
           },
+          "& .MuiListItemIcon-root": {
+            color: "inherit",
+          },
         },
       },
     },