From 447dd41f6465c412918689c7abc7b5161f7ee719 Mon Sep 17 00:00:00 2001
From: Tomasz 'Tom' Kandula <tom@tomkandula.com>
Date: Fri, 28 Jun 2024 17:11:16 +0200
Subject: [PATCH 1/9] feat: add back arrow

---
 .../ResetPassword/View/resetPasswordStyle.tsx |  3 +
 .../ResetPassword/View/resetPasswordView.tsx  |  8 ++-
 .../View/updatePasswordStyle.tsx              |  3 +
 .../View/updatePasswordView.tsx               |  9 ++-
 .../UserSignin/View/userSigninStyle.tsx       |  3 +
 .../UserSignin/View/userSigninView.tsx        |  9 ++-
 .../UserSignup/View/userSignupStyle.tsx       |  3 +
 .../UserSignup/View/userSignupView.tsx        |  9 ++-
 .../PdfViewer/View/pdfViewerStyle.tsx         |  5 +-
 .../PdfViewer/View/pdfViewerView.tsx          | 59 ++++++++++---------
 10 files changed, 72 insertions(+), 39 deletions(-)

diff --git a/TokanPages.ClientApp/src/Components/Account/ResetPassword/View/resetPasswordStyle.tsx b/TokanPages.ClientApp/src/Components/Account/ResetPassword/View/resetPasswordStyle.tsx
index e6c6a23a0..992008d0f 100644
--- a/TokanPages.ClientApp/src/Components/Account/ResetPassword/View/resetPasswordStyle.tsx
+++ b/TokanPages.ClientApp/src/Components/Account/ResetPassword/View/resetPasswordStyle.tsx
@@ -5,6 +5,9 @@ export const ResetPasswordStyle = makeStyles(() => ({
     section: {
         backgroundColor: Colours.colours.white,
     },
+    container: {
+        maxWidth: 700,
+    },
     account: {
         fontSize: 72,
         color: Colours.colours.violet,
diff --git a/TokanPages.ClientApp/src/Components/Account/ResetPassword/View/resetPasswordView.tsx b/TokanPages.ClientApp/src/Components/Account/ResetPassword/View/resetPasswordView.tsx
index d48530e58..4cceedbe6 100644
--- a/TokanPages.ClientApp/src/Components/Account/ResetPassword/View/resetPasswordView.tsx
+++ b/TokanPages.ClientApp/src/Components/Account/ResetPassword/View/resetPasswordView.tsx
@@ -9,6 +9,7 @@ import { Card, CardContent, CircularProgress } from "@material-ui/core";
 import { AccountCircle } from "@material-ui/icons";
 import Skeleton from "@material-ui/lab/Skeleton";
 import { ViewProperties } from "../../../../Shared/Abstractions";
+import { BackArrow } from "../../../../Shared/Components";
 import { ReactChangeEvent, ReactKeyboardEvent } from "../../../../Shared/types";
 import { ResetPasswordStyle } from "./resetPasswordStyle";
 
@@ -43,8 +44,11 @@ export const ResetPasswordView = (props: Properties): JSX.Element => {
     const classes = ResetPasswordStyle();
     return (
         <section className={classes.section}>
-            <Container maxWidth="sm">
-                <Box pt={18} pb={10}>
+            <Container className={classes.container}>
+                <Box pt={8} pb={10}>
+                    <Box pt={4} pb={6}>
+                        <BackArrow />
+                    </Box>
                     <Card elevation={0} className={classes.card}>
                         <CardContent className={classes.card_content}>
                             <Box mb={3} textAlign="center">
diff --git a/TokanPages.ClientApp/src/Components/Account/UpdatePassword/View/updatePasswordStyle.tsx b/TokanPages.ClientApp/src/Components/Account/UpdatePassword/View/updatePasswordStyle.tsx
index c6c94a78f..03e632e04 100644
--- a/TokanPages.ClientApp/src/Components/Account/UpdatePassword/View/updatePasswordStyle.tsx
+++ b/TokanPages.ClientApp/src/Components/Account/UpdatePassword/View/updatePasswordStyle.tsx
@@ -5,6 +5,9 @@ export const UpdatePasswordStyle = makeStyles(() => ({
     section: {
         backgroundColor: Colours.colours.white,
     },
+    container: {
+        maxWidth: 700,
+    },
     account: {
         fontSize: 72,
         color: Colours.colours.violet,
diff --git a/TokanPages.ClientApp/src/Components/Account/UpdatePassword/View/updatePasswordView.tsx b/TokanPages.ClientApp/src/Components/Account/UpdatePassword/View/updatePasswordView.tsx
index b63950074..39e299fcb 100644
--- a/TokanPages.ClientApp/src/Components/Account/UpdatePassword/View/updatePasswordView.tsx
+++ b/TokanPages.ClientApp/src/Components/Account/UpdatePassword/View/updatePasswordView.tsx
@@ -9,7 +9,7 @@ import { AccountCircle } from "@material-ui/icons";
 import Skeleton from "@material-ui/lab/Skeleton";
 import { ViewProperties } from "../../../../Shared/Abstractions";
 import { ReactChangeEvent, ReactKeyboardEvent } from "../../../../Shared/types";
-import { TextFiedWithPassword } from "../../../../Shared/Components";
+import { BackArrow, TextFiedWithPassword } from "../../../../Shared/Components";
 import { UpdatePasswordStyle } from "./updatePasswordStyle";
 
 interface Properties extends ViewProperties {
@@ -46,8 +46,11 @@ export const UpdatePasswordView = (props: Properties): JSX.Element => {
     const classes = UpdatePasswordStyle();
     return (
         <section className={classes.section}>
-            <Container maxWidth="sm">
-                <Box pt={18} pb={10}>
+            <Container className={classes.container}>
+                <Box pt={8} pb={10}>
+                    <Box pt={4} pb={6}>
+                        <BackArrow />
+                    </Box>
                     <Card elevation={0} className={classes.card}>
                         <CardContent className={classes.card_content}>
                             <Box mb={3} textAlign="center">
diff --git a/TokanPages.ClientApp/src/Components/Account/UserSignin/View/userSigninStyle.tsx b/TokanPages.ClientApp/src/Components/Account/UserSignin/View/userSigninStyle.tsx
index b59633ab2..007f272e4 100644
--- a/TokanPages.ClientApp/src/Components/Account/UserSignin/View/userSigninStyle.tsx
+++ b/TokanPages.ClientApp/src/Components/Account/UserSignin/View/userSigninStyle.tsx
@@ -5,6 +5,9 @@ export const UserSigninStyle = makeStyles(theme => ({
     section: {
         backgroundColor: Colours.colours.white,
     },
+    container: {
+        maxWidth: 700,
+    },
     tertiaryAction: {
         [theme.breakpoints.up("sm")]: {
             textAlign: "right",
diff --git a/TokanPages.ClientApp/src/Components/Account/UserSignin/View/userSigninView.tsx b/TokanPages.ClientApp/src/Components/Account/UserSignin/View/userSigninView.tsx
index 1e8cbb20e..2b10a032a 100644
--- a/TokanPages.ClientApp/src/Components/Account/UserSignin/View/userSigninView.tsx
+++ b/TokanPages.ClientApp/src/Components/Account/UserSignin/View/userSigninView.tsx
@@ -11,7 +11,7 @@ import { AccountCircle } from "@material-ui/icons";
 import Skeleton from "@material-ui/lab/Skeleton";
 import { ViewProperties } from "../../../../Shared/Abstractions";
 import { ReactChangeEvent, ReactKeyboardEvent } from "../../../../Shared/types";
-import { TextFiedWithPassword } from "../../../../Shared/Components";
+import { BackArrow, TextFiedWithPassword } from "../../../../Shared/Components";
 import { UserSigninStyle } from "./userSigninStyle";
 
 interface Properties extends ViewProperties {
@@ -53,8 +53,11 @@ export const UserSigninView = (props: Properties): JSX.Element => {
     const classes = UserSigninStyle();
     return (
         <section className={classes.section}>
-            <Container maxWidth="sm">
-                <Box pt={18} pb={10}>
+            <Container className={classes.container}>
+                <Box pt={8} pb={10}>
+                    <Box pt={4} pb={6}>
+                        <BackArrow />
+                    </Box>
                     <Card elevation={0} className={classes.card}>
                         <CardContent className={classes.card_content}>
                             <Box mb={3} textAlign="center">
diff --git a/TokanPages.ClientApp/src/Components/Account/UserSignup/View/userSignupStyle.tsx b/TokanPages.ClientApp/src/Components/Account/UserSignup/View/userSignupStyle.tsx
index b0cfb89b9..736ae8d97 100644
--- a/TokanPages.ClientApp/src/Components/Account/UserSignup/View/userSignupStyle.tsx
+++ b/TokanPages.ClientApp/src/Components/Account/UserSignup/View/userSignupStyle.tsx
@@ -5,6 +5,9 @@ export const UserSignupStyle = makeStyles(() => ({
     section: {
         backgroundColor: Colours.colours.white,
     },
+    container: {
+        maxWidth: 700,
+    },
     account: {
         fontSize: 72,
         color: Colours.colours.violet,
diff --git a/TokanPages.ClientApp/src/Components/Account/UserSignup/View/userSignupView.tsx b/TokanPages.ClientApp/src/Components/Account/UserSignup/View/userSignupView.tsx
index 5d47cdd68..06ca919f4 100644
--- a/TokanPages.ClientApp/src/Components/Account/UserSignup/View/userSignupView.tsx
+++ b/TokanPages.ClientApp/src/Components/Account/UserSignup/View/userSignupView.tsx
@@ -14,7 +14,7 @@ import Skeleton from "@material-ui/lab/Skeleton";
 import { VioletCheckbox } from "../../../../Theme";
 import { ViewProperties } from "../../../../Shared/Abstractions";
 import { ReactChangeEvent, ReactKeyboardEvent } from "../../../../Shared/types";
-import { TextFiedWithPassword } from "../../../../Shared/Components";
+import { BackArrow, TextFiedWithPassword } from "../../../../Shared/Components";
 import { ReactHtmlParser } from "../../../../Shared/Services/Renderers";
 import { UserSignupStyle } from "./userSignupStyle";
 
@@ -63,8 +63,11 @@ export const UserSignupView = (props: Properties): JSX.Element => {
     const classes = UserSignupStyle();
     return (
         <section className={classes.section}>
-            <Container maxWidth="sm">
-                <Box pt={18} pb={10}>
+            <Container className={classes.container}>
+                <Box pt={8} pb={10}>
+                    <Box pt={4} pb={6}>
+                        <BackArrow />
+                    </Box>
                     <Card elevation={0} className={classes.card}>
                         <CardContent className={classes.card_content}>
                             <Box mb={3} textAlign="center">
diff --git a/TokanPages.ClientApp/src/Components/PdfViewer/View/pdfViewerStyle.tsx b/TokanPages.ClientApp/src/Components/PdfViewer/View/pdfViewerStyle.tsx
index 970da590a..969a16285 100644
--- a/TokanPages.ClientApp/src/Components/PdfViewer/View/pdfViewerStyle.tsx
+++ b/TokanPages.ClientApp/src/Components/PdfViewer/View/pdfViewerStyle.tsx
@@ -5,6 +5,9 @@ export const PdfViewerStyle = makeStyles(() => ({
     section: {
         backgroundColor: Colours.colours.white,
     },
+    container: {
+        maxWidth: 700,
+    },
     header: {
         color: Colours.colours.black,
         fontSize: 14,
@@ -28,7 +31,7 @@ export const PdfViewerStyle = makeStyles(() => ({
         cursor: "pointer",
     },
     canvas: {
-        padding: 60,
+        padding: 15,
         marginLeft: "auto",
         marginRight: "auto",
         display: "block",
diff --git a/TokanPages.ClientApp/src/Components/PdfViewer/View/pdfViewerView.tsx b/TokanPages.ClientApp/src/Components/PdfViewer/View/pdfViewerView.tsx
index 53de5f9eb..f088a4026 100644
--- a/TokanPages.ClientApp/src/Components/PdfViewer/View/pdfViewerView.tsx
+++ b/TokanPages.ClientApp/src/Components/PdfViewer/View/pdfViewerView.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Box, Grid } from "@material-ui/core";
+import { Box, Container, Grid } from "@material-ui/core";
 import NavigateBeforeIcon from "@material-ui/icons/NavigateBefore";
 import NavigateNextIcon from "@material-ui/icons/NavigateNext";
 import CheckIcon from "@material-ui/icons/Check";
@@ -9,7 +9,7 @@ import { ApplicationState } from "../../../Store/Configuration";
 import { GET_DOCUMENTS_URL } from "../../../Api/Request";
 import { RaiseError } from "../../../Shared/Services/ErrorServices";
 import { PDF_WORKER_URL } from "../../../Shared/constants";
-import { ProgressBar } from "../../../Shared/Components";
+import { BackArrow, ProgressBar } from "../../../Shared/Components";
 import { PdfViewerStyle } from "./pdfViewerStyle";
 
 interface PdfViewerViewProps {
@@ -134,32 +134,37 @@ export const PdfViewerView = (props: PdfViewerViewProps): JSX.Element => {
 
     return (
         <section className={classes.section}>
-            <Grid container justifyContent="center" direction="column">
-                <Box mt={2} pt={2} pb={2} className={classes.header}>
-                    {isLoading && !hasError ? (
-                        <ProgressBar size={20} />
-                    ) : hasError ? (
-                        <ReportProblemIcon />
-                    ) : (
-                        <CheckIcon />
-                    )}
-                    <div className={classes.header_pages}>
-                        {currentPage} / {numPages}
-                    </div>
-                    <div>
-                        <NavigateBeforeIcon className={classes.header_buttons} onClick={previousPage} />
-                        <NavigateNextIcon className={classes.header_buttons} onClick={nextPage} />
-                    </div>
+            <Container className={classes.container}>
+                <Box pt={4} pb={6}>
+                    <BackArrow />
                 </Box>
-                <Box className={classes.canvasWrapper}>
-                    <PdfCanvas
-                        pdfDocument={pdfDocument}
-                        pageNumber={currentPage}
-                        scale={props.scale ?? 1.5}
-                        htmlAttributes={{ className: classes.canvas }}
-                    />
-                </Box>
-            </Grid>
+                <Grid container justifyContent="center" direction="column">
+                    <Box pt={2} pb={2} className={classes.header}>
+                        {isLoading && !hasError ? (
+                            <ProgressBar size={20} />
+                        ) : hasError ? (
+                            <ReportProblemIcon />
+                        ) : (
+                            <CheckIcon />
+                        )}
+                        <div className={classes.header_pages}>
+                            {currentPage} / {numPages}
+                        </div>
+                        <div>
+                            <NavigateBeforeIcon className={classes.header_buttons} onClick={previousPage} />
+                            <NavigateNextIcon className={classes.header_buttons} onClick={nextPage} />
+                        </div>
+                    </Box>
+                    <Box className={classes.canvasWrapper}>
+                        <PdfCanvas
+                            pdfDocument={pdfDocument}
+                            pageNumber={currentPage}
+                            scale={props.scale ?? 1.5}
+                            htmlAttributes={{ className: classes.canvas }}
+                        />
+                    </Box>
+                </Grid>
+            </Container>
         </section>
     );
 };

From a8385c064f6bd43852a70347d84f7c52037ea08e Mon Sep 17 00:00:00 2001
From: Tomasz 'Tom' Kandula <tom@tomkandula.com>
Date: Fri, 28 Jun 2024 17:12:19 +0200
Subject: [PATCH 2/9] test: update snapshots

---
 .../resetPasswordView.test.tsx.snap           | 18 +++--
 .../updatePasswordView.test.tsx.snap          | 18 +++--
 .../userSigninView.test.tsx.snap              | 22 +++--
 .../__snapshots__/userSignin.test.tsx.snap    | 71 +++++++++++-----
 .../userSignupView.test.tsx.snap              | 18 +++--
 .../__snapshots__/userSignup.test.tsx.snap    | 81 +++++++++++++------
 6 files changed, 157 insertions(+), 71 deletions(-)

diff --git a/TokanPages.ClientApp/src/Components/Account/ResetPassword/View/__snapshots__/resetPasswordView.test.tsx.snap b/TokanPages.ClientApp/src/Components/Account/ResetPassword/View/__snapshots__/resetPasswordView.test.tsx.snap
index a6059f0aa..d19cf0ed5 100644
--- a/TokanPages.ClientApp/src/Components/Account/ResetPassword/View/__snapshots__/resetPasswordView.test.tsx.snap
+++ b/TokanPages.ClientApp/src/Components/Account/ResetPassword/View/__snapshots__/resetPasswordView.test.tsx.snap
@@ -5,28 +5,34 @@ exports[`test account group component: resetPasswordView should render correctly
   className="makeStyles-section-1"
 >
   <WithStyles(ForwardRef(Container))
-    maxWidth="sm"
+    className="makeStyles-container-2"
   >
     <Styled(MuiBox)
       pb={10}
-      pt={18}
+      pt={8}
     >
+      <Styled(MuiBox)
+        pb={6}
+        pt={4}
+      >
+        <BackArrowView />
+      </Styled(MuiBox)>
       <WithStyles(ForwardRef(Card))
-        className="makeStyles-card-4"
+        className="makeStyles-card-5"
         elevation={0}
       >
         <WithStyles(ForwardRef(CardContent))
-          className="makeStyles-card_content-5"
+          className="makeStyles-card_content-6"
         >
           <Styled(MuiBox)
             mb={3}
             textAlign="center"
           >
             <Memo(ForwardRef(AccountCircleIcon))
-              className="makeStyles-account-2"
+              className="makeStyles-account-3"
             />
             <WithStyles(ForwardRef(Typography))
-              className="makeStyles-caption-3"
+              className="makeStyles-caption-4"
             >
               Reset Password
             </WithStyles(ForwardRef(Typography))>
diff --git a/TokanPages.ClientApp/src/Components/Account/UpdatePassword/View/__snapshots__/updatePasswordView.test.tsx.snap b/TokanPages.ClientApp/src/Components/Account/UpdatePassword/View/__snapshots__/updatePasswordView.test.tsx.snap
index 9052cad4d..da2a8f1a7 100644
--- a/TokanPages.ClientApp/src/Components/Account/UpdatePassword/View/__snapshots__/updatePasswordView.test.tsx.snap
+++ b/TokanPages.ClientApp/src/Components/Account/UpdatePassword/View/__snapshots__/updatePasswordView.test.tsx.snap
@@ -5,28 +5,34 @@ exports[`test account group component: updatePasswordView should render correctl
   className="makeStyles-section-1"
 >
   <WithStyles(ForwardRef(Container))
-    maxWidth="sm"
+    className="makeStyles-container-2"
   >
     <Styled(MuiBox)
       pb={10}
-      pt={18}
+      pt={8}
     >
+      <Styled(MuiBox)
+        pb={6}
+        pt={4}
+      >
+        <BackArrowView />
+      </Styled(MuiBox)>
       <WithStyles(ForwardRef(Card))
-        className="makeStyles-card-4"
+        className="makeStyles-card-5"
         elevation={0}
       >
         <WithStyles(ForwardRef(CardContent))
-          className="makeStyles-card_content-5"
+          className="makeStyles-card_content-6"
         >
           <Styled(MuiBox)
             mb={3}
             textAlign="center"
           >
             <Memo(ForwardRef(AccountCircleIcon))
-              className="makeStyles-account-2"
+              className="makeStyles-account-3"
             />
             <WithStyles(ForwardRef(Typography))
-              className="makeStyles-caption-3"
+              className="makeStyles-caption-4"
             >
               Update password
             </WithStyles(ForwardRef(Typography))>
diff --git a/TokanPages.ClientApp/src/Components/Account/UserSignin/View/__snapshots__/userSigninView.test.tsx.snap b/TokanPages.ClientApp/src/Components/Account/UserSignin/View/__snapshots__/userSigninView.test.tsx.snap
index a7682a82e..2750c9f6c 100644
--- a/TokanPages.ClientApp/src/Components/Account/UserSignin/View/__snapshots__/userSigninView.test.tsx.snap
+++ b/TokanPages.ClientApp/src/Components/Account/UserSignin/View/__snapshots__/userSigninView.test.tsx.snap
@@ -5,28 +5,34 @@ exports[`test account group component: userSigninView should render correctly '<
   className="makeStyles-section-1"
 >
   <WithStyles(ForwardRef(Container))
-    maxWidth="sm"
+    className="makeStyles-container-2"
   >
     <Styled(MuiBox)
       pb={10}
-      pt={18}
+      pt={8}
     >
+      <Styled(MuiBox)
+        pb={6}
+        pt={4}
+      >
+        <BackArrowView />
+      </Styled(MuiBox)>
       <WithStyles(ForwardRef(Card))
-        className="makeStyles-card-6"
+        className="makeStyles-card-7"
         elevation={0}
       >
         <WithStyles(ForwardRef(CardContent))
-          className="makeStyles-card_content-7"
+          className="makeStyles-card_content-8"
         >
           <Styled(MuiBox)
             mb={3}
             textAlign="center"
           >
             <Memo(ForwardRef(AccountCircleIcon))
-              className="makeStyles-account-4"
+              className="makeStyles-account-5"
             />
             <WithStyles(ForwardRef(Typography))
-              className="makeStyles-caption-5"
+              className="makeStyles-caption-6"
             >
               Sign in
             </WithStyles(ForwardRef(Typography))>
@@ -89,7 +95,7 @@ exports[`test account group component: userSigninView should render correctly '<
               />
             </Styled(MuiBox)>
             <WithStyles(ForwardRef(Grid))
-              className="makeStyles-actions-3"
+              className="makeStyles-actions-4"
               container={true}
               spacing={2}
             >
@@ -104,7 +110,7 @@ exports[`test account group component: userSigninView should render correctly '<
                 />
               </WithStyles(ForwardRef(Grid))>
               <WithStyles(ForwardRef(Grid))
-                className="makeStyles-tertiaryAction-2"
+                className="makeStyles-tertiaryAction-3"
                 item={true}
                 sm={6}
                 xs={12}
diff --git a/TokanPages.ClientApp/src/Components/Account/UserSignin/__snapshots__/userSignin.test.tsx.snap b/TokanPages.ClientApp/src/Components/Account/UserSignin/__snapshots__/userSignin.test.tsx.snap
index ff6c86ed0..ae0e3f3a4 100644
--- a/TokanPages.ClientApp/src/Components/Account/UserSignin/__snapshots__/userSignin.test.tsx.snap
+++ b/TokanPages.ClientApp/src/Components/Account/UserSignin/__snapshots__/userSignin.test.tsx.snap
@@ -5,23 +5,57 @@ exports[`test account group component: userSignin should render correctly '<User
   class="makeStyles-section-1"
 >
   <div
-    class="MuiContainer-root MuiContainer-maxWidthSm"
+    class="MuiContainer-root makeStyles-container-2 MuiContainer-maxWidthLg"
   >
     <div
-      class="MuiBox-root MuiBox-root-9"
+      class="MuiBox-root MuiBox-root-10"
     >
       <div
-        class="MuiPaper-root MuiCard-root makeStyles-card-6 MuiPaper-elevation0 MuiPaper-rounded"
+        class="MuiBox-root MuiBox-root-11"
+      >
+        <a
+          href="/"
+        >
+          <button
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-icon-12"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </a>
+        <hr
+          class="MuiDivider-root makeStyles-divider-13"
+        />
+      </div>
+      <div
+        class="MuiPaper-root MuiCard-root makeStyles-card-7 MuiPaper-elevation0 MuiPaper-rounded"
       >
         <div
-          class="MuiCardContent-root makeStyles-card_content-7"
+          class="MuiCardContent-root makeStyles-card_content-8"
         >
           <div
-            class="MuiBox-root MuiBox-root-10"
+            class="MuiBox-root MuiBox-root-14"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root makeStyles-account-4"
+              class="MuiSvgIcon-root makeStyles-account-5"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -30,11 +64,11 @@ exports[`test account group component: userSignin should render correctly '<User
               />
             </svg>
             <p
-              class="MuiTypography-root makeStyles-caption-5 MuiTypography-body1"
+              class="MuiTypography-root makeStyles-caption-6 MuiTypography-body1"
             />
           </div>
           <div
-            class="MuiBox-root MuiBox-root-11"
+            class="MuiBox-root MuiBox-root-15"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2"
@@ -60,11 +94,11 @@ exports[`test account group component: userSignin should render correctly '<User
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-12 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-16 MuiOutlinedInput-notchedOutline"
                       style="padding-left:8px"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legend-13"
+                        class="PrivateNotchedOutline-legend-17"
                         style="width:0.01px"
                       >
                         <span>
@@ -79,7 +113,7 @@ exports[`test account group component: userSignin should render correctly '<User
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-textField-16 MuiFormControl-fullWidth"
+                  class="MuiFormControl-root makeStyles-textField-20 MuiFormControl-fullWidth"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
@@ -120,18 +154,15 @@ exports[`test account group component: userSignin should render correctly '<User
                             />
                           </svg>
                         </span>
-                        <span
-                          class="MuiTouchRipple-root"
-                        />
                       </button>
                     </div>
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-17 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
                       style="padding-left:8px"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legend-18"
+                        class="PrivateNotchedOutline-legend-22"
                         style="width:0.01px"
                       >
                         <span>
@@ -144,10 +175,10 @@ exports[`test account group component: userSignin should render correctly '<User
               </div>
             </div>
             <div
-              class="MuiBox-root MuiBox-root-21"
+              class="MuiBox-root MuiBox-root-25"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button-29 MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button-34 MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >
@@ -157,7 +188,7 @@ exports[`test account group component: userSignin should render correctly '<User
               </button>
             </div>
             <div
-              class="MuiGrid-root makeStyles-actions-3 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-actions-4 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6"
@@ -167,7 +198,7 @@ exports[`test account group component: userSignin should render correctly '<User
                 />
               </div>
               <div
-                class="MuiGrid-root makeStyles-tertiaryAction-2 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6"
+                class="MuiGrid-root makeStyles-tertiaryAction-3 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6"
               >
                 <a
                   href="/resetpassword"
diff --git a/TokanPages.ClientApp/src/Components/Account/UserSignup/View/__snapshots__/userSignupView.test.tsx.snap b/TokanPages.ClientApp/src/Components/Account/UserSignup/View/__snapshots__/userSignupView.test.tsx.snap
index 177c23f87..42d71da71 100644
--- a/TokanPages.ClientApp/src/Components/Account/UserSignup/View/__snapshots__/userSignupView.test.tsx.snap
+++ b/TokanPages.ClientApp/src/Components/Account/UserSignup/View/__snapshots__/userSignupView.test.tsx.snap
@@ -5,28 +5,34 @@ exports[`test account group component: userSignupView should render correctly '<
   className="makeStyles-section-1"
 >
   <WithStyles(ForwardRef(Container))
-    maxWidth="sm"
+    className="makeStyles-container-2"
   >
     <Styled(MuiBox)
       pb={10}
-      pt={18}
+      pt={8}
     >
+      <Styled(MuiBox)
+        pb={6}
+        pt={4}
+      >
+        <BackArrowView />
+      </Styled(MuiBox)>
       <WithStyles(ForwardRef(Card))
-        className="makeStyles-card-4"
+        className="makeStyles-card-5"
         elevation={0}
       >
         <WithStyles(ForwardRef(CardContent))
-          className="makeStyles-card_content-5"
+          className="makeStyles-card_content-6"
         >
           <Styled(MuiBox)
             mb={3}
             textAlign="center"
           >
             <Memo(ForwardRef(AccountCircleIcon))
-              className="makeStyles-account-2"
+              className="makeStyles-account-3"
             />
             <WithStyles(ForwardRef(Typography))
-              className="makeStyles-caption-3"
+              className="makeStyles-caption-4"
             >
               Create a new account
             </WithStyles(ForwardRef(Typography))>
diff --git a/TokanPages.ClientApp/src/Components/Account/UserSignup/__snapshots__/userSignup.test.tsx.snap b/TokanPages.ClientApp/src/Components/Account/UserSignup/__snapshots__/userSignup.test.tsx.snap
index 05ba608d9..d2d82d063 100644
--- a/TokanPages.ClientApp/src/Components/Account/UserSignup/__snapshots__/userSignup.test.tsx.snap
+++ b/TokanPages.ClientApp/src/Components/Account/UserSignup/__snapshots__/userSignup.test.tsx.snap
@@ -5,23 +5,57 @@ exports[`test account group component: userSignup should render correctly '<User
   class="makeStyles-section-1"
 >
   <div
-    class="MuiContainer-root MuiContainer-maxWidthSm"
+    class="MuiContainer-root makeStyles-container-2 MuiContainer-maxWidthLg"
   >
     <div
-      class="MuiBox-root MuiBox-root-7"
+      class="MuiBox-root MuiBox-root-8"
     >
       <div
-        class="MuiPaper-root MuiCard-root makeStyles-card-4 MuiPaper-elevation0 MuiPaper-rounded"
+        class="MuiBox-root MuiBox-root-9"
+      >
+        <a
+          href="/"
+        >
+          <button
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-icon-10"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </a>
+        <hr
+          class="MuiDivider-root makeStyles-divider-11"
+        />
+      </div>
+      <div
+        class="MuiPaper-root MuiCard-root makeStyles-card-5 MuiPaper-elevation0 MuiPaper-rounded"
       >
         <div
-          class="MuiCardContent-root makeStyles-card_content-5"
+          class="MuiCardContent-root makeStyles-card_content-6"
         >
           <div
-            class="MuiBox-root MuiBox-root-8"
+            class="MuiBox-root MuiBox-root-12"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root makeStyles-account-2"
+              class="MuiSvgIcon-root makeStyles-account-3"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -30,11 +64,11 @@ exports[`test account group component: userSignup should render correctly '<User
               />
             </svg>
             <p
-              class="MuiTypography-root makeStyles-caption-3 MuiTypography-body1"
+              class="MuiTypography-root makeStyles-caption-4 MuiTypography-body1"
             />
           </div>
           <div
-            class="MuiBox-root MuiBox-root-9"
+            class="MuiBox-root MuiBox-root-13"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2"
@@ -61,11 +95,11 @@ exports[`test account group component: userSignup should render correctly '<User
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-10 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-14 MuiOutlinedInput-notchedOutline"
                       style="padding-left:8px"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legend-11"
+                        class="PrivateNotchedOutline-legend-15"
                         style="width:0.01px"
                       >
                         <span>
@@ -97,11 +131,11 @@ exports[`test account group component: userSignup should render correctly '<User
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-14 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-18 MuiOutlinedInput-notchedOutline"
                       style="padding-left:8px"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legend-15"
+                        class="PrivateNotchedOutline-legend-19"
                         style="width:0.01px"
                       >
                         <span>
@@ -133,11 +167,11 @@ exports[`test account group component: userSignup should render correctly '<User
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-18 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-22 MuiOutlinedInput-notchedOutline"
                       style="padding-left:8px"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legend-19"
+                        class="PrivateNotchedOutline-legend-23"
                         style="width:0.01px"
                       >
                         <span>
@@ -152,7 +186,7 @@ exports[`test account group component: userSignup should render correctly '<User
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-textField-22 MuiFormControl-fullWidth"
+                  class="MuiFormControl-root makeStyles-textField-26 MuiFormControl-fullWidth"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
@@ -193,18 +227,15 @@ exports[`test account group component: userSignup should render correctly '<User
                             />
                           </svg>
                         </span>
-                        <span
-                          class="MuiTouchRipple-root"
-                        />
                       </button>
                     </div>
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-23 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-27 MuiOutlinedInput-notchedOutline"
                       style="padding-left:8px"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legend-24"
+                        class="PrivateNotchedOutline-legend-28"
                         style="width:0.01px"
                       >
                         <span>
@@ -251,13 +282,13 @@ exports[`test account group component: userSignup should render correctly '<User
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-29 MuiCheckbox-root Component-root-27"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-33 MuiCheckbox-root Component-root-31"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-32"
+                        class="PrivateSwitchBase-input-36"
                         data-indeterminate="false"
                         id="terms"
                         name="terms"
@@ -282,10 +313,10 @@ exports[`test account group component: userSignup should render correctly '<User
               </div>
             </div>
             <div
-              class="MuiBox-root MuiBox-root-33"
+              class="MuiBox-root MuiBox-root-37"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button-39 MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button-44 MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >
@@ -295,7 +326,7 @@ exports[`test account group component: userSignup should render correctly '<User
               </button>
             </div>
             <div
-              class="MuiBox-root MuiBox-root-40"
+              class="MuiBox-root MuiBox-root-45"
             >
               <a
                 href="/signin"

From b6d2cb490536caee5c3b95b7d4ac008812112e6d Mon Sep 17 00:00:00 2001
From: Tomasz 'Tom' Kandula <tom@tomkandula.com>
Date: Fri, 28 Jun 2024 17:16:44 +0200
Subject: [PATCH 3/9] test: update tests

---
 .../Account/ResetPassword/resetPassword.test.tsx           | 7 ++++++-
 .../Account/UpdatePassword/updatePassword.test.tsx         | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/TokanPages.ClientApp/src/Components/Account/ResetPassword/resetPassword.test.tsx b/TokanPages.ClientApp/src/Components/Account/ResetPassword/resetPassword.test.tsx
index ed68cc100..4246fa9a2 100644
--- a/TokanPages.ClientApp/src/Components/Account/ResetPassword/resetPassword.test.tsx
+++ b/TokanPages.ClientApp/src/Components/Account/ResetPassword/resetPassword.test.tsx
@@ -2,6 +2,7 @@ import "../../../setupTests";
 import React from "react";
 import * as Redux from "react-redux";
 import * as Router from "react-router";
+import { BrowserRouter } from "react-router-dom";
 import { render } from "enzyme";
 import { ResetPassword } from "./resetPassword";
 
@@ -33,7 +34,11 @@ describe("test account group component: resetPassword", () => {
     });
 
     it("should renders correctly '<ResetPassword />' when content is loaded.", () => {
-        const html = render(<ResetPassword />);
+        const html = render(
+            <BrowserRouter>
+                <ResetPassword />
+            </BrowserRouter>
+        );
         expect(useDispatchMock).toBeCalledTimes(1);
         expect(html).toMatchSnapshot();
     });
diff --git a/TokanPages.ClientApp/src/Components/Account/UpdatePassword/updatePassword.test.tsx b/TokanPages.ClientApp/src/Components/Account/UpdatePassword/updatePassword.test.tsx
index 3f78655ac..c69cbee15 100644
--- a/TokanPages.ClientApp/src/Components/Account/UpdatePassword/updatePassword.test.tsx
+++ b/TokanPages.ClientApp/src/Components/Account/UpdatePassword/updatePassword.test.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import * as Redux from "react-redux";
 import * as Router from "react-router";
 import * as Dom from "react-router-dom";
+import { BrowserRouter } from "react-router-dom";
 import { render } from "enzyme";
 import { UpdatePassword } from "./updatePassword";
 
@@ -42,7 +43,11 @@ describe("test account group component: updatePassword", () => {
     });
 
     it("should render correctly '<UpdatePassword />' when content is loaded.", () => {
-        const html = render(<UpdatePassword />);
+        const html = render(
+            <BrowserRouter>
+                <UpdatePassword />
+            </BrowserRouter>
+        );
         expect(useDispatchMock).toBeCalledTimes(1);
         expect(html).toMatchSnapshot();
     });

From b257fb1b82ffccac6b9cdcba18783f6d162cc0bc Mon Sep 17 00:00:00 2001
From: Tomasz 'Tom' Kandula <tom@tomkandula.com>
Date: Fri, 28 Jun 2024 17:17:00 +0200
Subject: [PATCH 4/9] feat: update snapshots

---
 .../__snapshots__/resetPassword.test.tsx.snap | 61 ++++++++++++----
 .../updatePassword.test.tsx.snap              | 69 ++++++++++++++-----
 2 files changed, 96 insertions(+), 34 deletions(-)

diff --git a/TokanPages.ClientApp/src/Components/Account/ResetPassword/__snapshots__/resetPassword.test.tsx.snap b/TokanPages.ClientApp/src/Components/Account/ResetPassword/__snapshots__/resetPassword.test.tsx.snap
index d77f510ec..9947bc30a 100644
--- a/TokanPages.ClientApp/src/Components/Account/ResetPassword/__snapshots__/resetPassword.test.tsx.snap
+++ b/TokanPages.ClientApp/src/Components/Account/ResetPassword/__snapshots__/resetPassword.test.tsx.snap
@@ -5,23 +5,57 @@ exports[`test account group component: resetPassword should renders correctly '<
   class="makeStyles-section-1"
 >
   <div
-    class="MuiContainer-root MuiContainer-maxWidthSm"
+    class="MuiContainer-root makeStyles-container-2 MuiContainer-maxWidthLg"
   >
     <div
-      class="MuiBox-root MuiBox-root-7"
+      class="MuiBox-root MuiBox-root-8"
     >
       <div
-        class="MuiPaper-root MuiCard-root makeStyles-card-4 MuiPaper-elevation0 MuiPaper-rounded"
+        class="MuiBox-root MuiBox-root-9"
+      >
+        <a
+          href="/"
+        >
+          <button
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-icon-10"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </a>
+        <hr
+          class="MuiDivider-root makeStyles-divider-11"
+        />
+      </div>
+      <div
+        class="MuiPaper-root MuiCard-root makeStyles-card-5 MuiPaper-elevation0 MuiPaper-rounded"
       >
         <div
-          class="MuiCardContent-root makeStyles-card_content-5"
+          class="MuiCardContent-root makeStyles-card_content-6"
         >
           <div
-            class="MuiBox-root MuiBox-root-8"
+            class="MuiBox-root MuiBox-root-12"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root makeStyles-account-2"
+              class="MuiSvgIcon-root makeStyles-account-3"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -30,11 +64,11 @@ exports[`test account group component: resetPassword should renders correctly '<
               />
             </svg>
             <p
-              class="MuiTypography-root makeStyles-caption-3 MuiTypography-body1"
+              class="MuiTypography-root makeStyles-caption-4 MuiTypography-body1"
             />
           </div>
           <div
-            class="MuiBox-root MuiBox-root-9"
+            class="MuiBox-root MuiBox-root-13"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2"
@@ -60,11 +94,11 @@ exports[`test account group component: resetPassword should renders correctly '<
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-10 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-14 MuiOutlinedInput-notchedOutline"
                       style="padding-left:8px"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legend-11"
+                        class="PrivateNotchedOutline-legend-15"
                         style="width:0.01px"
                       >
                         <span>
@@ -77,19 +111,16 @@ exports[`test account group component: resetPassword should renders correctly '<
               </div>
             </div>
             <div
-              class="MuiBox-root MuiBox-root-14"
+              class="MuiBox-root MuiBox-root-18"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button-20 MuiButton-fullWidth"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button-25 MuiButton-fullWidth"
                 tabindex="0"
                 type="submit"
               >
                 <span
                   class="MuiButton-label"
                 />
-                <span
-                  class="MuiTouchRipple-root"
-                />
               </button>
             </div>
           </div>
diff --git a/TokanPages.ClientApp/src/Components/Account/UpdatePassword/__snapshots__/updatePassword.test.tsx.snap b/TokanPages.ClientApp/src/Components/Account/UpdatePassword/__snapshots__/updatePassword.test.tsx.snap
index 4c02b1515..c2e60e45d 100644
--- a/TokanPages.ClientApp/src/Components/Account/UpdatePassword/__snapshots__/updatePassword.test.tsx.snap
+++ b/TokanPages.ClientApp/src/Components/Account/UpdatePassword/__snapshots__/updatePassword.test.tsx.snap
@@ -5,23 +5,57 @@ exports[`test account group component: updatePassword should render correctly '<
   class="makeStyles-section-1"
 >
   <div
-    class="MuiContainer-root MuiContainer-maxWidthSm"
+    class="MuiContainer-root makeStyles-container-2 MuiContainer-maxWidthLg"
   >
     <div
-      class="MuiBox-root MuiBox-root-7"
+      class="MuiBox-root MuiBox-root-8"
     >
       <div
-        class="MuiPaper-root MuiCard-root makeStyles-card-4 MuiPaper-elevation0 MuiPaper-rounded"
+        class="MuiBox-root MuiBox-root-9"
+      >
+        <a
+          href="/"
+        >
+          <button
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-icon-10"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </a>
+        <hr
+          class="MuiDivider-root makeStyles-divider-11"
+        />
+      </div>
+      <div
+        class="MuiPaper-root MuiCard-root makeStyles-card-5 MuiPaper-elevation0 MuiPaper-rounded"
       >
         <div
-          class="MuiCardContent-root makeStyles-card_content-5"
+          class="MuiCardContent-root makeStyles-card_content-6"
         >
           <div
-            class="MuiBox-root MuiBox-root-8"
+            class="MuiBox-root MuiBox-root-12"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root makeStyles-account-2"
+              class="MuiSvgIcon-root makeStyles-account-3"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -30,11 +64,11 @@ exports[`test account group component: updatePassword should render correctly '<
               />
             </svg>
             <p
-              class="MuiTypography-root makeStyles-caption-3 MuiTypography-body1"
+              class="MuiTypography-root makeStyles-caption-4 MuiTypography-body1"
             />
           </div>
           <div
-            class="MuiBox-root MuiBox-root-9"
+            class="MuiBox-root MuiBox-root-13"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2"
@@ -43,7 +77,7 @@ exports[`test account group component: updatePassword should render correctly '<
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-textField-10 MuiFormControl-fullWidth"
+                  class="MuiFormControl-root makeStyles-textField-14 MuiFormControl-fullWidth"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
@@ -85,18 +119,15 @@ exports[`test account group component: updatePassword should render correctly '<
                             />
                           </svg>
                         </span>
-                        <span
-                          class="MuiTouchRipple-root"
-                        />
                       </button>
                     </div>
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-11 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-15 MuiOutlinedInput-notchedOutline"
                       style="padding-left:8px"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legend-12"
+                        class="PrivateNotchedOutline-legend-16"
                         style="width:0.01px"
                       >
                         <span>
@@ -111,7 +142,7 @@ exports[`test account group component: updatePassword should render correctly '<
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-textField-15 MuiFormControl-fullWidth"
+                  class="MuiFormControl-root makeStyles-textField-19 MuiFormControl-fullWidth"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
@@ -157,11 +188,11 @@ exports[`test account group component: updatePassword should render correctly '<
                     </div>
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-16 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-20 MuiOutlinedInput-notchedOutline"
                       style="padding-left:8px"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legend-17"
+                        class="PrivateNotchedOutline-legend-21"
                         style="width:0.01px"
                       >
                         <span>
@@ -174,10 +205,10 @@ exports[`test account group component: updatePassword should render correctly '<
               </div>
             </div>
             <div
-              class="MuiBox-root MuiBox-root-20"
+              class="MuiBox-root MuiBox-root-24"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button-26 Mui-disabled MuiButton-fullWidth Mui-disabled"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button-31 Mui-disabled MuiButton-fullWidth Mui-disabled"
                 disabled=""
                 tabindex="-1"
                 type="submit"

From 329458e26d8872de0c8f389f807ac42d4f3c418a Mon Sep 17 00:00:00 2001
From: Tomasz 'Tom' Kandula <tom@tomkandula.com>
Date: Fri, 28 Jun 2024 17:52:33 +0200
Subject: [PATCH 5/9] feat: restyle contact form, use back button

---
 .../Contact/View/contactFormStyle.tsx         | 21 ++++++++++
 .../Contact/View/contactFormView.tsx          | 41 +++++++++++++------
 .../src/Components/Contact/contactForm.tsx    |  7 +++-
 .../src/Pages/ContactPage/index.tsx           |  2 +-
 4 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/TokanPages.ClientApp/src/Components/Contact/View/contactFormStyle.tsx b/TokanPages.ClientApp/src/Components/Contact/View/contactFormStyle.tsx
index ff0e9f41e..fbee1a4e2 100644
--- a/TokanPages.ClientApp/src/Components/Contact/View/contactFormStyle.tsx
+++ b/TokanPages.ClientApp/src/Components/Contact/View/contactFormStyle.tsx
@@ -5,11 +5,18 @@ export const ContactFormStyle = makeStyles(() => ({
     section: {
         backgroundColor: Colours.colours.white,
     },
+    container: {
+        maxWidth: 700,
+    },
     caption: {
         textAlign: "center",
         fontSize: "2.0rem",
         color: Colours.colours.violet,
     },
+    small_caption: {
+        fontSize: "1.8rem",
+        color: Colours.colours.gray1,
+    },
     button: {
         "&:hover": {
             color: Colours.colours.white,
@@ -18,4 +25,18 @@ export const ContactFormStyle = makeStyles(() => ({
         color: Colours.colours.white,
         background: Colours.colours.violet,
     },
+    icon: {
+        fontSize: 72,
+        color: Colours.colours.violet,
+    },
+    card: {
+        borderRadius: 15,
+        boxShadow: "0 2px 20px 0 rgb(0 0 0 / 20%)",
+    },
+    card_content: {
+        marginTop: 10,
+        marginLeft: 15,
+        marginRight: 15,
+        marginBottom: 10,
+    },
 }));
diff --git a/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.tsx b/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.tsx
index a5f870a2b..38d8b6551 100644
--- a/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.tsx
+++ b/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.tsx
@@ -6,9 +6,11 @@ import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Button from "@material-ui/core/Button";
-import { CircularProgress } from "@material-ui/core";
+import ContactMailIcon from "@material-ui/icons/ContactMail";
+import { Card, CardContent, CircularProgress } from "@material-ui/core";
 import Skeleton from "@material-ui/lab/Skeleton";
 import { VioletCheckbox } from "../../../Theme";
+import { BackArrow } from "../../../Shared/Components";
 import { ViewProperties } from "../../../Shared/Abstractions";
 import { ReactChangeEvent, ReactKeyboardEvent } from "../../../Shared/types";
 import { ContactFormStyle } from "./contactFormStyle";
@@ -16,6 +18,7 @@ import { ContactFormStyle } from "./contactFormStyle";
 interface Properties extends ViewProperties {
     caption: string;
     text: string;
+    hasBackButton: boolean;
     keyHandler: (event: ReactKeyboardEvent) => void;
     formHandler: (event: ReactChangeEvent) => void;
     firstName: string;
@@ -57,15 +60,27 @@ export const ContactFormView = (props: Properties): JSX.Element => {
     const classes = ContactFormStyle();
     return (
         <section className={classes.section}>
-            <Container maxWidth="lg">
-                <Container maxWidth="sm">
-                    <Box pt={8} pb={10}>
-                        <Box mb={6} textAlign="center" data-aos="fade-down">
-                            <Typography gutterBottom={true} className={classes.caption}>
-                                {props.isLoading ? <Skeleton variant="text" /> : props.caption?.toUpperCase()}
-                            </Typography>
-                        </Box>
-                        <Box>
+            <Container className={classes.container}>
+                <Box pt={props.hasBackButton ? 0 : 6} pb={10}>
+                    {props.hasBackButton 
+                    ? <Box pt={4} pb={6}>
+                        <BackArrow />
+                    </Box> 
+                    : <Box mb={6} textAlign="center" data-aos="fade-down">
+                        <Typography gutterBottom={true} className={classes.caption}>
+                            {props.isLoading ? <Skeleton variant="text" /> : props.caption?.toUpperCase()}
+                        </Typography>
+                    </Box>}
+                    <Card elevation={0} className={props.hasBackButton ? classes.card : undefined}>
+                        <CardContent className={classes.card_content}>
+                            {props.hasBackButton 
+                            ? <Box mb={3} textAlign="center">
+                                <ContactMailIcon className={classes.icon} />
+                                <Typography className={classes.small_caption}>
+                                    {props.isLoading ? <Skeleton variant="text" /> : props.caption}
+                                </Typography>
+                            </Box>
+                            : <></>}
                             <Grid container spacing={2}>
                                 <Grid item xs={12} sm={6}>
                                     <div data-aos="zoom-in">
@@ -195,9 +210,9 @@ export const ContactFormView = (props: Properties): JSX.Element => {
                                     <ActiveButton {...props} />
                                 )}
                             </Box>
-                        </Box>
-                    </Box>
-                </Container>
+                        </CardContent>
+                    </Card>
+                </Box>
             </Container>
         </section>
     );
diff --git a/TokanPages.ClientApp/src/Components/Contact/contactForm.tsx b/TokanPages.ClientApp/src/Components/Contact/contactForm.tsx
index 315e717e3..d3f417c3f 100644
--- a/TokanPages.ClientApp/src/Components/Contact/contactForm.tsx
+++ b/TokanPages.ClientApp/src/Components/Contact/contactForm.tsx
@@ -14,6 +14,10 @@ import { GetTextWarning, SuccessMessage, WarningMessage } from "../../Shared/Ser
 
 import { RECEIVED_ERROR_MESSAGE } from "../../Shared/constants";
 
+interface ContactFormProps {
+    hasBackButton?: boolean;
+}
+
 const formDefault: ContactFormInput = {
     firstName: "",
     lastName: "",
@@ -23,7 +27,7 @@ const formDefault: ContactFormInput = {
     terms: false,
 };
 
-export const ContactForm = (): JSX.Element => {
+export const ContactForm = (props: ContactFormProps): JSX.Element => {
     const dispatch = useDispatch();
 
     const content = useSelector((state: ApplicationState) => state.contentTemplates?.content);
@@ -122,6 +126,7 @@ export const ContactForm = (): JSX.Element => {
             isLoading={contactForm?.isLoading}
             caption={contactForm?.content?.caption}
             text={contactForm?.content?.text}
+            hasBackButton={props.hasBackButton ?? false}
             keyHandler={keyHandler}
             formHandler={formHandler}
             firstName={form.firstName}
diff --git a/TokanPages.ClientApp/src/Pages/ContactPage/index.tsx b/TokanPages.ClientApp/src/Pages/ContactPage/index.tsx
index bd36cd9c3..be87fde3f 100644
--- a/TokanPages.ClientApp/src/Pages/ContactPage/index.tsx
+++ b/TokanPages.ClientApp/src/Pages/ContactPage/index.tsx
@@ -28,7 +28,7 @@ export const ContactPage = () => {
             <Navigation />
             <Container>
                 <Box mt={8}>
-                    <ContactForm />
+                    <ContactForm hasBackButton={true} />
                 </Box>
             </Container>
             <Footer />

From dbbdb12fa1f4de2ff61a6c13c1791eda5ff00da8 Mon Sep 17 00:00:00 2001
From: Tomasz 'Tom' Kandula <tom@tomkandula.com>
Date: Fri, 28 Jun 2024 17:52:42 +0200
Subject: [PATCH 6/9] test: update test

---
 .../src/Components/Contact/View/contactFormView.test.tsx         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.test.tsx b/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.test.tsx
index 914781439..9cbb3e737 100644
--- a/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.test.tsx
+++ b/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.test.tsx
@@ -10,6 +10,7 @@ describe("test component: contactFormView", () => {
                 isLoading={false}
                 caption="Contact me"
                 text="If you have any questions..."
+                hasBackButton={true}
                 keyHandler={jest.fn()}
                 formHandler={jest.fn()}
                 firstName="Ester"

From d334fa4f9ffb427636894b7fa68641da97af94f1 Mon Sep 17 00:00:00 2001
From: Tomasz 'Tom' Kandula <tom@tomkandula.com>
Date: Fri, 28 Jun 2024 17:55:37 +0200
Subject: [PATCH 7/9] test: update test

---
 .../Contact/View/contactFormView.test.tsx     | 53 ++++++++++---------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.test.tsx b/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.test.tsx
index 9cbb3e737..8486cbc5c 100644
--- a/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.test.tsx
+++ b/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.test.tsx
@@ -1,36 +1,39 @@
 import "../../../setupTests";
 import React from "react";
+import { BrowserRouter } from "react-router-dom";
 import { render } from "enzyme";
 import { ContactFormView } from "./contactFormView";
 
 describe("test component: contactFormView", () => {
     it("should render correctly '<ContactFormView />' when content is loaded.", () => {
         const html = render(
-            <ContactFormView
-                isLoading={false}
-                caption="Contact me"
-                text="If you have any questions..."
-                hasBackButton={true}
-                keyHandler={jest.fn()}
-                formHandler={jest.fn()}
-                firstName="Ester"
-                lastName="Exposito"
-                email="ester.exposito@gmail.com"
-                subject="Test subject"
-                message="Test message..."
-                terms={false}
-                buttonHandler={jest.fn()}
-                progress={false}
-                buttonText="Submit"
-                consent="I agree!"
-                labelFirstName="First name"
-                labelLastName="Last name"
-                labelEmail="Email address"
-                labelSubject="Subject"
-                labelMessage="Message"
-                multiline={false}
-                minRows={undefined}
-            />
+            <BrowserRouter>
+                <ContactFormView
+                    isLoading={false}
+                    caption="Contact me"
+                    text="If you have any questions..."
+                    hasBackButton={true}
+                    keyHandler={jest.fn()}
+                    formHandler={jest.fn()}
+                    firstName="Ester"
+                    lastName="Exposito"
+                    email="ester.exposito@gmail.com"
+                    subject="Test subject"
+                    message="Test message..."
+                    terms={false}
+                    buttonHandler={jest.fn()}
+                    progress={false}
+                    buttonText="Submit"
+                    consent="I agree!"
+                    labelFirstName="First name"
+                    labelLastName="Last name"
+                    labelEmail="Email address"
+                    labelSubject="Subject"
+                    labelMessage="Message"
+                    multiline={false}
+                    minRows={undefined}
+                />
+            </BrowserRouter>
         );
 
         expect(html).toMatchSnapshot();

From a9b091378b4389aa5efd97221ece38983b6deaf3 Mon Sep 17 00:00:00 2001
From: Tomasz 'Tom' Kandula <tom@tomkandula.com>
Date: Fri, 28 Jun 2024 17:55:59 +0200
Subject: [PATCH 8/9] test: update snapshot

---
 .../contactFormView.test.tsx.snap             | 98 +++++++++++++------
 1 file changed, 69 insertions(+), 29 deletions(-)

diff --git a/TokanPages.ClientApp/src/Components/Contact/View/__snapshots__/contactFormView.test.tsx.snap b/TokanPages.ClientApp/src/Components/Contact/View/__snapshots__/contactFormView.test.tsx.snap
index 170e391b6..41c1fbd88 100644
--- a/TokanPages.ClientApp/src/Components/Contact/View/__snapshots__/contactFormView.test.tsx.snap
+++ b/TokanPages.ClientApp/src/Components/Contact/View/__snapshots__/contactFormView.test.tsx.snap
@@ -5,27 +5,70 @@ exports[`test component: contactFormView should render correctly '<ContactFormVi
   class="makeStyles-section-1"
 >
   <div
-    class="MuiContainer-root MuiContainer-maxWidthLg"
+    class="MuiContainer-root makeStyles-container-2 MuiContainer-maxWidthLg"
   >
     <div
-      class="MuiContainer-root MuiContainer-maxWidthSm"
+      class="MuiBox-root MuiBox-root-9"
     >
       <div
-        class="MuiBox-root MuiBox-root-4"
+        class="MuiBox-root MuiBox-root-10"
       >
-        <div
-          class="MuiBox-root MuiBox-root-5"
-          data-aos="fade-down"
+        <a
+          href="/"
         >
-          <p
-            class="MuiTypography-root makeStyles-caption-2 MuiTypography-body1 MuiTypography-gutterBottom"
+          <button
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-icon-11"
+            tabindex="0"
+            type="button"
           >
-            CONTACT ME
-          </p>
-        </div>
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </a>
+        <hr
+          class="MuiDivider-root makeStyles-divider-12"
+        />
+      </div>
+      <div
+        class="MuiPaper-root MuiCard-root makeStyles-card-7 MuiPaper-elevation0 MuiPaper-rounded"
+      >
         <div
-          class="MuiBox-root MuiBox-root-6"
+          class="MuiCardContent-root makeStyles-card_content-8"
         >
+          <div
+            class="MuiBox-root MuiBox-root-13"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root makeStyles-icon-6"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M21 8V7l-3 2-3-2v1l3 2 3-2zm1-5H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h20c1.1 0 1.99-.9 1.99-2L24 5c0-1.1-.9-2-2-2zM8 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H2v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1zm8-6h-8V6h8v6z"
+              />
+            </svg>
+            <p
+              class="MuiTypography-root makeStyles-small_caption-4 MuiTypography-body1"
+            >
+              Contact me
+            </p>
+          </div>
           <div
             class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2"
           >
@@ -67,10 +110,10 @@ exports[`test component: contactFormView should render correctly '<ContactFormVi
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-7 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-14 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-9 PrivateNotchedOutline-legendNotched-10"
+                        class="PrivateNotchedOutline-legendLabelled-16 PrivateNotchedOutline-legendNotched-17"
                       >
                         <span>
                           First name *
@@ -119,10 +162,10 @@ exports[`test component: contactFormView should render correctly '<ContactFormVi
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-11 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-18 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-13 PrivateNotchedOutline-legendNotched-14"
+                        class="PrivateNotchedOutline-legendLabelled-20 PrivateNotchedOutline-legendNotched-21"
                       >
                         <span>
                           Last name *
@@ -171,10 +214,10 @@ exports[`test component: contactFormView should render correctly '<ContactFormVi
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-15 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-22 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-17 PrivateNotchedOutline-legendNotched-18"
+                        class="PrivateNotchedOutline-legendLabelled-24 PrivateNotchedOutline-legendNotched-25"
                       >
                         <span>
                           Email address *
@@ -223,10 +266,10 @@ exports[`test component: contactFormView should render correctly '<ContactFormVi
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-19 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-26 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-21 PrivateNotchedOutline-legendNotched-22"
+                        class="PrivateNotchedOutline-legendLabelled-28 PrivateNotchedOutline-legendNotched-29"
                       >
                         <span>
                           Subject *
@@ -275,10 +318,10 @@ exports[`test component: contactFormView should render correctly '<ContactFormVi
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-23 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-30 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-25 PrivateNotchedOutline-legendNotched-26"
+                        class="PrivateNotchedOutline-legendLabelled-32 PrivateNotchedOutline-legendNotched-33"
                       >
                         <span>
                           Message *
@@ -300,13 +343,13 @@ exports[`test component: contactFormView should render correctly '<ContactFormVi
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-29 MuiCheckbox-root Component-root-27"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-36 MuiCheckbox-root Component-root-34"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-32"
+                        class="PrivateSwitchBase-input-39"
                         data-indeterminate="false"
                         id="terms"
                         name="terms"
@@ -323,9 +366,6 @@ exports[`test component: contactFormView should render correctly '<ContactFormVi
                         />
                       </svg>
                     </span>
-                    <span
-                      class="MuiTouchRipple-root"
-                    />
                   </span>
                   <span
                     class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
@@ -337,11 +377,11 @@ exports[`test component: contactFormView should render correctly '<ContactFormVi
             </div>
           </div>
           <div
-            class="MuiBox-root MuiBox-root-33"
+            class="MuiBox-root MuiBox-root-40"
             data-aos="fade-up"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button-36 MuiButton-fullWidth"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button-45 MuiButton-fullWidth"
               tabindex="0"
               type="submit"
             >

From 50434648f38ab2647637eddace95d9765f1fe160 Mon Sep 17 00:00:00 2001
From: Tomasz 'Tom' Kandula <tom@tomkandula.com>
Date: Fri, 28 Jun 2024 17:56:28 +0200
Subject: [PATCH 9/9] feat: apply prettier

---
 .../Contact/View/contactFormView.tsx          | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.tsx b/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.tsx
index 38d8b6551..dadad27df 100644
--- a/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.tsx
+++ b/TokanPages.ClientApp/src/Components/Contact/View/contactFormView.tsx
@@ -62,25 +62,29 @@ export const ContactFormView = (props: Properties): JSX.Element => {
         <section className={classes.section}>
             <Container className={classes.container}>
                 <Box pt={props.hasBackButton ? 0 : 6} pb={10}>
-                    {props.hasBackButton 
-                    ? <Box pt={4} pb={6}>
-                        <BackArrow />
-                    </Box> 
-                    : <Box mb={6} textAlign="center" data-aos="fade-down">
-                        <Typography gutterBottom={true} className={classes.caption}>
-                            {props.isLoading ? <Skeleton variant="text" /> : props.caption?.toUpperCase()}
-                        </Typography>
-                    </Box>}
+                    {props.hasBackButton ? (
+                        <Box pt={4} pb={6}>
+                            <BackArrow />
+                        </Box>
+                    ) : (
+                        <Box mb={6} textAlign="center" data-aos="fade-down">
+                            <Typography gutterBottom={true} className={classes.caption}>
+                                {props.isLoading ? <Skeleton variant="text" /> : props.caption?.toUpperCase()}
+                            </Typography>
+                        </Box>
+                    )}
                     <Card elevation={0} className={props.hasBackButton ? classes.card : undefined}>
                         <CardContent className={classes.card_content}>
-                            {props.hasBackButton 
-                            ? <Box mb={3} textAlign="center">
-                                <ContactMailIcon className={classes.icon} />
-                                <Typography className={classes.small_caption}>
-                                    {props.isLoading ? <Skeleton variant="text" /> : props.caption}
-                                </Typography>
-                            </Box>
-                            : <></>}
+                            {props.hasBackButton ? (
+                                <Box mb={3} textAlign="center">
+                                    <ContactMailIcon className={classes.icon} />
+                                    <Typography className={classes.small_caption}>
+                                        {props.isLoading ? <Skeleton variant="text" /> : props.caption}
+                                    </Typography>
+                                </Box>
+                            ) : (
+                                <></>
+                            )}
                             <Grid container spacing={2}>
                                 <Grid item xs={12} sm={6}>
                                     <div data-aos="zoom-in">