Final auth design

Client/src/Pages/Auth/CheckEmail.jsx

@@ -115,7 +115,45 @@ const CheckEmail = () => {
             },
           },
         }}
-      ></Stack>
+      >
+        <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+          <Box>
+            <EmailIcon />
+            <Typography component="h1">Check your email</Typography>
+            <Typography mt={theme.gap.xs} sx={{ width: "max-content" }}>
+              We sent a password reset link to{" "}
+              <Typography className="email-sent-to" component="span">
+                {email || "username@email.com"}
+              </Typography>
+            </Typography>
+          </Box>
+          <Button
+            level="primary"
+            label="Open email app"
+            onClick={openMail}
+            sx={{
+              width: "100%",
+              maxWidth: 400,
+            }}
+          />
+          <Typography sx={{ alignSelf: "center", mb: theme.gap.medium }}>
+            Didn't receive the email?{" "}
+            <Typography
+              component="span"
+              onClick={resendToken}
+              sx={{
+                color: theme.palette.primary.main,
+                userSelect: "none",
+                pointerEvents: disabled ? "none" : "auto",
+                cursor: disabled ? "default" : "pointer",
+                opacity: disabled ? 0.5 : 1,
+              }}
+            >
+              Click to resend
+            </Typography>
+          </Typography>
+        </Stack>
+      </Stack>
       <Box textAlign="center" p={theme.gap.large}>
         <Typography display="inline-block">Go back to —</Typography>
         <Typography

Client/src/Pages/Auth/index.css

@@ -82,13 +82,13 @@
   cursor: pointer;
   transition: opacity 300ms ease-in;
 }
-.auth p > span {
+.auth p > span:not(.email-sent-to) {
   text-decoration: underline;
   text-underline-offset: 2px;
   cursor: pointer;
   transition: all 200ms;
 }
-.auth p > span:hover {
+.auth p > span:not(.email-sent-to):hover {
   color: var(--env-var-color-2);
   text-underline-offset: 4px;
 }
@@ -111,6 +111,10 @@
 .auth .check span.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
 }
+.auth .email-sent-to {
+  font-weight: 600;
+  cursor: default;
+}
 
 .auth > .MuiStack-root:nth-of-type(1) {
   height: var(--env-var-nav-bar-height);