Increase MFA unpairing message font size (#489)

TACC · Nov 25, 2024 · 3d35537 · 3d35537
1 parent 3514f13
commit 3d35537
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
@@ -126,6 +126,10 @@ label.qr-code-alt-label {
     .mfa-message {
         width: max-content;
     }
+
+    .mfa-unpair-message {
+        font-size: var(--global-font-size--medium)
+    }
 
     /* HACK: Position .mfa-message at the bottom and "outside" of the panels */
     .pairing-container *:not(:only-child) .mfa-message {

diff --git a/libs/tup-components/src/mfa/MfaUnpairingView.tsx b/libs/tup-components/src/mfa/MfaUnpairingView.tsx
@@ -111,7 +111,9 @@ const MfaUnpairingView: React.FC = () => {
           </form>
 
           {!sendChallengeSuccess && !unpairCode && (
-            <p className={styles['mfa-message']}>
+            <p
+              className={`${styles['mfa-message']} ${styles['mfa-unpair-message']}`}
+            >
               Alternatively,{' '}
               <Button type="link" onClick={() => unpairWithEmail(null)}>
                 unpair via email