From 2e06afcb7dfbd5ec127d835f8a3247f5dca9b682 Mon Sep 17 00:00:00 2001
From: CarleyDiaz-Bitwarden
 <103955722+CarleyDiaz-Bitwarden@users.noreply.github.com>
Date: Mon, 2 May 2022 15:20:00 -0400
Subject: [PATCH] Making suggested changes and accounting for the NORD theme

---
 src/images/close-button.svg |   1 +
 src/images/close-white.png  | Bin 311 -> 0 bytes
 src/scss/header.scss        |  23 ++++++++++++-----------
 src/scss/variables.scss     |   3 +++
 4 files changed, 16 insertions(+), 11 deletions(-)
 create mode 100644 src/images/close-button.svg
 delete mode 100644 src/images/close-white.png

diff --git a/src/images/close-button.svg b/src/images/close-button.svg
new file mode 100644
index 00000000..8aea3464
--- /dev/null
+++ b/src/images/close-button.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 512 512"><path d="M443.6 387.1 312.4 255.4l131.5-130c5.4-5.4 5.4-14.2 0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4-3.7 0-7.2 1.5-9.8 4L256 197.8 124.9 68.3c-2.6-2.6-6.1-4-9.8-4-3.7 0-7.2 1.5-9.8 4L68 105.9c-5.4 5.4-5.4 14.2 0 19.6l131.5 130L68.4 387.1c-2.6 2.6-4.1 6.1-4.1 9.8 0 3.7 1.4 7.2 4.1 9.8l37.4 37.6c2.7 2.7 6.2 4.1 9.8 4.1 3.5 0 7.1-1.3 9.8-4.1L256 313.1l130.7 131.1c2.7 2.7 6.2 4.1 9.8 4.1 3.5 0 7.1-1.3 9.8-4.1l37.4-37.6c2.6-2.6 4.1-6.1 4.1-9.8-.1-3.6-1.6-7.1-4.2-9.7z" fill="#ffffff" class="fill-000000"></path></svg>
\ No newline at end of file
diff --git a/src/images/close-white.png b/src/images/close-white.png
deleted file mode 100644
index 07c0f4e38eaf60221168ec8fe46fe60718d259f0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 311
zcmeAS@N?(olHy`uVBq!ia0vp^{2<K11|+SoP4xm&jKx9jP7LeL$-D$|Tv8)E(|mmy
zw18|52FCVG1{RPKAeI7R1_tH@j10^`nh_+nfC(<kzknIR1}S7WyUhut7J9lkhG>W$
zo%EWs*+HNs*TuW@d=<-E&4hSQk1d^_XCHP>oc<@kN$gm3dU}bC{^@^liY+pC9G|x~
z=5Mb|e8!`;V3uR4$P2lehAgXdN&Gh%BtxU5c_X|h^l<N;t;2bl`5p)R2PUn_C%g-s
ze{_8M`)SGA-W$pS-*)SlEnaRcbE!E0SVU9){WtE%OX{{8#{WA1vSn+Uvck3$tHy6F
cm2LBjwEK(Aj6X9Te*<!~r>mdKI;Vst008J>9RL6T

diff --git a/src/scss/header.scss b/src/scss/header.scss
index a5adab1b..879fa60b 100644
--- a/src/scss/header.scss
+++ b/src/scss/header.scss
@@ -12,19 +12,20 @@
   @include themify($themes) {
     background-color: themed("headerBackgroundColor");
     border-bottom-color: themed("headerBorderColor");
-  }
 
-  app-search {
-    grid-column-start: 2;
-    width: 100%;
+    app-search {
+      grid-column-start: 2;
+      width: 100%;
 
-    [type="search"]::-webkit-search-cancel-button {
-      -webkit-appearance: none;
-      appearance: none;
-      height: 15px;
-      width: 15px;
-      background-repeat: no-repeat;
-      background-image: url("../images/close-white.png");
+      [type="search"]::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+        appearance: none;
+        height: 15px;
+        width: 15px;
+        background-repeat: no-repeat;
+        background-image: url("../images/close-button.svg");
+        filter: brightness(themed("svgButtonBrightness"));
+      }
     }
   }
 
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 8e95667c..8a7a1c6a 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -93,6 +93,7 @@ $themes: (
     accountSwitcherBackgroundColor: $background-color,
     accountSwitcherTextColor: #ffffff,
     svgSuffix: "-light.svg",
+    svgButtonBrightness: 100,
   ),
   dark: (
     textColor: #ffffff,
@@ -146,6 +147,7 @@ $themes: (
     accountSwitcherBackgroundColor: #2f2f2f,
     accountSwitcherTextColor: #ffffff,
     svgSuffix: "-dark.svg",
+    svgButtonBrightness: 100,
   ),
   nord: (
     textColor: $nord5,
@@ -199,6 +201,7 @@ $themes: (
     accountSwitcherBackgroundColor: $nord0,
     accountSwitcherTextColor: $nord5,
     svgSuffix: "-dark.svg",
+    svgButtonBrightness: 0.5,
   ),
 );