From b2a3f2fbdf386d12a834f7e063ea732fd8f3edb6 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Thu, 10 Nov 2022 16:28:56 +0800
Subject: [PATCH] style(ui): update text link styling

update text link styling
---
 packages/ui/src/components/TextLink/index.module.scss    | 6 ++----
 .../src/containers/PasscodeValidation/index.module.scss  | 9 +++++++--
 packages/ui/src/containers/PasscodeValidation/index.tsx  | 3 ++-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/TextLink/index.module.scss b/packages/ui/src/components/TextLink/index.module.scss
index 7dfa46fba..1d87c12ad 100644
--- a/packages/ui/src/components/TextLink/index.module.scss
+++ b/packages/ui/src/components/TextLink/index.module.scss
@@ -9,11 +9,9 @@
     color: var(--color-brand-default);
     text-decoration: none;
     font: var(--font-label-2);
-    border-radius: _.unit(1);
-    padding: _.unit(1) _.unit(0.5);
 
     &:active {
-      background: var(--color-overlay-brand-pressed);
+      color: var(--color-brand-hover);
     }
   }
 
@@ -27,7 +25,7 @@
 :global(body.desktop) {
   .link {
     &.primary:hover {
-      background: var(--color-overlay-brand-hover);
+      color: var(--color-brand-hover);
     }
 
     &.primary:focus-visible {
diff --git a/packages/ui/src/containers/PasscodeValidation/index.module.scss b/packages/ui/src/containers/PasscodeValidation/index.module.scss
index 03b215dc2..3e3712f10 100644
--- a/packages/ui/src/containers/PasscodeValidation/index.module.scss
+++ b/packages/ui/src/containers/PasscodeValidation/index.module.scss
@@ -23,11 +23,16 @@
     }
   }
 
-  .link {
-    margin-top: _.unit(3);
+  .message,
+  .link,
+  .switch {
     width: auto;
     align-self: start;
   }
+
+  .switch {
+    margin-top: _.unit(3);
+  }
 }
 
 :global(body.mobile) {
diff --git a/packages/ui/src/containers/PasscodeValidation/index.tsx b/packages/ui/src/containers/PasscodeValidation/index.tsx
index 3a61b3f15..1be45df0f 100644
--- a/packages/ui/src/containers/PasscodeValidation/index.tsx
+++ b/packages/ui/src/containers/PasscodeValidation/index.tsx
@@ -59,6 +59,7 @@ const PasscodeValidation = ({ type, method, className, hasPasswordButton, target
         </div>
       ) : (
         <TextLink
+          className={styles.link}
           text="description.resend_passcode"
           onClick={() => {
             clearErrorMessage();
@@ -67,7 +68,7 @@ const PasscodeValidation = ({ type, method, className, hasPasswordButton, target
         />
       )}
       {type === UserFlow.signIn && hasPasswordButton && (
-        <PasswordSignInLink method={method} target={target} className={styles.link} />
+        <PasswordSignInLink method={method} target={target} className={styles.switch} />
       )}
     </form>
   );