Fixed colors for action buttons

Author: Sharma

packages/react-sdk-components/src/components/infra/ActionButtons/ActionButtons.tsx

@@ -10,10 +10,18 @@ interface ActionButtonsProps {
   onButtonPress: any;
 }
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
   divider: {
     marginTop: '10px',
     marginBottom: '10px'
+  },
+  secondaryButton: {
+    backgroundColor: theme.actionButtons.secondary.backgroundColor,
+    color: theme.actionButtons.secondary.color
+  },
+  primaryButton: {
+    backgroundColor: theme.actionButtons.primary.backgroundColor,
+    color: theme.actionButtons.primary.color
   }
 }));
 
@@ -36,7 +44,7 @@ export default function ActionButtons(props: ActionButtonsProps) {
             {arSecondaryButtons.map(sButton => (
               <Grid2 key={sButton.name}>
                 <Button
-                  // className={classes.secondaryButton}
+                  className={classes.secondaryButton}
                   color='secondary'
                   variant='contained'
                   onClick={() => {
@@ -54,7 +62,7 @@ export default function ActionButtons(props: ActionButtonsProps) {
             {arMainButtons.map(mButton => (
               <Grid2 key={mButton.name}>
                 <Button
-                  // className={classes.primaryButton}
+                  className={classes.primaryButton}
                   color='primary'
                   variant='contained'
                   onClick={() => {

packages/react-sdk-components/src/theme.ts

@@ -139,6 +139,16 @@ const lightTheme = createTheme({
       }
     }
   },
+  actionButtons: {
+    primary: {
+      backgroundColor: '#cc0f60',
+      color: '#FFFFFF'
+    },
+    secondary: {
+      backgroundColor: '#3F51B5',
+      color: '#FFFFFF'
+    }
+  },
   modal: {
     backgroundColor: 'rgba(100, 100, 100, 0.4)',
     topColor: 'white'
@@ -196,6 +206,16 @@ const darkTheme = createTheme({
       }
     }
   },
+  actionButtons: {
+    primary: {
+      backgroundColor: '#C70BB5',
+      color: '#FFFFFF'
+    },
+    secondary: {
+      backgroundColor: '#FFFFFF',
+      color: '#C70BB5'
+    }
+  },
   embedded: {
     resolutionTextColor: 'darkslategray'
   },