From 6cbc9ce159d270b4fefd6e178ae6c95a4bdd15a5 Mon Sep 17 00:00:00 2001
From: Mateusz <mateusz@ravendb.net>
Date: Tue, 12 Dec 2023 12:12:32 +0100
Subject: [PATCH] RavenDB-19951 2FA button styles

---
 .../App/views/manage/certificates.html        |  2 +-
 src/Raven.Studio/wwwroot/App/views/shell.html |  4 +--
 .../wwwroot/Content/css/basic-layout.less     |  4 +--
 .../Content/css/bootstrap/variables-body.less |  5 ++++
 .../Content/css/fonts/icomoon/logout.svg      |  4 +++
 .../wwwroot/Content/css/styles-common.less    | 29 +++++++++++++++++++
 6 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/Raven.Studio/wwwroot/Content/css/fonts/icomoon/logout.svg

diff --git a/src/Raven.Studio/wwwroot/App/views/manage/certificates.html b/src/Raven.Studio/wwwroot/App/views/manage/certificates.html
index 842a99ec899..b92d92a1e73 100644
--- 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
index 8d031c3a89d..e1a7d6f3ca0 100644
--- 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
index eca6f558278..123fd0f5bf1 100644
--- 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
index 63f0de2646f..da2b07811af 100644
--- 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
new file mode 100644
index 00000000000..8b4c5b02b7d
--- /dev/null
+++ b/src/Raven.Studio/wwwroot/Content/css/fonts/icomoon/logout.svg
@@ -0,0 +1,4 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M710.8 559.801H364.501V463.801H710.8L632.5 382.301L699.7 313.501L898 511.801L699.7 710.101L632.5 641.301L710.8 559.801Z" fill="black"/>
+<path d="M564 910.401V811.201L224.2 811.201L224.2 212.801L564 212.8V113.6L125 113.601L125 910.401L564 910.401Z" fill="black"/>
+</svg>
diff --git a/src/Raven.Studio/wwwroot/Content/css/styles-common.less b/src/Raven.Studio/wwwroot/Content/css/styles-common.less
index ebe548df135..ac7aa76644d 100644
--- 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";