From 2bc383a096c9ad1b416eb3f350d2427f17f96b68 Mon Sep 17 00:00:00 2001
From: Ben Basten <45583362+ben-basten@users.noreply.github.com>
Date: Wed, 12 Jun 2024 17:23:47 -0400
Subject: [PATCH] wip: export selectedColor to prevent unexpected styling

---
 .../context-menu/button-context-menu.svelte                | 3 ++-
 .../shared-components/context-menu/menu-option.svelte      | 7 ++++++-
 .../context-menu/right-click-context-menu.svelte           | 3 ++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
index 5dc3698ec32931..0e144d87e94867 100644
--- a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
@@ -8,6 +8,7 @@
   import { listNavigation } from '$lib/actions/list-navigation';
   import { generateId } from '$lib/utils/generate-id';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import { selectedColor } from '$lib/components/shared-components/context-menu/menu-option.svelte';
 
   export let icon: string;
   export let title: string;
@@ -100,7 +101,7 @@
     use:listNavigation={{
       container: menuContainer,
       selectedId,
-      selectedClass: '!bg-gray-200',
+      selectedClass: `!${selectedColor}`,
       openDropdown,
       closeDropdown,
       selectionChanged: (node) => (selectedId = node?.id),
diff --git a/web/src/lib/components/shared-components/context-menu/menu-option.svelte b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
index 64e5e5b18a48f0..920f20122081cd 100644
--- a/web/src/lib/components/shared-components/context-menu/menu-option.svelte
+++ b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+  export const selectedColor = 'bg-gray-200';
+</script>
+
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import { generateId } from '$lib/utils/generate-id';
@@ -24,11 +28,12 @@
   };
 </script>
 
+export the name of the tailwind class for background color on hover
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <li
   {id}
   on:click={handleClick}
-  class="w-full bg-slate-100 p-4 text-left text-sm font-medium text-immich-fg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg cursor-pointer border-gray-200"
+  class="w-full bg-slate-100 p-4 text-left text-sm font-medium text-immich-fg hover:{selectedColor} focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg cursor-pointer border-gray-200"
   class:border-t-2={topBorder}
   role="menuitem"
 >
diff --git a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
index 35818e8b6a9e4c..06c7215e6de5ab 100644
--- a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
@@ -5,6 +5,7 @@
   import { listNavigation } from '$lib/actions/list-navigation';
   import { generateId } from '$lib/utils/generate-id';
   import { setMenuContext } from '$lib/components/shared-components/context-menu/menu.context';
+  import { selectedColor } from '$lib/components/shared-components/context-menu/menu-option.svelte';
 
   export let title: string;
   export let direction: 'left' | 'right' = 'right';
@@ -100,7 +101,7 @@
       use:listNavigation={{
         container: contextMenuElement,
         selectedId: selectedId,
-        selectedClass: '!bg-gray-200',
+        selectedClass: `!${selectedColor}`,
         closeDropdown: closeContextMenu,
         selectionChanged: (node) => (selectedId = node?.id),
       }}