From e642f0e14e6340842d2533c00934f1d6050934ba Mon Sep 17 00:00:00 2001
From: manuel-delvillar <68391066+manuel-delvillar@users.noreply.github.com>
Date: Thu, 9 Mar 2023 12:59:35 -0600
Subject: [PATCH 1/5] Fix styles filter drop down

---
 .../filter-drop-down/filter-dropdown.component.html       | 2 +-
 .../filter-drop-down/filter-dropdown.component.scss       | 4 ++--
 .../search-multi-select.component.html                    | 8 +++++++-
 .../search-multi-select.component.scss                    | 1 +
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/shared/filter-drop-down/filter-dropdown.component.html b/ui/src/app/shared/filter-drop-down/filter-dropdown.component.html
index ba72e1712..573f48ad2 100644
--- a/ui/src/app/shared/filter-drop-down/filter-dropdown.component.html
+++ b/ui/src/app/shared/filter-drop-down/filter-dropdown.component.html
@@ -6,7 +6,7 @@
     </svg>
     Filter
   </button>
-  <div class="dropdown-content" [ngClass]="{'dropdown-content-visible': showInputs}">
+  <div class="l-stickyBar dropdown-content" [ngClass]="{'dropdown-content-visible': showInputs}">
     <div class="close-container">
       <button (click)="showInputs = !showInputs">
         <svg class="l-iconTransition-x-icon t-icon">
diff --git a/ui/src/app/shared/filter-drop-down/filter-dropdown.component.scss b/ui/src/app/shared/filter-drop-down/filter-dropdown.component.scss
index eef1b958c..f006cf0cc 100644
--- a/ui/src/app/shared/filter-drop-down/filter-dropdown.component.scss
+++ b/ui/src/app/shared/filter-drop-down/filter-dropdown.component.scss
@@ -21,7 +21,7 @@
 /**drop down**/
 .drop-button {
   display: flex;
-  color: white;
+  color: var(--color-interactive2);
   font-size: 16px;
   border: none;
 }
@@ -35,7 +35,7 @@
   margin-top: -300px;
   margin-left: -200px;
   padding: 20px;
-  background: #333333;
+  background-color: var(--color-background200);
   display: none;
   position: absolute;
   min-width: 400px;
diff --git a/ui/src/app/shared/search-multi-select/search-multi-select.component.html b/ui/src/app/shared/search-multi-select/search-multi-select.component.html
index 87d0c85e9..f5d15897e 100644
--- a/ui/src/app/shared/search-multi-select/search-multi-select.component.html
+++ b/ui/src/app/shared/search-multi-select/search-multi-select.component.html
@@ -1,6 +1,12 @@
 <div class="expand-panel" (click)="showInput = !showInput">
   <strong><b>{{name | titlecase}}</b></strong>
-  <img [src]="'assets/images/' + (showInput ? 'up' : 'down') + '-arrow.svg'" width="15px" height="15px" style="color: white"/>
+  <svg *ngIf="showInput" fill="var(--color-interactive2)" height="14px" width="14px" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+       viewBox="0 0 330 330" xml:space="preserve">
+<path id="XMLID_224_" d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394
+	l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393
+	C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z"/>
+</svg>
+  <svg *ngIf="!showInput" width="15px" height="15px" viewBox="0 0 1024 1024" class="icon" xmlns="http://www.w3.org/2000/svg"><path d="M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z" fill="var(--color-interactive2)"/></svg>
 </div>
 <div class="m-field"  [ngClass]="{'visible': showInput}">
   <div class="m-field-x-input">
diff --git a/ui/src/app/shared/search-multi-select/search-multi-select.component.scss b/ui/src/app/shared/search-multi-select/search-multi-select.component.scss
index 0dd59777f..e20bc6d10 100644
--- a/ui/src/app/shared/search-multi-select/search-multi-select.component.scss
+++ b/ui/src/app/shared/search-multi-select/search-multi-select.component.scss
@@ -62,6 +62,7 @@ input::placeholder {
 }
 
 .result-container:nth-child(odd) {
+  color: white;
   background: #434647;
 }
 

