Issue #PS-000 fix: Dark theme color fixed on login page

tekdi · Sep 17, 2024 · 1234a0f · 1234a0f
1 parent 322f057
commit 1234a0f
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 14 deletions.
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
@@ -376,7 +376,7 @@ const LoginPage = () => {
                     borderRadius: '16px',
                     boxShadow:
                       darkMode === 'dark'
-                        ? 'rgba(255, 255, 255, 0.8) 0px 2px 8px 0px'
+                        ? 'rgba(0, 0, 0, 0.9) 0px 2px 8px 0px'
                         : 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
                   },
                 }}
@@ -401,7 +401,7 @@ const LoginPage = () => {
                         displayEmpty
                         style={{
                           borderRadius: '0.5rem',
-                          color: theme.palette.warning['A200'],
+                          // color: theme.palette.warning['A200'],
                           width: '117px',
                           height: '32px',
                           marginBottom: '0rem',
@@ -504,8 +504,9 @@ const LoginPage = () => {
                     {t('LOGIN_PAGE.FORGOT_PASSWORD')}
                   </Box>
 
-                  <Box marginTop={'1.2rem'} className="remember-me-checkbox">
+                  <Box marginTop={'1.2rem'} className="">
                     <Checkbox
+                    // color="info"
                       onChange={(e) => setRememberMe(e.target.checked)}
                       checked={rememberMe}
                       inputProps={{ 'aria-label': 'Remember Me' }}
@@ -541,6 +542,7 @@ const LoginPage = () => {
                   >
                     <Button
                       variant="contained"
+                      color="primary"
                       type="submit"
                       fullWidth={true}
                       disabled={isButtonDisabled}

diff --git a/src/styles/customTheme.tsx b/src/styles/customTheme.tsx
@@ -1,18 +1,22 @@
-import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import { experimental_extendTheme as extendTheme, getContrastRatio } from '@mui/material/styles';
 
 // Common component style overrides
 const commonComponents = {
   MuiButton: {
     styleOverrides: {
-      root: {
-        borderRadius: '100px',
-        border: '1px solid #1E1B16',
-        color: '#1E1B16',
+      root: ({ theme }: any) => {
+        const lightA400 = theme.colorSchemes.light.palette.warning.A400;
+        const darkA400 = theme.colorSchemes.dark.palette.warning.A400;
+        return {
+          borderRadius: '100px',
+          border: '1px solid #1E1B16',
+          color: theme.palette.mode === 'dark' ? lightA400 : darkA400, // Replace with a valid color value
+        };
       },
-      containedPrimary: {
-        backgroundColor: '#FDBE16',
+      containedPrimary: ({ theme }: any) => ({
         border: 'none',
-      },
+        color: getContrastRatio(theme.palette.primary.main, '#FFFFFF') >= 3 ? '#FFFFFF' : '#000000',
+      }),
       outlinedPrimary: {
         backgroundColor: 'none',
         border: '1px solid #1E1B16',
@@ -29,8 +33,18 @@ const commonComponents = {
   },
   MuiTextField: {
     styleOverrides: {
-      root: {
-        width: '100%',
+      root: ({ theme }: any) => {
+        const lightA400 = theme.colorSchemes.light.palette.warning.A400;
+        const darkA400 = theme.colorSchemes.dark.palette.warning.A400;
+
+        return {
+          width: '100%',
+          '& .MuiInputBase-input:-webkit-autofill': {
+            '-webkit-box-shadow': `0 0 0 100px ${theme.palette?.warning?.A400 || '#000'} inset`,
+            '-webkit-text-fill-color':
+              theme.palette.mode === 'dark' ? lightA400 : darkA400,
+          },
+        };
       },
     },
   },
@@ -56,6 +70,22 @@ const commonComponents = {
     styleOverrides: {
       root: {
         '&.Mui-focused .MuiOutlinedInput-notchedOutline': {},
+        // background: '#BA1A1A'
+      },
+    },
+  },
+  MuiCheckbox: {
+    styleOverrides: {
+      root: ({ theme }: any) => {
+        const lightA400 = theme.colorSchemes.light.palette.warning.A400;
+        const darkA400 = theme.colorSchemes.dark.palette.warning.A400;
+
+        return {
+          color: theme.palette.mode === 'dark' ? lightA400 : darkA400, // Checkbox default color based on the opposite theme
+          '&.Mui-checked': {
+            color: theme.palette.mode === 'dark' ? lightA400 : darkA400, // Checked color based on opposite theme
+          },
+        };
       },
     },
   },
@@ -139,7 +169,7 @@ const customTheme = extendTheme({
           '900': '#CCCCCC',
           A100: '#E6E6E6',
           A200: '#4D4639',
-          A400: '#000000',
+          A400: '#121212', // #222831
           A700: '#FFFFFF',
         },
         error: {