Mb 44 refonte UI responsive pwa

VERSION

@@ -1 +1 @@
-1.5.1
+1.0.0

app/assets/components/not-found.module.css

@@ -11,7 +11,7 @@
   position: absolute;
   inset: 0;
   opacity: 0.75;
-  color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
+  color: var(--mantine-color-gray-3);
 }
 
 .content {

app/assets/components/sidebar.module.css

@@ -6,43 +6,27 @@
   flex-direction: column;
   border-top-right-radius: 15px;
   border-bottom-right-radius: 15px;
-}
-
-[data-mantine-color-scheme='dark'] .navbar {
-  background-color: var(--mantine-color-dark-5); /* Couleur de fond pour le mode sombre */
-}
-
-[data-mantine-color-scheme='light'] .navbar {
-  background-color: var(--mantine-color-white); /* Couleur de fond pour le mode clair */
-}
-
-.navbarMain {
-  flex: 1;
+  background-color: var(--mantine-color-white);
 }
 
 .header {
   padding-bottom: var(--mantine-spacing-md);
   margin-bottom: calc(var(--mantine-spacing-md) * 4);
 }
 
-.footer {
-  padding-top: var(--mantine-spacing-md);
-  margin-top: var(--mantine-spacing-md);
-}
-
 .link {
   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));
+  color: var(--mantine-color-gray-7);
   padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
   border-radius: var(--mantine-radius-md);
   font-weight: 500;
   margin-top: var(--mantine-spacing-xs);
 
   @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    background-color: var(--mantine-color-gray-0);
     color: var(--mantine-color-blue-light-color);
 
     .linkIcon {
@@ -72,23 +56,3 @@
   width: rem(30px);
   height: rem(30px);
 }
-
-.dark {
-  @mixin dark {
-    display: none;
-  }
-
-  @mixin light {
-    display: block;
-  }
-}
-
-.light {
-  @mixin light {
-    display: none;
-  }
-
-  @mixin dark {
-    display: block;
-  }
-}

app/assets/components/sidebar.tsx

@@ -2,18 +2,13 @@ import React, { useState } from 'react'
 
 import { Link, useLocation } from 'react-router-dom'
 
-import cx from 'clsx'
-
-import { Group, useComputedColorScheme, useMantineColorScheme } from '@mantine/core'
+import { Divider, em, Group } from '@mantine/core'
 import { useMediaQuery } from '@mantine/hooks'
 import {
   IconChartLine,
   IconCreditCard,
-  IconHome2,
   IconLogout,
-  IconMoon,
   IconReceipt,
-  IconSun,
   IconWallet,
 } from '@tabler/icons-react'
 
@@ -23,20 +18,20 @@ import Logo from './logo'
 import classes from './sidebar.module.css'
 
 const data = [
-  { icon: IconHome2, label: 'Dashboard', path: '/' },
+  { icon: IconChartLine, label: 'Dashboard', path: '/' },
   { icon: IconWallet, label: 'Budget Planner', path: '/budgets' },
   { icon: IconReceipt, label: 'Transactions', path: '/transactions' },
-  { icon: IconChartLine, label: 'Savings', path: '/savings' },
   { icon: IconCreditCard, label: 'Accounts', path: '/accounts' },
 ]
 
