feat: custom layout for auth error pages

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

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>

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

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

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;