From c03d0be0b5b7a5a5edf411a107ca9ab6aa7e8c61 Mon Sep 17 00:00:00 2001
From: Staszek Zajaczkowski <staszek.zajaczkowski@gmail.com>
Date: Mon, 22 Jul 2024 16:04:59 -0400
Subject: [PATCH 1/8] refactor: Separate atom inputs into separate files for
 input and textarea

---
 src/Theme/styles.module.css                   | 10 +-
 src/Theme/theme.ts                            | 19 ++--
 .../atoms/add-new-button/add-new-button.tsx   |  2 +-
 src/components/atoms/headers/headers.tsx      | 17 ----
 .../atoms/headers/styles.module.css           |  4 -
 src/components/atoms/index.ts                 |  2 -
 src/components/atoms/title/styles.module.css  | 97 -------------------
 src/components/atoms/title/title.tsx          | 17 ----
 src/components/molecules/modals.tsx           |  4 +-
 src/components/molecules/nav-bar-user.tsx     |  4 +-
 .../organizms/forms/note-management-form.tsx  |  6 +-
 .../organizms/forms/todo-management-form.tsx  |  2 +-
 src/components/organizms/table/table.tsx      |  4 +-
 src/index.css                                 |  6 +-
 src/views/auth/sign-in.tsx                    | 10 +-
 src/views/auth/sign-up.tsx                    | 50 +++++-----
 src/views/home/home.tsx                       | 13 ++-
 src/views/home/login.tsx                      | 28 +++---
 src/views/home/styles.module.css              | 30 +-----
 src/views/pages/notes.tsx                     |  9 +-
 src/views/pages/todos.tsx                     |  9 +-
 21 files changed, 92 insertions(+), 251 deletions(-)
 delete mode 100644 src/components/atoms/headers/headers.tsx
 delete mode 100644 src/components/atoms/title/styles.module.css
 delete mode 100644 src/components/atoms/title/title.tsx

diff --git a/src/Theme/styles.module.css b/src/Theme/styles.module.css
index 2b8c7b8..1c1d21c 100644
--- a/src/Theme/styles.module.css
+++ b/src/Theme/styles.module.css
@@ -15,11 +15,11 @@
     color: var(--white);
   }
 }
