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 1/3] 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;

From 0b212d3d70ffe45ab00c14034748445a6f3165da Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 13 Nov 2023 11:45:50 +0100
Subject: [PATCH 2/3] fix FormSelect type error

---
 .../components/Form/Elements/FormSelect.vue   | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index bb5304c19edc..be8c2c026ee0 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type ComputedRef, onMounted, watch } from "vue";
+import { computed, type ComputedRef, onMounted, type PropType, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useMultiselect } from "@/composables/useMultiselect";
@@ -14,25 +14,33 @@ interface SelectOption {
     value: SelectValue;
 }
 
-const props = withDefaults(
-    defineProps<{
-        id?: string;
-        disabled?: boolean;
-        multiple?: boolean;
-        optional?: boolean;
-        options: Array<SelectOption>;
-        placeholder?: string;
-        value?: Array<SelectValue> | Record<string, unknown> | string | number;
-    }>(),
-    {
-        id: `form-select-${uid()}`,
-        disabled: false,
-        multiple: false,
-        optional: false,
-        placeholder: "Select value",
-        value: null,
-    }
-);
+const props = defineProps({
+    id: { type: String, default: `form-select-${uid()}` },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    optional: {
+        type: Boolean,
+        default: false,
+    },
+    options: {
+        type: Array as PropType<Array<SelectOption>>,
+        required: true,
+    },
+    placeholder: {
+        type: String,
+        default: "Select Value",
+    },
+    value: {
+        type: String as PropType<SelectValue | SelectValue[]>,
+        default: null,
+    },
+});
 
 const emit = defineEmits<{
     (e: "input", value: SelectValue | Array<SelectValue>): void;

From b1d6af471c1d3e4e1b6d3a2a78f6c1877fef2134 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 13 Nov 2023 11:53:55 +0100
Subject: [PATCH 3/3] push selected option to end

---
 .../components/Form/Elements/FormSelect.vue   | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index be8c2c026ee0..275d61a7c694 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -46,6 +46,30 @@ const emit = defineEmits<{
     (e: "input", value: SelectValue | Array<SelectValue>): void;
 }>();
 
+/**
+ * When there are more options than this, push selected options to the end
+ */
+const optionReorderThreshold = 8;
+
+const reorderedOptions = computed(() => {
+    if (props.options.length <= optionReorderThreshold) {
+        return props.options;
+    } else {
+        const selectedOptions: SelectOption[] = [];
+        const unselectedOptions: SelectOption[] = [];
+
+        props.options.forEach((option) => {
+            if (selectedValues.value.includes(option.value)) {
+                selectedOptions.push(option);
+            } else {
+                unselectedOptions.push(option);
+            }
+        });
+
+        return [...unselectedOptions, ...selectedOptions];
+    }
+});
+
 /**
  * Configure deselect label
  */
@@ -141,7 +165,7 @@ onMounted(() => {
         :deselect-label="deselectLabel"
         label="label"
         :multiple="multiple"
-        :options="props.options"
+        :options="reorderedOptions"
         :placeholder="placeholder"
         :selected-label="selectedLabel"
         select-label="Click to select"