RavenDB-19951 2FA button styles

ml054 · Dec 12, 2023 · 6cbc9ce · 6cbc9ce
1 parent e58b426
commit 6cbc9ce
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 5 deletions.
diff --git a/src/Raven.Studio/wwwroot/App/views/manage/certificates.html b/src/Raven.Studio/wwwroot/App/views/manage/certificates.html
@@ -226,7 +226,7 @@ <h3 class="no-margin" data-bind="text: Name || '<empty name>'"></h3>
                                     <div title="This is the client certificate currently used by the browser" class="label label-success"
                                          data-bind="visible: _.includes(Thumbprints, $root.clientCertificateThumbprint())">current browser certificate
                                     </div>
-                                    <div title="This is the certificate which requires two-factor authentication" class="label label-success"
+                                    <div title="This is the certificate which requires two-factor authentication" class="label label-2fa"
                                          data-bind="visible: HasTwoFactor"> 2FA
                                     </div>
                                 </a>

diff --git a/src/Raven.Studio/wwwroot/App/views/shell.html b/src/Raven.Studio/wwwroot/App/views/shell.html
@@ -331,8 +331,8 @@ <h3 data-bind="text: item.title"></h3>
                 </button>
             </div>
             <div class="footer-item" data-bind="visible: twoFactorSessionExpiration">
-                <a class="btn btn-warning btn-sm" title="Log out" data-bind="click: logout">
-                    Log out
+                <a class="btn btn-2fa btn-sm lh-1" title="End current 2FA session" data-bind="click: logout">
+                    <i class="icon-logout"></i> <span class="me-0">End session</span>
                 </a>
             </div>
             <div class="footer-item bg-info" data-bind="visible: $root.clusterManager.votingInProgress">

diff --git a/src/Raven.Studio/wwwroot/Content/css/basic-layout.less b/src/Raven.Studio/wwwroot/Content/css/basic-layout.less
@@ -576,8 +576,8 @@ body {
             align-items: center;
 
             i {
-                font-size: 22px !important;
-                top: -1px !important;
+                font-size: 18px !important;
+                top: 0 !important;
             }
         }
 

diff --git a/src/Raven.Studio/wwwroot/Content/css/bootstrap/variables-body.less b/src/Raven.Studio/wwwroot/Content/css/bootstrap/variables-body.less
@@ -164,6 +164,11 @@
 @btn-danger-border: lighten(@btn-danger-bg, 1%);
 @btn-danger-icon: @brand-danger-light;
 
+@btn-2fa-color: lighten(@btn-2fa-bg, 30%);
+@btn-2fa-bg: #5537c4;
+@btn-2fa-border: lighten(@btn-2fa-bg, 1%);
+@btn-2fa-icon: @btn-2fa-color;
+
 @btn-link-disabled-color: @gray-light;
 // Allows for customizing button radius independently from global border radius
 @btn-border-radius-base: @border-radius-base;

diff --git a/src/Raven.Studio/wwwroot/Content/css/fonts/icomoon/logout.svg b/src/Raven.Studio/wwwroot/Content/css/fonts/icomoon/logout.svg
diff --git a/src/Raven.Studio/wwwroot/Content/css/styles-common.less b/src/Raven.Studio/wwwroot/Content/css/styles-common.less
@@ -2195,6 +2195,35 @@ ul.properties {
     gap: 0.5rem;
 }
 
+.lh-1 {
+    line-height: 1;
+}
+
+.btn-2fa {
+    background-color: @btn-2fa-bg;
+    border-color: @btn-2fa-border;
+    color: @btn-2fa-color !important;
+    i {
+        color: @btn-2fa-icon;
+    }
+    &:hover {
+        filter: brightness(1.2) saturate(1.1);
+    }
+    &:focus, &:active {
+        background-color: @btn-2fa-bg;
+        filter: brightness(1.2) saturate(1.1);
+    }
+}
+
+.label-2fa {
+    background-color: @btn-2fa-bg;
+    color: @btn-2fa-color !important;
+}
+
+.me-0 {
+    margin-right: 0 !important;
+}
+
 @import "prism.less";
 @import "ace.less";
 @import "leaflet.less";