-[data-variant='white'] {
+/* [data-variant='white'] {
   background-color: var(--white);
   color: var(--secondary);
   padding: 8px 24px;
-}
+} */
 [data-variant='primary'] {
   background-color: var(--primary);
   color: var(--white);
@@ -57,12 +57,10 @@
   height: var(--size-height-large);
   width: var(--size-width-large);
   box-shadow: var(--box-shadow-secondary);
-  background-color: var(--dark);
   border: var(--border-large);
 }
 [data-size='large'] {
   box-shadow: var(--box-shadow-primary);
-  background-color: var(--white);
   height: var(--size-height-medium);
   width: var(--size-width-medium);
   border: var(--border-medium);
@@ -79,3 +77,7 @@
   width: var(--size-width-small);
   min-width: fit-content;
 }
+.title {
+  color: var(--primary);
+  text-align: center;
+}
diff --git a/src/Theme/theme.ts b/src/Theme/theme.ts
index 14e4672..94d6e35 100644
--- a/src/Theme/theme.ts
+++ b/src/Theme/theme.ts
@@ -1,4 +1,4 @@
-import { Button } from '@mantine/core';
+import { Button, Title } from '@mantine/core';
 import { primary, secondary, dark, grey, red, warning, boxShadow } from '../utils/colors';
 import classes from './styles.module.css'
 
@@ -13,6 +13,7 @@ export const theme = {
   fontFamily: 'Nunito, sans-serif',
   headings: {
     fontFamily: 'Nunito, sans-serif',
+    textWrap: 'wrap',
     sizes: {
       h1: {
         fontSize: '2.5rem',
@@ -34,14 +35,6 @@ export const theme = {
     regular: '400',
     bold: '600',
   },
-  fontSize: {
-    xxs: '1rem',
-    xs: '1.2rem',
-    s: '1.6rem',
-    m: '2.1rem',
-    l: '2.4rem',
-    xl: '4rem',
-  },
   media: {
     phone: '@media(max-width: 520px)',
     tablet: '@media(max-width: 768px)',
@@ -53,9 +46,11 @@ export const theme = {
         ...classes,
         root: classes.buttonRoot,
       },
-
-
-
+    }),
+    Title: Title.extend({
+      classNames: {
+        root: classes.title,
+      }
     })
   }
 };
diff --git a/src/components/atoms/add-new-button/add-new-button.tsx b/src/components/atoms/add-new-button/add-new-button.tsx
index ec30ec1..18c3243 100644
--- a/src/components/atoms/add-new-button/add-new-button.tsx
+++ b/src/components/atoms/add-new-button/add-new-button.tsx
@@ -8,7 +8,7 @@ export const AddNewButton = ({ openModal }) => {
     <Button
       leftSection={<IconPlus />}
       size="small"
-      variant="transparent-border"
+      variant="notes-transparent-border"
       onClick={handleClick}
       aria-label="Add new"
     >
diff --git a/src/components/atoms/headers/headers.tsx b/src/components/atoms/headers/headers.tsx
deleted file mode 100644
index 79dd0ac..0000000
--- a/src/components/atoms/headers/headers.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Box } from '@mantine/core';
-import classes from './styles.module.css';
-import cx from 'classix';
-
-export const NotesHeader = ({ component, className, children }: Props) => {
-  return (
-    <Box fz={component} className={cx(className, classes[component])} component={'h2'}>
-      {children}
-    </Box>
-  );
-};
-
-type Props = {
-  children: React.ReactNode;
-  component: 'h1' | 'h2';
-  className?: string;
-};
diff --git a/src/components/atoms/headers/styles.module.css b/src/components/atoms/headers/styles.module.css
index 38bcb51..ef175c6 100644
--- a/src/components/atoms/headers/styles.module.css
+++ b/src/components/atoms/headers/styles.module.css
@@ -1,14 +1,10 @@
 .h1 {
   color: var(--white);
   text-align: center;
-  padding: 1rem;
 }
 
 .h2 {
   color: var(--white);
   text-align: center;
-  padding: 3rem;
-  margin-bottom: 4rem;
   position: relative;
-  top: 13vh;
 }
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index c40766d..092192a 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -1,5 +1,3 @@
 export * from './inputs/input'
 export * from './inputs/textarea'
-export * from './title/title'
 export * from './add-new-button/add-new-button'
-export * from './headers/headers'
diff --git a/src/components/atoms/title/styles.module.css b/src/components/atoms/title/styles.module.css
deleted file mode 100644
index 2845847..0000000
--- a/src/components/atoms/title/styles.module.css
+++ /dev/null
@@ -1,97 +0,0 @@
-.addButton {
-  width: fit-content;
-  bottom: 16px;
-  padding: 10px 20px;
-  box-shadow: var(--box-shadow-primary);
-  background-color: var(--dark);
-  border: 3px solid var(--primary);
-  border-radius: 10px;
-  &:hover {
-    box-shadow: none;
-    background: var(--primary);
-    color: var(--white);
-    text-decoration: none;
-  }
-}
-
-.buttonLarge {
-  height: 100px;
-  width: 40%;
-  box-shadow: var(--box-shadow-secondary);
-  background-color: var(--dark);
-  border: 3px solid var(--primary);
-}
-
-.homeWrapper {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  height: 50%;
-  width: 60%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-  padding: 2rem;
-  transform: translate(-50%, -50%);
-  transition: transform 0.25s ease-in-out;
-}
-
-.input {
-  background-color: lightgray;
-  border: none;
-  border-radius: 20px;
-  width: 100%;
-  padding: 0.5rem 0.5rem;
-  float: left;
-  text-align: center;
-
-  ::placeholder {
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: 1.2rem;
-  }
-}
-
-.textarea {
-  background-color: lightgray;
-  border: none;
-  border-radius: 20px;
-  width: 70%;
-  height: 50%;
-  margin: 1rem auto;
-  float: left;
-  text-align: center;
-
-  ::placeholder {
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: 1.2rem;
-  }
-  &[data-notes] {
-    width: 90%;
-    height: 70%;
-  }
-}
-
-.button-wrapper {
-  display: flex;
-  justify-content: space-evenly;
-  width: 90%;
-  margin-top: auto;
-}
-
-.h1 {
-  color: var(--white);
-  text-align: center;
-  padding: 1rem;
-}
-
-.h2 {
-  color: var(--white);
-  text-align: center;
-  padding: 3rem;
-  margin-bottom: 4rem;
-  position: relative;
-  top: 13vh;
-}
diff --git a/src/components/atoms/title/title.tsx b/src/components/atoms/title/title.tsx
deleted file mode 100644
index 0813fd2..0000000
--- a/src/components/atoms/title/title.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Title as MantineTitle } from '@mantine/core';
-
-export function Title({ children, pb, c = 'var(--primary)', size = 'h2', ta = 'center' }: TitleProps) {
-  return (
-    <MantineTitle ta={ta} c={c} size={size} pb={pb}>
-      {children}
-    </MantineTitle>
-  );
-}
-
-type TitleProps = {
-  children: React.ReactNode;
-  pb?: number;
-  c?: string;
-  size?: string;
-  ta?: 'left' | 'right' | 'center' | 'justify';
-};
diff --git a/src/components/molecules/modals.tsx b/src/components/molecules/modals.tsx
index 10d37a8..118265e 100644
--- a/src/components/molecules/modals.tsx
+++ b/src/components/molecules/modals.tsx
@@ -2,6 +2,7 @@ import { Title, Text } from '@mantine/core';
 import { modals } from '@mantine/modals';
 import { NoteManagementForm, TodoManagementForm } from '@notes/components';
 import { NoteWithId, TodoWithId } from '@notes/types';
+// import { primary } from '@notes/utils';
 
 export function openNoteModal(data?: NoteWithId) {
   return modals.open({
@@ -28,7 +29,8 @@ export const openDeleteModal = (id: string, deleteFn) => {
       confirm: 'Delete',
       cancel: 'Cancel'
     },
-    confirmProps: { color: 'var(--red)' },
+    confirmProps: { bg: 'red', c: 'white', fz: 'md' },
+    cancelProps: { fz: 'md' },
     onConfirm: () => deleteFn(id)
   });
 };
diff --git a/src/components/molecules/nav-bar-user.tsx b/src/components/molecules/nav-bar-user.tsx
index 2554254..17e4915 100644
--- a/src/components/molecules/nav-bar-user.tsx
+++ b/src/components/molecules/nav-bar-user.tsx
@@ -18,9 +18,7 @@ export const NavBarUser = () => {
             radius="xl"
           />
           <div>
-            <Title size={'h4'} c={'var(--primary)'}>
-              Hello, {user?.providerData?.[0]?.displayName}!
-            </Title>
+            <Title size={'h4'}>Hello, {user?.providerData?.[0]?.displayName}!</Title>
             <Text c="dimmed" size="xs">
               Nice to see you !
             </Text>
diff --git a/src/components/organizms/forms/note-management-form.tsx b/src/components/organizms/forms/note-management-form.tsx
index bca8f5c..e5948de 100644
--- a/src/components/organizms/forms/note-management-form.tsx
+++ b/src/components/organizms/forms/note-management-form.tsx
@@ -56,7 +56,7 @@ export const NoteManagementForm = ({ data }: { data?: NoteWithId }) => {
           return (
             <TextInput
               data-autofocus
-              size="xl"
+              size="md"
               defaultValue={state.value}
               onChange={e => handleChange(e.target.value)}
               onBlur={handleBlur}
@@ -89,7 +89,7 @@ export const NoteManagementForm = ({ data }: { data?: NoteWithId }) => {
           return (
             <Textarea
               autosize
-              size="xl"
+              size="md"
               minRows={4}
               label="Note details"
               defaultValue={state.value}
@@ -105,7 +105,7 @@ export const NoteManagementForm = ({ data }: { data?: NoteWithId }) => {
       <Subscribe
         selector={state => [state.canSubmit, state.isSubmitting]}
         children={([canSubmit, isSubmitting]) => (
-          <Button className={classes.button} type="submit" disabled={!canSubmit}>
+          <Button size="sm" type="submit" fz="1rem" variant="notes-transparent-border" disabled={!canSubmit}>
             {isSubmitting ? '...' : 'Submit'}
           </Button>
         )}
diff --git a/src/components/organizms/forms/todo-management-form.tsx b/src/components/organizms/forms/todo-management-form.tsx
index 5258946..4b74c33 100644
--- a/src/components/organizms/forms/todo-management-form.tsx
+++ b/src/components/organizms/forms/todo-management-form.tsx
@@ -131,7 +131,7 @@ export const TodoManagementForm = ({ data }: { data?: TodoWithId }) => {
       <Subscribe
         selector={state => [state.canSubmit, state.isSubmitting]}
         children={([canSubmit, isSubmitting]) => (
-          <Button className={classes.button} type="submit" disabled={!canSubmit}>
+          <Button size="sm" type="submit" fz="1rem" variant="notes-transparent-border" disabled={!canSubmit}>
             {isSubmitting ? '...' : 'Submit'}
           </Button>
         )}
diff --git a/src/components/organizms/table/table.tsx b/src/components/organizms/table/table.tsx
index bc69105..0f28993 100644
--- a/src/components/organizms/table/table.tsx
+++ b/src/components/organizms/table/table.tsx
@@ -12,7 +12,7 @@ export function Table<T>({ table, isLoading }: { table: TTable<T>; isLoading: bo
             <MantineTable.Tr key={headerGroup.id}>
               {headerGroup.headers.map(header => {
                 return (
-                  <MantineTable.Th ta={'center'} key={header.id} w="fit-content">
+                  <MantineTable.Th fz={'md'} ta={'center'} key={header.id} w="fit-content">
                     {flexRender(header.column.columnDef.header, header.getContext())}
                   </MantineTable.Th>
                 );
@@ -25,7 +25,7 @@ export function Table<T>({ table, isLoading }: { table: TTable<T>; isLoading: bo
           {table.getRowModel().rows.map(row => (
             <MantineTable.Tr key={row.id}>
               {row.getVisibleCells().map(cell => (
-                <MantineTable.Td className={classes.tableCell} key={cell.id}>
+                <MantineTable.Td fz={'md'} className={classes.tableCell} key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </MantineTable.Td>
               ))}
diff --git a/src/index.css b/src/index.css
index d232d6b..64d7d7a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,7 +2,6 @@
   /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
   line-height: 1.5;
   font-weight: 400;
-
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
   font-family: 'Nunito', sans-serif;
@@ -52,6 +51,7 @@ html {
   padding: 0;
   margin: 0;
   font-family: 'Nunito', sans-serif;
+  font-size: 1rem;
   box-sizing: border-box;
   scroll-behavior: smooth;
   background-color: var(--light-dark);
@@ -60,10 +60,6 @@ html {
   td {
     text-align: center;
   }
-  h1 {
-    font-size: 3.2em;
-    line-height: 1.1;
-  }
 }
 
 .form-wrapper {
diff --git a/src/views/auth/sign-in.tsx b/src/views/auth/sign-in.tsx
index e950d9d..1e5b521 100644
--- a/src/views/auth/sign-in.tsx
+++ b/src/views/auth/sign-in.tsx
@@ -1,9 +1,8 @@
 import { useForm } from '@tanstack/react-form';
 import { zodValidator } from '@tanstack/zod-form-adapter';
-import { Box, Button, Flex, TextInput } from '@mantine/core';
+import { Button, Flex, TextInput, Title } from '@mantine/core';
 import { z } from 'zod';
 import { IconLogin, IconLogin2 } from '@tabler/icons-react';
-import { Title } from '@notes/components';
 import { useAuthContext } from 'src/hooks/use-auth-context';
 import { Link, useNavigate } from '@tanstack/react-router';
 import { RoutesDef } from '@notes/utils';
@@ -49,8 +48,8 @@ export const SignIn = () => {
           handleSubmit();
         }}
       >
-        <Title pb={16} c={'var(--white'}>
-          Please log in
+        <Title pb={16} mt="xl" order={2} c={'var(--white'}>
+          Please log in:
         </Title>
 
         <Field
@@ -119,9 +118,8 @@ export const SignIn = () => {
           }}
         />
         <Button
-          // variant="notes-transparent-border"
-          variant="light"
           component={Link}
+          variant="light"
           size="md"
           fz={'md'}
           to={RoutesDef.SIGNUP}
diff --git a/src/views/auth/sign-up.tsx b/src/views/auth/sign-up.tsx
index 0873b9e..af493a2 100644
--- a/src/views/auth/sign-up.tsx
+++ b/src/views/auth/sign-up.tsx
@@ -1,7 +1,6 @@
-import { Title } from '@notes/components';
 import { useForm } from '@tanstack/react-form';
 import { zodValidator } from '@tanstack/zod-form-adapter';
-import { Button, TextInput } from '@mantine/core';
+import { Button, Flex, TextInput, Title } from '@mantine/core';
 import { IconLogin2, IconLogin } from '@tabler/icons-react';
 import { z } from 'zod';
 import classes from './style.module.css';
@@ -53,8 +52,8 @@ export const SignUp = () => {
           handleSubmit();
         }}
       >
-        <Title pb={16} c={'var(--white'}>
-          Please sign-up
+        <Title pb={16} mt="xl" order={2} c={'var(--white'}>
+          Please sign-up:
         </Title>
         <Field
           name="name"
@@ -157,29 +156,32 @@ export const SignUp = () => {
           selector={state => [state.canSubmit, state.isSubmitting]}
           children={([canSubmit, isSubmitting]) => {
             return (
-              <Button
-                className={'base-button submit-button'}
-                loading={isSubmitting}
-                variant="outline"
-                type="submit"
-                disabled={!canSubmit}
-              >
-                <IconLogin2 stroke={1.5} />
-              </Button>
+              <Flex justify={'flex-end'}>
+                <Button
+                  loading={isSubmitting}
+                  variant="notes-transparent-border"
+                  size="medium"
+                  right={0}
+                  type="submit"
+                  disabled={!canSubmit}
+                >
+                  <IconLogin2 stroke={1.5} />
+                </Button>
+              </Flex>
             );
           }}
         />
-        <Link to={RoutesDef.SIGNIN} className={classes.linkWrapper}>
-          <Button
-            w={'100%'}
-            bd={'1px solid var(--primary)'}
-            leftSection={<IconLogin />}
-            c={'var(--primary)'}
-            variant="outline"
-          >
-            Go back to sign-in page
-          </Button>
-        </Link>
+        <Button
+          component={Link}
+          variant="light"
+          size="md"
+          fz={'md'}
+          to={RoutesDef.SIGNIN}
+          className={classes.linkWrapper}
+          leftSection={<IconLogin />}
+        >
+          Go back to sign-in page
+        </Button>
       </form>
     </>
   );
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index a9ec03e..2ad048c 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -1,7 +1,6 @@
 import { MainLayout } from '@notes/layout';
-import { NotesHeader } from '@notes/components';
 import classes from './styles.module.css';
-import { Box, Button } from '@mantine/core';
+import { Box, Button, Flex, Title } from '@mantine/core';
 import { Link } from '@tanstack/react-router';
 import { RoutesDef } from '@notes/utils';
 
@@ -9,16 +8,16 @@ export const Home = () => {
   return (
     <MainLayout>
       <Box className={classes.homeWrapper}>
-        <NotesHeader component="h1">In this app you can store your: </NotesHeader>
-        <div className={classes.buttonWrapper}>
-          <Button variant="transparent" size="large" component={Link} to={RoutesDef.TODOS}>
+        <Title order={2}>In this app you can store your: </Title>
+        <Flex gap={'lg'} mt="xl" justify={'center'}>
+          <Button variant="notes-transparent-border" size="large" component={Link} to={RoutesDef.TODOS}>
             {/* dodab prefech useQuery na onMouseEnter , albo w route jako before load*/}
             todos
           </Button>
-          <Button variant="transparent" size="large" component={Link} to={RoutesDef.NOTES}>
+          <Button variant="notes-transparent-border" size="large" component={Link} to={RoutesDef.NOTES}>
             notes
           </Button>
-        </div>
+        </Flex>
       </Box>
     </MainLayout>
   );
diff --git a/src/views/home/login.tsx b/src/views/home/login.tsx
index f200259..ea0e365 100644
--- a/src/views/home/login.tsx
+++ b/src/views/home/login.tsx
@@ -1,25 +1,29 @@
-import { NotesHeader } from '@notes/components';
 import classes from './styles.module.css';
-import { Box, Button } from '@mantine/core';
+import { Box, Button, Flex, Space, Title } from '@mantine/core';
 import { Link } from '@tanstack/react-router';
 import { RoutesDef } from '@notes/utils';
 
 export const AuthView = () => (
   <Box className={classes.wrapper}>
-    <NotesHeader component="h1" className={classes.header}>
-      The best app for todos an taking notes
-    </NotesHeader>
-    <NotesHeader component="h1"> You are only one step away from using 'Notes & Todos'</NotesHeader>
-    <Box className={classes.homeWrapper}>
-      <NotesHeader component="h1">Please sign in or sign up to use</NotesHeader>
-      <div className={classes.buttonWrapper}>
-        <Button className={classes.button} variant="transparent" size="large" component={Link} to={RoutesDef.SIGNUP}>
+    <Title order={2} c="var(--white)" mt="4rem">
+      The best app for todos an taking notes.
+    </Title>
+    <Space h="xl" />
+    <Title order={2} c="var(--white)">
+      You are only one step away from using 'Notes & Todos'
+    </Title>
+    <Box className={classes.loginWrapper}>
+      <Title order={2} c="var(--white)">
+        Please sign in or sign up to use:
+      </Title>
+      <Flex gap={'lg'} mt="xl" justify={'center'}>
+        <Button variant="notes-transparent-border" size="xlarge" component={Link} to={RoutesDef.SIGNUP}>
           sign up
         </Button>
-        <Button className={classes.button} variant="transparent" size="large" component={Link} to={RoutesDef.SIGNIN}>
+        <Button variant="notes-transparent-border" size="xlarge" component={Link} to={RoutesDef.SIGNIN}>
           sign in
         </Button>
-      </div>
+      </Flex>
     </Box>
   </Box>
 );
diff --git a/src/views/home/styles.module.css b/src/views/home/styles.module.css
index 64445ea..acc285e 100644
--- a/src/views/home/styles.module.css
+++ b/src/views/home/styles.module.css
@@ -1,10 +1,3 @@
-.buttonWrapper {
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  /* max-width: 1280px; */
-  width: 80%;
-}
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -14,24 +7,11 @@
   margin: 0 auto;
 }
 
-.header {
-  margin-top: 3rem;
-}
-
 .homeWrapper {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  height: 50%;
-  width: 60%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-  padding: 2rem;
-  transform: translate(-50%, -50%);
-  transition: transform 0.25s ease-in-out;
+  height: 100%;
+  margin: 16rem auto;
 }
-.button {
-  min-width: 250px;
+
+.loginWrapper {
+  margin: 6rem auto;
 }
diff --git a/src/views/pages/notes.tsx b/src/views/pages/notes.tsx
index 7275e29..307835f 100644
--- a/src/views/pages/notes.tsx
+++ b/src/views/pages/notes.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import {
   AddNewButton,
-  NotesHeader,
   openDeleteModal,
   openDetailsModal,
   openNoteModal,
@@ -20,7 +19,7 @@ import {
 } from '@tanstack/react-table';
 import { CollectionType, ControlConfig, Note, NoteWithId } from '@notes/types';
 import { IconBubbleText, IconEdit, IconTrash } from '@tabler/icons-react';
-import { Box } from '@mantine/core';
+import { Box, Title } from '@mantine/core';
 import classes from './styles.module.css';
 import { getTableControls } from '@notes/utils';
 
@@ -100,11 +99,13 @@ export const Notes = () => {
   return (
     <MainLayout>
       <Box className={classes.list}>
-        <NotesHeader component="h1">My Private Notes</NotesHeader>
+        <Title mt="lg" order={2}>
+          My Private Notes
+        </Title>
         <AddNewButton openModal={openNoteModal} />
         <br />
         <Table<NoteWithId> table={table} isLoading={isPending || isLoading || isFetching} />
-        {!notes?.length && <NotesHeader component="h2">Your note list is empty! Enter a new note! </NotesHeader>}
+        {!notes?.length && <Title order={3}>Your note list is empty! Enter a new note! </Title>}
       </Box>
     </MainLayout>
   );
diff --git a/src/views/pages/todos.tsx b/src/views/pages/todos.tsx
index 7ab76ab..8858558 100644
--- a/src/views/pages/todos.tsx
+++ b/src/views/pages/todos.tsx
@@ -5,7 +5,6 @@ import {
   openDeleteModal,
   openDetailsModal,
   openTodoModal,
-  NotesHeader,
   Table,
   TableControls
 } from '@notes/components';
@@ -19,7 +18,7 @@ import {
   useReactTable
 } from '@tanstack/react-table';
 import { CollectionType, ControlConfig, Todo, TodoWithId } from '@notes/types';
-import { Box, Checkbox, Flex } from '@mantine/core';
+import { Box, Checkbox, Flex, Title } from '@mantine/core';
 import { IconBubbleText, IconEdit, IconTrash } from '@tabler/icons-react';
 import classes from './styles.module.css';
 import { getTableControls } from '@notes/utils';
@@ -124,11 +123,13 @@ export const Todos = () => {
   return (
     <MainLayout>
       <Box className={classes.list}>
-        <NotesHeader component="h1">My Private Todo tasks</NotesHeader>
+        <Title mt="lg" order={2}>
+          My Private Todo tasks
+        </Title>
         <AddNewButton openModal={openTodoModal} />
         <br />
         <Table<TodoWithId> table={table} isLoading={isPending || isLoading || isFetching} />
-        {!todos?.length && <NotesHeader component="h2">Your todo list is empty! Enter a new task! </NotesHeader>}
+        {!todos?.length && <Title order={3}>Your todo list is empty! Enter a new task! </Title>}
       </Box>
     </MainLayout>
   );

From 1a982f3f4056ed0993e11a48d785061ae001e191 Mon Sep 17 00:00:00 2001
From: Staszek Zajaczkowski <staszek.zajaczkowski@gmail.com>
Date: Mon, 22 Jul 2024 23:16:53 -0400
Subject: [PATCH 2/8] add loading state outside AuthContext

---
 src/App.tsx                  | 17 +++++++++++++----
 src/Theme/theme.ts           |  2 +-
 src/context/auth-context.tsx | 16 +++-------------
 src/routes/__root.tsx        | 22 ++++++++++++----------
 src/routes/_auth.index.tsx   | 10 +---------
 src/routes/_auth.tsx         |  2 +-
 src/types/contexts.ts        | 14 ++++++++++----
 7 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9751b50..c8fb31d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,10 +6,11 @@ import { ModalsProvider } from '@mantine/modals';
 import { AuthProvider } from './context/auth-context';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 import './index.css';
+import { LoadingOverlay } from '@mantine/core';
 
 import { routeTree } from './routeTree.gen';
-import { getAuth } from 'firebase/auth';
 import { theme } from './Theme';
+import { useAuthContext } from './hooks';
 
 const queryClient = new QueryClient();
 
@@ -17,7 +18,7 @@ const router = createRouter({
   routeTree,
   context: {
     queryClient,
-    auth: getAuth()
+    auth: undefined
   },
   defaultPreload: 'intent',
   defaultPreloadStaleTime: 0
@@ -28,16 +29,24 @@ declare module '@tanstack/react-router' {
     router: typeof router;
   }
 }
+
 const customTheme = createTheme(theme);
 
+function AppWithRouter() {
+  const auth = useAuthContext();
+  if (auth.loading) {
+    return <LoadingOverlay visible />;
+  }
+  return <RouterProvider router={router} context={{ auth }} />;
+}
+
 export function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <MantineProvider theme={customTheme}>
         <AuthProvider>
           <ModalsProvider>
-            {/* <Loder /> */}
-            <RouterProvider router={router} />
+            <AppWithRouter />
           </ModalsProvider>
         </AuthProvider>
       </MantineProvider>
diff --git a/src/Theme/theme.ts b/src/Theme/theme.ts
index 94d6e35..5ab1660 100644
--- a/src/Theme/theme.ts
+++ b/src/Theme/theme.ts
@@ -13,7 +13,7 @@ export const theme = {
   fontFamily: 'Nunito, sans-serif',
   headings: {
     fontFamily: 'Nunito, sans-serif',
-    textWrap: 'wrap',
+    textWrap: 'wrap' as "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined,
     sizes: {
       h1: {
         fontSize: '2.5rem',
diff --git a/src/context/auth-context.tsx b/src/context/auth-context.tsx
index 5de5e71..741683a 100644
--- a/src/context/auth-context.tsx
+++ b/src/context/auth-context.tsx
@@ -1,25 +1,15 @@
-import { LoadingOverlay } from '@mantine/core';
 import { auth } from '@notes/database';
+import { TContextAuth } from '@notes/types';
 import {
   signInWithEmailAndPassword,
   User,
-  UserCredential,
   createUserWithEmailAndPassword,
   updateProfile,
   signOut
 } from 'firebase/auth';
 import { createContext, useEffect, useState } from 'react';
 
-type ContextAuth = {
-  user: User | undefined;
-  signIn: (email: string, password: string) => Promise<UserCredential>;
-  signUp: (email: string, password: string, displayName: string) => Promise<UserCredential>;
-  loading: boolean;
-  setLoadingState: (loading: boolean) => void;
-  signUserOut: () => Promise<void>;
-};
-
-export const AuthContext = createContext<ContextAuth | undefined>(undefined);
+export const AuthContext = createContext<TContextAuth | undefined>(undefined);
 
 export function AuthProvider({ children }) {
   const [user, setUser] = useState<User>();
@@ -59,7 +49,7 @@ export function AuthProvider({ children }) {
     return unsubscribe;
   }, []);
 
-  const value: ContextAuth = { user, signIn, signUp, signUserOut, loading, setLoadingState };
+  const value: TContextAuth = { user, signIn, signUp, signUserOut, loading, setLoadingState };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index ce7d7fe..6675daf 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,22 +1,24 @@
+import { TContextAuth } from '@notes/types';
 import { QueryClient } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { Outlet, Link, redirect, createRootRouteWithContext } from '@tanstack/react-router';
+import { Outlet, createRootRouteWithContext } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
-import { getAuth } from 'firebase/auth';
 
 type RouterContext = {
-  auth: ReturnType<typeof getAuth> | undefined;
+  auth: TContextAuth | undefined;
   queryClient: QueryClient;
 };
 
 export const Route = createRootRouteWithContext<RouterContext>()({
-  component: () => (
-    <>
-      <Outlet />
-      <TanStackRouterDevtools />
-      <ReactQueryDevtools initialIsOpen={false} />
-    </>
-  ),
+  component: () => {
+    return (
+      <>
+        <Outlet />
+        <TanStackRouterDevtools />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </>
+    );
+  },
   notFoundComponent: () => {
     return <p>This is the notFoundComponent </p>;
   }
diff --git a/src/routes/_auth.index.tsx b/src/routes/_auth.index.tsx
index 68c816d..41d8967 100644
--- a/src/routes/_auth.index.tsx
+++ b/src/routes/_auth.index.tsx
@@ -2,13 +2,5 @@ import { Home } from '@notes/views';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_auth/')({
-  // component: () => {
-  //   if (!isAuthenticated()) {
-  //     return <div style={{ color: 'white' }}>Loading...</div>;
-  //   }
-
-  //   return <Home />;
-  // },
-  component: Home,
-  pendingComponent: () => <div style={{ color: 'white' }}>Loading...</div>
+  component: Home
 });
diff --git a/src/routes/_auth.tsx b/src/routes/_auth.tsx
index 17eb711..ce97035 100644
--- a/src/routes/_auth.tsx
+++ b/src/routes/_auth.tsx
@@ -3,7 +3,7 @@ import { createFileRoute, redirect } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_auth')({
   beforeLoad: async ({ context }) => {
-    if (!context.auth?.currentUser) {
+    if (!context.auth?.user) {
       throw redirect({
         to: RoutesDef.LOGIN
       });
diff --git a/src/types/contexts.ts b/src/types/contexts.ts
index c972b09..f87e202 100644
--- a/src/types/contexts.ts
+++ b/src/types/contexts.ts
@@ -1,4 +1,10 @@
-export enum PageType {
-  NOTES = 'notes',
-  TODOS = "todos"
-}
\ No newline at end of file
+import { User, UserCredential } from 'firebase/auth';
+
+export type TContextAuth = {
+  user: User | undefined;
+  signIn: (email: string, password: string) => Promise<UserCredential>;
+  signUp: (email: string, password: string, displayName: string) => Promise<UserCredential>;
+  loading: boolean;
+  setLoadingState: (loading: boolean) => void;
+  signUserOut: () => Promise<void>;
+};
\ No newline at end of file

From 180408a7acd6c510f220e11909d689fe9374ea66 Mon Sep 17 00:00:00 2001
From: Staszek Zajaczkowski <staszek.zajaczkowski@gmail.com>
Date: Mon, 22 Jul 2024 23:34:24 -0400
Subject: [PATCH 3/8] chore: Update loading overlay props in App.tsx and
 main-layout.tsx

---
 src/App.tsx                              |  8 +++++++-
 src/Layout/main-layout.tsx               | 13 ++-----------
 src/components/organizms/table/table.tsx |  2 +-
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c8fb31d..5279352 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -35,7 +35,13 @@ const customTheme = createTheme(theme);
 function AppWithRouter() {
   const auth = useAuthContext();
   if (auth.loading) {
-    return <LoadingOverlay visible />;
+    return (
+      <LoadingOverlay
+        loaderProps={{ type: 'dots', color: 'var(--primary)', size: 'xl' }}
+        overlayProps={{ color: 'var(--dark-bg-color)' }}
+        visible
+      />
+    );
   }
   return <RouterProvider router={router} context={{ auth }} />;
 }
diff --git a/src/Layout/main-layout.tsx b/src/Layout/main-layout.tsx
index 884f5f6..2443810 100644
--- a/src/Layout/main-layout.tsx
+++ b/src/Layout/main-layout.tsx
@@ -1,18 +1,9 @@
 import { NavBar } from '@notes/components';
-import { Box, LoadingOverlay } from '@mantine/core';
+import { Box } from '@mantine/core';
 import classes from './layout.module.css';
-import { useAuthContext } from 'src/hooks/use-auth-context';
 
 export const MainLayout = ({ children }) => {
-  const { loading } = useAuthContext();
-
-  return loading ? (
-    <LoadingOverlay
-      visible={loading}
-      overlayProps={{ backgroundOpacity: 0 }}
-      loaderProps={{ color: 'var(--primary)', type: 'bars' }}
-    />
-  ) : (
+  return (
     <>
       <NavBar />
       <Box className={classes.mainLayout}>{children}</Box>
diff --git a/src/components/organizms/table/table.tsx b/src/components/organizms/table/table.tsx
index 0f28993..e372756 100644
--- a/src/components/organizms/table/table.tsx
+++ b/src/components/organizms/table/table.tsx
@@ -36,7 +36,7 @@ export function Table<T>({ table, isLoading }: { table: TTable<T>; isLoading: bo
       <LoadingOverlay
         visible={isLoading}
         zIndex={1000}
-        loaderProps={{ type: 'bars', color: 'var(--secondary)' }}
+        loaderProps={{ type: 'dots', color: 'var(--secondary)' }}
         overlayProps={{ radius: 'sm', blur: 1 }}
         style={{ height: '100%' }}
       />

From d0409294cb59562b3a5cabf20dbc1fdd4750e552 Mon Sep 17 00:00:00 2001
From: Staszek Zajaczkowski <staszek.zajaczkowski@gmail.com>
Date: Wed, 24 Jul 2024 21:32:09 -0400
Subject: [PATCH 4/8] fix color theme in css - removed dark and light for now

---
 src/context/auth-context.tsx |  7 +++++--
 src/index.css                | 40 +++++++++++++++++-------------------
 src/views/pages/notes.tsx    | 11 +++++++---
 3 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/context/auth-context.tsx b/src/context/auth-context.tsx
index 741683a..48e2f90 100644
--- a/src/context/auth-context.tsx
+++ b/src/context/auth-context.tsx
@@ -5,14 +5,15 @@ import {
   User,
   createUserWithEmailAndPassword,
   updateProfile,
-  signOut
+  signOut,
+  getAuth
 } from 'firebase/auth';
 import { createContext, useEffect, useState } from 'react';
 
 export const AuthContext = createContext<TContextAuth | undefined>(undefined);
 
 export function AuthProvider({ children }) {
-  const [user, setUser] = useState<User>();
+  const [user, setUser] = useState<User | null>(getAuth().currentUser);
   const [loading, setLoading] = useState(true);
 
   function setLoadingState(loading: boolean) {
@@ -38,6 +39,8 @@ export function AuthProvider({ children }) {
   useEffect(() => {
     setLoading(true);
     const unsubscribe = auth.onAuthStateChanged(user => {
+      console.log('🚀 ~ user:', user);
+
       if (user) {
         setUser(user);
         setLoading(false);
diff --git a/src/index.css b/src/index.css
index 64d7d7a..9d153e3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,6 @@
 :root {
-  /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
   line-height: 1.5;
   font-weight: 400;
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
   font-family: 'Nunito', sans-serif;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -11,7 +8,9 @@
   -moz-osx-font-smoothing: grayscale;
 
   --dark-bg-color: rgba(34, 51, 59, 1);
-  --light-dark: rgba(20, 42, 51, 1) --primary: rgba(123, 175, 212, 1); /* carolina Blue */
+  --default-box-shadow: rgba(62, 194, 233, 0.3);
+  --light-dark: rgba(20, 42, 51, 1);
+  --primary: rgba(123, 175, 212, 1); /* carolina Blue */
   --secondary: rgba(0, 123, 167, 1); /* Darker Blue */
   --red: rgba(200, 50, 50, 1);
   --warning: rgba(255, 165, 0, 1); /* Orange */
@@ -32,29 +31,16 @@
   --border-medium: 2px solid var(--primary);
   --border-small: 1px solid var(--primary);
 }
-/* TODO: Add dark mode */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --dark-bg-color: rgba(34, 51, 59, 1);
-    --light-dark: #142a33;
-    --primary: rgba(123, 175, 212, 1);
-    --secondary: rgba(0, 123, 167, 1); /* Darker Blue */
-    --red: rgba(200, 50, 50, 1);
-    --warning: rgba(255, 165, 0, 1); /* Orange */
-    --white: rgba(245, 255, 250, 1);
-    --default-box-shadow: rgba(62, 194, 233, 0.3);
-  }
-}
 
 body,
 html {
   padding: 0;
   margin: 0;
+  background-color: var(--light-dark);
   font-family: 'Nunito', sans-serif;
   font-size: 1rem;
   box-sizing: border-box;
   scroll-behavior: smooth;
-  background-color: var(--light-dark);
   font-smooth: always;
   th,
   td {
@@ -71,8 +57,7 @@ html {
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    /* color: #213547; */
+  /* :root {
     background-color: #ffffff;
   }
   a:hover {
@@ -80,5 +65,18 @@ html {
   }
   button {
     background-color: #f9f9f9;
-  }
+  } */
+}
+/* TODO: Add dark mode */
+@media (prefers-color-scheme: dark) {
+  /* :root {
+    --dark-bg-color: rgba(34, 51, 59, 1);
+    --light-dark: #142a33;
+    --primary: rgba(123, 175, 212, 1);
+    --secondary: rgba(0, 123, 167, 1);
+    --red: rgba(200, 50, 50, 1);
+    --warning: rgba(255, 165, 0, 1);
+    --white: rgba(245, 255, 250, 1);
+    --default-box-shadow: rgba(62, 194, 233, 0.3);
+  } */
 }
diff --git a/src/views/pages/notes.tsx b/src/views/pages/notes.tsx
index 307835f..f88a801 100644
--- a/src/views/pages/notes.tsx
+++ b/src/views/pages/notes.tsx
@@ -31,9 +31,11 @@ export const Notes = () => {
 
   const {
     collection: { isPending, isFetching, isLoading, data: notes },
-    deleteElement
+    deleteElement,
+    addElement,
+    editElement
   } = useRemoteData<Note>({ key: CollectionType.NOTES });
-
+  console.log('addElement.isPending', addElement);
   const columnHelper = createColumnHelper<NoteWithId>();
   // TODO: zrobic tez zeby mozna było właczac edycja z modal od detailsów
 
@@ -104,7 +106,10 @@ export const Notes = () => {
         </Title>
         <AddNewButton openModal={openNoteModal} />
         <br />
-        <Table<NoteWithId> table={table} isLoading={isPending || isLoading || isFetching} />
+        <Table<NoteWithId>
+          table={table}
+          isLoading={isPending || isLoading || isFetching || addElement.isPending || editElement.isPending}
+        />
         {!notes?.length && <Title order={3}>Your note list is empty! Enter a new note! </Title>}
       </Box>
     </MainLayout>

From 3cd03534d4a1161f14beb83012c7510766ddd0ad Mon Sep 17 00:00:00 2001
From: Staszek Zajaczkowski <staszek.zajaczkowski@gmail.com>
Date: Wed, 24 Jul 2024 22:25:20 -0400
Subject: [PATCH 5/8] add 100% width and footer

---
 src/Layout/layout.module.css                  | 12 ++++++++--
 src/Layout/main-layout.tsx                    |  7 +++---
 src/components/molecules/footer/footer.tsx    |  7 ++++++
 .../molecules/footer/styles.module.css        |  7 ++++++
 src/components/molecules/index.ts             |  3 ++-
 .../organizms/nav-bar/styles.module.css       |  9 ++++----
 src/context/auth-context.tsx                  |  6 ++---
 src/index.css                                 | 15 +++++--------
 src/types/contexts.ts                         |  2 +-
 src/views/home/styles.module.css              | 15 ++++---------
 src/views/pages/notes.tsx                     | 22 +++++++++----------
 src/views/pages/styles.module.css             |  6 -----
 src/views/pages/todos.tsx                     | 16 ++++++--------
 13 files changed, 63 insertions(+), 64 deletions(-)
 create mode 100644 src/components/molecules/footer/footer.tsx
 create mode 100644 src/components/molecules/footer/styles.module.css

diff --git a/src/Layout/layout.module.css b/src/Layout/layout.module.css
index 746797a..d081b7a 100644
--- a/src/Layout/layout.module.css
+++ b/src/Layout/layout.module.css
@@ -1,4 +1,12 @@
 .mainLayout {
-  max-width: 1980px;
-  margin: 0 auto;
+  margin-top: 12vh;
+  background: var(--dark-bg-color);
+  height: 100%;
+}
+
+.appContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
 }
diff --git a/src/Layout/main-layout.tsx b/src/Layout/main-layout.tsx
index 2443810..131db9c 100644
--- a/src/Layout/main-layout.tsx
+++ b/src/Layout/main-layout.tsx
@@ -1,12 +1,13 @@
-import { NavBar } from '@notes/components';
+import { Footer, NavBar } from '@notes/components';
 import { Box } from '@mantine/core';
 import classes from './layout.module.css';
 
 export const MainLayout = ({ children }) => {
   return (
-    <>
+    <Box className={classes.appContainer}>
       <NavBar />
       <Box className={classes.mainLayout}>{children}</Box>
-    </>
+      <Footer />
+    </Box>
   );
 };
diff --git a/src/components/molecules/footer/footer.tsx b/src/components/molecules/footer/footer.tsx
new file mode 100644
index 0000000..fdf8cc6
--- /dev/null
+++ b/src/components/molecules/footer/footer.tsx
@@ -0,0 +1,7 @@
+import { Box } from '@mantine/core';
+import classes from './styles.module.css';
+
+
+export function Footer() {
+  return <Box className={classes.footerWrapper}>Footer </Box>;
+}
diff --git a/src/components/molecules/footer/styles.module.css b/src/components/molecules/footer/styles.module.css
new file mode 100644
index 0000000..754ac38
--- /dev/null
+++ b/src/components/molecules/footer/styles.module.css
@@ -0,0 +1,7 @@
+.footerWrapper {
+  border-top: 2px solid var(--primary);
+  width: 100%;
+  color: var(--primary);
+  background-color: var(--dark-bg-color);
+  padding: 1rem;
+}
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index 86649f8..2247282 100644
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -2,4 +2,5 @@ export * from './nav-bar-buttons-wrapper'
 export * from './nav-bar-user'
 export * from './modals'
 export * from './table-controls'
-export * from './pagination'
\ No newline at end of file
+export * from './pagination'
+export * from './footer/footer'
\ No newline at end of file
diff --git a/src/components/organizms/nav-bar/styles.module.css b/src/components/organizms/nav-bar/styles.module.css
index 0b5b0f1..49ba293 100644
--- a/src/components/organizms/nav-bar/styles.module.css
+++ b/src/components/organizms/nav-bar/styles.module.css
@@ -1,6 +1,5 @@
 .bar {
   width: 50%;
-  /* right: 0%; */
   margin-right: 2rem;
   display: flex;
   gap: 6rem;
@@ -11,13 +10,13 @@
   z-index: 2;
   display: flex;
   justify-content: space-between;
-  width: 100%;
   height: 12vh;
-  position: fixed;
-  top: 0;
-  margin: 0 auto;
+  width: 100%;
+  max-width: 1980px;
   border-bottom: 2px solid var(--primary);
   background: var(--dark-bg-color);
+  position: fixed;
+  top: 0;
 }
 
 .logo {
diff --git a/src/context/auth-context.tsx b/src/context/auth-context.tsx
index 48e2f90..7cfae3e 100644
--- a/src/context/auth-context.tsx
+++ b/src/context/auth-context.tsx
@@ -1,3 +1,4 @@
+import { createContext, useEffect, useState } from 'react';
 import { auth } from '@notes/database';
 import { TContextAuth } from '@notes/types';
 import {
@@ -8,7 +9,6 @@ import {
   signOut,
   getAuth
 } from 'firebase/auth';
-import { createContext, useEffect, useState } from 'react';
 
 export const AuthContext = createContext<TContextAuth | undefined>(undefined);
 
@@ -39,13 +39,11 @@ export function AuthProvider({ children }) {
   useEffect(() => {
     setLoading(true);
     const unsubscribe = auth.onAuthStateChanged(user => {
-      console.log('🚀 ~ user:', user);
-
       if (user) {
         setUser(user);
         setLoading(false);
       } else {
-        setUser(undefined);
+        setUser(null);
         setLoading(false);
       }
     });
diff --git a/src/index.css b/src/index.css
index 9d153e3..2349e58 100644
--- a/src/index.css
+++ b/src/index.css
@@ -33,12 +33,15 @@
 }
 
 body,
-html {
+html,
+#root {
   padding: 0;
-  margin: 0;
+  height: 100%;
+  margin: 0 auto;
   background-color: var(--light-dark);
   font-family: 'Nunito', sans-serif;
   font-size: 1rem;
+  max-width: 1980px;
   box-sizing: border-box;
   scroll-behavior: smooth;
   font-smooth: always;
@@ -48,14 +51,6 @@ html {
   }
 }
 
-.form-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  max-width: 500px;
-  margin: 0 auto;
-}
-
 @media (prefers-color-scheme: light) {
   /* :root {
     background-color: #ffffff;
diff --git a/src/types/contexts.ts b/src/types/contexts.ts
index f87e202..0bef804 100644
--- a/src/types/contexts.ts
+++ b/src/types/contexts.ts
@@ -1,7 +1,7 @@
 import { User, UserCredential } from 'firebase/auth';
 
 export type TContextAuth = {
-  user: User | undefined;
+  user: User | null;
   signIn: (email: string, password: string) => Promise<UserCredential>;
   signUp: (email: string, password: string, displayName: string) => Promise<UserCredential>;
   loading: boolean;
diff --git a/src/views/home/styles.module.css b/src/views/home/styles.module.css
index acc285e..66e263f 100644
--- a/src/views/home/styles.module.css
+++ b/src/views/home/styles.module.css
@@ -1,15 +1,8 @@
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100vh;
-  max-width: 1440;
-  margin: 0 auto;
-}
-
 .homeWrapper {
-  height: 100%;
-  margin: 16rem auto;
+  background-color: var(--dark-bg-color);
+  width: -webkit-fill-available;
+  width: -moz-available;
+  height: 100vh;
 }
 
 .loginWrapper {
diff --git a/src/views/pages/notes.tsx b/src/views/pages/notes.tsx
index f88a801..13a545b 100644
--- a/src/views/pages/notes.tsx
+++ b/src/views/pages/notes.tsx
@@ -100,18 +100,16 @@ export const Notes = () => {
 
   return (
     <MainLayout>
-      <Box className={classes.list}>
-        <Title mt="lg" order={2}>
-          My Private Notes
-        </Title>
-        <AddNewButton openModal={openNoteModal} />
-        <br />
-        <Table<NoteWithId>
-          table={table}
-          isLoading={isPending || isLoading || isFetching || addElement.isPending || editElement.isPending}
-        />
-        {!notes?.length && <Title order={3}>Your note list is empty! Enter a new note! </Title>}
-      </Box>
+      <Title pt="xl" order={2}>
+        My Private Notes
+      </Title>
+      <AddNewButton openModal={openNoteModal} />
+      <br />
+      <Table<NoteWithId>
+        table={table}
+        isLoading={isPending || isLoading || isFetching || addElement.isPending || editElement.isPending}
+      />
+      {!notes?.length && <Title order={3}>Your note list is empty! Enter a new note! </Title>}
     </MainLayout>
   );
 };
diff --git a/src/views/pages/styles.module.css b/src/views/pages/styles.module.css
index 68b5bfb..45974c6 100644
--- a/src/views/pages/styles.module.css
+++ b/src/views/pages/styles.module.css
@@ -12,9 +12,3 @@ td,
 th {
   font-size: 1.2rem;
 }
-.list {
-  height: 100%;
-  margin: 0 auto;
-  position: relative;
-  top: 12vh;
-}
diff --git a/src/views/pages/todos.tsx b/src/views/pages/todos.tsx
index 8858558..952ab52 100644
--- a/src/views/pages/todos.tsx
+++ b/src/views/pages/todos.tsx
@@ -122,15 +122,13 @@ export const Todos = () => {
 
   return (
     <MainLayout>
-      <Box className={classes.list}>
-        <Title mt="lg" order={2}>
-          My Private Todo tasks
-        </Title>
-        <AddNewButton openModal={openTodoModal} />
-        <br />
-        <Table<TodoWithId> table={table} isLoading={isPending || isLoading || isFetching} />
-        {!todos?.length && <Title order={3}>Your todo list is empty! Enter a new task! </Title>}
-      </Box>
+      <Title pt="xl" order={2}>
+        My Private Todo tasks
+      </Title>
+      <AddNewButton openModal={openTodoModal} />
+      <br />
+      <Table<TodoWithId> table={table} isLoading={isPending || isLoading || isFetching} />
+      {!todos?.length && <Title order={3}>Your todo list is empty! Enter a new task! </Title>}
     </MainLayout>
   );
 };

From 58900a517ac6a898a1fee13145b50054ebbbff08 Mon Sep 17 00:00:00 2001
From: Staszek Zajaczkowski <staszek.zajaczkowski@gmail.com>
Date: Wed, 24 Jul 2024 22:38:44 -0400
Subject: [PATCH 6/8] chore: Update form wrapper class name in sign-in and
 sign-up views

---
 src/views/auth/sign-in.tsx      | 4 ++--
 src/views/auth/sign-up.tsx      | 2 +-
 src/views/auth/style.module.css | 8 +++++++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/views/auth/sign-in.tsx b/src/views/auth/sign-in.tsx
index 1e5b521..d96864d 100644
--- a/src/views/auth/sign-in.tsx
+++ b/src/views/auth/sign-in.tsx
@@ -1,6 +1,6 @@
 import { useForm } from '@tanstack/react-form';
 import { zodValidator } from '@tanstack/zod-form-adapter';
-import { Button, Flex, TextInput, Title } from '@mantine/core';
+import { Box, Button, Flex, TextInput, Title } from '@mantine/core';
 import { z } from 'zod';
 import { IconLogin, IconLogin2 } from '@tabler/icons-react';
 import { useAuthContext } from 'src/hooks/use-auth-context';
@@ -41,7 +41,7 @@ export const SignIn = () => {
   return (
     <>
       <form
-        className="form-wrapper"
+        className={classes.formWrapper}
         onSubmit={e => {
           e.preventDefault();
           e.stopPropagation();
diff --git a/src/views/auth/sign-up.tsx b/src/views/auth/sign-up.tsx
index af493a2..66c5fa6 100644
--- a/src/views/auth/sign-up.tsx
+++ b/src/views/auth/sign-up.tsx
@@ -45,7 +45,7 @@ export const SignUp = () => {
   return (
     <>
       <form
-        className="form-wrapper"
+        className={classes.formWrapper}
         onSubmit={e => {
           e.preventDefault();
           e.stopPropagation();
diff --git a/src/views/auth/style.module.css b/src/views/auth/style.module.css
index 8e80365..6955dc4 100644
--- a/src/views/auth/style.module.css
+++ b/src/views/auth/style.module.css
@@ -7,7 +7,13 @@
   font-size: 1rem;
   margin-top: 2rem;
 }
-
+.formWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 500px;
+  margin: 0 auto;
+}
 @media (orientation: landscape) {
   .submitButton {
     margin-top: 1rem;

From 3f702f058797b7dc253e1ccf01abaaea787f0ef1 Mon Sep 17 00:00:00 2001
From: Staszek Zajaczkowski <staszek.zajaczkowski@gmail.com>
Date: Thu, 25 Jul 2024 21:28:56 -0400
Subject: [PATCH 7/8] add checkbox with remember me text to sign in (no logit
 yet)

---
 src/Theme/styles.module.css         | 128 +++++++++++++++-------------
 src/Theme/theme.ts                  |   1 -
 src/components/molecules/modals.tsx |   2 +-
 src/views/auth/sign-in.tsx          |  46 +++++++---
 4 files changed, 107 insertions(+), 70 deletions(-)

diff --git a/src/Theme/styles.module.css b/src/Theme/styles.module.css
index 1c1d21c..a143d46 100644
--- a/src/Theme/styles.module.css
+++ b/src/Theme/styles.module.css
@@ -9,75 +9,87 @@
   transition: box-shadow 0.3s ease;
   color: var(--primary);
   border-radius: 50px;
+
   &:hover {
     box-shadow: 0 10px 20px -15px var(--primary);
     background-color: var(--primary);
     color: var(--white);
   }
-}
-/* [data-variant='white'] {
-  background-color: var(--white);
-  color: var(--secondary);
-  padding: 8px 24px;
-} */
-[data-variant='primary'] {
-  background-color: var(--primary);
-  color: var(--white);
-  padding: 8px 24px;
-}
-[data-variant='danger'] {
-  background-color: var(--red);
-  color: var(--white);
-}
-[data-variant='warning'] {
-  background-color: var(--warning);
-  color: var(--white);
-}
 
-[data-variant='success'] {
-  background-color: var(--success);
-  color: var(--white);
-}
-[data-variant='notes-transparent'] {
-  background-color: transparent;
-  color: var(--primary);
-}
-[data-variant='notes-transparent-border'] {
-  background-color: transparent;
-  color: var(--primary);
-  border: 1px solid var(--primary);
-  &:hover {
+
+  &[data-variant='primary'] {
     background-color: var(--primary);
     color: var(--white);
-    border: 1px solid var(--white);
+    padding: 8px 24px;
   }
-}
 
-[data-size='xlarge'] {
-  height: var(--size-height-large);
-  width: var(--size-width-large);
-  box-shadow: var(--box-shadow-secondary);
-  border: var(--border-large);
-}
-[data-size='large'] {
-  box-shadow: var(--box-shadow-primary);
-  height: var(--size-height-medium);
-  width: var(--size-width-medium);
-  border: var(--border-medium);
-}
-[data-size='medium'] {
-  height: var(--size-height-small);
-  width: var(--size-width-medium);
-  font-size: 1rem;
-  min-width: fit-content;
-}
-[data-size='small'] {
-  height: var(--size-height-small);
-  font-size: 1rem;
-  width: var(--size-width-small);
-  min-width: fit-content;
+  &[data-variant='notes-danger'] {
+    background-color: var(--red);
+    color: var(--white);
+
+    &:hover {
+      background-color: var(--white);
+      color: var(--red);
+    }
+  }
+
+  &[data-variant='warning'] {
+    background-color: var(--warning);
+    color: var(--white);
+  }
+
+  &[data-variant='success'] {
+    background-color: var(--success);
+    color: var(--white);
+  }
+
+  &[data-variant='notes-transparent'] {
+    background-color: transparent;
+    color: var(--primary);
+  }
+
+  &[data-variant='notes-transparent-border'] {
+    background-color: transparent;
+    color: var(--primary);
+    border: 1px solid var(--primary);
+
+    &:hover {
+      background-color: var(--primary);
+      color: var(--white);
+      border: 1px solid var(--white);
+    }
+  }
+
+  &[data-size='xlarge'] {
+    height: var(--size-height-large);
+    width: var(--size-width-large);
+    box-shadow: var(--box-shadow-secondary);
+    border: var(--border-large);
+  }
+
+  &[data-size='large'] {
+    box-shadow: var(--box-shadow-primary);
+    height: var(--size-height-medium);
+    width: var(--size-width-medium);
+    border: var(--border-medium);
+  }
+
+  &[data-size='medium'] {
+    height: var(--size-height-small);
+    width: var(--size-width-medium);
+    font-size: 1rem;
+    min-width: fit-content;
+  }
+
+  &[data-size='small'] {
+    height: var(--size-height-small);
+    font-size: 1rem;
+    width: var(--size-width-small);
+    min-width: fit-content;
+  }
 }
+
 .title {
   color: var(--primary);
   text-align: center;
-}
+}
\ No newline at end of file
diff --git a/src/Theme/theme.ts b/src/Theme/theme.ts
index 5ab1660..11ef6e2 100644
--- a/src/Theme/theme.ts
+++ b/src/Theme/theme.ts
@@ -43,7 +43,6 @@ export const theme = {
   components: {
     Button: Button.extend({
       classNames: {
-        ...classes,
         root: classes.buttonRoot,
       },
     }),
diff --git a/src/components/molecules/modals.tsx b/src/components/molecules/modals.tsx
index 118265e..7e89ae0 100644
--- a/src/components/molecules/modals.tsx
+++ b/src/components/molecules/modals.tsx
@@ -29,7 +29,7 @@ export const openDeleteModal = (id: string, deleteFn) => {
       confirm: 'Delete',
       cancel: 'Cancel'
     },
-    confirmProps: { bg: 'red', c: 'white', fz: 'md' },
+    confirmProps: { fz: 'md', variant: 'notes-danger' },
     cancelProps: { fz: 'md' },
     onConfirm: () => deleteFn(id)
   });
diff --git a/src/views/auth/sign-in.tsx b/src/views/auth/sign-in.tsx
index d96864d..d15af3a 100644
--- a/src/views/auth/sign-in.tsx
+++ b/src/views/auth/sign-in.tsx
@@ -1,6 +1,6 @@
 import { useForm } from '@tanstack/react-form';
 import { zodValidator } from '@tanstack/zod-form-adapter';
-import { Box, Button, Flex, TextInput, Title } from '@mantine/core';
+import { Button, Checkbox, Flex, TextInput, Title, Text } from '@mantine/core';
 import { z } from 'zod';
 import { IconLogin, IconLogin2 } from '@tabler/icons-react';
 import { useAuthContext } from 'src/hooks/use-auth-context';
@@ -38,6 +38,26 @@ export const SignIn = () => {
       alert((err as Error).message);
     }
   };
+
+  // TODO: Remember Me checkbox
+  // import { getAuth, setPersistence, signInWithEmailAndPassword, browserSessionPersistence } from 'firebase/auth';
+
+  // const auth = getAuth();
+  // setPersistence(auth, browserSessionPersistence)
+  //   .then(() => {
+  //     // Existing and future Auth states are now persisted in the current
+  //     // session only. Closing the window would clear any existing state even
+  //     // if a user forgets to sign out.
+  //     // ...
+  //     // New sign-in will be persisted with session persistence.
+  //     return signInWithEmailAndPassword(auth, email, password);
+  //   })
+  //   .catch(error => {
+  //     // Handle Errors here.
+  //     const errorCode = error.code;
+  //     const errorMessage = error.message;
+  //   });
+
   return (
     <>
       <form
@@ -98,11 +118,17 @@ export const SignIn = () => {
             );
           }}
         />
-        <Subscribe
-          selector={state => [state.canSubmit, state.isSubmitting]}
-          children={([canSubmit, isSubmitting]) => {
-            return (
-              <Flex justify={'flex-end'}>
+        <Flex justify={'space-between'} align={'center'}>
+          <Checkbox
+            ml="sm"
+            label={<Text c="var(--primary)">Remember me</Text>}
+            color="var(--primary"
+            variant="outline"
+          />
+          <Subscribe
+            selector={state => [state.canSubmit, state.isSubmitting]}
+            children={([canSubmit, isSubmitting]) => {
+              return (
                 <Button
                   size="medium"
                   right={0}
@@ -113,10 +139,10 @@ export const SignIn = () => {
                 >
                   <IconLogin2 stroke={1.5} />
                 </Button>
-              </Flex>
-            );
-          }}
-        />
+              );
+            }}
+          />
+        </Flex>
         <Button
           component={Link}
           variant="light"

From c99b4a65dc2643028413dfea97d46740b1a12cb5 Mon Sep 17 00:00:00 2001
From: Staszek Zajaczkowski <staszek.zajaczkowski@gmail.com>
Date: Thu, 25 Jul 2024 21:54:33 -0400
Subject: [PATCH 8/8] add session persistent to log in

---
 src/context/auth-context.tsx | 25 ++++++++++++++++++++-----
 src/types/contexts.ts        |  1 +
 src/views/auth/sign-in.tsx   |  3 ++-
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/context/auth-context.tsx b/src/context/auth-context.tsx
index 7cfae3e..60108a5 100644
--- a/src/context/auth-context.tsx
+++ b/src/context/auth-context.tsx
@@ -7,20 +7,35 @@ import {
   createUserWithEmailAndPassword,
   updateProfile,
   signOut,
-  getAuth
+  getAuth,
+  inMemoryPersistence,
+  setPersistence
 } from 'firebase/auth';
 
 export const AuthContext = createContext<TContextAuth | undefined>(undefined);
 
 export function AuthProvider({ children }) {
   const [user, setUser] = useState<User | null>(getAuth().currentUser);
+  const [rememberMe, setRememberMe] = useState(false);
   const [loading, setLoading] = useState(true);
-
   function setLoadingState(loading: boolean) {
     setLoading(loading);
   }
-  function signIn(email: string, password: string) {
-    return signInWithEmailAndPassword(auth, email, password);
+  async function signIn(email: string, password: string) {
+    if (!rememberMe) {
+      try {
+        await setPersistence(auth, inMemoryPersistence);
+        return signInWithEmailAndPassword(auth, email, password);
+      } catch (error) {
+        if (error instanceof Error) {
+          throw new Error(error.message);
+        } else {
+          throw new Error('An unknown error occurred');
+        }
+      }
+    } else {
+      return signInWithEmailAndPassword(auth, email, password);
+    }
   }
 
   async function signUp(email: string, password: string, displayName: string) {
@@ -50,7 +65,7 @@ export function AuthProvider({ children }) {
     return unsubscribe;
   }, []);
 
-  const value: TContextAuth = { user, signIn, signUp, signUserOut, loading, setLoadingState };
+  const value: TContextAuth = { user, signIn, signUp, signUserOut, loading, setLoadingState, setRememberMe };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }
diff --git a/src/types/contexts.ts b/src/types/contexts.ts
index 0bef804..37ab652 100644
--- a/src/types/contexts.ts
+++ b/src/types/contexts.ts
@@ -7,4 +7,5 @@ export type TContextAuth = {
   loading: boolean;
   setLoadingState: (loading: boolean) => void;
   signUserOut: () => Promise<void>;
+  setRememberMe: React.Dispatch<React.SetStateAction<boolean>>
 };
\ No newline at end of file
diff --git a/src/views/auth/sign-in.tsx b/src/views/auth/sign-in.tsx
index d15af3a..170e9ef 100644
--- a/src/views/auth/sign-in.tsx
+++ b/src/views/auth/sign-in.tsx
@@ -17,7 +17,7 @@ export const SignIn = () => {
     email: '',
     password: ''
   };
-  const { signIn, setLoadingState } = useAuthContext();
+  const { signIn, setLoadingState, setRememberMe } = useAuthContext();
   const navigate = useNavigate();
 
   const { Field, Subscribe, handleSubmit, state } = useForm({
@@ -124,6 +124,7 @@ export const SignIn = () => {
             label={<Text c="var(--primary)">Remember me</Text>}
             color="var(--primary"
             variant="outline"
+            onChange={e => setRememberMe(e.target.checked)}
           />
           <Subscribe
             selector={state => [state.canSubmit, state.isSubmitting]}