feat: Added style adaption fix fox the DirectEntry and the SelectHeader row style (#1033)

Author: thisismayuresh

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

@@ -532,7 +532,6 @@ export function Container({ children }: PropsWithChildren<{}>) {
                     // Ensure text remains visible
                     color: 'var(--text-color)',
 
-                    // Make sure all child elements maintain proper text color
                     '& td': {
                       color: 'var(--text-color)',
                     },

apps/widget/src/components/widget/Phases/Phase1/DirectEntryView/DirectEntryView.tsx

@@ -23,7 +23,7 @@ export function DirectEntryView({
 }: DirectEntryViewProps) {
   return (
     <Box
-      bg="var(--stepper-background)"
+      bg="var(--primary-background)"
       style={{ borderRadius: 'var(--border-radius)' }}
       pt="sm"
       pl="sm"

apps/widget/src/components/widget/Phases/Phase1/Phase1.Styles.tsx

@@ -6,6 +6,7 @@ const getContentWrapperStyles = (theme: MantineTheme): CSSProperties => ({
   [`@media (min-width: ${theme.breakpoints.sm}px)`]: {
     width: '48%',
   },
+  backgroundColor: 'var(--primary-background)',
 });
 
 export const getTemplateContainerStyles = (): CSSProperties => ({

apps/widget/src/components/widget/Phases/SelectHeader/SelectHeader.styles.tsx

@@ -7,34 +7,70 @@ export default createStyles((theme: MantineTheme): Record<string, any> => {
       borderSpacing: 0,
       borderCollapse: 'separate',
       borderRadius: 'var(--border-radius)',
+
+      '& thead th': {
+        backgroundColor: 'var(--stepper-background) !important',
+        color: 'var(--text-color) !important',
+        fontWeight: '600 !important',
+        borderBottom: '1px solid var(--border-color) !important',
+        padding: '12px !important',
+        textAlign: 'left',
+      },
+
+      '& tbody td': {
+        color: 'var(--text-color) !important',
+        backgroundColor: 'var(--background-color) !important',
+      },
     },
     row: {
       cursor: 'pointer',
+      position: 'relative',
       '&:hover': {
-        backgroundColor: '#DFE2FF',
+        backgroundColor: 'var(--table-hover-background) !important',
       },
     },
     selectedRow: {
-      backgroundColor: '#DFE2FF',
-      fontWeight: 700, // Bold font weight for selected row
+      backgroundColor: `${theme.fn.rgba(theme.colors.primary[5], 0.1)} !important`,
+      fontWeight: 700,
+
       '&:hover': {
-        backgroundColor: '#DFE2FF',
+        backgroundColor: `${theme.fn.rgba(theme.colors.primary[5], 0.15)} !important`,
+      },
+
+      '& td': {
+        backgroundColor: 'transparent !important',
       },
     },
     aboveSelectedRow: {
-      backgroundColor: '#F3F4F6',
-      color: 'var(--label-color)',
-      fontWeight: 300, // Lighter font weight for rows above selected
+      backgroundColor: 'var(--stepper-background) !important',
+      color: 'var(--label-color) !important',
+      fontWeight: 300,
     },
     cell: {
       textWrap: 'nowrap',
-      border: `1px solid ${theme.colors.gray[3]}`,
+      border: '1px solid var(--border-color) !important',
       padding: theme.spacing.xs,
       backgroundColor: 'transparent',
+      color: 'var(--text-color) !important',
+      position: 'relative',
     },
     radioCell: {
       width: '40px',
       textAlign: 'center',
     },
+
+    tableContainer: {
+      position: 'relative',
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: '3px',
+        backgroundColor: 'var(--button-primary-background)',
+        borderRadius: '0 0 var(--border-radius) var(--border-radius)',
+      },
+    },
   };
 });