fix(clerk-js): Fix email card subtitle (#2621)

clerk · Jan 17, 2024 · 1d2e9ee · 1d2e9ee
1 parent 45919f4
commit 1d2e9ee
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/.changeset/three-planes-tell.md b/.changeset/three-planes-tell.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailForm.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
 import { useEnvironment } from '../../contexts';
-import { localizationKeys, Text } from '../../customizables';
+import { localizationKeys } from '../../customizables';
 import type { FormProps } from '../../elements';
 import { Form, FormButtons, FormContainer, useCardState, withCardStateProvider } from '../../elements';
 import { handleError, useFormControl } from '../../utils';
@@ -51,16 +51,15 @@ export const EmailForm = withCardStateProvider((props: EmailFormProps) => {
 
   return (
     <Wizard {...wizard.props}>
-      <FormContainer headerTitle={title}>
+      <FormContainer
+        headerTitle={title}
+        headerSubtitle={
+          preferEmailLinks
+            ? localizationKeys('userProfile.emailAddressPage.emailLink.formHint')
+            : localizationKeys('userProfile.emailAddressPage.emailCode.formHint')
+        }
+      >
         <Form.Root onSubmit={addEmail}>
-          <Text
-            localizationKey={
-              preferEmailLinks
-                ? localizationKeys('userProfile.emailAddressPage.emailLink.formHint')
-                : localizationKeys('userProfile.emailAddressPage.emailCode.formHint')
-            }
-            colorScheme='neutral'
-          />
           <Form.ControlRow elementId={emailField.id}>
             <Form.PlainInput
               {...emailField.props}