Refactored button group styling

Client/src/Utils/Theme/darkTheme.js

@@ -25,12 +25,13 @@ const darkTheme = createTheme({
   palette: {
     mode: "dark",
     primary: { main: "#1570ef" },
+    secondary: { main: "#2e2e2e" },
     text: text,
     background: background,
     border: border,
     info: {
       text: text.primary,
-      main: text.primary,
+      main: text.secondary,
       bg: background.main,
       light: background.main,
       border: border.light,
@@ -65,9 +66,6 @@ const darkTheme = createTheme({
       grid: "#454546",
     },
     // TO BE REMOVED //
-    secondary: {
-      main: "#e6e6e6",
-    },
     tertiary: {
       main: "#e6e6e6",
     },
@@ -80,8 +78,26 @@ const darkTheme = createTheme({
         disableRipple: true,
       },
       styleOverrides: {
-        root: {
-          variants: [],
+        root: ({ theme }) => ({
+          variants: [
+            {
+              props: (props) => props.variant === "group",
+              style: {
+                color: theme.palette.secondary.contrastText,
+                backgroundColor: theme.palette.background.main,
+                border: 1,
+                borderStyle: "solid",
+                borderColor: theme.palette.border.light,
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === "group" && props.filled === "true",
+              style: {
+                backgroundColor: theme.palette.secondary.main,
+              },
+            },
+          ],
           fontWeight: 400,
           borderRadius: 4,
           boxShadow: "none",
@@ -92,7 +108,7 @@ const darkTheme = createTheme({
           "&:hover": {
             boxShadow: "none",
           },
-        },
+        }),
       },
     },
     MuiIconButton: {

Client/src/Utils/Theme/lightTheme.js

@@ -23,12 +23,13 @@ const lightTheme = createTheme({
   typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
   palette: {
     primary: { main: "#1570EF" },
+    secondary: { main: "#F4F4F4", dark: "#e3e3e3", contrastText: "#475467" },
     text: text,
     background: background,
     border: border,
     info: {
       text: text.primary,
-      main: text.primary,
+      main: text.secondary,
       bg: background.main,
       light: background.main,
       border: border.dark,
@@ -62,9 +63,6 @@ const lightTheme = createTheme({
       grid: "#a2a3a3",
     },
     // TO BE REMOVED //
-    secondary: {
-      main: "#475467",
-    },
     tertiary: {
       main: "#475467",
     },
@@ -77,8 +75,26 @@ const lightTheme = createTheme({
         disableRipple: true,
       },
       styleOverrides: {
-        root: {
-          variants: [],
+        root: ({ theme }) => ({
+          variants: [
+            {
+              props: (props) => props.variant === "group",
+              style: {
+                color: theme.palette.secondary.contrastText,
+                backgroundColor: theme.palette.background.main,
+                border: 1,
+                borderStyle: "solid",
+                borderColor: theme.palette.border.light,
+              },
+            },
+            {
+              props: (props) =>
+                props.variant === "group" && props.filled === "true",
+              style: {
+                backgroundColor: theme.palette.secondary.main,
+              },
+            },
+          ],
           fontWeight: 400,
           borderRadius: 4,
           boxShadow: "none",
@@ -89,7 +105,7 @@ const lightTheme = createTheme({
           "&:hover": {
             boxShadow: "none",
           },
-        },
+        }),
       },
     },
     MuiIconButton: {