PD-5568 2fa settings panel css tweaks (#2834)

Co-authored-by: andrej romanov <50377758+auumgn@users.noreply.github.com>
Co-authored-by: Angel Montenegro <a.montenegro@orcid.org>

Author: aromanovv

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"

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;

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);