From 2960614fa4703cb47c61943b2b6adb8bd6f009c8 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Tue, 10 Sep 2024 18:31:42 +0200
Subject: [PATCH] Update inspirations/Selector component: add checkmark,
 improve hover, selected and focus styles

---
 src/components/inspirations/Selector.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/inspirations/Selector.vue b/src/components/inspirations/Selector.vue
index bdf8d16..58c0bb8 100644
--- a/src/components/inspirations/Selector.vue
+++ b/src/components/inspirations/Selector.vue
@@ -16,6 +16,7 @@
       optionValue="value"
       class="font-serif"
       data-icon="chevron-single-down"
+      checkmark
     />
   </div>
 </template>
@@ -59,15 +60,18 @@ const inspirations = ref([
   background-position: center;
 }
 
-#inspirations-select,
+[role="combobox"],
 #inspirations-select_list {
   border: 1px solid var(--color-grey-200);
 }
-#inspirations-select:hover {
-  border-color: var(--color-grey-300);
+[role="combobox"]:hover {
+  outline: 1px solid var(--color-grey-400);
+  border-color: var(--color-background);
 }
 [role="combobox"][aria-expanded="true"] {
   outline: 2px solid var(--color-focus-ring);
+  outline-offset: -2px;
+  border-color: transparent;
 }
 #inspirations-select,
 [role="combobox"] {
@@ -78,6 +82,7 @@ const inspirations = ref([
   cursor: pointer;
 }
 
+
 /* Icon */
 #inspirations-select svg {
   display: none; /* Hide default component svg */
@@ -138,4 +143,12 @@ const inspirations = ref([
 #inspirations-select_list > [data-p-focused="true"] {
   outline: 2px solid var(--color-focus-ring);
 }
+/* Check */
+#inspirations-select_list > * > svg {
+  position: absolute;
+  left: .875rem;
+  width: 1rem;
+  height: 1rem;
+  color: var(--color-grey-700);
+}
 </style>