fix: Design fixes #37 (#40)

* new design login,signup,dashboard,startup page is done * page design has done for 1st phase and need refactorization * unused import removed * routing almost done * Main container margin padding. cart border,color resolve almost fixes #37
techtwig · Oct 12, 2023 · 5cd39d3 · 5cd39d3
1 parent 0a11da6
commit 5cd39d3
Show file tree

Hide file tree

Showing 26 changed files with 749 additions and 945 deletions.
diff --git a/frontend/common/CustomCardDashboard.tsx b/frontend/common/CustomCardDashboard.tsx
@@ -1,6 +1,6 @@
 import {Box, Card, Typography} from '@mui/material';
-import FloodRoundedIcon from '@mui/icons-material/FloodRounded';
 import {FC} from 'react';
+
 interface Props {
   title: string;
   amount: string;
@@ -11,13 +11,13 @@ const CustomCardDashboard: FC<Props> = ({title, amount, icons}) => {
     <Card
       elevation={0}
       sx={{
+        display: 'flex',
         background: '#fff',
         height: '125px',
         flexDirection: 'column',
         borderRadius: '10px',
         width: '125px',
         float: 'left',
-        m: '10px',
       }}>
       <Box
         sx={{

diff --git a/frontend/common/CustomCardDashboardTwo.tsx b/frontend/common/CustomCardDashboardTwo.tsx
@@ -1,6 +1,6 @@
-import {Box, Card, Paper, Typography} from '@mui/material';
-import FloodRoundedIcon from '@mui/icons-material/FloodRounded';
+import {Box, Paper, Typography} from '@mui/material';
 import {FC} from 'react';
+
 interface Props {
   title: string;
   amount: string;
@@ -16,7 +16,6 @@ const CustomCardDashboard: FC<Props> = ({title, amount, icons}) => {
         flexDirection: 'column',
         borderRadius: '20px',
         border: '1px solid #F0EEEF',
-        width: '180px',
       }}>
       <Box
         sx={{

diff --git a/frontend/common/CustomCardForSettings.tsx b/frontend/common/CustomCardForSettings.tsx
@@ -33,7 +33,14 @@ const CustomCardForSetting: FC<Props> = ({title, subTitle}) => {
         <Typography sx={{opacity: '.3'}}>{subTitle}</Typography>
         <Button
           onClick={handleDrewer}
-          sx={{color: '#000', p: '0px 0px', maxWidth: '20px'}}
+          sx={{
+            p: '0px 0px',
+            maxWidth: '20px',
+            color: 'common.white',
+            ':hover': {
+              backgroundColor: 'common.white',
+            },
+          }}
           endIcon={<PlayArrowIcon sx={{color: '#000'}} />}></Button>
 
         <Drawers state={state} setState={setState} />

diff --git a/frontend/common/CustomCardMyWallet2.tsx b/frontend/common/CustomCardMyWallet2.tsx
@@ -18,18 +18,18 @@ const CustomCardMyWallet2: FC<Props> = ({title, amount, icons}) => {
         display: 'flex',
         background: '#fff',
         borderRadius: '20px',
-        border: '1px solid #F0EEEF',
+        border: '2px solid #F0EEEF',
         justifyContent: 'space-between',
         alignItems: 'center',
+        p: '10px',
       }}>
       <Grid
         item
         xs={1.5}
         sx={{
-          height: '50px',
-          width: '50px',
-          m: '6px',
-          backgroundColor: '#EBE9ED',
+          height: '45px',
+          width: '45px',
+          backgroundColor: '#ADABAD',
           borderRadius: '14px',
           color: '#fff',
           display: 'flex',
@@ -39,7 +39,7 @@ const CustomCardMyWallet2: FC<Props> = ({title, amount, icons}) => {
         {icons}
       </Grid>
       <Grid item xs={5} sx={{pl: '10px'}}>
-        <Typography sx={{fontSize: '17px', fontWeight: '700'}}>
+        <Typography sx={{fontSize: '15px', fontWeight: '700'}}>
           {title}
         </Typography>
         <Typography
@@ -60,7 +60,6 @@ const CustomCardMyWallet2: FC<Props> = ({title, amount, icons}) => {
           display: 'flex',
           alignItems: 'end',
           justifyContent: 'right',
-          pr: '10px',
         }}>
         <Button
           sx={{color: '#000', p: '0px 0px'}}

diff --git a/frontend/common/CustomHorizontalCard.tsx b/frontend/common/CustomHorizontalCard.tsx
@@ -64,7 +64,7 @@ const CustomHorizontalCard: FC<Props> = ({
           color: '#fff',
           display: 'flex',
           alignItems: 'center',
-          justifyContent: 'center',
+          justifyContent: 'right',
         }}>
         {icons2}
       </Grid>
@@ -79,6 +79,7 @@ const CustomHorizontalCard: FC<Props> = ({
           fontWeight: '700',
           textAlign: 'right',
           pr: '9px',
+          opacity: '.4',
         }}>
         {amount}
       </Grid>

diff --git a/frontend/common/CustomMyWalletCart.tsx b/frontend/common/CustomMyWalletCart.tsx
@@ -14,10 +14,23 @@ const CustomCardMyWallet: FC<Props> = ({title, icons}) => {
         background: '#fff',
         flexDirection: 'column',
         borderRadius: '20px',
-        border: '1px solid #F0EEEF',
-        width: '180px',
+        border: '2px solid #F0EEEF',
+        p: '10px',
       }}>
-      <Box>{icons}</Box>
+      <Box
+        sx={{
+          height: '45px',
+          width: '45px',
+          backgroundColor: '#ADABAD',
+          borderRadius: '14px',
+          color: '#fff',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          m: '10px',
+        }}>
+        {icons}
+      </Box>
       <Box>
         <Typography
           sx={{
@@ -26,7 +39,7 @@ const CustomCardMyWallet: FC<Props> = ({title, icons}) => {
             ml: '10px',
             mt: '1px',
             fontWeight: '700',
-            width: '70%',
+            width: '60%',
           }}>
           {title}
         </Typography>

diff --git a/frontend/common/addTransaction/CustomButtonText.tsx b/frontend/common/addTransaction/CustomButtonText.tsx
@@ -6,9 +6,11 @@ const CustomButtonIcon = ({children, onClickBtn, backGround, icons}: any) => {
     <Card
       elevation={0}
       sx={{
-        background: '#fff',
+        background: '#FAF9FA',
         flexDirection: 'column',
         borderRadius: '10px',
+        display: 'flex',
+        textAlign: 'center',
       }}>
       <Box
         onClick={onClickBtn}

diff --git a/frontend/common/addTransaction/CustomButtonWithIcon.tsx b/frontend/common/addTransaction/CustomButtonWithIcon.tsx
@@ -15,14 +15,13 @@ const CustomButtonIcon1 = ({
         background: '#fff',
         flexDirection: 'column',
         borderRadius: borderRadius ? borderRadius : '10px',
-        m: '10px',
       }}>
       <Box
         onClick={onClickBtn}
         sx={{
           backgroundColor: backGround,
           color: '#040303',
-          padding: '5px 5px',
+          padding: '10px',
           borderRadius: '15px',
           textAlign: 'center',
           fontWeight: '600',

diff --git a/frontend/common/budget/CustomCardBudget.tsx b/frontend/common/budget/CustomCardBudget.tsx
@@ -1,6 +1,7 @@
 import {Box, Divider, Grid, Typography} from '@mui/material';
 import {FC} from 'react';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import {CardBorder} from '@/core/enums';
 
 interface Props {
   title: string;
@@ -11,8 +12,8 @@ interface Props {
 }
 const CustomBudgetCard: FC<Props> = ({title, amount, icons, budgetTitle}) => {
   return (
-    <Grid container sx={{border: '2px solid #F3F1F4', borderRadius: '15px'}}>
-      <Grid item xs={2}>
+    <Grid container sx={{border: CardBorder.TWO_PX, borderRadius: '15px'}}>
+      <Grid item xs={2} sx={{display: 'flex', alignItems: 'center'}}>
         {icons}
       </Grid>
       <Grid item xs={10}>
@@ -22,7 +23,7 @@ const CustomBudgetCard: FC<Props> = ({title, amount, icons, budgetTitle}) => {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
-            pr: '12px',
+            pr: '16px',
           }}>
           <Grid item xs={6}>
             <Typography sx={{fontSize: '14px', fontWeight: '700'}}>
@@ -48,7 +49,7 @@ const CustomBudgetCard: FC<Props> = ({title, amount, icons, budgetTitle}) => {
             }}>
             <Box>
               <EditRoundedIcon
-                sx={{color: '#7F7E80', fontSize: '120%', mt: '5px'}}
+                sx={{color: '#E1E0E0', fontSize: '120%', mt: '5px'}}
               />
             </Box>
 
@@ -57,13 +58,20 @@ const CustomBudgetCard: FC<Props> = ({title, amount, icons, budgetTitle}) => {
                 fontSize: '14px',
                 mt: '1px',
                 fontWeight: '700',
-                opacity: '.5',
+                opacity: '.3',
               }}>
               {amount}
             </Typography>
           </Grid>
           <Grid item xs={12}>
-            <Divider />
+            <Divider
+              sx={{
+                height: '2px',
+                width: '100%',
+                fontWeight: 'bold',
+                backgroundColor: '#E7E4ED',
+              }}
+            />
           </Grid>
         </Grid>
       </Grid>

diff --git a/frontend/common/button/CustomActionButtonComponent.tsx b/frontend/common/button/CustomActionButtonComponent.tsx
@@ -0,0 +1,31 @@
+import {Button} from '@mui/material';
+import React from 'react';
+interface IActionButton {
+  onClickBtn?: any;
+  children?: any;
+}
+
+const CustomActionButtonComponent = ({onClickBtn, children}: IActionButton) => {
+  return (
+    <Button
+      onClick={onClickBtn}
+      type='submit'
+      variant='contained'
+      sx={{
+        borderRadius: '25px',
+        backgroundColor: 'common.black',
+        position: 'fixed',
+        height: '50px',
+        bottom: '30px',
+        minWidth: '415px',
+        fontWeight: '700',
+        ':hover': {
+          backgroundColor: 'common.black',
+          color: 'common.white',
+        },
+      }}>
+      {children}
+    </Button>
+  );
+};
+export default CustomActionButtonComponent;
diff --git a/frontend/common/button/CustomBackButton.tsx b/frontend/common/button/CustomBackButton.tsx
@@ -0,0 +1,37 @@
+import {Button} from '@mui/material';
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
+import React from 'react';
+import {useRouter} from 'next/navigation';
+
+const CustomBackButton = () => {
+  const Router = useRouter();
+  const handleBack = () => {
+    return Router.back();
+  };
+
+  return (
+    <Button
+      sx={{
+        p: '0px 0px',
+        display: 'flex',
+        justifyContent: 'initial',
+        color: 'common.white',
+        ':hover': {
+          backgroundColor: 'common.white',
+        },
+      }}
+      onClick={handleBack}>
+      <KeyboardBackspaceIcon
+        sx={{
+          color: '#403F40',
+          backgroundColor: '#fff',
+          borderRadius: '12px',
+          fontSize: '245%',
+          border: '2px solid #EEEDEE',
+          p: '3px',
+        }}
+      />
+    </Button>
+  );
+};
+export default CustomBackButton;