From 398a0875fc4b8e8ac62a092a0874612d28deffc0 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Mon, 14 Nov 2022 11:24:13 +0800
Subject: [PATCH] style(console): sign-up and sign-in form field description
 margins (#2416)

---
 .../tabs/SignUpAndSignInTab/SignUpForm.tsx    | 45 +++++++++----------
 .../tabs/SignUpAndSignInTab/index.module.scss |  4 +-
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignUpForm.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignUpForm.tsx
index 2043a004f..ed7f29143 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignUpForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/SignUpForm.tsx
@@ -91,41 +91,40 @@ const SignUpForm = () => {
         />
       </FormField>
       {signUpIdentifier !== SignUpIdentifier.None && (
-        <FormField
-          title="sign_in_exp.sign_up_and_sign_in.sign_up.sign_up_authentication"
-          className={styles.signUpAuthentication}
-        >
+        <FormField title="sign_in_exp.sign_up_and_sign_in.sign_up.sign_up_authentication">
           <div className={styles.formFieldDescription}>
             {t('sign_in_exp.sign_up_and_sign_in.sign_up.authentication_description')}
           </div>
-          <Controller
-            name="signUp.password"
-            control={control}
-            render={({ field: { value, onChange } }) => (
-              <Checkbox
-                label={t('sign_in_exp.sign_up_and_sign_in.sign_up.set_a_password_option')}
-                disabled={signUpIdentifier === SignUpIdentifier.Username}
-                value={value ?? false}
-                disabledTooltip={t('sign_in_exp.sign_up_and_sign_in.tip.set_a_password')}
-                onChange={onChange}
-              />
-            )}
-          />
-          {signUpIdentifier !== SignUpIdentifier.Username && (
+          <div className={styles.selections}>
             <Controller
-              name="signUp.verify"
+              name="signUp.password"
               control={control}
               render={({ field: { value, onChange } }) => (
                 <Checkbox
-                  label={t('sign_in_exp.sign_up_and_sign_in.sign_up.verify_at_sign_up_option')}
+                  label={t('sign_in_exp.sign_up_and_sign_in.sign_up.set_a_password_option')}
+                  disabled={signUpIdentifier === SignUpIdentifier.Username}
                   value={value ?? false}
-                  disabled={requiredVerifySignUpIdentifiers.includes(signUpIdentifier)}
-                  disabledTooltip={t('sign_in_exp.sign_up_and_sign_in.tip.verify_at_sign_up')}
+                  disabledTooltip={t('sign_in_exp.sign_up_and_sign_in.tip.set_a_password')}
                   onChange={onChange}
                 />
               )}
             />
-          )}
+            {signUpIdentifier !== SignUpIdentifier.Username && (
+              <Controller
+                name="signUp.verify"
+                control={control}
+                render={({ field: { value, onChange } }) => (
+                  <Checkbox
+                    label={t('sign_in_exp.sign_up_and_sign_in.sign_up.verify_at_sign_up_option')}
+                    value={value ?? false}
+                    disabled={requiredVerifySignUpIdentifiers.includes(signUpIdentifier)}
+                    disabledTooltip={t('sign_in_exp.sign_up_and_sign_in.tip.verify_at_sign_up')}
+                    onChange={onChange}
+                  />
+                )}
+              />
+            )}
+          </div>
         </FormField>
       )}
     </>
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/index.module.scss b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/index.module.scss
index 31c0f9c5b..e4c4ba76b 100644
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/index.module.scss
@@ -13,7 +13,7 @@
 .formFieldDescription {
   font: var(--font-body-medium);
   color: var(--color-text-secondary);
-  margin-bottom: _.unit(2);
+  margin: _.unit(1) 0 _.unit(2);
 }
 
 .socialOnlyDescription {
@@ -21,7 +21,7 @@
   color: var(--color-text-secondary);
 }
 
-.signUpAuthentication {
+.selections {
   > :not(:first-child) {
     margin-top: _.unit(3);
   }