Update color pallete and toggle button component

Author: geodem127

Diff for: src/theme/index.tsx

@@ -121,15 +121,9 @@ const components: Components = {
     styleOverrides: {
       groupedContainedPrimary: ({ theme }: { theme: any }) => ({
         color: theme.palette.primary.main,
-        backgroundColor: alpha(
-          theme.palette.primary.main,
-          theme.palette.action.hoverOpacity
-        ),
+				backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
         "&:hover": {
-          backgroundColor: alpha(
-            theme.palette.primary.main,
-            theme.palette.action.selectedOpacity
-          ),
+					backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
         },
       }),
     },
@@ -566,16 +560,10 @@ const components: Components = {
         borderRadius: 4,
         width: "unset",
         "&.Mui-focused:hover": {
-          background: alpha(
-            theme.palette.primary.main,
-            theme.palette.action.selectedOpacity
-          ),
+					background: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
         },
         "&.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focused": {
-          background: alpha(
-            theme.palette.primary.main,
-            theme.palette.action.selectedOpacity
-          ),
+					background: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
           " .MuiTreeItem-label .MuiSvgIcon-root": {
             color: theme.palette.primary.main,
           },
@@ -603,16 +591,11 @@ const components: Components = {
           width: "8px",
           height: "8px",
         },
-        "&::-webkit-scrollbar-track-piece, & *::-webkit-scrollbar-track-piece":
-          ({ theme }: { theme: any }) => ({
+				"&::-webkit-scrollbar-track-piece, & *::-webkit-scrollbar-track-piece": ({ theme }: { theme: any }) => ({
             backgroundColor: theme.palette.grey[100],
             borderRadius: "4px",
           }),
-        "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": ({
-          theme,
-        }: {
-          theme: any;
-        }) => ({
+				"&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": ({ theme }: { theme: any }) => ({
           backgroundColor: theme.palette.grey[300],
           borderRadius: "4px",
         }),
@@ -631,10 +614,7 @@ const components: Components = {
       root: ({ theme }: { theme: any }) => ({
         color: theme.palette.text.secondary,
         "&.Mui-selected": {
-          backgroundColor: alpha(
-            theme.palette.primary.main,
-            theme.palette.action.selectedOpacity
-          ),
+					backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
           color: theme.palette.primary.main,
           svg: {
             color: theme.palette.primary.main,
@@ -676,8 +656,7 @@ const components: Components = {
           width: "8px",
           height: "8px",
         },
-        "&::-webkit-scrollbar-track-piece, & *::-webkit-scrollbar-track-piece":
-          {
+				"&::-webkit-scrollbar-track-piece, & *::-webkit-scrollbar-track-piece": {
             backgroundColor: theme.palette.grey[800],
             borderRadius: "4px",
           },
@@ -689,11 +668,11 @@ const components: Components = {
     },
   },
   MuiToggleButton: {
-    styleOverrides: {
+    styleOverrides: ({ theme }: { theme: any }) => ({
       sizeSmall: {
-        fontSize: "16px",
+        ...theme.typography.body2,
       },
-    },
+    }),
   },
   MuiListItemText: {
     styleOverrides: {
@@ -749,8 +728,7 @@ const components: Components = {
     },
     styleOverrides: {
       select: ({ theme }: { theme: any }) => ({
-        "&.MuiSelect-outlined.MuiInputBase-input.MuiOutlinedInput-input:read-only":
-          {
+				"&.MuiSelect-outlined.MuiInputBase-input.MuiOutlinedInput-input:read-only": {
             color: theme.palette.text.primary,
           },
       }),

Diff for: src/theme/palette.ts

@@ -194,4 +194,4 @@ const darkThemePalette = {
   },
 };
 
-export { lightThemePalette, darkThemePalette };
+export { lightThemePalette, darkThemePalette };