From f29c1d57979efd1a297807d3e4c76dced4daea25 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 14 Dec 2023 13:28:16 +1100
Subject: [PATCH] Use chevron for dropdown icon

We should be able to use @extend .icon-chevron-down, but I couldn't get it to work. I'd like to have a better method for this, but we should upgrade our ancient FontAwesome before worrying about that.
---
 .../css/admin_v3/components/tom_select.scss    | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
index 675217e865..4d335c80c0 100644
--- a/app/webpacker/css/admin_v3/components/tom_select.scss
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -87,11 +87,19 @@
   }
 
   .ts-control {
-    padding-right: 0.5rem !important; // ts has a clever variable-based rule here, but it doesn't seem to work right.
+    padding: 0.5rem 0.75rem;
+    padding-right: 1rem !important; // ts has a clever variable-based rule here, but it doesn't seem to work right.
     overflow: hidden;
 
+    // Icon: Override TS icon with icon-chevron-down
+    &::after {
+      content: "\f078";
+      font-family: FontAwesome;
+      border: none;
+      top: 1em;
+    }
     &:not(.rtl)::after {
-      right: 0.5rem;
+      right: 1.5rem;
     }
 
     .item {
@@ -102,6 +110,12 @@
       text-wrap: nowrap;
     }
   }
+
+  &.dropdown-active .ts-control {
+    &::after {
+      content: "\f077"; // chevron-up
+    }
+  }
 }
 
 // 'no-input' mode, like a native select (hide text input).