Merge pull request #458 from afaneca/457-tweak-improve-light-theme-co…

…ntrast Tweak: improve light theme contrast #457
afaneca · Feb 22, 2025 · ac7a6a6 · ac7a6a6
2 parents 1e11b8a + 4350ed7
commit ac7a6a6
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 17 deletions.
diff --git a/src/features/auth/RecoverPassword.tsx b/src/features/auth/RecoverPassword.tsx
@@ -217,8 +217,8 @@ const RecoverPassword = () => {
           <img
             src={
               theme.palette.mode === 'dark'
-                ? '/res/logo_white_font_transparent_bg.png'
-                : '/res/logo_transparent_bg_v2.png'
+                ? '/res/logo_light_transparentbg.png'
+                : '/res/logo_dark_transparentbg.png'
             }
             width="60%"
             style={{ marginBottom: 20 }}

diff --git a/src/features/budgets/list/BudgetList.tsx b/src/features/budgets/list/BudgetList.tsx
@@ -246,13 +246,17 @@ const BudgetList = () => {
       filterable: false,
       renderCell: (params) => (
         <Chip
-          color={getPercentageTextColor(params.value)}
+          color={
+            params.value.highlighted
+              ? 'default'
+              : getPercentageTextColor(params.value.value)
+          }
           label={
-            params.value == 0
+            params.value.value == 0
               ? '-%'
-              : formatNumberAsPercentage(params.value, true)
+              : formatNumberAsPercentage(params.value.value, true)
           }
-          variant="filled"
+          variant={params.value.highlighted ? 'filled' : 'outlined'}
           size="small"
         />
       ),
@@ -308,7 +312,10 @@ const BudgetList = () => {
       changePercentage: result.balance_change_percentage,
       highlighted: shouldRowBeHighlighted(result),
     },
-    savings: result.savings_rate_percentage,
+    savings: {
+      value: result.savings_rate_percentage,
+      highlighted: shouldRowBeHighlighted(result),
+    },
     actions: result,
   }));
 

diff --git a/src/features/invest/InvestDashboard.tsx b/src/features/invest/InvestDashboard.tsx
@@ -87,6 +87,10 @@ const TopPerformerCard = (props: {
         ':hover': {
           boxShadow: 20, // theme.shadows[20]
         },
+        backgroundColor:
+          theme.palette.mode === 'dark' || !props.isExpanded
+            ? 'background.paper'
+            : 'background.default',
       }}
     >
       <CardContent>
