From b40fd429fb851347d91b90c4e9b0d419d29416e0 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 12 Dec 2022 08:36:02 -0600
Subject: [PATCH] Fix #16804 - Onboarding - Prevent odd behavior with clicks
 and show/hide password (#16878)

---
 ui/components/ui/form-field/form-field.js     |  1 -
 .../create-password/create-password.js        | 22 ++++++++++---------
 .../create-password/index.scss                |  3 +--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/ui/components/ui/form-field/form-field.js b/ui/components/ui/form-field/form-field.js
index 9cbd9137e..3ec78a460 100644
--- a/ui/components/ui/form-field/form-field.js
+++ b/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}
             >
diff --git a/ui/pages/onboarding-flow/create-password/create-password.js b/ui/pages/onboarding-flow/create-password/create-password.js
index c742c7d8a..b31858de1 100644
--- a/ui/pages/onboarding-flow/create-password/create-password.js
+++ b/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
diff --git a/ui/pages/onboarding-flow/create-password/index.scss b/ui/pages/onboarding-flow/create-password/index.scss
index c501c77b7..d62937b34 100644
--- a/ui/pages/onboarding-flow/create-password/index.scss
+++ b/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 {