Merge pull request layer5io#604 from sudhanshutech/correct/styles

Add correct styles in modal button for different category

Author: nebula-aac

src/custom/Modal/index.tsx

@@ -173,17 +173,21 @@ export const ModalFooter: React.FC<ModalFooterProps> = ({ helpText, children, va
 export const ModalButtonPrimary: React.FC = styled(ContainedButton)(({ theme }) => ({
   backgroundColor: theme.palette.background.brand?.default,
   color: theme.palette.text.constant?.white,
+  '&:hover': {
+    background: theme.palette.background.brand?.hover
+  },
   '&.MuiButton-contained.Mui-disabled': {
-    color: theme.palette.text.disabled,
-    backgroundColor: theme.palette.primary.disabled
+    color: theme.palette.text.constant?.disabled,
+    backgroundColor: theme.palette.background.constant?.disabled
   }
 }));
 
 // ModalButtonSecondary
 export const ModalButtonSecondary = styled(OutlinedButton)(({ theme }) => ({
   '&.MuiButton-outlined': {
-    border: `1px solid ${theme.palette.common.white}`,
+    border: `1px solid ${theme.palette.background.constant?.white}`,
     color: theme.palette.text.constant?.white,
+    backgroundColor: 'transparent',
     '&:hover': {
       background: 'transparent',
       color: theme.palette.text.constant?.white
@@ -192,7 +196,7 @@ export const ModalButtonSecondary = styled(OutlinedButton)(({ theme }) => ({
   '&.MuiButton-outlined.Mui-disabled': {
     color: theme.palette.text.disabled,
     border: 'none',
-    backgroundColor: theme.palette.secondary.disabled
+    backgroundColor: theme.palette.background.brand?.disabled
   }
 }));
 
@@ -204,5 +208,8 @@ export const ModalButtonTertiary = styled(TextButton)(({ theme }) => ({
 // ModalButtonDanger
 export const ModalButtonDanger = styled(ContainedButton)(({ theme }) => ({
   backgroundColor: theme.palette.background.error?.default,
-  color: theme.palette.text.constant?.white
+  color: theme.palette.text.constant?.white,
+  '&:hover': {
+    background: theme.palette.background.error?.hover
+  }
 }));

src/theme/palette.ts

@@ -30,6 +30,10 @@ declare module '@mui/material/styles' {
       hover: string;
       pressed: string;
     };
+    constant?: {
+      disabled: string;
+      white: string;
+    };
     inverse?: string;
     brand?: Interactiveness;
     cta?: Interactiveness;
@@ -58,6 +62,7 @@ declare module '@mui/material/styles' {
     };
     constant?: {
       white: string;
+      disabled: string;
     };
   }
 
@@ -77,6 +82,7 @@ declare module '@mui/material/styles' {
     };
     constant?: {
       white: string;
+      disabled: string;
     };
     inverse?: string;
     brand?: Interactiveness;
@@ -107,6 +113,7 @@ declare module '@mui/material/styles' {
     };
     constant?: {
       white: string;
+      disabled: string;
     };
     inverse?: string;
     brand?: Interactiveness;
@@ -239,7 +246,11 @@ export const lightModePalette: PaletteOptions = {
       secondary: Colors.red[60],
       tertiary: Colors.red[70]
     },
-    code: Colors.charcoal[90]
+    code: Colors.charcoal[90],
+    constant: {
+      white: Colors.accentGrey[100],
+      disabled: Colors.charcoal[70]
+    }
   },
   text: {
     default: Colors.charcoal[10],
@@ -257,7 +268,8 @@ export const lightModePalette: PaletteOptions = {
       alt: Colors.charcoal[40]
     },
     constant: {
-      white: Colors.charcoal[100]
+      white: Colors.charcoal[100],
+      disabled: Colors.charcoal[50]
     }
   },
   border: {
@@ -346,7 +358,11 @@ export const darkModePalette: PaletteOptions = {
       secondary: Colors.red[20],
       tertiary: Colors.red[10]
     },
-    code: Colors.accentGrey[90]
+    code: Colors.accentGrey[90],
+    constant: {
+      white: Colors.accentGrey[100],
+      disabled: Colors.charcoal[70]
+    }
   },
   text: {
     default: Colors.charcoal[100],
@@ -364,7 +380,8 @@ export const darkModePalette: PaletteOptions = {
       alt: Colors.keppel[40]
     },
     constant: {
-      white: Colors.charcoal[100]
+      white: Colors.charcoal[100],
+      disabled: Colors.charcoal[50]
     }
   },
   border: {