fix: icon active/deactive in sidebar

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">

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>

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>

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')
           },

src/theme/components/ListItemButton.ts

@@ -16,6 +16,9 @@ export default function ListItemButton(theme: Theme) {
               color: theme.palette.primary.main,
             },
           },
+          "& .MuiListItemIcon-root": {
+            color: "inherit",
+          },
         },
       },
     },