From b739966455c4afb2d5f9dc8be38ca0761c00c71d Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Tue, 4 Apr 2023 11:29:22 +0100
Subject: [PATCH 01/14] feat: access layout

---
 .../layouts/AccessLayout/AccessLayout.tsx     |  34 ++++++
 .../layouts/AccessLayout/styles.tsx           |  15 +++
 frontend/src/pages/index.tsx                  | 106 ++++++------------
 3 files changed, 81 insertions(+), 74 deletions(-)
 create mode 100644 frontend/src/components/layouts/AccessLayout/AccessLayout.tsx
 create mode 100644 frontend/src/components/layouts/AccessLayout/styles.tsx

diff --git a/frontend/src/components/layouts/AccessLayout/AccessLayout.tsx b/frontend/src/components/layouts/AccessLayout/AccessLayout.tsx
new file mode 100644
index 000000000..e1d8da83f
--- /dev/null
+++ b/frontend/src/components/layouts/AccessLayout/AccessLayout.tsx
@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
+import Banner from '@/components/icons/Banner';
+import { ImageBackground } from './styles';
+
+type AccessLayoutProps = {
+  children: ReactNode;
+};
+
+const AccessLayout = ({ children }: AccessLayoutProps) => (
+  <Flex justify="between" css={{ minHeight: '100vh', overflow: 'auto' }}>
+    <Flex direction="column" css={{ flexGrow: '1', px: '$72', pb: '$24' }}>
+      <Flex css={{ pt: '8.4%' }}>
+        <Banner />
+      </Flex>
+      <Flex direction="column" justify="between" css={{ height: '100%', mt: '$50' }}>
+        {children}
+      </Flex>
+    </Flex>
+    <Flex
+      css={{
+        width: '65%',
+        py: '$24',
+        pr: '$24',
+        flexShrink: 0,
+      }}
+    >
+      <ImageBackground css={{ boxShadow: '-8px 8px 24px rgba(0, 0, 0, 0.16)' }} />
+    </Flex>
+  </Flex>
+);
+
+export default AccessLayout;
diff --git a/frontend/src/components/layouts/AccessLayout/styles.tsx b/frontend/src/components/layouts/AccessLayout/styles.tsx
new file mode 100644
index 000000000..ff1da26b1
--- /dev/null
+++ b/frontend/src/components/layouts/AccessLayout/styles.tsx
@@ -0,0 +1,15 @@
+import { styled } from '@/styles/stitches/stitches.config';
+
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
+
+const ImageBackground = styled(Flex, {
+  height: '100%',
+  width: '100%',
+  backgroundColor: '$black',
+  backgroundImage: 'url(/images/background.svg)',
+  backgroundSize: 'cover',
+  backgroundRepeat: 'no-repeat',
+  borderRadius: '$72 0 $72',
+});
+
+export { ImageBackground };
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index e2110e86e..74e847cc4 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,36 +1,20 @@
-import { useState } from 'react';
-import { GetServerSideProps, NextPage } from 'next';
+import { ReactElement, useState } from 'react';
+import { GetServerSideProps } from 'next';
 import { getSession } from 'next-auth/react';
 
-import { BannerContainer, ImageBackground } from '@/styles/pages/auth.styles';
-
 import TroubleLogin from '@/components/auth/ForgotPassword/TroubleLogin';
 import LoginForm from '@/components/auth/LoginForm';
 import SignUpTabContent from '@/components/auth/SignUp/SignUpTabContent';
-import Banner from '@/components/icons/Banner';
 import Text from '@/components/Primitives/Text/Text';
 import { DASHBOARD_ROUTE } from '@/utils/routes';
-import Flex from '@/components/Primitives/Layout/Flex/Flex';
 import { NEXT_PUBLIC_LOGIN_SSO_ONLY } from '@/utils/constants';
 import { styled } from '@/styles/stitches/stitches.config';
+import AccessLayout from '@/components/layouts/AccessLayout/AccessLayout';
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
 
 const StyledImage = styled('img', {});
 
