From 6fe069608cc71847e1562de896f915ab0c53631a Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 18 Jul 2023 15:04:07 +0200
Subject: [PATCH] Re-adjust tom-select to match admin v3 style

---
 app/webpacker/css/admin_v3/all.scss           |  2 +-
 .../css/admin_v3/components/tom_select.scss   | 56 +++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/components/tom_select.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index e7780274aa..7f93f602ad 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -125,7 +125,7 @@
 @import "v3_overrides"; // admin_v3
 
 @import "~tom-select/src/scss/tom-select.default";
-@import "../admin/components/tom_select";
+@import "components/tom_select"; // admin_v3
 
 @import "app/components/help_modal_component/help_modal_component";
 @import "app/components/confirm_modal_component/confirm_modal_component";
diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
new file mode 100644
index 0000000000..01135292b5
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -0,0 +1,56 @@
+.ts-wrapper.single,
+.ts-wrapper.multi {
+  min-height: 40px;
+
+  &.input-active {
+    .ts-control {
+      border-color: $lighter-grey;
+
+      input {
+        &::placeholder {
+          color: $light-grey;
+        }
+      }
+    }
+  }
+
+  .ts-control {
+    box-shadow: none;
+    border-color: $lighter-grey;
+    background-color: $lighter-grey;
+    background-image: none;
+    @include border-radius($border-radius);
+
+    input {
+      &::placeholder {
+        color: $near-black;
+      }
+    }
+  }
+
+  .ts-dropdown {
+    @include border-radius($border-radius);
+    border: none;
+    box-shadow: none;
+    color: $near-black;
+
+    .option {
+      &.selected {
+        border-left: 2px solid $orient;
+      }
+
+      &.active {
+        background-color: $lighter-grey;
+        color: $near-black;
+      }
+    }
+  }
+}
+
+.plugin-dropdown_input .dropdown-input {
+  border-color: $lighter-grey;
+
+  &:focus {
+    border-color: $orient;
+  }
+}