Add callout for reset password email (#38999)

* Add callout for reset password email

* nit

apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx

@@ -10,6 +10,7 @@ import { useResetPasswordMutation } from 'data/misc/reset-password-mutation'
 import { BASE_PATH } from 'lib/constants'
 import { auth } from 'lib/gotrue'
 import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
+import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 const forgotPasswordSchema = z.object({
@@ -78,6 +79,11 @@ const ConfirmResetCodeForm = ({ email }: { email: string }) => {
         className="flex flex-col pt-4 space-y-4"
         onSubmit={codeForm.handleSubmit(onCodeEntered)}
       >
+        <Admonition
+          type="default"
+          title="Check your email for a reset code"
+          description="You'll receive an email if an account associated with the email address exists"
+        />
         <FormField_Shadcn_
           control={codeForm.control}
           name="code"

apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx

@@ -175,7 +175,12 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
             </li>
           )}
           <li>
-            <Link href="/logout">Force sign out and clear cookies</Link>
+            <Link
+              href="/logout"
+              className="text-sm transition text-foreground-light hover:text-foreground"
+            >
+              Force sign out and clear cookies
+            </Link>
           </li>
           <li>
             <Link

apps/studio/pages/forgot-password.tsx

@@ -1,6 +1,7 @@
+import Link from 'next/link'
+
 import { ForgotPasswordWizard } from 'components/interfaces/SignIn/ForgotPasswordWizard'
 import ForgotPasswordLayout from 'components/layouts/SignInLayout/ForgotPasswordLayout'
-import Link from 'next/link'
 import type { NextPageWithLayout } from 'types'
 
 const ForgotPasswordPage: NextPageWithLayout = () => {
@@ -23,7 +24,7 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
 ForgotPasswordPage.getLayout = (page) => (
   <ForgotPasswordLayout
     heading="Forgot your password?"
-    subheading="Type in your email and we'll send you a code to reset the password"
+    subheading="Enter your email and we'll send you a code to reset the password"
   >
     {page}
   </ForgotPasswordLayout>