refactor: Separate atom inputs into separate files for input and text…

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

src/Theme/theme.ts

@@ -43,7 +43,6 @@ export const theme = {
   components: {
     Button: Button.extend({
       classNames: {
-        ...classes,
         root: classes.buttonRoot,
       },
     }),

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

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

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

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';
@@ -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({
@@ -38,6 +38,7 @@ export const SignIn = () => {
       alert((err as Error).message);
     }
   };
+
   return (
     <>
       <form
@@ -98,11 +99,18 @@ 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"
+            onChange={e => setRememberMe(e.target.checked)}
+          />
+          <Subscribe
+            selector={state => [state.canSubmit, state.isSubmitting]}
+            children={([canSubmit, isSubmitting]) => {
+              return (
                 <Button
                   size="medium"
                   right={0}
@@ -113,10 +121,10 @@ export const SignIn = () => {
                 >
                   <IconLogin2 stroke={1.5} />
                 </Button>
-              </Flex>
-            );
-          }}
-        />
+              );
+            }}
+          />
+        </Flex>
         <Button
           component={Link}
           variant="light"