From b6ad9145e6dca097c85e4f93a9314552fd4e42eb Mon Sep 17 00:00:00 2001
From: manuel-delvillar <68391066+manuel-delvillar@users.noreply.github.com>
Date: Thu, 9 Mar 2023 14:02:45 -0600
Subject: [PATCH 2/5] Fix styles filter chips

---
 ui/src/app/shared/filter-chips/filter-chips.component.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/src/app/shared/filter-chips/filter-chips.component.scss b/ui/src/app/shared/filter-chips/filter-chips.component.scss
index b1825be00..298259bc0 100644
--- a/ui/src/app/shared/filter-chips/filter-chips.component.scss
+++ b/ui/src/app/shared/filter-chips/filter-chips.component.scss
@@ -15,12 +15,13 @@
   position:absolute;
   margin-top:-25px;
   margin-left:10px;
-  color:white;
-  background: #1f1f1f;
+  color: var(--color-interactive2);
+  background: var(--color-background300);
   padding:2px 10px;
 }
 
 .chip {
+  color: white;
   width: fit-content;
   padding: 0 10px;
   margin: 5px 1px;
@@ -32,7 +33,7 @@
 
 .close-button {
   padding-left: 10px;
-  color: #888;
+  color: white;
   font-weight: bold;
   float: right;
   font-size: 20px;

From ddaf01cc7b13c0b0fb709c61361ebdab6045be95 Mon Sep 17 00:00:00 2001
From: manuel-delvillar <68391066+manuel-delvillar@users.noreply.github.com>
Date: Thu, 9 Mar 2023 16:21:40 -0600
Subject: [PATCH 3/5] Use assets instead of static svg

---
 .../search-multi-select.component.html           |  8 +-------
 .../search-multi-select.component.scss           | 16 ++++++++++++++++
 ui/src/assets/images/down-arrow.svg              |  6 +++---
 ui/src/assets/images/up-arrow.svg                |  7 ++-----
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/ui/src/app/shared/search-multi-select/search-multi-select.component.html b/ui/src/app/shared/search-multi-select/search-multi-select.component.html
index f5d15897e..a23976f19 100644
--- a/ui/src/app/shared/search-multi-select/search-multi-select.component.html
+++ b/ui/src/app/shared/search-multi-select/search-multi-select.component.html
@@ -1,12 +1,6 @@
 <div class="expand-panel" (click)="showInput = !showInput">
   <strong><b>{{name | titlecase}}</b></strong>
-  <svg *ngIf="showInput" fill="var(--color-interactive2)" height="14px" width="14px" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-       viewBox="0 0 330 330" xml:space="preserve">
-<path id="XMLID_224_" d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394
-	l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393
-	C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z"/>
-</svg>
-  <svg *ngIf="!showInput" width="15px" height="15px" viewBox="0 0 1024 1024" class="icon" xmlns="http://www.w3.org/2000/svg"><path d="M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z" fill="var(--color-interactive2)"/></svg>
+  <div [ngClass]="{'up-arrow': showInput, 'down-arrow': !showInput}"></div>
 </div>
 <div class="m-field"  [ngClass]="{'visible': showInput}">
   <div class="m-field-x-input">
diff --git a/ui/src/app/shared/search-multi-select/search-multi-select.component.scss b/ui/src/app/shared/search-multi-select/search-multi-select.component.scss
index e20bc6d10..cedc9de6f 100644
--- a/ui/src/app/shared/search-multi-select/search-multi-select.component.scss
+++ b/ui/src/app/shared/search-multi-select/search-multi-select.component.scss
@@ -82,3 +82,19 @@ hr {
 strong {
   font-size: 14px;
 }
+
+.down-arrow {
+  background-color: var(--color-interactive2);
+  width: 15px;
+  height: 15px;
+  -webkit-mask: url("/assets/images/down-arrow.svg") no-repeat center;
+  mask: url("/assets/images/down-arrow.svg") no-repeat center;
+}
+
+.up-arrow {
+  background-color: var(--color-interactive2);
+  width: 15px;
+  height: 15px;
+  -webkit-mask: url("/assets/images/up-arrow.svg") no-repeat center;
+  mask: url("/assets/images/up-arrow.svg") no-repeat center;
+}
diff --git a/ui/src/assets/images/down-arrow.svg b/ui/src/assets/images/down-arrow.svg
index 556856d2f..927471a7e 100644
--- a/ui/src/assets/images/down-arrow.svg
+++ b/ui/src/assets/images/down-arrow.svg
@@ -1,3 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="15px" height="15px" viewBox="0 0 1024 1024" class="icon"  version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z" fill="#fff" /></svg>
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+  <path d="M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z" fill="white"/>
+</svg>
diff --git a/ui/src/assets/images/up-arrow.svg b/ui/src/assets/images/up-arrow.svg
index 1b7236796..0cdd77d1c 100644
--- a/ui/src/assets/images/up-arrow.svg
+++ b/ui/src/assets/images/up-arrow.svg
@@ -1,8 +1,5 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#fff" height="15px" width="15px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-	 viewBox="0 0 330 330" xml:space="preserve">
-<path id="XMLID_224_" d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394
+<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 330">
+<path fill="white" id="XMLID_224_" d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394
 	l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393
 	C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z"/>
 </svg>

From 4e3b5a6376311bebda8511dc54c0644fcf33c5b9 Mon Sep 17 00:00:00 2001
From: manuel-delvillar <68391066+manuel-delvillar@users.noreply.github.com>
Date: Thu, 9 Mar 2023 17:17:58 -0600
Subject: [PATCH 4/5] Improve chips

---
 ui/src/app/shared/filter-chips/filter-chips.component.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/app/shared/filter-chips/filter-chips.component.scss b/ui/src/app/shared/filter-chips/filter-chips.component.scss
index 298259bc0..df989e724 100644
--- a/ui/src/app/shared/filter-chips/filter-chips.component.scss
+++ b/ui/src/app/shared/filter-chips/filter-chips.component.scss
@@ -21,19 +21,19 @@
 }
 
 .chip {
-  color: white;
+  color: var(--color-interactive2);
   width: fit-content;
   padding: 0 10px;
   margin: 5px 1px;
   height: fit-content;
   font-size: 12px;
   border-radius: 25px;
-  background-color: #333333;
+  background-color: var(--color-background200);
 }
 
 .close-button {
   padding-left: 10px;
-  color: white;
+  color: var(--color-interactive2);
   font-weight: bold;
   float: right;
   font-size: 20px;

From e1b66e4963259fb768b0575ef90fb4a97680bc86 Mon Sep 17 00:00:00 2001
From: manuel-delvillar <68391066+manuel-delvillar@users.noreply.github.com>
Date: Thu, 9 Mar 2023 17:25:36 -0600
Subject: [PATCH 5/5] Change color result multi select

---
 .../search-multi-select/search-multi-select.component.scss  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/app/shared/search-multi-select/search-multi-select.component.scss b/ui/src/app/shared/search-multi-select/search-multi-select.component.scss
index cedc9de6f..4c1232456 100644
--- a/ui/src/app/shared/search-multi-select/search-multi-select.component.scss
+++ b/ui/src/app/shared/search-multi-select/search-multi-select.component.scss
@@ -19,7 +19,7 @@ input[type=checkbox]:before {
   height: 15px;
   top: 0;
   left: 0;
-  background-color:#e9e9e9;
+  background-color: var(--color-text3);
 }
 
 input[type=checkbox]:checked:before {
@@ -62,8 +62,8 @@ input::placeholder {
 }
 
 .result-container:nth-child(odd) {
-  color: white;
-  background: #434647;
+  color: var(--color-interactive2);
+  background-color: var(--color-background100);
 }
 
 .m-field {