feat: Updated the styles to better adapt the widget when user applies dark background colour (#1029)

Author: chavda-bhavik

apps/widget/src/components/Common/Container/Container.tsx

@@ -49,7 +49,7 @@ const createErrorSvg = memoize(() => {
   errorSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
   errorSvg.setAttribute('viewBox', '-2 -2 24 24');
   errorSvg.setAttribute('width', '20');
-  errorSvg.setAttribute('fill', 'currentColor');
+  errorSvg.setAttribute('fill', 'var(--error-color)');
   const errorSvgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
   errorSvgPath.setAttribute(
     'd',
@@ -76,9 +76,13 @@ Handsontable.renderers.registerRenderer(
     const hasWarnings = sourceData.warnings?.[name];
     const isUpdated = sourceData.updated?.[name];
 
+    // Reset classes first
     TD.className = 'custom-cell';
     TD.ariaLabel = '';
 
+    // Remove any inline background styles
+    TD.style.backgroundColor = '';
+
     let fieldValue = sourceData.record?.[name] ?? null;
 
     if (typeof fieldValue === 'string' && fieldValue.length > name.length + 20) {
@@ -101,29 +105,30 @@ Handsontable.renderers.registerRenderer(
     if (fieldValue !== null) valueSpan.textContent = fieldValue;
     TD.appendChild(valueSpan);
 
+    // Apply CSS classes instead of inline styles
     if (isUpdated) {
+      TD.classList.add('updated-cell');
       errorSvg.setAttribute('style', memoizedStyles.errorUpdated);
       if (hasError) {
+        TD.classList.add('error-cell');
         TD.appendChild(errorSvg);
       }
-      TD.style.backgroundColor = '#ffda5b';
     } else if (hasError) {
+      TD.classList.add('error-cell');
       errorSvg.setAttribute('style', memoizedStyles.errorOnly);
       TD.appendChild(errorSvg);
-      TD.style.backgroundColor = '#fdebeb';
     } else if (hasWarnings) {
+      TD.classList.add('warning-cell');
       TD.ariaLabel = hasWarnings;
       TD.dataset.cooltipzDir = row < 5 ? 'bottom' : 'top';
       TD.dataset.cooltipzSize = 'fit';
       errorSvg.setAttribute('style', hasWarnings ? memoizedStyles.warningOnly : memoizedStyles.errorUpdated);
       TD.appendChild(errorSvg);
-      TD.style.backgroundColor = '#ffda5b';
     }
 
     return TD;
   }
 );
-
 Handsontable.renderers.registerRenderer(
   'check',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars

apps/widget/src/components/Common/Table/HandsonTable.styles.min.css

@@ -128,7 +128,7 @@ export function Phase3(props: IPhase3Props) {
                 onClick={() => setShowDeleteConfirmModal(true)}
               >
                 {texts.COMMON.DELETE}
-                <Badge variant="light" ml="xs" color="red">
+                <Badge variant="gradient" ml="xs" color="red">
                   {numberFormatter(selectedRowsRef.current.size)}
                 </Badge>
               </Button>

apps/widget/src/components/Common/Table/Table.tsx

@@ -0,0 +1,106 @@
+import { createStyles, MantineTheme } from '@mantine/core';
+
+export const useStyles = createStyles((theme: MantineTheme) => ({
+  modal: {
+    backgroundColor: 'var(--background-color)',
+    borderRadius: theme.radius.md,
+    boxShadow: theme.shadows.md,
+    padding: theme.spacing.xl,
+    color: 'var(--text-color)',
+  },
+
+  header: {
+    marginBottom: '1rem',
+    color: 'var(--text-color)',
+  },
+
+  title: {
+    color: 'var(--text-color)',
+    fontWeight: 600,
+    fontSize: theme.fontSizes.xl,
+  },
+
+  label: {
+    color: 'var(--label-color)',
+    fontWeight: 500,
+    fontSize: theme.fontSizes.lg,
+  },
+
+  input: {
+    color: 'var(--text-color)',
+    backgroundColor: 'var(--background-color)',
+    borderColor: 'var(--border-color)',
+
+    '&::placeholder': {
+      color: 'var(--secondary-text-color)',
+    },
+
+    '&:focus': {
+      borderColor: 'var(--button-primary-background)',
+    },
+  },
+
+  select: {
+    '& .mantine-Select-input': {
+      color: 'var(--text-color)',
+      backgroundColor: 'var(--background-color)',
+      borderColor: 'var(--border-color)',
+    },
+
+    '& .mantine-Select-label': {
+      color: 'var(--label-color)',
+      fontWeight: 500,
+      fontSize: theme.fontSizes.lg,
+    },
+
+    '& .mantine-Select-dropdown': {
+      backgroundColor: 'var(--background-color)',
+      borderColor: 'var(--border-color)',
+    },
+
+    '& .mantine-Select-item': {
+      backgroundColor: 'var(--background-color)',
+      color: 'var(--text-color)',
+
+      '&:hover': {
+        backgroundColor: 'var(--stepper-background)',
+      },
+
+      '&[data-selected]': {
+        backgroundColor: 'var(--button-primary-background)',
+        color: 'var(--button-primary-color)',
+      },
+    },
+  },
+
+  checkbox: {
+    '& .mantine-Checkbox-input': {
+      borderColor: 'var(--border-color)',
+      backgroundColor: 'var(--background-color)',
+
+      '&:checked': {
+        backgroundColor: 'var(--button-primary-background)',
+        borderColor: 'var(--button-primary-background)',
+      },
+    },
+
+    '& .mantine-Checkbox-label': {
+      color: 'var(--text-color)',
+      fontWeight: 500,
+      fontSize: theme.fontSizes.lg,
+    },
+  },
+
+  // Additional utility classes for consistent theming
+  text: {
+    color: 'var(--text-color)',
+  },
+
+  secondaryText: {
+    color: 'var(--secondary-text-color)',
+  },
+
+  labelText: {
+    color: 'var(--label-color)',
+  },
+}));

apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx

@@ -10,6 +10,7 @@ import { Button } from '@ui/Button';
 import { Select } from '@ui/Select';
 import { useAPIState } from '@store/api.context';
 import { useAppState } from '@store/app.context';
+import { useStyles } from './FindReplaceModal.styles';
 
 interface IFindReplaceModalProps {
   opened: boolean;
@@ -22,6 +23,7 @@ interface IFindReplaceModalProps {
 }
 
 export function FindReplaceModal(props: IFindReplaceModalProps) {
+  const { classes } = useStyles();
   const { api } = useAPIState();
   const { uploadInfo } = useAppState();
   const [modifiedCount, setModifiedCount] = useState<number | undefined>();
@@ -60,11 +62,11 @@ export function FindReplaceModal(props: IFindReplaceModalProps) {
     <MantineModal
       centered
       size="lg"
-      padding="xl"
       opened={opened}
       keepMounted={false}
       onClose={onCloseModal}
       title={texts.PHASE3.FIND_REPLACE}
+      classNames={classes}
     >
       <FocusTrap active>
         <form onSubmit={handleSubmit((data) => replaceData(data))}>

apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.styles.tsx

@@ -1,5 +1,4 @@
 import { createStyles, MantineTheme } from '@mantine/core';
-import { colors } from '../../config/colors.config';
 
 const getRootStyles = (theme: MantineTheme): React.CSSProperties => ({
   justifyContent: 'space-between',
@@ -28,7 +27,6 @@ const getSelectionRootStyles = (): React.CSSProperties => ({
 
 const getHeadingStyles = (theme: MantineTheme) => ({
   padding: theme.spacing.xs,
-  backgroundColor: colors.light,
   display: 'flex',
   alignItems: 'center',
   width: '50%',
@@ -53,6 +51,7 @@ export const getSelectStyles = (theme: MantineTheme, height: number): React.CSSP
   border: 'none',
   height: height,
   cursor: 'pointer',
+  backgroundColor: 'var(--background-color)',
 });
 
 export const getSelectRootStyles = (): React.CSSProperties => ({
@@ -66,6 +65,7 @@ export const getStatusTextStyles = (theme: MantineTheme): React.CSSProperties =>
   [`@media (max-width: ${theme.breakpoints.md}px)`]: {
     flexDirection: 'row-reverse',
   },
+  color: 'var(--label-color)',
 });
 
 export const getRequiredStyles = (): React.CSSProperties => ({

apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx

@@ -56,3 +56,29 @@ export function generateShades(color: string, shadesCount = variables.defaultSha
     return shades.reverse();
   }
 }
+
+// Helper function to determine if a color is dark
+export function isColorDark(color: string): boolean {
+  // Remove # if present
+  const hex = color.replace('#', '');
+
+  // Convert to RGB
+  const red = parseInt(hex.substr(0, 2), 16);
+  const green = parseInt(hex.substr(2, 2), 16);
+  const blue = parseInt(hex.substr(4, 2), 16);
+
+  // Calculate luminance using the relative luminance formula
+  const luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;
+
+  return luminance < 0.5;
+}
+
+// Helper function to get contrasting text color
+export function getContrastingTextColor(backgroundColor: string): string {
+  return isColorDark(backgroundColor) ? '#ffffff' : '#000000';
+}
+
+// Helper function to get a lighter version of the text color for secondary text
+export function getSecondaryTextColor(backgroundColor: string): string {
+  return isColorDark(backgroundColor) ? '#e0e0e0' : '#666666';
+}