-export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const session = await getSession(ctx);
-
-  if (session) {
-    return {
-      redirect: {
-        destination: DASHBOARD_ROUTE,
-        permanent: false,
-      },
-    };
-  }
-  return { props: {} };
-};
-
-const Home: NextPage = () => {
+const Home = () => {
   const [currentTab, setCurrentTab] = useState('login');
   const [showTroubleLogin, setShowTroubleLogin] = useState(false);
 
@@ -46,47 +30,32 @@ const Home: NextPage = () => {
   const renderFooter = () => {
     if (!NEXT_PUBLIC_LOGIN_SSO_ONLY) {
       return currentTab === 'login' ? (
-        <Text css={{ mb: '5%', textAlign: 'center', mt: '$10' }}>
+        <Text css={{ textAlign: 'center' }}>
           No account yet?{' '}
-          <Text
-            onClick={handleTabState}
-            css={{ color: '$highlight2Dark', '@hover': { '&:hover': { cursor: 'pointer' } } }}
-          >
+          <Text link onClick={handleTabState} css={{ color: '$highlight2Dark' }}>
             Sign up.
           </Text>
         </Text>
       ) : (
-        <Text css={{ mb: '5%', textAlign: 'center', mt: '$10' }}>
+        <Text css={{ textAlign: 'center' }}>
           Already have an account?{' '}
-          <Text
-            onClick={handleTabState}
-            css={{ color: '$highlight2Dark', '@hover': { '&:hover': { cursor: 'pointer' } } }}
-          >
+          <Text link onClick={handleTabState} css={{ color: '$highlight2Dark' }}>
             Log in.
           </Text>
         </Text>
       );
     }
     return (
-      <Text
-        css={{
-          mb: '15%',
-          textAlign: 'center',
-          mt: '$10',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
+      <Flex justify="center" align="center">
         SPLIT - A product by{' '}
         <StyledImage
           alt="xgeeks_logo"
           src="/xgeeks_logo.svg"
           width={66}
           height={13}
-          css={{ ml: '$8', mt: '$4' }}
+          css={{ ml: '$8', mt: '$6' }}
         />
-      </Text>
+      </Flex>
     );
   };
 
@@ -101,38 +70,27 @@ const Home: NextPage = () => {
   };
 
   return (
-    <Flex justify="between" css={{ minHeight: '100vh', overflow: 'auto' }}>
-      <Flex direction="column" css={{ flexGrow: '1' }}>
-        <BannerContainer>
-          <Banner />
-        </BannerContainer>
-        <Flex
-          direction="column"
-          css={{
-            ml: '$72',
-            mr: '$72',
-            mt: '9.7%',
-            mb: '$24',
-            height: '100%',
-            justifyContent: 'space-between',
-          }}
-        >
-          {renderBody()}
-          {renderFooter()}
-        </Flex>
-      </Flex>
-      <Flex
-        css={{
-          width: '65%',
-          py: '$24',
-          pr: '$24',
-          flexShrink: 0,
-        }}
-      >
-        <ImageBackground css={{ boxShadow: '-8px 8px 24px rgba(0, 0, 0, 0.16)' }} />
-      </Flex>
-    </Flex>
+    <>
+      {renderBody()}
+      {renderFooter()}
+    </>
   );
 };
 
+Home.getLayout = (page: ReactElement) => <AccessLayout>{page}</AccessLayout>;
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await getSession(ctx);
+
+  if (session) {
+    return {
+      redirect: {
+        destination: DASHBOARD_ROUTE,
+        permanent: false,
+      },
+    };
+  }
+  return { props: {} };
+};
+
 export default Home;

From d4979e3ff3f9e806903736c28cc6bb32c32be256 Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Tue, 4 Apr 2023 12:25:00 +0100
Subject: [PATCH 02/14] fix: margin top

---
 .../src/components/layouts/AccessLayout/AccessLayout.tsx    | 2 +-
 frontend/src/pages/index.tsx                                | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/layouts/AccessLayout/AccessLayout.tsx b/frontend/src/components/layouts/AccessLayout/AccessLayout.tsx
index e1d8da83f..bea1b9df8 100644
--- a/frontend/src/components/layouts/AccessLayout/AccessLayout.tsx
+++ b/frontend/src/components/layouts/AccessLayout/AccessLayout.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 
 import Flex from '@/components/Primitives/Layout/Flex/Flex';
 import Banner from '@/components/icons/Banner';
-import { ImageBackground } from './styles';
+import { ImageBackground } from '@/components/layouts/AccessLayout/styles';
 
 type AccessLayoutProps = {
   children: ReactNode;
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 74e847cc4..77089fe0f 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -30,14 +30,14 @@ const Home = () => {
   const renderFooter = () => {
     if (!NEXT_PUBLIC_LOGIN_SSO_ONLY) {
       return currentTab === 'login' ? (
-        <Text css={{ textAlign: 'center' }}>
+        <Text css={{ textAlign: 'center', mt: '$8' }}>
           No account yet?{' '}
           <Text link onClick={handleTabState} css={{ color: '$highlight2Dark' }}>
             Sign up.
           </Text>
         </Text>
       ) : (
-        <Text css={{ textAlign: 'center' }}>
+        <Text css={{ textAlign: 'center', mt: '$8' }}>
           Already have an account?{' '}
           <Text link onClick={handleTabState} css={{ color: '$highlight2Dark' }}>
             Log in.
@@ -46,7 +46,7 @@ const Home = () => {
       );
     }
     return (
-      <Flex justify="center" align="center">
+      <Flex justify="center" align="center" css={{ mt: '$8' }}>
         SPLIT - A product by{' '}
         <StyledImage
           alt="xgeeks_logo"

From 85c2209020ac93b068e70e9a50ef166ac00e6a98 Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Tue, 4 Apr 2023 13:07:00 +0100
Subject: [PATCH 03/14] fix: trouble login

---
 .../auth/ForgotPassword/EmailSent.tsx         | 108 +++++++-----------
 .../auth/ForgotPassword/TroubleLogin.tsx      |  19 ++-
 2 files changed, 57 insertions(+), 70 deletions(-)

diff --git a/frontend/src/components/auth/ForgotPassword/EmailSent.tsx b/frontend/src/components/auth/ForgotPassword/EmailSent.tsx
index e65ef6d7c..604e313e9 100644
--- a/frontend/src/components/auth/ForgotPassword/EmailSent.tsx
+++ b/frontend/src/components/auth/ForgotPassword/EmailSent.tsx
@@ -1,79 +1,55 @@
-import { useState } from 'react';
-
-import { styled } from '@/styles/stitches/stitches.config';
-
-import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import Button from '@/components/Primitives/Inputs/Button/Button';
 import Flex from '@/components/Primitives/Layout/Flex/Flex';
 import Separator from '@/components/Primitives/Separator/Separator';
 import Text from '@/components/Primitives/Text/Text';
-import useResetToken from '@/hooks/auth/useResetToken';
-
-const MainContainer = styled('form', Flex, {
-  width: '100%',
-});
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 
 interface EmailSentProps {
   userEmail: string;
+  resendEmail: () => void;
+  goBack: () => void;
 }
 
-const EmailSent = ({ userEmail }: EmailSentProps) => {
-  const { mutateAsync } = useResetToken();
-
-  const [currentEmail, setCurrentEmail] = useState('');
-  const [showEmailSent, setShowEmailSent] = useState(false);
-
-  const handleRecoverPassword = async (email: string) => {
-    await mutateAsync({ email });
-
-    setShowEmailSent(true);
-    setCurrentEmail(userEmail);
-  };
-
-  if (showEmailSent) return <EmailSent userEmail={currentEmail} />;
-
-  return (
-    <MainContainer direction="column">
-      <Icon css={{ width: '54.74px', height: '52px' }} name="envelope" />
-      <Text css={{ mt: '$24' }} heading="1">
-        Check Your email
-      </Text>
-      <Text
-        size="md"
-        color="primary500"
-        css={{
-          margin: '12px auto 32px 0',
-        }}
-      >
-        A link to reset your password has been sent to{' '}
-        <Text size="md" fontWeight="bold" color="primary500">
-          {userEmail}
-        </Text>
-        . Please allow a few minutes for the email to get to you and then follow the instructions in
-        the email.
-      </Text>
-
-      <Separator />
-      <Text
-        label
-        css={{
-          margin: '24px auto',
-        }}
-      >
-        If you dont see the email, check other places it might be, like your junk, spam, social, or
-        other folders.
+const EmailSent = ({ userEmail, resendEmail, goBack }: EmailSentProps) => (
+  <Flex direction="column">
+    <Text css={{ mt: '$24' }} heading="1">
+      Check Your email
+    </Text>
+    <Text
+      size="md"
+      color="primary500"
+      css={{
+        margin: '12px auto 32px 0',
+      }}
+    >
+      A link to reset your password has been sent to{' '}
+      <Text size="md" fontWeight="bold" color="primary500">
+        {userEmail}
       </Text>
-      <Button
-        size="lg"
-        type="button"
-        onClick={() => {
-          handleRecoverPassword(userEmail);
-        }}
-      >
-        Resend email with reset link
+      . Please allow a few minutes for the email to get to you and then follow the instructions in
+      the email.
+    </Text>
+
+    <Separator />
+    <Text
+      label
+      css={{
+        margin: '24px auto',
+      }}
+    >
+      If you dont see the email, check other places it might be, like your junk, spam, social, or
+      other folders.
+    </Text>
+    <Button size="lg" type="button" onClick={resendEmail}>
+      Resend email with reset link
+    </Button>
+    <Flex>
+      <Button variant="link" css={{ pl: '0', mt: '$24', color: '$primary500' }} onClick={goBack}>
+        <Icon name="arrow-long-left" />
+        Go Back
       </Button>
-    </MainContainer>
-  );
-};
+    </Flex>
+  </Flex>
+);
 
 export default EmailSent;
diff --git a/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx b/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
index b5d554a81..03bccc4dc 100644
--- a/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
+++ b/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
@@ -12,7 +12,7 @@ import Text from '@/components/Primitives/Text/Text';
 import SchemaEmail from '@/schema/schemaEmail';
 import { EmailUser } from '@/types/user/user';
 import useResetToken from '@/hooks/auth/useResetToken';
-import EmailSent from './EmailSent';
+import EmailSent from '@/components/auth/ForgotPassword/EmailSent';
 
 const MainContainer = styled('form', Flex, {
   width: '100%',
@@ -22,9 +22,10 @@ interface TroubleLoginProps {
   setShowTroubleLogin: Dispatch<SetStateAction<boolean>>;
 }
 
-const TroubleLogin: React.FC<TroubleLoginProps> = ({ setShowTroubleLogin }) => {
+const TroubleLogin = ({ setShowTroubleLogin }: TroubleLoginProps) => {
   const [currentEmail, setCurrentEmail] = useState('');
   const [showEmailSent, setShowEmailSent] = useState(false);
+
   const methods = useForm<EmailUser>({
     mode: 'onChange',
     reValidateMode: 'onChange',
@@ -46,7 +47,18 @@ const TroubleLogin: React.FC<TroubleLoginProps> = ({ setShowTroubleLogin }) => {
     setShowEmailSent(true);
     setCurrentEmail(email);
   };
-  if (showEmailSent) return <EmailSent userEmail={currentEmail} />;
+
+  if (showEmailSent)
+    return (
+      <EmailSent
+        userEmail={currentEmail}
+        resendEmail={() => {
+          handleRecoverPassword(currentEmail);
+        }}
+        goBack={handleShowTroubleLogginIn}
+      />
+    );
+
   return (
     <MainContainer
       direction="column"
@@ -55,7 +67,6 @@ const TroubleLogin: React.FC<TroubleLoginProps> = ({ setShowTroubleLogin }) => {
       })}
     >
       <FormProvider {...methods}>
-        <Icon name="logo" />
         <Text css={{ mt: '$24' }} heading="1">
           Trouble logging in?
         </Text>

From abb0dcf7e1ef38a28570fb6d162f6460bf5eb313 Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Tue, 4 Apr 2023 14:56:20 +0100
Subject: [PATCH 04/14] feat: error pages

---
 frontend/src/pages/404.tsx | 56 ++++++++++++++++++--------------------
 frontend/src/pages/500.tsx | 45 ++++++++++++++----------------
 2 files changed, 47 insertions(+), 54 deletions(-)

diff --git a/frontend/src/pages/404.tsx b/frontend/src/pages/404.tsx
index dd9350423..4532de9f4 100644
--- a/frontend/src/pages/404.tsx
+++ b/frontend/src/pages/404.tsx
@@ -1,38 +1,34 @@
-import Link from 'next/link';
+import { ReactElement } from 'react';
 
-import { BannerContainer, ContainerSection, ImageBackground } from '@/styles/pages/error.styles';
+import Link from 'next/link';
 
-import LogoIcon from '@/components/icons/Logo';
 import Text from '@/components/Primitives/Text/Text';
-import SecondaryBanner from '@/components/icons/SecondaryBanner';
 import Button from '@/components/Primitives/Inputs/Button/Button';
+import AccessLayout from '@/components/layouts/AccessLayout/AccessLayout';
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
 
-export default function Custom404() {
-  return (
-    <ImageBackground>
-      <BannerContainer>
-        <SecondaryBanner />
-      </BannerContainer>
+const Custom404 = () => (
+  <Flex direction="column">
+    <Text css={{ mt: '$24' }} display="1">
+      404
+    </Text>
 
-      <ContainerSection>
-        <LogoIcon />
+    <Text css={{ mt: '$8' }} heading="2" fontWeight="medium">
+      Page Not Found
+    </Text>
+    <Text color="primary500" css={{ mt: '$24' }} size="md">
+      The page you are looking for might have been removed or is temporarily unavailable
+    </Text>
+    <Flex>
+      <Link href="/">
+        <Button css={{ mt: '$24' }} size="md">
+          Go to Home
+        </Button>
+      </Link>
+    </Flex>
+  </Flex>
+);
 
-        <Text css={{ mt: '$29' }} display="3">
-          404
-        </Text>
+Custom404.getLayout = (page: ReactElement) => <AccessLayout>{page}</AccessLayout>;
 
-        <Text css={{ mt: '$10' }} heading="2" fontWeight="medium">
-          Page Not Found
-        </Text>
-        <Text color="primary500" css={{ mt: '$24' }} size="md">
-          The page you are looking for might have been removed or is temporarily unavailable
-        </Text>
-        <Link href="/">
-          <Button css={{ mt: '$26' }} size="md">
-            Go to Home
-          </Button>
-        </Link>
-      </ContainerSection>
-    </ImageBackground>
-  );
-}
+export default Custom404;
diff --git a/frontend/src/pages/500.tsx b/frontend/src/pages/500.tsx
index 9092f5dad..435903cc9 100644
--- a/frontend/src/pages/500.tsx
+++ b/frontend/src/pages/500.tsx
@@ -1,37 +1,34 @@
-import Link from 'next/link';
+import { ReactElement } from 'react';
 
-import { BannerContainer, ContainerSection, ImageBackground } from '@/styles/pages/error.styles';
+import Link from 'next/link';
 
-import LogoIcon from '@/components/icons/Logo';
 import Text from '@/components/Primitives/Text/Text';
-import SecondaryBanner from '@/components/icons/SecondaryBanner';
 import Button from '@/components/Primitives/Inputs/Button/Button';
+import AccessLayout from '@/components/layouts/AccessLayout/AccessLayout';
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
 
 const Custom500 = () => (
-  <ImageBackground>
-    <BannerContainer>
-      <SecondaryBanner />
-    </BannerContainer>
-
-    <ContainerSection>
-      <LogoIcon />
+  <Flex direction="column">
+    <Text css={{ mt: '$24' }} display="1">
+      500
+    </Text>
 
-      <Text css={{ mt: '$29' }} display="3">
-        500
-      </Text>
-
-      <Text css={{ mt: '$10' }} heading="2" fontWeight="medium">
-        Server Error
-      </Text>
-      <Text color="primary500" css={{ mt: '$24' }} size="md">
-        Try to refresh this page or feel free to contact us if the problem persists.
-      </Text>
+    <Text css={{ mt: '$8' }} heading="2" fontWeight="medium">
+      Server Error
+    </Text>
+    <Text color="primary500" css={{ mt: '$24' }} size="md">
+      Try to refresh this page or feel free to contact us if the problem persists.
+    </Text>
+    <Flex>
       <Link href="/">
-        <Button css={{ mt: '$26' }} size="md">
+        <Button css={{ mt: '$24' }} size="md">
           Go to Home
         </Button>
       </Link>
-    </ContainerSection>
-  </ImageBackground>
+    </Flex>
+  </Flex>
 );
+
+Custom500.getLayout = (page: ReactElement) => <AccessLayout>{page}</AccessLayout>;
+
 export default Custom500;

From cb63f5bd423c91787e5cd7572593b39b51963e35 Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Tue, 4 Apr 2023 15:35:08 +0100
Subject: [PATCH 05/14] fix: redirect board

---
 frontend/src/pages/board-deleted.tsx          | 56 +++++++++----------
 frontend/src/pages/boards/[boardId]/index.tsx | 44 +++++++--------
 2 files changed, 47 insertions(+), 53 deletions(-)

diff --git a/frontend/src/pages/board-deleted.tsx b/frontend/src/pages/board-deleted.tsx
index 960a55825..ae083db56 100644
--- a/frontend/src/pages/board-deleted.tsx
+++ b/frontend/src/pages/board-deleted.tsx
@@ -1,38 +1,34 @@
-import Link from 'next/link';
+import { ReactElement } from 'react';
 
-import { BannerContainer, ContainerSection, ImageBackground } from '@/styles/pages/error.styles';
+import Link from 'next/link';
 
-import Banner from '@/components/icons/Banner';
-import LogoIcon from '@/components/icons/Logo';
 import Text from '@/components/Primitives/Text/Text';
 import Button from '@/components/Primitives/Inputs/Button/Button';
+import AccessLayout from '@/components/layouts/AccessLayout/AccessLayout';
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
 
-export default function Custom404() {
-  return (
-    <ImageBackground>
-      <BannerContainer>
-        <Banner />
-      </BannerContainer>
+const BoardDeleted = () => (
+  <Flex direction="column">
+    <Text css={{ mt: '$24' }} display="1">
+      404
+    </Text>
 
-      <ContainerSection>
-        <LogoIcon />
+    <Text css={{ mt: '$8' }} heading="2" fontWeight="medium">
+      Board deleted
+    </Text>
+    <Text color="primary500" css={{ mt: '$24' }} size="md">
+      The board was deleted by a board admin
+    </Text>
+    <Flex>
+      <Link href="/dashboard">
+        <Button css={{ mt: '$24' }} size="md">
+          Go to Dashboard
+        </Button>
+      </Link>
+    </Flex>
+  </Flex>
+);
 
-        <Text css={{ mt: '$29' }} display="3">
-          404
-        </Text>
+BoardDeleted.getLayout = (page: ReactElement) => <AccessLayout>{page}</AccessLayout>;
 
-        <Text css={{ mt: '$10' }} heading="2" fontWeight="medium">
-          Board deleted
-        </Text>
-        <Text color="primary500" css={{ mt: '$24' }} size="md">
-          The board was deleted by a board admin
-        </Text>
-        <Link href="/dashboard">
-          <Button css={{ mt: '$26' }} size="md">
-            Go to Dashboard
-          </Button>
-        </Link>
-      </ContainerSection>
-    </ImageBackground>
-  );
-}
+export default BoardDeleted;
diff --git a/frontend/src/pages/boards/[boardId]/index.tsx b/frontend/src/pages/boards/[boardId]/index.tsx
index a5e0aa796..ac960348a 100644
--- a/frontend/src/pages/boards/[boardId]/index.tsx
+++ b/frontend/src/pages/boards/[boardId]/index.tsx
@@ -29,7 +29,7 @@ import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
 import isEmpty from '@/utils/isEmpty';
 import { GuestUser } from '@/types/user/user';
-import { DASHBOARD_ROUTE } from '@/utils/routes';
+import { BOARDS_ROUTE } from '@/utils/routes';
 import { getGuestUserCookies } from '@/utils/getGuestUserCookies';
 import { BoardPhases } from '@/utils/enums/board.phases';
 import ConfirmationDialog from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
@@ -44,29 +44,27 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 
   const session = await getSession(context);
 
-  if (boardId.includes('.map'))
-    return {
-      props: {},
-    };
-
-  const boardIsPublic = await getPublicStatusRequest(boardId, context);
-
-  // if board is public and user has no session
-  if (boardIsPublic && !session) {
-    // check if there are guest user cookies
-    const cookiesGuestUser: GuestUser | { user: string } = getGuestUserCookies({ req, res }, true);
-    // if there isn´t cookies, the guest user is not registered
-    if (!cookiesGuestUser) {
-      return {
-        redirect: {
-          permanent: false,
-          destination: `/login-guest-user/${boardId}`,
-        },
-      };
+  try {
+    const boardIsPublic = await getPublicStatusRequest(boardId, context);
+
+    // if board is public and user has no session
+    if (boardIsPublic && !session) {
+      // check if there are guest user cookies
+      const cookiesGuestUser: GuestUser | { user: string } = getGuestUserCookies(
+        { req, res },
+        true,
+      );
+      // if there isn´t cookies, the guest user is not registered
+      if (!cookiesGuestUser) {
+        return {
+          redirect: {
+            permanent: false,
+            destination: `/login-guest-user/${boardId}`,
+          },
+        };
+      }
     }
-  }
 
-  try {
     await queryClient.fetchQuery(['board', { id: boardId }], () =>
       getBoardRequest(boardId, context),
     );
@@ -74,7 +72,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     return {
       redirect: {
         permanent: false,
-        destination: DASHBOARD_ROUTE,
+        destination: BOARDS_ROUTE,
       },
     };
   }

From de2331e898901026022eac294cc1036a06c07307 Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Tue, 4 Apr 2023 16:48:10 +0100
Subject: [PATCH 06/14] fix: pages layout

---
 .../auth/ForgotPassword/ResetPassword.tsx     | 37 ++++++-------
 .../src/components/auth/LoginForm/index.tsx   |  1 -
 .../src/pages/login-guest-user/[boardId].tsx  | 42 ++-------------
 .../src/pages/reset-password/[tokenId].tsx    | 53 ++++---------------
 frontend/src/types/user/user.ts               |  4 +-
 5 files changed, 33 insertions(+), 104 deletions(-)

diff --git a/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx b/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx
index a13d95129..442e632a0 100644
--- a/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx
+++ b/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx
@@ -4,7 +4,6 @@ import { joiResolver } from '@hookform/resolvers/joi';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
-import LogoIcon from '@/components/icons/Logo';
 import Button from '@/components/Primitives/Inputs/Button/Button';
 import Flex from '@/components/Primitives/Layout/Flex/Flex';
 import Input from '@/components/Primitives/Inputs/Input/Input';
@@ -28,8 +27,8 @@ const ResetPassword = ({ token }: ResetPasswordProps) => {
     mode: 'onChange',
     reValidateMode: 'onChange',
     defaultValues: {
-      password: '',
-      passwordConf: '',
+      newPassword: '',
+      newPasswordConf: '',
     },
     resolver: joiResolver(SchemaResetPasswordForm),
   });
@@ -37,25 +36,23 @@ const ResetPassword = ({ token }: ResetPasswordProps) => {
   const { mutateAsync, status } = useResetPassword();
 
   const handleRecoverPassword = async (params: NewPassword) => {
-    params.token = token;
-    await mutateAsync({ ...params, token });
+    await mutateAsync(params);
   };
 
   useEffect(() => {
     if (status === 'success') {
       router.push('/');
     }
-  }, [status]);
+  }, [status, router]);
 
   return (
-    <MainContainer
-      direction="column"
-      onSubmit={methods.handleSubmit((params) => {
-        handleRecoverPassword(params);
-      })}
-    >
-      <FormProvider {...methods}>
-        <LogoIcon />
+    <FormProvider {...methods}>
+      <MainContainer
+        direction="column"
+        onSubmit={methods.handleSubmit((params) => {
+          handleRecoverPassword({ ...params, token });
+        })}
+      >
         <Text css={{ mt: '$24' }} heading="1">
           Reset Password
         </Text>
@@ -64,17 +61,15 @@ const ResetPassword = ({ token }: ResetPasswordProps) => {
         </Text>
         <Input
           css={{ mt: '$32' }}
-          helperText="Your Password must be at least 8 characters long"
-          icon="eye"
           iconPosition="right"
+          icon="eye"
           id="newPassword"
-          placeholder="Type password here"
+          placeholder="Type new password here"
           type="password"
         />
         <Input
-          helperText="Your Password must be at least 8 characters long"
-          icon="eye"
           iconPosition="right"
+          icon="eye"
           id="newPasswordConf"
           placeholder="Repeat password"
           type="password"
@@ -82,8 +77,8 @@ const ResetPassword = ({ token }: ResetPasswordProps) => {
         <Button size="lg" type="submit">
           Recover password
         </Button>
-      </FormProvider>
-    </MainContainer>
+      </MainContainer>
+    </FormProvider>
   );
 };
 
diff --git a/frontend/src/components/auth/LoginForm/index.tsx b/frontend/src/components/auth/LoginForm/index.tsx
index e7c222784..15c270518 100644
--- a/frontend/src/components/auth/LoginForm/index.tsx
+++ b/frontend/src/components/auth/LoginForm/index.tsx
@@ -94,7 +94,6 @@ const LoginForm = ({ setShowTroubleLogin }: LoginFormProps) => {
       <StyledForm
         autoComplete="off"
         direction="column"
-        style={{ width: '100%' }}
         onSubmit={methods.handleSubmit((credentials: LoginUser) => {
           handleLogin(credentials);
         })}
diff --git a/frontend/src/pages/login-guest-user/[boardId].tsx b/frontend/src/pages/login-guest-user/[boardId].tsx
index f0607dff3..342262937 100644
--- a/frontend/src/pages/login-guest-user/[boardId].tsx
+++ b/frontend/src/pages/login-guest-user/[boardId].tsx
@@ -1,41 +1,9 @@
-import { NextPage } from 'next';
-
-import Banner from '@/components/icons/Banner';
-import Flex from '@/components/Primitives/Layout/Flex/Flex';
-import { BannerContainer, ImageBackground } from '@/styles/pages/auth.styles';
 import GuestUserForm from '@/components/auth/GuestUserForm';
+import { ReactElement } from 'react';
+import AccessLayout from '@/components/layouts/AccessLayout/AccessLayout';
+
+const LoginGuestUser = () => <GuestUserForm />;
 
-const LoginGuestUser: NextPage = () => (
-  <Flex justify="between" css={{ minHeight: '100vh', overflow: 'auto' }}>
-    <Flex direction="column" css={{ flexGrow: '1' }}>
-      <BannerContainer>
-        <Banner />
-      </BannerContainer>
-      <Flex
-        direction="column"
-        css={{
-          ml: '$72',
-          mr: '$72',
-          mt: '9.7%',
-          mb: '$24',
-          height: '100%',
-          justifyContent: 'space-between',
-        }}
-      >
-        <GuestUserForm />
-      </Flex>
-    </Flex>
-    <Flex
-      css={{
-        width: '65%',
-        py: '$24',
-        pr: '$24',
-        flexShrink: 0,
-      }}
-    >
-      <ImageBackground css={{ boxShadow: '-8px 8px 24px rgba(0, 0, 0, 0.16)' }} />
-    </Flex>
-  </Flex>
-);
+LoginGuestUser.getLayout = (page: ReactElement) => <AccessLayout>{page}</AccessLayout>;
 
 export default LoginGuestUser;
diff --git a/frontend/src/pages/reset-password/[tokenId].tsx b/frontend/src/pages/reset-password/[tokenId].tsx
index b9ea3b1be..0a1c386a9 100644
--- a/frontend/src/pages/reset-password/[tokenId].tsx
+++ b/frontend/src/pages/reset-password/[tokenId].tsx
@@ -1,50 +1,17 @@
-import { useRouter } from 'next/router';
+import { ReactElement } from 'react';
 
-import { styled } from '@/styles/stitches/stitches.config';
+import { useRouter } from 'next/router';
 
 import ResetPassword from '@/components/auth/ForgotPassword/ResetPassword';
-import Banner from '@/components/icons/Banner';
-import Flex from '@/components/Primitives/Layout/Flex/Flex';
-
-const CenteredContainer = styled(Flex, {
-  position: 'absolute',
-  top: '$202',
-  right: '$162',
-  boxSizing: 'border-box',
-  '@media (max-height: 1023px)': {
-    top: 'calc((100vh - 710px) / 2)',
-  },
-  '&:focus': { outline: 'none' },
-});
-
-const MainContainer = styled(Flex, {
-  height: '100vh',
-  width: '100%',
-  position: 'relative',
-  backgroundColor: '$black',
-  backgroundImage: 'url(/images/background.svg)',
-  backgroundSize: 'cover',
-  backgroundRepeat: 'no-repeat',
-});
+import AccessLayout from '@/components/layouts/AccessLayout/AccessLayout';
 
-const BannerContainer = styled(Flex, {
-  mt: '$74',
-  ml: '$62',
-  size: 'fit-content',
-});
-
-const TokenId = () => {
+const ResetPasswordPage = () => {
   const router = useRouter();
-  const { tokenId } = router.query || { tokenId: '' };
-  const stringedToken = String(tokenId);
+  const tokenId = (router.query.tokenId || '') as string;
 
-  return (
-    <MainContainer>
-      <BannerContainer>
-        <Banner />
-      </BannerContainer>
-      <CenteredContainer>{tokenId && <ResetPassword token={stringedToken} />}</CenteredContainer>
-    </MainContainer>
-  );
+  return tokenId && <ResetPassword token={tokenId} />;
 };
-export default TokenId;
+
+ResetPasswordPage.getLayout = (page: ReactElement) => <AccessLayout>{page}</AccessLayout>;
+
+export default ResetPasswordPage;
diff --git a/frontend/src/types/user/user.ts b/frontend/src/types/user/user.ts
index cfe822c95..adcbec8c6 100644
--- a/frontend/src/types/user/user.ts
+++ b/frontend/src/types/user/user.ts
@@ -47,8 +47,8 @@ export interface ResetTokenResponse {
 }
 
 export interface NewPassword {
-  password: string;
-  passwordConf: string;
+  newPassword: string;
+  newPasswordConf: string;
   token: string;
 }
 

From 972829fa73ff6f9777672fe4d9c03b93de96167e Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Tue, 4 Apr 2023 17:13:25 +0100
Subject: [PATCH 07/14] fix: reset password page

---
 .../auth/ForgotPassword/ResetPassword.tsx     | 85 -------------------
 .../src/pages/reset-password/[tokenId].tsx    | 74 +++++++++++++++-
 frontend/src/styles/pages/auth.styles.tsx     | 34 --------
 frontend/src/styles/pages/error.styles.tsx    | 40 ---------
 .../styles/pages/login-guest-user.styles.tsx  | 16 ----
 5 files changed, 72 insertions(+), 177 deletions(-)
 delete mode 100644 frontend/src/components/auth/ForgotPassword/ResetPassword.tsx
 delete mode 100644 frontend/src/styles/pages/auth.styles.tsx
 delete mode 100644 frontend/src/styles/pages/error.styles.tsx
 delete mode 100644 frontend/src/styles/pages/login-guest-user.styles.tsx

diff --git a/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx b/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx
deleted file mode 100644
index 442e632a0..000000000
--- a/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { FormProvider, useForm } from 'react-hook-form';
-import { useRouter } from 'next/router';
-import { joiResolver } from '@hookform/resolvers/joi';
-
-import { styled } from '@/styles/stitches/stitches.config';
-
-import Button from '@/components/Primitives/Inputs/Button/Button';
-import Flex from '@/components/Primitives/Layout/Flex/Flex';
-import Input from '@/components/Primitives/Inputs/Input/Input';
-import Text from '@/components/Primitives/Text/Text';
-import SchemaResetPasswordForm from '@/schema/schemaResetPasswordForm';
-import { NewPassword } from '@/types/user/user';
-import useResetPassword from '@/hooks/auth/useResetPassword';
-import { useEffect } from 'react';
-
-const MainContainer = styled('form', Flex, {
-  width: '100%',
-});
-
-interface ResetPasswordProps {
-  token: string;
-}
-
-const ResetPassword = ({ token }: ResetPasswordProps) => {
-  const router = useRouter();
-  const methods = useForm<NewPassword>({
-    mode: 'onChange',
-    reValidateMode: 'onChange',
-    defaultValues: {
-      newPassword: '',
-      newPasswordConf: '',
-    },
-    resolver: joiResolver(SchemaResetPasswordForm),
-  });
-
-  const { mutateAsync, status } = useResetPassword();
-
-  const handleRecoverPassword = async (params: NewPassword) => {
-    await mutateAsync(params);
-  };
-
-  useEffect(() => {
-    if (status === 'success') {
-      router.push('/');
-    }
-  }, [status, router]);
-
-  return (
-    <FormProvider {...methods}>
-      <MainContainer
-        direction="column"
-        onSubmit={methods.handleSubmit((params) => {
-          handleRecoverPassword({ ...params, token });
-        })}
-      >
-        <Text css={{ mt: '$24' }} heading="1">
-          Reset Password
-        </Text>
-        <Text size="md" color="primary500" css={{ mt: '$8' }}>
-          Enter your new password
-        </Text>
-        <Input
-          css={{ mt: '$32' }}
-          iconPosition="right"
-          icon="eye"
-          id="newPassword"
-          placeholder="Type new password here"
-          type="password"
-        />
-        <Input
-          iconPosition="right"
-          icon="eye"
-          id="newPasswordConf"
-          placeholder="Repeat password"
-          type="password"
-        />
-        <Button size="lg" type="submit">
-          Recover password
-        </Button>
-      </MainContainer>
-    </FormProvider>
-  );
-};
-
-export default ResetPassword;
diff --git a/frontend/src/pages/reset-password/[tokenId].tsx b/frontend/src/pages/reset-password/[tokenId].tsx
index 0a1c386a9..54cd7315c 100644
--- a/frontend/src/pages/reset-password/[tokenId].tsx
+++ b/frontend/src/pages/reset-password/[tokenId].tsx
@@ -2,14 +2,84 @@ import { ReactElement } from 'react';
 
 import { useRouter } from 'next/router';
 
-import ResetPassword from '@/components/auth/ForgotPassword/ResetPassword';
 import AccessLayout from '@/components/layouts/AccessLayout/AccessLayout';
 
+import { FormProvider, useForm } from 'react-hook-form';
+import { joiResolver } from '@hookform/resolvers/joi';
+
+import { styled } from '@/styles/stitches/stitches.config';
+
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
+import Input from '@/components/Primitives/Inputs/Input/Input';
+import Text from '@/components/Primitives/Text/Text';
+import SchemaResetPasswordForm from '@/schema/schemaResetPasswordForm';
+import { NewPassword } from '@/types/user/user';
+import useResetPassword from '@/hooks/auth/useResetPassword';
+
+const MainContainer = styled('form', Flex, {
+  width: '100%',
+});
+
 const ResetPasswordPage = () => {
   const router = useRouter();
   const tokenId = (router.query.tokenId || '') as string;
 
-  return tokenId && <ResetPassword token={tokenId} />;
+  const { mutate } = useResetPassword();
+
+  const methods = useForm<NewPassword>({
+    mode: 'onChange',
+    reValidateMode: 'onChange',
+    defaultValues: {
+      newPassword: '',
+      newPasswordConf: '',
+    },
+    resolver: joiResolver(SchemaResetPasswordForm),
+  });
+
+  const handleRecoverPassword = (params: NewPassword) => {
+    mutate(params, {
+      onSuccess: () => {
+        router.push('/');
+      },
+    });
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <MainContainer
+        direction="column"
+        onSubmit={methods.handleSubmit((params) => {
+          handleRecoverPassword({ ...params, token: tokenId });
+        })}
+      >
+        <Text css={{ mt: '$24' }} heading="1">
+          Reset Password
+        </Text>
+        <Text size="md" color="primary500" css={{ mt: '$8' }}>
+          Enter your new password
+        </Text>
+        <Input
+          css={{ mt: '$32' }}
+          iconPosition="right"
+          icon="eye"
+          id="newPassword"
+          placeholder="Type new password here"
+          type="password"
+        />
+        <Input
+          iconPosition="right"
+          icon="eye"
+          id="newPasswordConf"
+          placeholder="Repeat password"
+          type="password"
+        />
+        <Button size="lg" type="submit">
+          Recover password
+        </Button>
+      </MainContainer>
+    </FormProvider>
+  );
 };
 
 ResetPasswordPage.getLayout = (page: ReactElement) => <AccessLayout>{page}</AccessLayout>;
diff --git a/frontend/src/styles/pages/auth.styles.tsx b/frontend/src/styles/pages/auth.styles.tsx
deleted file mode 100644
index c1ffa9d99..000000000
--- a/frontend/src/styles/pages/auth.styles.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { styled } from '@/styles/stitches/stitches.config';
-
-import Flex from '@/components/Primitives/Layout/Flex/Flex';
-
-const CenteredContainer = styled('div', {
-  position: 'absolute',
-  top: '5%',
-  right: '$150',
-
-  maxWidth: '500px',
-  height: 'fit-content',
-
-  display: 'flex',
-  flexDirection: 'column',
-
-  backgroundColor: '#ffffff',
-  borderRadius: '$12',
-});
-const ImageBackground = styled(Flex, {
-  height: '100%',
-  width: '100%',
-  backgroundColor: '$black',
-  backgroundImage: 'url(/images/background.svg)',
-  backgroundSize: 'cover',
-  backgroundRepeat: 'no-repeat',
-  borderRadius: '$72 0 $72',
-});
-
-const BannerContainer = styled(Flex, {
-  ml: '$72',
-  mt: '8.4%',
-});
-
-export { BannerContainer, CenteredContainer, ImageBackground };
diff --git a/frontend/src/styles/pages/error.styles.tsx b/frontend/src/styles/pages/error.styles.tsx
deleted file mode 100644
index 57468a981..000000000
--- a/frontend/src/styles/pages/error.styles.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { styled } from '@/styles/stitches/stitches.config';
-
-import Flex from '@/components/Primitives/Layout/Flex/Flex';
-
-export const ContainerSection = styled('div', {
-  position: 'absolute',
-  top: '50%',
-  right: '150px',
-
-  transform: 'translateY(-50%)',
-
-  maxWidth: '500px',
-  height: 'fit-content',
-
-  display: 'flex',
-  flexDirection: 'column',
-
-  px: '$32',
-  py: '80px',
-  backgroundColor: '#ffffff',
-  borderRadius: '$12',
-});
-
-export const ImageBackground = styled(Flex, {
-  height: '100vh',
-  width: '100%',
-  position: 'relative',
-  backgroundColor: '$black',
-  backgroundImage: 'url(/images/background.svg)',
-  backgroundSize: 'cover',
-  backgroundRepeat: 'no-repeat',
-});
-
-export const BannerContainer = styled(Flex, {
-  size: 'fit-content',
-
-  position: 'absolute',
-  left: '112px',
-  top: '72px',
-});
diff --git a/frontend/src/styles/pages/login-guest-user.styles.tsx b/frontend/src/styles/pages/login-guest-user.styles.tsx
deleted file mode 100644
index beddc12b9..000000000
--- a/frontend/src/styles/pages/login-guest-user.styles.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { styled } from '@/styles/stitches/stitches.config';
-import Flex from '@/components/Primitives/Layout/Flex/Flex';
-
-const ImageBackground = styled(Flex, {
-  background: 'url(/images/background.svg) no-repeat center center fixed',
-  height: '100%',
-  width: '100%',
-  backgroundColor: '$black',
-  backgroundSize: 'cover',
-  overflow: 'hidden',
-});
-const BannerContainer = styled(Flex, {
-  ml: '$72',
-  mt: '$72',
-});
-export { BannerContainer, ImageBackground };

From 3045b6e0cdd15fc60e13f44d685e9e12719fdc66 Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Tue, 4 Apr 2023 17:43:37 +0100
Subject: [PATCH 08/14] fix: login guest user

---
 .../components/auth/GuestUserForm/index.tsx   | 85 -------------------
 .../src/pages/login-guest-user/[boardId].tsx  | 85 ++++++++++++++++++-
 2 files changed, 81 insertions(+), 89 deletions(-)
 delete mode 100644 frontend/src/components/auth/GuestUserForm/index.tsx

diff --git a/frontend/src/components/auth/GuestUserForm/index.tsx b/frontend/src/components/auth/GuestUserForm/index.tsx
deleted file mode 100644
index e5ad81e56..000000000
--- a/frontend/src/components/auth/GuestUserForm/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { FormProvider, useForm } from 'react-hook-form';
-import { useRouter } from 'next/router';
-import { joiResolver } from '@hookform/resolvers/joi';
-import Input from '@/components/Primitives/Inputs/Input/Input';
-import Text from '@/components/Primitives/Text/Text';
-import { LoginGuestUser } from '@/types/user/user';
-import { START_PAGE_ROUTE } from '@/utils/routes';
-import Button from '@/components/Primitives/Inputs/Button/Button';
-import Flex from '@/components/Primitives/Layout/Flex/Flex';
-import SchemaLoginGuestForm from '@/schema/schemaLoginGuestForm';
-import { getUsername } from '@/utils/getUsername';
-import useRegisterGuestUser from '@/hooks/auth/useRegisterGuestUser';
-import { useEffect } from 'react';
-import { OrSeparator, StyledForm } from '@/components/auth/LoginForm/styles';
-
-const GuestUserForm = () => {
-  const router = useRouter();
-  const board = router.query.boardId;
-
-  const { mutate, status } = useRegisterGuestUser();
-
-  const methods = useForm<LoginGuestUser>({
-    mode: 'onChange',
-    reValidateMode: 'onChange',
-    defaultValues: {
-      username: '',
-    },
-    resolver: joiResolver(SchemaLoginGuestForm),
-  });
-
-  const handleLogin = (username: string) => {
-    const user = getUsername(username);
-
-    mutate({ board: String(board), firstName: user.firstName, lastName: user.lastName });
-  };
-
-  const handleClick = () => {
-    router.push(START_PAGE_ROUTE);
-  };
-
-  useEffect(() => {
-    if (status === 'success') {
-      router.push({ pathname: `/boards/[boardId]`, query: { boardId: board } });
-    }
-  }, [status]);
-
-  return (
-    <FormProvider {...methods}>
-      <StyledForm
-        autoComplete="off"
-        direction="column"
-        style={{ width: '100%' }}
-        onSubmit={methods.handleSubmit(({ username }) => {
-          handleLogin(username);
-        })}
-      >
-        <Text css={{ mt: '$24' }} heading="1">
-          Guest User
-        </Text>
-        <Text size="md" color="primary500" css={{ mt: '$8' }}>
-          Enter a guest user name and join the retro.
-        </Text>
-        <Input css={{ mt: '$32' }} id="username" placeholder="Guest user name" type="text" />
-
-        <Button disabled={status !== 'idle'} size="lg" type="submit">
-          Log in as guest
-        </Button>
-        <Flex align="center" direction="column" justify="center">
-          <OrSeparator>
-            <hr />
-            <Text color="primary300" size="sm" fontWeight="medium">
-              or
-            </Text>
-            <hr />
-          </OrSeparator>
-          <Button css={{ width: '100%' }} size="lg" onClick={handleClick}>
-            Sign In
-          </Button>
-        </Flex>
-      </StyledForm>
-    </FormProvider>
-  );
-};
-
-export default GuestUserForm;
diff --git a/frontend/src/pages/login-guest-user/[boardId].tsx b/frontend/src/pages/login-guest-user/[boardId].tsx
index 342262937..5db773685 100644
--- a/frontend/src/pages/login-guest-user/[boardId].tsx
+++ b/frontend/src/pages/login-guest-user/[boardId].tsx
@@ -1,9 +1,86 @@
-import GuestUserForm from '@/components/auth/GuestUserForm';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useRouter } from 'next/router';
+import { joiResolver } from '@hookform/resolvers/joi';
+import Input from '@/components/Primitives/Inputs/Input/Input';
+import Text from '@/components/Primitives/Text/Text';
+import { LoginGuestUser } from '@/types/user/user';
+import { START_PAGE_ROUTE } from '@/utils/routes';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
+import SchemaLoginGuestForm from '@/schema/schemaLoginGuestForm';
+import { getUsername } from '@/utils/getUsername';
+import useRegisterGuestUser from '@/hooks/auth/useRegisterGuestUser';
 import { ReactElement } from 'react';
+import { OrSeparator, StyledForm } from '@/components/auth/LoginForm/styles';
 import AccessLayout from '@/components/layouts/AccessLayout/AccessLayout';
+import { CreateGuestUser } from '@/types/user/create-login.user';
 
-const LoginGuestUser = () => <GuestUserForm />;
+const LoginGuestUserPage = () => {
+  const router = useRouter();
+  const board = (router.query.boardId || '') as string;
 
-LoginGuestUser.getLayout = (page: ReactElement) => <AccessLayout>{page}</AccessLayout>;
+  const { mutate } = useRegisterGuestUser();
 
-export default LoginGuestUser;
+  const methods = useForm<LoginGuestUser>({
+    mode: 'onChange',
+    reValidateMode: 'onChange',
+    defaultValues: {
+      username: '',
+    },
+    resolver: joiResolver(SchemaLoginGuestForm),
+  });
+
+  const handleLogin = (guestUser: CreateGuestUser) => {
+    mutate(guestUser, {
+      onSuccess: () => {
+        router.push({ pathname: `/boards/[boardId]`, query: { boardId: board } });
+      },
+    });
+  };
+
+  const handleClick = () => {
+    router.push(START_PAGE_ROUTE);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <StyledForm
+        autoComplete="off"
+        direction="column"
+        style={{ width: '100%' }}
+        onSubmit={methods.handleSubmit(({ username }) => {
+          const user = getUsername(username);
+          handleLogin({ board, firstName: user.firstName, lastName: user.lastName });
+        })}
+      >
+        <Text css={{ mt: '$24' }} heading="1">
+          Guest User
+        </Text>
+        <Text size="md" color="primary500" css={{ mt: '$8' }}>
+          Enter a guest user name and join the retro.
+        </Text>
+        <Input css={{ mt: '$32' }} id="username" placeholder="Guest user name" type="text" />
+
+        <Button size="lg" type="submit">
+          Log in as guest
+        </Button>
+        <Flex align="center" direction="column" justify="center">
+          <OrSeparator>
+            <hr />
+            <Text color="primary300" size="sm" fontWeight="medium">
+              or
+            </Text>
+            <hr />
+          </OrSeparator>
+          <Button css={{ width: '100%' }} size="lg" onClick={handleClick}>
+            Sign In
+          </Button>
+        </Flex>
+      </StyledForm>
+    </FormProvider>
+  );
+};
+
+LoginGuestUserPage.getLayout = (page: ReactElement) => <AccessLayout>{page}</AccessLayout>;
+
+export default LoginGuestUserPage;

From 7a81a11bb36c770075d64563fd247d55b069db30 Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Wed, 5 Apr 2023 12:15:48 +0100
Subject: [PATCH 09/14] refactor: or separator

---
 .../src/components/auth/LoginForm/index.tsx   | 34 ++++++++++--------
 .../src/components/auth/LoginForm/styles.tsx  | 36 +------------------
 .../auth/SignUp/SignUpOptionsForm.tsx         | 12 +++----
 .../auth/SignUp/SignUpTabContent.tsx          |  2 +-
 .../src/pages/login-guest-user/[boardId].tsx  | 13 +++----
 frontend/src/styles/centerScreen.tsx          | 11 ------
 frontend/src/styles/pages/pages.styles.tsx    |  2 ++
 7 files changed, 36 insertions(+), 74 deletions(-)
 delete mode 100644 frontend/src/styles/centerScreen.tsx

diff --git a/frontend/src/components/auth/LoginForm/index.tsx b/frontend/src/components/auth/LoginForm/index.tsx
index 15c270518..44b3b9824 100644
--- a/frontend/src/components/auth/LoginForm/index.tsx
+++ b/frontend/src/components/auth/LoginForm/index.tsx
@@ -27,7 +27,8 @@ import { DASHBOARD_ROUTE } from '@/utils/routes';
 import Button from '@/components/Primitives/Inputs/Button/Button';
 import { getCookie, deleteCookie } from 'cookies-next';
 import loginWithAzure from '@/hooks/auth/loginWithAzure';
-import { OrSeparator, StyledForm, StyledHoverIconFlex } from './styles';
+import Separator from '@/components/Primitives/Separator/Separator';
+import { StyledForm } from './styles';
 import LoginSSO from './LoginSSO';
 
 interface LoginFormProps {
@@ -128,28 +129,31 @@ const LoginForm = ({ setShowTroubleLogin }: LoginFormProps) => {
         </Button>
         {AUTH_SSO && (
           <Flex align="center" direction="column" justify="center">
-            <OrSeparator>
-              <hr />
+            <Flex align="center" css={{ width: '100%', my: '$26' }} gap="16">
+              <Separator />
               <Text color="primary300" size="sm" fontWeight="medium">
-                or
+                OR
               </Text>
-              <hr />
-            </OrSeparator>
+              <Separator />
+            </Flex>
             <Flex gap="32">
               {NEXT_PUBLIC_ENABLE_GIT && (
-                <StyledHoverIconFlex>
-                  <Icon css={{ width: '$60', height: '$60' }} name="github" />
-                </StyledHoverIconFlex>
+                <Button isIcon>
+                  <Icon css={{ width: '$60 !important', height: '$60 !important' }} name="github" />
+                </Button>
               )}
               {NEXT_PUBLIC_ENABLE_GOOGLE && (
-                <StyledHoverIconFlex>
-                  <Icon css={{ width: '$60', height: '$60' }} name="google" />
-                </StyledHoverIconFlex>
+                <Button isIcon>
+                  <Icon css={{ width: '$60 !important', height: '$60 !important' }} name="google" />
+                </Button>
               )}
               {NEXT_PUBLIC_ENABLE_AZURE && (
-                <StyledHoverIconFlex data-loading={loading.sso} onClick={handleLoginAzure}>
-                  <Icon css={{ width: '$60', height: '$60' }} name="microsoft" />
-                </StyledHoverIconFlex>
+                <Button isIcon data-loading={loading.sso} onClick={handleLoginAzure}>
+                  <Icon
+                    css={{ width: '$60 !important', height: '$60 !important' }}
+                    name="microsoft"
+                  />
+                </Button>
               )}
             </Flex>
           </Flex>
diff --git a/frontend/src/components/auth/LoginForm/styles.tsx b/frontend/src/components/auth/LoginForm/styles.tsx
index 377e236d6..e84e5e493 100644
--- a/frontend/src/components/auth/LoginForm/styles.tsx
+++ b/frontend/src/components/auth/LoginForm/styles.tsx
@@ -4,38 +4,4 @@ import Flex from '@/components/Primitives/Layout/Flex/Flex';
 
 const StyledForm = styled('form', Flex, { width: '100%' });
 
-const StyledHoverIconFlex = styled('div', Flex, {
-  '&:hover': {
-    '&[data-loading="true"]': {
-      cursor: 'default',
-    },
-    '&[data-loading="false"]': {
-      cursor: 'pointer',
-    },
-  },
-});
-
-const OrSeparator = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-
-  width: '100%',
-
-  mt: '$26',
-  mb: '$32',
-
-  hr: {
-    flexGrow: 1,
-    height: 1,
-    margin: 0,
-    border: 0,
-    backgroundColor: '$primary100',
-  },
-
-  span: {
-    px: '$14',
-    textTransform: 'uppercase !important',
-  },
-});
-
-export { OrSeparator, StyledForm, StyledHoverIconFlex };
+export { StyledForm };
diff --git a/frontend/src/components/auth/SignUp/SignUpOptionsForm.tsx b/frontend/src/components/auth/SignUp/SignUpOptionsForm.tsx
index e2234cd31..0a613e111 100644
--- a/frontend/src/components/auth/SignUp/SignUpOptionsForm.tsx
+++ b/frontend/src/components/auth/SignUp/SignUpOptionsForm.tsx
@@ -7,7 +7,7 @@ import Flex from '@/components/Primitives/Layout/Flex/Flex';
 import Text from '@/components/Primitives/Text/Text';
 import { SignUpEnum } from '@/utils/signUp.enum';
 import loginWithAzure from '@/hooks/auth/loginWithAzure';
-import { OrSeparator } from '@/components/auth/LoginForm/styles';
+import Separator from '@/components/Primitives/Separator/Separator';
 
 const Container = styled(Flex, { width: '100%' });
 
@@ -46,13 +46,13 @@ const SignUpOptionsForm: React.FC<SignUpOptionsFormProps> = ({
       >
         Log in with SSO
       </Button>
-      <OrSeparator css={{ mt: '$22', mb: '$22' }}>
-        <hr />
+      <Flex align="center" css={{ width: '100%', my: '$26' }} gap="16">
+        <Separator />
         <Text color="primary300" size="sm" fontWeight="medium">
-          or
+          OR
         </Text>
-        <hr />
-      </OrSeparator>
+        <Separator />
+      </Flex>
       <Text
         fontWeight="medium"
         size="sm"
diff --git a/frontend/src/components/auth/SignUp/SignUpTabContent.tsx b/frontend/src/components/auth/SignUp/SignUpTabContent.tsx
index 45108dc71..6a840b9ce 100644
--- a/frontend/src/components/auth/SignUp/SignUpTabContent.tsx
+++ b/frontend/src/components/auth/SignUp/SignUpTabContent.tsx
@@ -8,7 +8,7 @@ interface SignUpTabContentProps {
   setCurrentTab: Dispatch<React.SetStateAction<string>>;
 }
 
-const SignUpTabContent: React.FC<SignUpTabContentProps> = ({ setCurrentTab }) => {
+const SignUpTabContent = ({ setCurrentTab }: SignUpTabContentProps) => {
   const [showSignUp, setShowSignUp] = useState(SignUpEnum.SIGN_UP);
   const [emailName, setEmailName] = useState({ email: '', goback: false });
   const conditionalRendering = () => {
diff --git a/frontend/src/pages/login-guest-user/[boardId].tsx b/frontend/src/pages/login-guest-user/[boardId].tsx
index 5db773685..78d795bfd 100644
--- a/frontend/src/pages/login-guest-user/[boardId].tsx
+++ b/frontend/src/pages/login-guest-user/[boardId].tsx
@@ -11,9 +11,10 @@ import SchemaLoginGuestForm from '@/schema/schemaLoginGuestForm';
 import { getUsername } from '@/utils/getUsername';
 import useRegisterGuestUser from '@/hooks/auth/useRegisterGuestUser';
 import { ReactElement } from 'react';
-import { OrSeparator, StyledForm } from '@/components/auth/LoginForm/styles';
+import { StyledForm } from '@/components/auth/LoginForm/styles';
 import AccessLayout from '@/components/layouts/AccessLayout/AccessLayout';
 import { CreateGuestUser } from '@/types/user/create-login.user';
+import Separator from '@/components/Primitives/Separator/Separator';
 
 const LoginGuestUserPage = () => {
   const router = useRouter();
@@ -65,13 +66,13 @@ const LoginGuestUserPage = () => {
           Log in as guest
         </Button>
         <Flex align="center" direction="column" justify="center">
-          <OrSeparator>
-            <hr />
+          <Flex align="center" css={{ width: '100%', my: '$26' }} gap="16">
+            <Separator />
             <Text color="primary300" size="sm" fontWeight="medium">
-              or
+              OR
             </Text>
-            <hr />
-          </OrSeparator>
+            <Separator />
+          </Flex>
           <Button css={{ width: '100%' }} size="lg" onClick={handleClick}>
             Sign In
           </Button>
diff --git a/frontend/src/styles/centerScreen.tsx b/frontend/src/styles/centerScreen.tsx
deleted file mode 100644
index 5f6450ab5..000000000
--- a/frontend/src/styles/centerScreen.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { css } from './stitches/stitches.config';
-
-const centerScreen = css({
-  backgroundColor: 'white',
-  position: 'fixed',
-  top: '50%',
-  right: '50%',
-  '&:focus': { outline: 'none' },
-});
-
-export default centerScreen;
diff --git a/frontend/src/styles/pages/pages.styles.tsx b/frontend/src/styles/pages/pages.styles.tsx
index 756ced9ff..e7ec05869 100644
--- a/frontend/src/styles/pages/pages.styles.tsx
+++ b/frontend/src/styles/pages/pages.styles.tsx
@@ -7,6 +7,8 @@ export const StyledForm = styled('form', Flex, {
   padding: '64px 92px 57px 152px',
 });
 
+export const FlexForm = styled('form', Flex, { width: '100%' });
+
 export const InnerContainer = styled(Flex, Box, {
   px: '$32',
   py: '$22',

From c3d1e5bc71941ecb9b9d6613efc5f244623e4988 Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Wed, 5 Apr 2023 12:29:32 +0100
Subject: [PATCH 10/14] fix: global flex form

---
 frontend/src/components/Board/AddCardOrComment.tsx  |  8 +++-----
 .../Column/partials/UpdateColumnDialog/index.tsx    | 13 ++++++-------
 frontend/src/components/Board/Settings/index.tsx    | 10 +++++-----
 frontend/src/components/auth/LoginForm/index.tsx    |  6 +++---
 frontend/src/components/auth/LoginForm/styles.tsx   |  7 -------
 .../src/components/auth/SignUp/RegisterForm.tsx     | 13 +++++--------
 frontend/src/components/auth/SignUp/SignUpForm.tsx  | 13 ++++---------
 frontend/src/pages/login-guest-user/[boardId].tsx   |  7 +++----
 8 files changed, 29 insertions(+), 48 deletions(-)
 delete mode 100644 frontend/src/components/auth/LoginForm/styles.tsx

diff --git a/frontend/src/components/Board/AddCardOrComment.tsx b/frontend/src/components/Board/AddCardOrComment.tsx
index cf65e7fb3..67dcc1b9f 100644
--- a/frontend/src/components/Board/AddCardOrComment.tsx
+++ b/frontend/src/components/Board/AddCardOrComment.tsx
@@ -13,12 +13,10 @@ import { CardToAdd } from '@/types/card/card';
 import UpdateCardDto from '@/types/card/updateCard.dto';
 import AddCommentDto from '@/types/comment/addComment.dto';
 import UpdateCommentDto from '@/types/comment/updateComment.dto';
-import { styled } from '@/styles/stitches/stitches.config';
 import { CARD_TEXT_DEFAULT } from '@/utils/constants';
+import { FlexForm } from '@/styles/pages/pages.styles';
 import Icon from '../Primitives/Icons/Icon/Icon';
 
-const StyledForm = styled('form', Flex, { width: '100%' });
-
 type AddCardProps = {
   isUpdate: boolean;
   isCard: boolean;
@@ -232,7 +230,7 @@ const AddCard = React.memo<AddCardProps>(
       );
 
     return (
-      <StyledForm
+      <FlexForm
         {...props}
         align="center"
         direction="column"
@@ -304,7 +302,7 @@ const AddCard = React.memo<AddCardProps>(
             </Flex>
           </Flex>
         </FormProvider>
-      </StyledForm>
+      </FlexForm>
     );
   },
 );
diff --git a/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx b/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
index d43a8cf31..a110f4320 100644
--- a/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
+++ b/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
@@ -11,11 +11,11 @@ import { SchemaChangeColumnName } from '@/schema/schemaChangeColumnName';
 import { useRef } from 'react';
 import { joiResolver } from '@hookform/resolvers/joi';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
-import { styled } from '@/styles/stitches/stitches.config';
 import useColumn from '@/hooks/useColumn';
 import CardType from '@/types/card/card';
 import Text from '@/components/Primitives/Text/Text';
 import TextArea from '@/components/Primitives/Inputs/TextArea/TextArea';
+import { FlexForm } from '@/styles/pages/pages.styles';
 
 type UpdateColumnNameProps = {
   boardId: string;
@@ -31,9 +31,7 @@ type UpdateColumnNameProps = {
   socketId: string;
 };
 
-const StyledForm = styled('form', Flex, { width: '100%', backgroundColor: 'transparent' });
-
-const UpdateColumnDialog: React.FC<UpdateColumnNameProps> = ({
+const UpdateColumnDialog = ({
   boardId,
   columnId,
   columnTitle,
@@ -45,7 +43,7 @@ const UpdateColumnDialog: React.FC<UpdateColumnNameProps> = ({
   isDefaultText,
   type,
   socketId,
-}) => {
+}: UpdateColumnNameProps) => {
   const {
     updateColumn: { mutate },
   } = useColumn();
@@ -100,13 +98,14 @@ const UpdateColumnDialog: React.FC<UpdateColumnNameProps> = ({
         handleClose={handleClose}
       >
         <FormProvider {...methods}>
-          <StyledForm
+          <FlexForm
             id="form_dialog"
             onSubmit={methods.handleSubmit(({ title, text }) => {
               handleConfirm(title, text);
             })}
             direction="column"
             gap="16"
+            css={{ backgroundColor: 'transparent' }}
           >
             {type === 'ColumnName' ? (
               <Input
@@ -139,7 +138,7 @@ const UpdateColumnDialog: React.FC<UpdateColumnNameProps> = ({
                 {type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
               </AlertDialogAction>
             </Flex>
-          </StyledForm>
+          </FlexForm>
         </FormProvider>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/frontend/src/components/Board/Settings/index.tsx b/frontend/src/components/Board/Settings/index.tsx
index 1a51625c2..a757dea9e 100644
--- a/frontend/src/components/Board/Settings/index.tsx
+++ b/frontend/src/components/Board/Settings/index.tsx
@@ -20,10 +20,10 @@ import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import { getInitials } from '@/utils/getInitials';
 import isEmpty from '@/utils/isEmpty';
 import Dialog from '@/components/Primitives/Dialogs/Dialog/Dialog';
-import { styled } from '@/styles/stitches/stitches.config';
 import { ScrollableContent } from '@/components/Boards/MyBoards/ListBoardMembers/styles';
 import Button from '@/components/Primitives/Inputs/Button/Button';
 import ColumnType, { CreateColumn } from '@/types/column';
+import { FlexForm } from '@/styles/pages/pages.styles';
 import ConfigurationSwitch from '../../Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch';
 import { ConfigurationSettings } from './partials/ConfigurationSettings';
 import { TeamResponsibleSettings } from './partials/TeamResponsible';
@@ -33,8 +33,6 @@ import { colors } from '../Column/partials/OptionsMenu';
 
 const DEFAULT_MAX_VOTES = 6;
 
-const StyledForm = styled('form', { height: '100%', display: 'flex', flexDirection: 'column' });
-
 type Props = {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
   isOpen: boolean;
@@ -297,7 +295,9 @@ const BoardSettings = ({
   return (
     <Dialog isOpen={isOpen} setIsOpen={setIsOpen}>
       <FormProvider {...methods}>
-        <StyledForm
+        <FlexForm
+          direction="column"
+          css={{ height: '100%' }}
           onSubmit={methods.handleSubmit(({ title, maxVotes, formColumns }) => {
             updateBoard(title, maxVotes, formColumns);
           })}
@@ -477,7 +477,7 @@ const BoardSettings = ({
             affirmativeLabel="Save"
             buttonRef={submitBtnRef}
           />
-        </StyledForm>
+        </FlexForm>
       </FormProvider>
     </Dialog>
   );
diff --git a/frontend/src/components/auth/LoginForm/index.tsx b/frontend/src/components/auth/LoginForm/index.tsx
index 44b3b9824..e863122b2 100644
--- a/frontend/src/components/auth/LoginForm/index.tsx
+++ b/frontend/src/components/auth/LoginForm/index.tsx
@@ -28,7 +28,7 @@ import Button from '@/components/Primitives/Inputs/Button/Button';
 import { getCookie, deleteCookie } from 'cookies-next';
 import loginWithAzure from '@/hooks/auth/loginWithAzure';
 import Separator from '@/components/Primitives/Separator/Separator';
-import { StyledForm } from './styles';
+import { FlexForm } from '@/styles/pages/pages.styles';
 import LoginSSO from './LoginSSO';
 
 interface LoginFormProps {
@@ -92,7 +92,7 @@ const LoginForm = ({ setShowTroubleLogin }: LoginFormProps) => {
     <LoginSSO handleLoginAzure={handleLoginAzure} />
   ) : (
     <FormProvider {...methods}>
-      <StyledForm
+      <FlexForm
         autoComplete="off"
         direction="column"
         onSubmit={methods.handleSubmit((credentials: LoginUser) => {
@@ -158,7 +158,7 @@ const LoginForm = ({ setShowTroubleLogin }: LoginFormProps) => {
             </Flex>
           </Flex>
         )}
-      </StyledForm>
+      </FlexForm>
     </FormProvider>
   );
 };
diff --git a/frontend/src/components/auth/LoginForm/styles.tsx b/frontend/src/components/auth/LoginForm/styles.tsx
deleted file mode 100644
index e84e5e493..000000000
--- a/frontend/src/components/auth/LoginForm/styles.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { styled } from '@/styles/stitches/stitches.config';
-
-import Flex from '@/components/Primitives/Layout/Flex/Flex';
-
-const StyledForm = styled('form', Flex, { width: '100%' });
-
-export { StyledForm };
diff --git a/frontend/src/components/auth/SignUp/RegisterForm.tsx b/frontend/src/components/auth/SignUp/RegisterForm.tsx
index 8638786a9..81921c695 100644
--- a/frontend/src/components/auth/SignUp/RegisterForm.tsx
+++ b/frontend/src/components/auth/SignUp/RegisterForm.tsx
@@ -7,8 +7,6 @@ import { signIn } from 'next-auth/react';
 import { useSetRecoilState } from 'recoil';
 import { joiResolver } from '@hookform/resolvers/joi';
 
-import { styled } from '@/styles/stitches/stitches.config';
-
 import { registerNewUser } from '@/api/authService';
 import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import Button from '@/components/Primitives/Inputs/Button/Button';
@@ -21,8 +19,7 @@ import { RegisterUser } from '@/types/user/user';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 import { DASHBOARD_ROUTE } from '@/utils/routes';
 import { SignUpEnum } from '@/utils/signUp.enum';
-
-const StyledForm = styled('form', Flex, { width: '100%' });
+import { FlexForm } from '@/styles/pages/pages.styles';
 
 interface RegisterFormProps {
   emailName: { email: string; goback: boolean };
@@ -31,12 +28,12 @@ interface RegisterFormProps {
   setEmailName: Dispatch<React.SetStateAction<{ email: string; goback: boolean }>>;
 }
 
-const RegisterForm: React.FC<RegisterFormProps> = ({
+const RegisterForm = ({
   setShowSignUp,
   emailName,
   setCurrentTab,
   setEmailName,
-}) => {
+}: RegisterFormProps) => {
   const setToastState = useSetRecoilState(toastState);
   const methods = useForm<RegisterUser>({
     mode: 'onChange',
@@ -98,7 +95,7 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
 
   return (
     <FormProvider {...methods}>
-      <StyledForm
+      <FlexForm
         direction="column"
         style={{ width: '100%' }}
         onSubmit={methods.handleSubmit((credentials: RegisterUser) => {
@@ -149,7 +146,7 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
             Go Back
           </Button>
         </Flex>
-      </StyledForm>
+      </FlexForm>
     </FormProvider>
   );
 };
diff --git a/frontend/src/components/auth/SignUp/SignUpForm.tsx b/frontend/src/components/auth/SignUp/SignUpForm.tsx
index 5db917579..ab581e7a3 100644
--- a/frontend/src/components/auth/SignUp/SignUpForm.tsx
+++ b/frontend/src/components/auth/SignUp/SignUpForm.tsx
@@ -4,11 +4,8 @@ import { useQuery } from '@tanstack/react-query';
 import { useSetRecoilState } from 'recoil';
 import { joiResolver } from '@hookform/resolvers/joi';
 
-import { styled } from '@/styles/stitches/stitches.config';
-
 import { checkUserExists, checkUserExistsAD } from '@/api/authService';
 import Button from '@/components/Primitives/Inputs/Button/Button';
-import Flex from '@/components/Primitives/Layout/Flex/Flex';
 import Input from '@/components/Primitives/Inputs/Input/Input';
 import Text from '@/components/Primitives/Text/Text';
 import SchemaEmail from '@/schema/schemaEmail';
@@ -17,8 +14,7 @@ import { EmailUser } from '@/types/user/user';
 import { NEXT_PUBLIC_ENABLE_AZURE } from '@/utils/constants';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 import { SignUpEnum } from '@/utils/signUp.enum';
-
-const StyledForm = styled('form', Flex, { width: '100%' });
+import { FlexForm } from '@/styles/pages/pages.styles';
 
 interface SignUpFormProps {
   setShowSignUp: Dispatch<React.SetStateAction<SignUpEnum>>;
@@ -26,7 +22,7 @@ interface SignUpFormProps {
   emailName: { email: string; goback: boolean };
 }
 
-const SignUpForm: React.FC<SignUpFormProps> = ({ setShowSignUp, setEmailName, emailName }) => {
+const SignUpForm = ({ setShowSignUp, setEmailName, emailName }: SignUpFormProps) => {
   const setToastState = useSetRecoilState(toastState);
   const methods = useForm<EmailUser>({
     mode: 'onChange',
@@ -83,9 +79,8 @@ const SignUpForm: React.FC<SignUpFormProps> = ({ setShowSignUp, setEmailName, em
 
   return (
     <FormProvider {...methods}>
-      <StyledForm
+      <FlexForm
         direction="column"
-        style={{ width: '100%' }}
         onSubmit={methods.handleSubmit(({ email }) => {
           if (!email) {
             setToastState({
@@ -110,7 +105,7 @@ const SignUpForm: React.FC<SignUpFormProps> = ({ setShowSignUp, setEmailName, em
         <Button size="lg" type="submit">
           Get Started
         </Button>
-      </StyledForm>
+      </FlexForm>
     </FormProvider>
   );
 };
diff --git a/frontend/src/pages/login-guest-user/[boardId].tsx b/frontend/src/pages/login-guest-user/[boardId].tsx
index 78d795bfd..936f6646d 100644
--- a/frontend/src/pages/login-guest-user/[boardId].tsx
+++ b/frontend/src/pages/login-guest-user/[boardId].tsx
@@ -11,10 +11,10 @@ import SchemaLoginGuestForm from '@/schema/schemaLoginGuestForm';
 import { getUsername } from '@/utils/getUsername';
 import useRegisterGuestUser from '@/hooks/auth/useRegisterGuestUser';
 import { ReactElement } from 'react';
-import { StyledForm } from '@/components/auth/LoginForm/styles';
 import AccessLayout from '@/components/layouts/AccessLayout/AccessLayout';
 import { CreateGuestUser } from '@/types/user/create-login.user';
 import Separator from '@/components/Primitives/Separator/Separator';
+import { FlexForm } from '@/styles/pages/pages.styles';
 
 const LoginGuestUserPage = () => {
   const router = useRouter();
@@ -45,10 +45,9 @@ const LoginGuestUserPage = () => {
 
   return (
     <FormProvider {...methods}>
-      <StyledForm
+      <FlexForm
         autoComplete="off"
         direction="column"
-        style={{ width: '100%' }}
         onSubmit={methods.handleSubmit(({ username }) => {
           const user = getUsername(username);
           handleLogin({ board, firstName: user.firstName, lastName: user.lastName });
@@ -77,7 +76,7 @@ const LoginGuestUserPage = () => {
             Sign In
           </Button>
         </Flex>
-      </StyledForm>
+      </FlexForm>
     </FormProvider>
   );
 };

From 63f3f67c4a1c7ab22272f2ebe383cb098ca58ca5 Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Wed, 5 Apr 2023 12:34:19 +0100
Subject: [PATCH 11/14] fix: more flex forms

---
 .../components/auth/ForgotPassword/TroubleLogin.tsx  | 11 +++--------
 frontend/src/pages/reset-password/[tokenId].tsx      | 12 +++---------
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx b/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
index 03bccc4dc..b1e662a6e 100644
--- a/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
+++ b/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
@@ -2,8 +2,6 @@ import { Dispatch, SetStateAction, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { joiResolver } from '@hookform/resolvers/joi';
 
-import { styled } from '@/styles/stitches/stitches.config';
-
 import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import Button from '@/components/Primitives/Inputs/Button/Button';
 import Flex from '@/components/Primitives/Layout/Flex/Flex';
@@ -13,10 +11,7 @@ import SchemaEmail from '@/schema/schemaEmail';
 import { EmailUser } from '@/types/user/user';
 import useResetToken from '@/hooks/auth/useResetToken';
 import EmailSent from '@/components/auth/ForgotPassword/EmailSent';
-
-const MainContainer = styled('form', Flex, {
-  width: '100%',
-});
+import { FlexForm } from '@/styles/pages/pages.styles';
 
 interface TroubleLoginProps {
   setShowTroubleLogin: Dispatch<SetStateAction<boolean>>;
@@ -60,7 +55,7 @@ const TroubleLogin = ({ setShowTroubleLogin }: TroubleLoginProps) => {
     );
 
   return (
-    <MainContainer
+    <FlexForm
       direction="column"
       onSubmit={methods.handleSubmit(({ email }) => {
         handleRecoverPassword(email);
@@ -89,7 +84,7 @@ const TroubleLogin = ({ setShowTroubleLogin }: TroubleLoginProps) => {
           </Button>
         </Flex>
       </FormProvider>
-    </MainContainer>
+    </FlexForm>
   );
 };
 
diff --git a/frontend/src/pages/reset-password/[tokenId].tsx b/frontend/src/pages/reset-password/[tokenId].tsx
index 54cd7315c..a14e6c60b 100644
--- a/frontend/src/pages/reset-password/[tokenId].tsx
+++ b/frontend/src/pages/reset-password/[tokenId].tsx
@@ -7,19 +7,13 @@ import AccessLayout from '@/components/layouts/AccessLayout/AccessLayout';
 import { FormProvider, useForm } from 'react-hook-form';
 import { joiResolver } from '@hookform/resolvers/joi';
 
-import { styled } from '@/styles/stitches/stitches.config';
-
 import Button from '@/components/Primitives/Inputs/Button/Button';
-import Flex from '@/components/Primitives/Layout/Flex/Flex';
 import Input from '@/components/Primitives/Inputs/Input/Input';
 import Text from '@/components/Primitives/Text/Text';
 import SchemaResetPasswordForm from '@/schema/schemaResetPasswordForm';
 import { NewPassword } from '@/types/user/user';
 import useResetPassword from '@/hooks/auth/useResetPassword';
-
-const MainContainer = styled('form', Flex, {
-  width: '100%',
-});
+import { FlexForm } from '@/styles/pages/pages.styles';
 
 const ResetPasswordPage = () => {
   const router = useRouter();
@@ -47,7 +41,7 @@ const ResetPasswordPage = () => {
 
   return (
     <FormProvider {...methods}>
-      <MainContainer
+      <FlexForm
         direction="column"
         onSubmit={methods.handleSubmit((params) => {
           handleRecoverPassword({ ...params, token: tokenId });
@@ -77,7 +71,7 @@ const ResetPasswordPage = () => {
         <Button size="lg" type="submit">
           Recover password
         </Button>
-      </MainContainer>
+      </FlexForm>
     </FormProvider>
   );
 };

From 31a057f5f6375d84fe500cc41c839118e795e89a Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Wed, 5 Apr 2023 12:37:37 +0100
Subject: [PATCH 12/14] refactor: mutateAsync

---
 .../UserItemActions/UserItemActions.tsx         |  6 +++---
 .../auth/ForgotPassword/TroubleLogin.tsx        | 17 +++++++++++------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Users/UsersList/UserItem/UserItemActions/UserItemActions.tsx b/frontend/src/components/Users/UsersList/UserItem/UserItemActions/UserItemActions.tsx
index 58cdd0638..f456371ce 100644
--- a/frontend/src/components/Users/UsersList/UserItem/UserItemActions/UserItemActions.tsx
+++ b/frontend/src/components/Users/UsersList/UserItem/UserItemActions/UserItemActions.tsx
@@ -21,15 +21,15 @@ type UserItemActionsProps = {
 const UserItemActions = React.memo(({ user }: UserItemActionsProps) => {
   const { userId } = useCurrentSession();
 
-  const { mutateAsync: updateUserMutation } = useUpdateUser();
+  const { mutate: updateUserMutation } = useUpdateUser();
 
-  const handleSuperAdminChange = async (checked: boolean) => {
+  const handleSuperAdminChange = (checked: boolean) => {
     const updateTeamUser: UpdateUserIsAdmin = {
       _id: user._id,
       isSAdmin: checked,
     };
 
-    await updateUserMutation(updateTeamUser);
+    updateUserMutation(updateTeamUser);
   };
 
   const { mutate: deleteUserMutation } = useDeleteUser();
diff --git a/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx b/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
index b1e662a6e..a66405a5c 100644
--- a/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
+++ b/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
@@ -30,17 +30,22 @@ const TroubleLogin = ({ setShowTroubleLogin }: TroubleLoginProps) => {
     resolver: joiResolver(SchemaEmail),
   });
 
-  const { mutateAsync } = useResetToken();
+  const { mutate } = useResetToken();
 
   const handleShowTroubleLogginIn = () => {
     setShowTroubleLogin(false);
   };
 
-  const handleRecoverPassword = async (email: string) => {
-    await mutateAsync({ email });
-
-    setShowEmailSent(true);
-    setCurrentEmail(email);
+  const handleRecoverPassword = (email: string) => {
+    mutate(
+      { email },
+      {
+        onSuccess: () => {
+          setShowEmailSent(true);
+          setCurrentEmail(email);
+        },
+      },
+    );
   };
 
   if (showEmailSent)

From a1179e570e9cfffd8aa7950eb4c7c64e52ae621c Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Wed, 5 Apr 2023 17:33:17 +0100
Subject: [PATCH 13/14] fix: imports

---
 frontend/src/components/Board/AddCardOrComment.tsx |  2 +-
 frontend/src/components/Board/Settings/index.tsx   | 12 ++++++------
 frontend/src/components/auth/LoginForm/index.tsx   |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Board/AddCardOrComment.tsx b/frontend/src/components/Board/AddCardOrComment.tsx
index 67dcc1b9f..7890fd6d6 100644
--- a/frontend/src/components/Board/AddCardOrComment.tsx
+++ b/frontend/src/components/Board/AddCardOrComment.tsx
@@ -15,7 +15,7 @@ import AddCommentDto from '@/types/comment/addComment.dto';
 import UpdateCommentDto from '@/types/comment/updateComment.dto';
 import { CARD_TEXT_DEFAULT } from '@/utils/constants';
 import { FlexForm } from '@/styles/pages/pages.styles';
-import Icon from '../Primitives/Icons/Icon/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 
 type AddCardProps = {
   isUpdate: boolean;
diff --git a/frontend/src/components/Board/Settings/index.tsx b/frontend/src/components/Board/Settings/index.tsx
index a757dea9e..7a77b2eaa 100644
--- a/frontend/src/components/Board/Settings/index.tsx
+++ b/frontend/src/components/Board/Settings/index.tsx
@@ -24,12 +24,12 @@ import { ScrollableContent } from '@/components/Boards/MyBoards/ListBoardMembers
 import Button from '@/components/Primitives/Inputs/Button/Button';
 import ColumnType, { CreateColumn } from '@/types/column';
 import { FlexForm } from '@/styles/pages/pages.styles';
-import ConfigurationSwitch from '../../Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch';
-import { ConfigurationSettings } from './partials/ConfigurationSettings';
-import { TeamResponsibleSettings } from './partials/TeamResponsible';
-import { ColumnBoxAndDelete } from './partials/Columns/ColumnBoxAndDelete';
-import { ColumnSettings } from './partials/Columns';
-import { colors } from '../Column/partials/OptionsMenu';
+import ConfigurationSwitch from '@/components/Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch';
+import { ConfigurationSettings } from '@/components/Board/Settings/partials/ConfigurationSettings';
+import { TeamResponsibleSettings } from '@/components/Board/Settings/partials/TeamResponsible';
+import { ColumnBoxAndDelete } from '@/components/Board/Settings/partials/Columns/ColumnBoxAndDelete';
+import { ColumnSettings } from '@/components/Board/Settings/partials/Columns';
+import { colors } from '@/components/Board/Column/partials/OptionsMenu';
 
 const DEFAULT_MAX_VOTES = 6;
 
diff --git a/frontend/src/components/auth/LoginForm/index.tsx b/frontend/src/components/auth/LoginForm/index.tsx
index e863122b2..9517a6ac7 100644
--- a/frontend/src/components/auth/LoginForm/index.tsx
+++ b/frontend/src/components/auth/LoginForm/index.tsx
@@ -29,7 +29,7 @@ import { getCookie, deleteCookie } from 'cookies-next';
 import loginWithAzure from '@/hooks/auth/loginWithAzure';
 import Separator from '@/components/Primitives/Separator/Separator';
 import { FlexForm } from '@/styles/pages/pages.styles';
-import LoginSSO from './LoginSSO';
+import LoginSSO from '@/components/auth/LoginForm/LoginSSO';
 
 interface LoginFormProps {
   setShowTroubleLogin: Dispatch<SetStateAction<boolean>>;

From 505edca6f3943a577a1e2c169848e04dcdf51bbe Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Wed, 5 Apr 2023 17:52:16 +0100
Subject: [PATCH 14/14] feat: xl button

---
 .../components/Primitives/Icons/Icon/Icon.tsx |  2 +-
 .../components/Primitives/Icons/Svg/Svg.tsx   |  3 +++
 .../Primitives/Inputs/Button/Button.tsx       | 26 +++++++++++++++++++
 .../src/components/auth/LoginForm/index.tsx   | 15 +++++------
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Primitives/Icons/Icon/Icon.tsx b/frontend/src/components/Primitives/Icons/Icon/Icon.tsx
index 98badff5d..e0372876a 100644
--- a/frontend/src/components/Primitives/Icons/Icon/Icon.tsx
+++ b/frontend/src/components/Primitives/Icons/Icon/Icon.tsx
@@ -4,7 +4,7 @@ import Svg from '@/components/Primitives/Icons/Svg/Svg';
 
 type Props = CSSProps & {
   name: string;
-  size?: 100 | 48 | 40 | 32 | 28 | 24 | 20 | 18 | 16 | 12;
+  size?: 100 | 60 | 48 | 40 | 32 | 28 | 24 | 20 | 18 | 16 | 12;
 };
 
 const Icon = ({ name, size, css, ...props }: Props) => (
diff --git a/frontend/src/components/Primitives/Icons/Svg/Svg.tsx b/frontend/src/components/Primitives/Icons/Svg/Svg.tsx
index 9d36e69a2..ccaeb1ad9 100644
--- a/frontend/src/components/Primitives/Icons/Svg/Svg.tsx
+++ b/frontend/src/components/Primitives/Icons/Svg/Svg.tsx
@@ -6,6 +6,9 @@ const Svg = styled('svg', {
       100: {
         size: '$100',
       },
+      60: {
+        size: '$60',
+      },
       48: {
         size: '$48',
       },
diff --git a/frontend/src/components/Primitives/Inputs/Button/Button.tsx b/frontend/src/components/Primitives/Inputs/Button/Button.tsx
index 628917c3c..717bac7cd 100644
--- a/frontend/src/components/Primitives/Inputs/Button/Button.tsx
+++ b/frontend/src/components/Primitives/Inputs/Button/Button.tsx
@@ -211,6 +211,22 @@ const Button = styled('button', {
       },
     },
     size: {
+      xl: {
+        height: '$64',
+        fontWeight: '$medium',
+        fontSize: '$24',
+        lineHeight: '$28',
+        px: '$32',
+        py: '$20',
+        '& svg': {
+          height: '$32',
+          width: '$32',
+        },
+        '& span': {
+          height: '$32',
+          width: '$32',
+        },
+      },
       lg: {
         height: '$56',
         fontWeight: '$medium',
@@ -294,6 +310,16 @@ const Button = styled('button', {
     },
   },
   compoundVariants: [
+    {
+      isIcon: 'true',
+      size: 'xl',
+      css: {
+        '& svg': {
+          height: '$60',
+          width: '$60',
+        },
+      },
+    },
     {
       isIcon: 'true',
       size: 'lg',
diff --git a/frontend/src/components/auth/LoginForm/index.tsx b/frontend/src/components/auth/LoginForm/index.tsx
index 9517a6ac7..6d8273b49 100644
--- a/frontend/src/components/auth/LoginForm/index.tsx
+++ b/frontend/src/components/auth/LoginForm/index.tsx
@@ -138,21 +138,18 @@ const LoginForm = ({ setShowTroubleLogin }: LoginFormProps) => {
             </Flex>
             <Flex gap="32">
               {NEXT_PUBLIC_ENABLE_GIT && (
-                <Button isIcon>
-                  <Icon css={{ width: '$60 !important', height: '$60 !important' }} name="github" />
+                <Button size="xl" isIcon>
+                  <Icon size={60} name="github" />
                 </Button>
               )}
               {NEXT_PUBLIC_ENABLE_GOOGLE && (
-                <Button isIcon>
-                  <Icon css={{ width: '$60 !important', height: '$60 !important' }} name="google" />
+                <Button size="xl" isIcon>
+                  <Icon size={60} name="google" />
                 </Button>
               )}
               {NEXT_PUBLIC_ENABLE_AZURE && (
-                <Button isIcon data-loading={loading.sso} onClick={handleLoginAzure}>
-                  <Icon
-                    css={{ width: '$60 !important', height: '$60 !important' }}
-                    name="microsoft"
-                  />
+                <Button size="xl" isIcon data-loading={loading.sso} onClick={handleLoginAzure}>
+                  <Icon size={60} name="microsoft" />
                 </Button>
               )}
             </Flex>