Merge pull request #775 from amitamrutiya/modal-header

update the gradient for the modal header diff for the dark and light mode
layer5io · Oct 29, 2024 · dfb799c · dfb799c
2 parents 9ff8a84 + 81e3623
commit dfb799c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/custom/Modal/index.tsx b/src/custom/Modal/index.tsx
@@ -4,6 +4,7 @@ import { Box, Dialog, IconButton, Paper, Typography } from '../../base';
 import { ContainedButton, OutlinedButton, TextButton } from '../../base/Button/Button';
 import { iconLarge, iconMedium } from '../../constants/iconsSizes';
 import { CloseIcon, InfoCircleIcon } from '../../icons';
+import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
 import { CustomTooltip } from '../CustomTooltip';
 
 interface ModalProps extends DialogProps {
@@ -54,8 +55,8 @@ const StyledDialog = styled(Dialog)`
   }
 `;
 
-export const ModalStyledHeader = styled('div')(() => ({
-  background: 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)',
+export const ModalStyledHeader = styled('div')(({ theme }) => ({
+  background: theme.palette.mode === 'light' ? lightModalGradient.header : darkModalGradient.header,
   color: '#eee',
   display: 'flex',
   justifyContent: 'space-between',
@@ -108,15 +109,20 @@ const StyledFooter = styled('div', {
   shouldForwardProp: (prop) => prop !== 'variant'
 })<ModalFooterProps>(({ theme, variant, hasHelpText }) => ({
   background:
-    variant == 'filled' ? 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)' : 'transparent',
+    variant === 'filled'
+      ? theme.palette.mode === 'light'
+        ? lightModalGradient.fotter
+        : darkModalGradient.fotter
+      : 'transparent',
   display: 'flex',
   alignItems: 'center',
   justifyContent: hasHelpText ? 'space-between' : 'end',
   padding: '1rem',
   gap: '1rem',
 
   '&& .InfoCircleIcon': {
-    color: variant == 'filled' ? theme.palette.common.white : theme.palette.background.info?.default
+    color:
+      variant === 'filled' ? theme.palette.common.white : theme.palette.background.info?.default
   }
 }));
 

diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts
@@ -7,6 +7,7 @@ export const KEPPEL = '#00B39F';
 export const DARK_KEPPEL = '#00A18F';
 export const CARIBBEAN_GREEN = '#00D3A9';
 export const TEAL_BLUE = '#477E96';
+export const DARK_TEAL_BLUE = '#3B687B';
 export const CHARCOAL = '#3C494F';
 export const BLACK = '#000000';
 export const MIDNIGHT_BLACK = '#111111';
@@ -324,6 +325,15 @@ export const buttonDelete = {
   hover: redDelete.light
 };
 
+export const darkModalGradient = {
+  header: `linear-gradient(90deg, ${charcoal[30]} 0%, ${accentGrey[30]} 100%)`,
+  fotter: `linear-gradient(90deg, ${accentGrey[30]} 0%, ${charcoal[30]} 100%)`
+};
+
+export const lightModalGradient = {
+  header: `linear-gradient(90deg, ${TEAL_BLUE} 0%, ${DARK_TEAL_BLUE} 100%)`,
+  fotter: `linear-gradient(90deg, ${DARK_TEAL_BLUE} 0%, ${TEAL_BLUE} 100%)`
+};
 /**
  * Notification Colors
  */