Update color pallete and toggle button component

Author: geodem127

Diff for: src/theme/index.tsx

@@ -689,11 +689,11 @@ const components: Components = {
     },
   },
   MuiToggleButton: {
-    styleOverrides: {
+    styleOverrides: ({ theme }: { theme: any }) => ({
       sizeSmall: {
-        fontSize: "16px",
+        ...theme.typography.body2,
       },
-    },
+    }),
   },
   MuiListItemText: {
     styleOverrides: {
@@ -783,4 +783,4 @@ export let darkTheme = createTheme(theme, {
       },
     },
   },
-});
+});

Diff for: src/theme/palette.ts

@@ -36,6 +36,7 @@ const lightThemePalette: PaletteOptions = {
     main: "#12B76A",
     dark: "#027A48",
     light: "#D1FADF",
+	contrastText: "#ffffff",
   },
   warning: {
     main: "#F79009",
@@ -51,6 +52,7 @@ const lightThemePalette: PaletteOptions = {
     main: "#0BA5EC",
     dark: "#026AA2",
     light: "#7CD4FD",
+	contrastText: "#ffffff",
   },
   text: {
     primary: "#101828",
@@ -167,11 +169,11 @@ const lightThemePalette: PaletteOptions = {
   },
   border: "#F2F4F7",
   action: {
-    active: "rgba(16, 24, 40, 0.40)",
+    active: "rgba(127, 127, 126, 0.6)",
     hover: "rgba(16, 24, 40, 0.04)",
-    selected: "rgba(16, 24, 40, 0.08)",
-    disabled: "rgba(16, 24, 40, 0.26)",
-    disabledBackground: "rgba(16, 24, 40, 0.12)",
+    selected: "rgba(127,127, 126, 0.13)",
+	disabled: "rgba(127,127, 126, 0.48)",
+	disabledBackground: "rgba(127,127, 126, 0.2)",
     focus: "rgba(16, 24, 40, 0.12)",
   },
 };
@@ -194,4 +196,4 @@ const darkThemePalette = {
   },
 };
 
-export { lightThemePalette, darkThemePalette };
+export { lightThemePalette, darkThemePalette };