budget UI fixes

dcorroyer · Nov 26, 2024 · 86aafd0 · 86aafd0
1 parent a1cd00b
commit 86aafd0
Show file tree

Hide file tree

Showing 23 changed files with 346 additions and 273 deletions.
diff --git a/app/assets/components/sidebar.module.css b/app/assets/components/sidebar.module.css
@@ -16,10 +16,6 @@
   background-color: var(--mantine-color-white); /* Couleur de fond pour le mode clair */
 }
 
-.navbarMain {
-  flex: 1;
-}
-
 .header {
   padding-bottom: var(--mantine-spacing-md);
   margin-bottom: calc(var(--mantine-spacing-md) * 4);

diff --git a/app/assets/components/sidebar.tsx b/app/assets/components/sidebar.tsx
@@ -4,7 +4,7 @@ import { Link, useLocation } from 'react-router-dom'
 
 import cx from 'clsx'
 
-import { Group, useComputedColorScheme, useMantineColorScheme } from '@mantine/core'
+import { em, Group, useComputedColorScheme, useMantineColorScheme } from '@mantine/core'
 import { useMediaQuery } from '@mantine/hooks'
 import {
   IconChartLine,
@@ -30,10 +30,14 @@ const data = [
   { icon: IconCreditCard, label: 'Accounts', path: '/accounts' },
 ]
 
-export function Sidebar() {
+interface SidebarProps {
+  onNavigate?: () => void
+}
+
+export function Sidebar({ onNavigate }: SidebarProps) {
   const { logout } = useAuth()
 
-  const isMobile = useMediaQuery('(max-width: 768px)')
+  const isMobile = useMediaQuery(`(max-width: ${em(750)})`)
 
   const { setColorScheme } = useMantineColorScheme()
   const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
@@ -52,6 +56,9 @@ export function Sidebar() {
         key={item.label}
         onClick={() => {
           setActive(item.path)
+          if (isMobile && onNavigate) {
+            onNavigate()
+          }
         }}
       >
         <item.icon className={classes.linkIcon} stroke={1.5} />
@@ -62,7 +69,7 @@ export function Sidebar() {
 
   return (
     <nav className={classes.navbar}>
-      <div className={classes.navbarMain}>
+      <div style={{ flex: '1' }}>
         {!isMobile && (
           <Group className={classes.header} justify='space-between'>
             <Logo />

diff --git a/app/assets/features/accounts/components/account-form.tsx b/app/assets/features/accounts/components/account-form.tsx
@@ -38,7 +38,7 @@ export const AccountForm: React.FC<AccountFormComponentProps> = ({ initialValues
   return (
     <Container size={560} my={40}>
       <form onSubmit={form.onSubmit(onSubmit)}>
-        <Card radius='lg' py='xl'>
+        <Card radius='lg' py='xl' shadow='sm'>
           <Card.Section inheritPadding px='xl' pb='xs'>
             <TextInput
               label='Name'

diff --git a/app/assets/features/accounts/components/account-items.module.css b/app/assets/features/accounts/components/account-items.module.css
diff --git a/app/assets/features/accounts/components/account-items.tsx b/app/assets/features/accounts/components/account-items.tsx
@@ -33,7 +33,7 @@ export const AccountItems = ({
 
   const accounts = accountList.data.map((account) => (
     <div key={account.id}>
-      <Card radius='lg' pb='xl'>
+      <Card radius='lg' pb='xl' shadow='sm'>
         <Card.Section inheritPadding py='xs'>
           <Group justify='space-between'>
             <Text fw={500}>{account.name}</Text>

diff --git a/app/assets/features/accounts/pages/list.tsx b/app/assets/features/accounts/pages/list.tsx
@@ -43,10 +43,10 @@ const AccountList: React.FC = () => {
       <Modal opened={opened} onClose={close} radius='lg' title='Delete Account' centered>
         <Text size='sm'>Are you sure you want to delete this account?</Text>
         <Group justify='flex-end' mt='lg'>
-          <Button variant='light' onClick={close}>
+          <Button variant='subtle' radius='md' onClick={close}>
             Cancel
           </Button>
-          <Button color='red' onClick={handleDelete}>
+          <Button color='red' radius='md' onClick={handleDelete}>
             Delete
           </Button>
         </Group>

diff --git a/app/assets/features/auth/pages/login.module.css b/app/assets/features/auth/pages/login.module.css
diff --git a/app/assets/features/auth/pages/login.tsx b/app/assets/features/auth/pages/login.tsx
@@ -18,8 +18,6 @@ import {
 import { useAuth } from '@/features/auth/hooks/useAuth'
 import { loginFormSchema, loginFormType } from '@/features/auth/schemas/login'
 
-import classes from './login.module.css'
-
 const Login: React.FC = () => {
   const { login, isLoading } = useAuth()
 
@@ -37,7 +35,7 @@ const Login: React.FC = () => {
 
   return (
     <Container size={420} my={40}>
-      <Title ta='center' className={classes.title}>
+      <Title ta='center' fw={900}>
         Login Page
       </Title>
       <Text c='dimmed' size='sm' ta='center' mt={5}>

diff --git a/app/assets/features/auth/pages/register.module.css b/app/assets/features/auth/pages/register.module.css
diff --git a/app/assets/features/auth/pages/register.tsx b/app/assets/features/auth/pages/register.tsx
@@ -18,8 +18,6 @@ import {
 import { useAuth } from '@/features/auth/hooks/useAuth'
 import { registerFormSchema, registerFormType } from '@/features/auth/schemas/register'
 
-import classes from './register.module.css'
-
 const Register: React.FC = () => {
   const { register, isLoading } = useAuth()
 
@@ -40,7 +38,7 @@ const Register: React.FC = () => {
 
   return (
     <Container size={460} my={40}>
-      <Title ta='center' className={classes.title}>
+      <Title ta='center' fw={900}>
         Register Page
       </Title>
       <Text c='dimmed' size='sm' ta='center' mt={5}>

diff --git a/app/assets/features/budgets/components/budget-form.module.css b/app/assets/features/budgets/components/budget-form.module.css
@@ -49,3 +49,11 @@
 .removeBudgetLineIcon:hover {
   color: #f87171;
 }
+
+.shadowButton {
+  box-shadow: var(--mantine-shadow-sm);
+}
+
+.formButton:hover {
+  background-color: var(--mantine-color-gray-1);
+}
diff --git a/app/assets/features/budgets/components/budget-form.tsx b/app/assets/features/budgets/components/budget-form.tsx
@@ -22,6 +22,8 @@ import { useBudget } from '../hooks/useBudget'
 import { budgetFormSchema, createBudgetFormType } from '../schemas/budgets'
 import { BudgetFormDetails } from '../types/budgets'
 
+import cx from 'clsx'
+
 import classes from './budget-form.module.css'
 
 interface Card {
@@ -134,7 +136,7 @@ const ManageIncomes = ({ form }: { form: UseFormReturnType<createBudgetFormType>
   const fields = form.values.incomes
 
   return (
-    <Card radius='lg' py='xl' mt='sm'>
+    <Card radius='lg' py='xl' mt='sm' shadow='sm'>
       <Card.Section inheritPadding px='xl' pb='xs'>
         {fields.map((income, incomeIndex) => (
           <SimpleGrid
@@ -232,7 +234,7 @@ const ManageExpenses = ({
     <>
       <div>
         {cards.map((card: Card, cardIndex: number) => (
-          <Card radius='lg' py='xl' mt='sm' key={cardIndex}>
+          <Card radius='lg' py='xl' mt='sm' key={cardIndex} shadow='sm'>
             <Card.Section inheritPadding>
               <Group justify='space-between'>
                 <div className={classes.relative}>
@@ -298,8 +300,8 @@ const ManageExpenses = ({
                 type='button'
                 variant='white'
                 color='black'
-                className={classes.formButton}
                 radius='md'
+                className={classes.formButton}
                 onClick={() => addExpenseItem(cardIndex)}
               >
                 Add an expense <IconPlus style={{ width: rem(20), height: rem(20) }} stroke={1.5} />
@@ -311,7 +313,7 @@ const ManageExpenses = ({
           type='button'
           variant='white'
           color='black'
-          className={classes.formButton}
+          className={cx(classes.formButton, classes.shadowButton)}
           radius='md'
           onClick={addCard}
           mt='sm'
@@ -323,7 +325,7 @@ const ManageExpenses = ({
           type='submit'
           variant='white'
           color='black'
-          className={classes.formButton}
+          className={cx(classes.formButton, classes.shadowButton)}
           radius='md'
           mt='sm'
           style={{ float: 'right' }}

diff --git a/app/assets/features/budgets/components/budget-items.tsx b/app/assets/features/budgets/components/budget-items.tsx
@@ -52,7 +52,7 @@ export const BudgetItems = ({
 
   const budgets = budgetList?.data.map((budget) => (
     <div key={budget.id}>
-      <Card radius='lg' pb='xl'>
+      <Card radius='lg' pb='xl' shadow='sm'>
         <Card.Section inheritPadding py='xs'>
           <Group justify='space-between'>
             <Text fw={500}>{budget.name}</Text>

diff --git a/app/assets/features/budgets/components/budget-summary-cards.module.css b/app/assets/features/budgets/components/budget-summary-cards.module.css
@@ -0,0 +1,119 @@
+.divIconBlue {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  border-radius: var(--mantine-radius-md);
+  font-weight: 500;
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    color: var(--mantine-color-blue-light-color);
+
+    .iconBlue {
+      color: var(--mantine-color-blue-light-color);
+    }
+  }
+
+  &[data-active] {
+    &,
+    &:hover {
+      background-color: var(--mantine-color-blue-light);
+      color: var(--mantine-color-blue-light-color);
+
+      .iconBlue {
+        color: var(--mantine-color-blue-light-color);
+      }
+    }
+  }
+}
+
+.iconBlue {
+  color: var(--mantine-color-blue-light-color);
+  background-color: var(--mantine-color-blue-light);
+  padding: rem(5px);
+  border-radius: 5px;
+  width: rem(30px);
+  height: rem(30px);
+}
+
+.divIconGreen {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  border-radius: var(--mantine-radius-md);
+  font-weight: 500;
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    color: var(--mantine-color-green-light-color);
+
+    .iconGreen {
+      color: var(--mantine-color-green-light-color);
+    }
+  }
+
+  &[data-active] {
+    &,
+    &:hover {
+      background-color: var(--mantine-color-green-light);
+      color: var(--mantine-color-green-light-color);
+
+      .iconGreen {
+        color: var(--mantine-color-green-light-color);
+      }
+    }
+  }
+}
+
+.iconGreen {
+  color: var(--mantine-color-green-light-color);
+  background-color: var(--mantine-color-green-light);
+  padding: rem(5px);
+  border-radius: 5px;
+  width: rem(30px);
+  height: rem(30px);
+}
+
+.divIconRed {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  border-radius: var(--mantine-radius-md);
+  font-weight: 500;
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    color: var(--mantine-color-red-light-color);
+
+    .iconRed {
+      color: var(--mantine-color-red-light-color);
+    }
+  }
+
+  &[data-active] {
+    &,
+    &:hover {
+      background-color: var(--mantine-color-red-light);
+      color: var(--mantine-color-red-light-color);
+
+      .iconRed {
+        color: var(--mantine-color-red-light-color);
+      }
+    }
+  }
+}
+
+.iconRed {
+  color: var(--mantine-color-red-light-color);
+  background-color: var(--mantine-color-red-light);
+  padding: rem(5px);
+  border-radius: 5px;
+  width: rem(30px);
+  height: rem(30px);
+}
diff --git a/app/assets/features/budgets/components/budget-summary-cards.tsx b/app/assets/features/budgets/components/budget-summary-cards.tsx
@@ -0,0 +1,41 @@
+import { Card, Group, Text } from '@mantine/core'
+import { Icon } from '@tabler/icons-react'
+import React from 'react'
+import classes from './budget-summary-cards.module.css'
+
+interface BudgetSummaryCardProps {
+  icon: Icon
+  color: 'blue' | 'green' | 'red'
+  title: string
+  amount: number
+}
+
+export const BudgetSummaryCards = ({
+  icon: IconComponent,
+  color,
+  title,
+  amount,
+}: BudgetSummaryCardProps) => {
+  return (
+    <Card radius='lg' pb='xl' shadow='sm'>
+      <Card.Section inheritPadding py='xs'>
+        <Group justify='left' gap='xl' mt='xs'>
+          <div className={classes[`divIcon${color.charAt(0).toUpperCase()}${color.slice(1)}`]}>
+            <IconComponent
+              className={classes[`icon${color.charAt(0).toUpperCase()}${color.slice(1)}`]}
+              stroke={1.5}
+            />
+          </div>
+        </Group>
+      </Card.Section>
+      <Card.Section inheritPadding py='xs'>
+        <Group justify='space-between'>
+          <Text fw={500}>{title}</Text>
+        </Group>
+        <Text fw={500} c={color}>
+          {amount} €
+        </Text>
+      </Card.Section>
+    </Card>
+  )
+}
diff --git a/app/assets/features/budgets/components/budget-table.module.css b/app/assets/features/budgets/components/budget-table.module.css
@@ -5,6 +5,7 @@
 
 .categoryBlock {
   background-color: var(--mantine-color-gray-1);
+  border-radius: rem(10px);
 }
 
 .categoryName {