Fix #16804 - Onboarding - Prevent odd behavior with clicks and show/hide password (#16878)

ui/components/ui/form-field/form-field.js

@@ -89,7 +89,6 @@ export default function FormField({
             <Box
               className="form-field__heading-detail"
               textAlign={TEXT_ALIGN.END}
-              marginBottom={3}
               marginRight={2}
               {...titleDetailWrapperProps}
             >

ui/pages/onboarding-flow/create-password/create-password.js

@@ -182,16 +182,18 @@ export default function CreatePassword({
             titleText={t('newPassword')}
             value={password}
             titleDetail={
-              <button
-                className="create-password__form--password-button"
-                type="button"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setShowPassword(!showPassword);
-                }}
-              >
-                {showPassword ? t('hide') : t('show')}
-              </button>
+              <Typography variant={TYPOGRAPHY.H7}>
+                <a
+                  href=""
+                  className="create-password__form--password-button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setShowPassword(!showPassword);
+                  }}
+                >
+                  {showPassword ? t('hide') : t('show')}
+                </a>
+              </Typography>
             }
           />
           <FormField

ui/pages/onboarding-flow/create-password/index.scss

@@ -28,8 +28,7 @@
     }
 
     &--password-button {
-      background-color: transparent;
-      color: var(--color-text-default);
+      color: var(--color-primary-default);
     }
 
     &--checkmark {