-export function Sidebar() {
-  const { logout } = useAuth()
+interface SidebarProps {
+  onNavigate?: () => void
+}
 
-  const isMobile = useMediaQuery('(max-width: 768px)')
+export function Sidebar({ onNavigate }: SidebarProps) {
+  const { logout } = useAuth()
 
-  const { setColorScheme } = useMantineColorScheme()
-  const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
+  const isMobile = useMediaQuery(`(max-width: ${em(750)})`)
 
   const { pathname } = useLocation()
   const [active, setActive] = useState(pathname)
@@ -52,6 +47,9 @@ export function Sidebar() {
         key={item.label}
         onClick={() => {
           setActive(item.path)
+          if (isMobile && onNavigate) {
+            onNavigate()
+          }
         }}
       >
         <item.icon className={classes.linkIcon} stroke={1.5} />
@@ -62,25 +60,15 @@ 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 />
           </Group>
         )}
         {links}
-      </div>
 
-      <div className={classes.footer}>
-        <Link
-          onClick={() => setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')}
-          className={classes.link}
-          to={''}
-        >
-          <IconSun className={cx(classes.light, classes.linkIcon)} stroke={1.5} />
-          <IconMoon className={cx(classes.dark, classes.linkIcon)} stroke={1.5} />
-          <span>Change Theme</span>
-        </Link>
+        <Divider mt='md' className={classes.divider} />
 
         <Link onClick={() => logout()} className={classes.link} to={''}>
           <IconLogout className={classes.linkIcon} stroke={1.5} />

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'

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>

app/assets/features/accounts/pages/detail.tsx

@@ -1,11 +1,11 @@
-import { ActionIcon, Card, Container, Group, Text } from '@mantine/core'
+import { ActionIcon, Card, Container, Divider, Group, Text } from '@mantine/core'
 import { IconChevronLeft, IconPencil, IconPencilOff } from '@tabler/icons-react'
 import React, { useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 
 import { CenteredLoader as Loader } from '@/components/centered-loader'
-import { AccountForm } from '../components/account-form'
 import { TransactionTable } from '@/features/transactions/components/transaction-table'
+import { AccountForm } from '../components/account-form'
 import { useAccount } from '../hooks/useAccount'
 import { useTransactions } from '../hooks/useTransactions'
 
@@ -35,7 +35,7 @@ const AccountDetail: React.FC = () => {
         <ActionIcon variant='transparent' c='black' component={Link} to='/accounts'>
           <IconChevronLeft className={classes.title} />
         </ActionIcon>
-        {account.data.name}
+        Account Details
         <ActionIcon
           variant='transparent'
           c='black'
@@ -59,16 +59,19 @@ const AccountDetail: React.FC = () => {
             }}
           />
         ) : (
-          <Card radius='lg' pb='xl' mb='lg'>
-            <Card.Section inheritPadding py='xs'>
-              <Group justify='space-between'>
-                <Text fw={500}>Account Details</Text>
-              </Group>
-              <Text fw={500} c='dimmed' size='sm' mt='xs'>
-                Balance: {account.data.balance} €
-              </Text>
-            </Card.Section>
-          </Card>
+          <>
+            <Card radius='lg' pb='xl' mb='md' shadow='sm'>
+              <Card.Section inheritPadding py='xs'>
+                <Group justify='space-between'>
+                  <Text fw={500}>{account.data.name}</Text>
+                </Group>
+                <Text fw={500} c='dimmed' size='sm' mt='xs'>
+                  Balance: {account.data.balance} €
+                </Text>
+              </Card.Section>
+            </Card>
+            <Divider mb='md' />
+          </>
         )}
         {!editMode && transactions && <TransactionTable transactions={transactions.data} />}
       </Container>

app/assets/features/accounts/pages/list.module.css

@@ -11,7 +11,7 @@
   transform: translateY(0.33rem);
 
   @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));
+    background-color: var(--mantine-color-gray-2);
     color: var(--mantine-color-blue-light-color);
 
     .linkIcon {

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>

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}>

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}>

app/assets/features/budgets/components/budget-form.module.css

@@ -2,7 +2,7 @@
   width: 100vh;
   left: 0;
   position: absolute;
-  color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  color: var(--mantine-color-gray-0);
 }
 
 .categoryName {
@@ -49,3 +49,11 @@
 .removeBudgetLineIcon:hover {
   color: #f87171;
 }
+
+.shadowButton {
+  box-shadow: var(--mantine-shadow-sm);
+}
+
+.formButton:hover {
+  background-color: var(--mantine-color-gray-1);
+}