@@ -143,8 +147,17 @@ const SummaryCard = (props: {
   absoluteValue: string;
   percentageValue?: number;
 }) => {
+  const theme = useTheme();
   return (
-    <Card sx={{ height: 120 }}>
+    <Card
+      sx={{
+        height: 120,
+        backgroundColor:
+          theme.palette.mode === 'dark'
+            ? 'background.paper'
+            : 'background.default',
+      }}
+    >
       <CardContent
         sx={{
           height: '100%',

diff --git a/src/features/profile/Profile.tsx b/src/features/profile/Profile.tsx
@@ -64,7 +64,16 @@ const Profile = () => {
         </Box>
         <Stack spacing={2} alignItems="flex-start">
           {/* Change language */}
-          <Accordion sx={{ width: '100%', maxWidth: '700px' }}>
+          <Accordion
+            sx={{
+              width: '100%',
+              maxWidth: '700px',
+              backgroundColor:
+                theme.palette.mode === 'dark'
+                  ? 'background.paper'
+                  : 'background.default',
+            }}
+          >
             <AccordionSummary
               expandIcon={<ExpandMoreIcon />}
               aria-controls="language-content"
@@ -103,7 +112,16 @@ const Profile = () => {
             </AccordionDetails>
           </Accordion>
           {/* Change theme */}
-          <Accordion sx={{ width: '100%', maxWidth: '700px' }}>
+          <Accordion
+            sx={{
+              width: '100%',
+              maxWidth: '700px',
+              backgroundColor:
+                theme.palette.mode === 'dark'
+                  ? 'background.paper'
+                  : 'background.default',
+            }}
+          >
             <AccordionSummary
               expandIcon={<ExpandMoreIcon />}
               aria-controls="theme-content"
@@ -142,7 +160,16 @@ const Profile = () => {
             </AccordionDetails>
           </Accordion>
           {/* Change password */}
-          <Accordion sx={{ width: '100%', maxWidth: '700px' }}>
+          <Accordion
+            sx={{
+              width: '100%',
+              maxWidth: '700px',
+              backgroundColor:
+                theme.palette.mode === 'dark'
+                  ? 'background.paper'
+                  : 'background.default',
+            }}
+          >
             <AccordionSummary
               expandIcon={<ExpandMoreIcon />}
               aria-controls="password-content"
@@ -164,7 +191,16 @@ const Profile = () => {
             </AccordionDetails>
           </Accordion>
           {/* Utilities */}
-          <Accordion sx={{ width: '100%', maxWidth: '700px' }}>
+          <Accordion
+            sx={{
+              width: '100%',
+              maxWidth: '700px',
+              backgroundColor:
+                theme.palette.mode === 'dark'
+                  ? 'background.paper'
+                  : 'background.default',
+            }}
+          >
             <AccordionSummary
               expandIcon={<ExpandMoreIcon />}
               aria-controls="tools-content"
@@ -186,7 +222,16 @@ const Profile = () => {
             </AccordionDetails>
           </Accordion>
           {/* Stats for nerds */}
-          <Accordion sx={{ width: '100%', maxWidth: '700px' }}>
+          <Accordion
+            sx={{
+              width: '100%',
+              maxWidth: '700px',
+              backgroundColor:
+                theme.palette.mode === 'dark'
+                  ? 'background.paper'
+                  : 'background.default',
+            }}
+          >
             <AccordionSummary
               expandIcon={<ExpandMoreIcon />}
               aria-controls="stats-content"

diff --git a/src/features/setup/Setup.tsx b/src/features/setup/Setup.tsx
@@ -1,6 +1,6 @@
 import { Step, StepButton, Stepper, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import PageHeader from '../../components/PageHeader.tsx';
 import Box from '@mui/material/Box/Box';
 import Paper from '@mui/material/Paper/Paper';
@@ -11,12 +11,15 @@ import SetupStep2 from './SetupStep2.tsx';
 import SetupStep3 from './SetupStep3.tsx';
 import { useNavigate } from 'react-router-dom';
 import { ROUTE_AUTH } from '../../providers/RoutesProvider.tsx';
+import { useAuthStatus } from '../../services/auth/authHooks.ts';
+import { useLoading } from '../../providers/LoadingProvider.tsx';
 
 const Setup = () => {
   const theme = useTheme();
   const { t } = useTranslation();
+  const loader = useLoading();
   const navigate = useNavigate();
-
+  const authStatus = useAuthStatus(true);
   const steps = [
     t('setup.step0Label'),
     t('setup.step1Label'),
@@ -36,6 +39,21 @@ const Setup = () => {
     navigate(ROUTE_AUTH);
   };
 
+  useEffect(() => {
+    if (!authStatus.isPending && !authStatus.needsSetup) {
+      goToAuth();
+    }
+  }, [authStatus]);
+
+  useEffect(() => {
+    // Show loading indicator when isLoading is true
+    if (authStatus.isPending) {
+      loader.showLoading();
+    } else {
+      loader.hideLoading();
+    }
+  }, [authStatus.isPending]);
+
   const renderStepContent = (step: number) => {
     switch (step) {
       case 0:
@@ -79,8 +97,8 @@ const Setup = () => {
           <img
             src={
               theme.palette.mode === 'dark'
-                ? '/res/logo_white_font_transparent_bg.png'
-                : '/res/logo_transparent_bg_v2.png'
+                ? '/res/logo_light_transparentbg.png'
+                : '/res/logo_dark_transparentbg.png'
             }
             width="60%"
             style={{ marginBottom: 20 }}