From 24748a5e412d54f83f25a96a6bdc8184f086553f Mon Sep 17 00:00:00 2001
From: andrej romanov <50377758+auumgn@users.noreply.github.com>
Date: Fri, 8 May 2026 17:46:16 +0300
Subject: [PATCH] PD-5568 2fa settings panel css tweaks

---
 .../settings-security-two-factor-auth.component.html   |  7 ++-----
 .../settings-security-two-factor-auth.component.scss   |  6 +-----
 ...-security-two-factor-auth.component.scss-theme.scss | 10 ++++++++++
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html
index e875eac03..0336426a9 100644
--- a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html
+++ b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html
@@ -13,15 +13,12 @@
   </app-alert-message>
   } @if (!twoFactorState) {
   <div class="two-factor-panel">
-    <p
-      class="two-factor-panel__copy two-factor-panel__copy--intro"
-      i18n="@@account.addExtraSecurity"
-    >
+    <p class="two-factor-panel__copy" i18n="@@account.addExtraSecurity">
       Add extra security to your ORCID account by enabling two-factor
       authentication (2FA).
     </p>
     <a
-      class="two-factor-panel__link"
+      class="two-factor-panel__link mb-6"
       href="https://support.orcid.org/hc/en-us/articles/360006971673"
       rel="noopener noreferrer"
       target="_blank"
diff --git a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss
index df1179b23..4498f340c 100644
--- a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss
+++ b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss
@@ -6,7 +6,7 @@
 .two-factor-panel {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 8px;
 }
 
 .two-factor-panel--enabled {
@@ -35,10 +35,6 @@
   margin: 0;
 }
 
-.two-factor-panel__copy--intro {
-  margin-top: var(--orcid-space-l, 32px);
-}
-
 .two-factor-panel__link {
   display: inline-flex;
   align-items: center;
diff --git a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss-theme.scss b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss-theme.scss
index 23841ac6f..a6df14378 100644
--- a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss-theme.scss
+++ b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss-theme.scss
@@ -15,6 +15,16 @@
   .on {
     color: map-get($foreground, 'brand-primary-darkest');
   }
+
+  .two-factor-panel__enable-button {
+    color: $orcid-light-primary-text !important;
+    background: $brand-secondary-dark !important;
+  }
+
+  .two-factor-panel__disable-button {
+    background-color: $state-warning-darkest !important;
+    color: white !important;
+  }
 }
 
 @include settings-security-two-factor-auth-theme($orcid-app-theme);