[web] auth: update password reset UI (#1354)

Co-authored-by: GitHub Actions <github-actions[bot]@users.noreply.github.com>

apps/web/src/components/auth/AuthPasswordResetPage.tsx

@@ -12,7 +12,7 @@ type Props = Readonly<{
 export default function AuthPasswordResetPage({ next }: Props) {
   return (
     <Container
-      className={clsx('flex flex-col', 'py-8 md:py-12 lg:py-16')}
+      className={clsx('flex flex-col', 'py-16', 'mb-40 sm:mb-60 lg:mb-80')}
       width="xl">
       <SupabaseAuthUpdatePassword next={next} />
     </Container>

apps/web/src/components/auth/AuthPasswordResetSentPage.tsx

@@ -1,18 +1,17 @@
 'use client';
 
 import clsx from 'clsx';
+import { FaCheck } from 'react-icons/fa6';
 
 import { useAuthSignInUp } from '~/hooks/user/useAuthFns';
 
 import { useIntl } from '~/components/intl';
-import Anchor from '~/components/ui/Anchor';
+import Button from '~/components/ui/Button';
 import Container from '~/components/ui/Container';
 import Heading from '~/components/ui/Heading';
 import Text from '~/components/ui/Text';
 import { themeRadialWhiteGlowBackground } from '~/components/ui/theme';
 
-import AuthEmailAsset from './AuthEmailAsset';
-
 type Props = Readonly<{
   next: string;
 }>;
@@ -28,33 +27,60 @@ export default function AuthPasswordResetSentPage({ next }: Props) {
         themeRadialWhiteGlowBackground,
       )}>
       <Container
-        className={clsx('flex flex-col items-center', 'py-8 md:py-12 lg:py-16')}
+        className={clsx(
+          'flex flex-col items-center',
+          'py-16',
+          'mb-40 sm:mb-60 lg:mb-80',
+        )}
         width="xl">
-        <Heading className="text-center" level="heading5">
+        <div
+          className={clsx(
+            'flex items-center justify-center',
+            'size-12',
+            'bg-success dark:bg-success-light',
+            'text-white dark:text-neutral-900',
+            'rounded-full',
+          )}>
+          <FaCheck
+            aria-hidden={true}
+            className={clsx('size-[30px] shrink-0')}
+          />
+        </div>
+        <Heading className="my-4 text-center" level="heading4">
           {intl.formatMessage({
-            defaultMessage:
-              'An email containing the password reset instructions will be sent if an associated account exists',
-            description:
-              'Message indicating a successful password reset request',
-            id: 'Q0sZmk',
+            defaultMessage: 'Password reset email sent',
+            description: 'Heading for password reset email sent',
+            id: 'cOExUy',
           })}
         </Heading>
-        <div className="mb-10 mt-4 text-center">
-          <Text size="body2">
-            <Anchor
-              href={signInUpHref({
-                next,
-              })}
-              prefetch={null}>
-              {intl.formatMessage({
-                defaultMessage: 'Go back to sign in',
-                description: 'Back to sign in page',
-                id: '3qk61r',
-              })}
-            </Anchor>
-          </Text>
-        </div>
-        <AuthEmailAsset />
+        <Text
+          className={clsx(
+            'block max-w-[540px] text-center',
+            'text-sm sm:text-base',
+          )}
+          color="secondary"
+          size="inherit">
+          {intl.formatMessage({
+            defaultMessage:
+              "We've sent a password reset link to your email. If you don't see the email, make sure to check your spam or junk folder.",
+            description: 'Description for password reset email sent',
+            id: '/Foz6K',
+          })}
+        </Text>
+        <Button
+          className="mt-4"
+          href={signInUpHref({
+            next,
+          })}
+          label={intl.formatMessage({
+            defaultMessage: 'Go back to sign in',
+            description: 'Back to sign in page',
+            id: '3qk61r',
+          })}
+          prefetch={null}
+          size="xs"
+          variant="primary"
+        />
       </Container>
     </div>
   );

apps/web/src/components/auth/SupabaseAuthUpdatePassword.tsx

@@ -73,11 +73,13 @@ export default function SupabaseAuthUpdatePassword({
   }
 
   return (
-    <div className="flex flex-col gap-y-6">
+    <div className="flex flex-col gap-y-8">
       {(showTitle || user?.app_metadata.provider !== 'email') && (
-        <div className="flex flex-col gap-y-2">
+        <div className="flex flex-col gap-y-1.5">
           {showTitle && (
-            <Heading className="flex-1" level="heading6">
+            <Heading
+              className="flex-1"
+              level={user?.email ? 'heading6' : 'heading5'}>
               {user?.email == null ? (
                 <FormattedMessage
                   defaultMessage="Change password"
@@ -171,6 +173,7 @@ export default function SupabaseAuthUpdatePassword({
                     'Label of Change Password button on Change Password page',
                   id: 'd8XKhi',
                 })}
+                size="md"
                 type="submit"
                 variant="secondary"
                 onClick={() => {

apps/web/src/locales/en-US.json

@@ -295,6 +295,10 @@
     "defaultMessage": "All filters",
     "description": "Label for All Filters button for roadmap page on mobile"
   },
+  "/Foz6K": {
+    "defaultMessage": "We've sent a password reset link to your email. If you don't see the email, make sure to check your spam or junk folder.",
+    "description": "Description for password reset email sent"
+  },
   "/FyqAR": {
     "defaultMessage": "Translations for {locale} are in beta and may not be accurate. Do give feedback or <link>contact us</link> if you are interested in helping to translate!",
     "description": "Banner about beta locale version"
@@ -5919,10 +5923,6 @@
     "defaultMessage": "Resubscribe",
     "description": "Button CTA to encourage upgrading"
   },
-  "Q0sZmk": {
-    "defaultMessage": "An email containing the password reset instructions will be sent if an associated account exists",
-    "description": "Message indicating a successful password reset request"
-  },
   "Q0yp+r": {
     "defaultMessage": "Premium company guide",
     "description": "Paywall title for company guides feature"
@@ -8711,6 +8711,10 @@
     "defaultMessage": "Prepare for front end interviews with a vast question bank covering every format and popular frameworks/languages. Includes solutions and tests from ex-interviewers.",
     "description": "Page description for focus areas listing"
   },
+  "cOExUy": {
+    "defaultMessage": "Password reset email sent",
+    "description": "Heading for password reset email sent"
+  },
   "cOS90R": {
     "defaultMessage": "Junior (1-2)",
     "description": "Job experience label"