From 4c0c7407c9d25d4496c627341e7d4910f000d344 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 10 Nov 2023 16:05:22 +0100
Subject: [PATCH] adjust multiselect style to use galaxy colors and spacing

---
 client/src/style/scss/multiselect.scss | 67 +++++++++++++++++++++++---
 1 file changed, 60 insertions(+), 7 deletions(-)

diff --git a/client/src/style/scss/multiselect.scss b/client/src/style/scss/multiselect.scss
index f5f86b4ba466..05b4b3961220 100644
--- a/client/src/style/scss/multiselect.scss
+++ b/client/src/style/scss/multiselect.scss
@@ -1,33 +1,86 @@
 .multiselect {
     font-weight: normal;
+
     .multiselect__content-wrapper {
-        background: darken($white, 2%);
         overflow-x: hidden;
     }
+
     .multiselect__input {
         background: transparent;
         padding-left: 0;
         padding-top: 2px;
-        margin-bottom: 10px;
-        font-size: 14px;
+        margin-bottom: 8px;
+        font-size: $font-size-base;
     }
+
     .multiselect__option {
+        padding: 0.5rem;
+        min-height: unset;
         white-space: normal;
         font-size: $font-size-base;
+
+        &::after {
+            line-height: unset;
+            font-size: $font-size-base;
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
     }
+
     .multiselect__option--highlight {
-        background-color: $brand-info;
+        background-color: $brand-primary;
         color: $white;
+
+        &::after {
+            background: unset;
+            font-weight: bold;
+        }
     }
+
     .multiselect__option--selected {
-        background: $brand-primary;
-        color: $brand-light;
+        background: $brand-secondary;
+        color: $brand-primary;
+
+        &::after {
+            color: darken($brand-secondary, 40%);
+        }
+
+        &.multiselect__option--highlight {
+            background: $brand-danger;
+
+            &::after {
+                background: unset;
+            }
+        }
+    }
+
+    .multiselect__placeholder {
+        margin-bottom: 8px;
     }
+
     .multiselect__tag {
-        min-height: 0;
+        min-height: unset;
         white-space: normal;
         word-break: break-all;
+        background: $brand-primary;
+        margin-right: 0.25rem;
+        margin-bottom: 0.1rem;
+
+        .multiselect__tag-icon {
+            color: $white;
+
+            &:hover,
+            &:focus {
+                background: $brand-info;
+            }
+
+            &::after {
+                color: inherit;
+            }
+        }
     }
+
     .multiselect__tags {
         background: transparent;
         border: $border-default;