From c8a6d109ce38c8dce06f1dbda1ca44f0ef5e599f Mon Sep 17 00:00:00 2001
From: Nariman Jelveh <n.jelveh@gmail.com>
Date: Fri, 3 May 2024 17:30:20 -0700
Subject: [PATCH] Add icon for Security tab and warning/success styling for 2fa
 card

---
 src/UI/Settings/UITabSecurity.js |  3 +--
 src/css/style.css                | 11 +++++++++++
 src/icons/shield.svg             |  3 +++
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 src/icons/shield.svg

diff --git a/src/UI/Settings/UITabSecurity.js b/src/UI/Settings/UITabSecurity.js
index a4191782e..5b7e33959 100644
--- a/src/UI/Settings/UITabSecurity.js
+++ b/src/UI/Settings/UITabSecurity.js
@@ -28,7 +28,7 @@ export default {
 
         // configure 2FA
         if(!user.is_temp){
-            h += `<div class="settings-card">`;
+            h += `<div class="settings-card ${user.otp ? 'settings-card-success' : 'settings-card-warning'}">`;
                 h += `<div>`;
                     h += `<strong style="display:block;">${i18n('two_factor')}</strong>`;
                     h += `<span class="user-otp-state" style="display:block; margin-top:5px;">${
@@ -42,7 +42,6 @@ export default {
             h += `</div>`;
         }
 
-
         return h;
     },
     init: ($el_window) => {
diff --git a/src/css/style.css b/src/css/style.css
index 43ec51f2e..929767cd6 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -3723,6 +3723,17 @@ fieldset[name=number-code] {
     background: #ffecec;
     color: rgb(215 2 2);
 }
+.settings-card-success{
+    border-color: #08bf4e;
+    background: #e6ffed;
+    color: #03933a;
+}
+
+.settings-card-warning {
+    border-color: #f0a500;
+    background: #fff7e6;
+    color: #c98900;
+}
 
 .error-message {
     display: none;
diff --git a/src/icons/shield.svg b/src/icons/shield.svg
new file mode 100644
index 000000000..4908f5d82
--- /dev/null
+++ b/src/icons/shield.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shield-shaded" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 14.933a1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56"/>
+</svg>
\ No newline at end of file