add showHoveredColor prop in Accordion component

UNDP-Data · Jan 8, 2024 · a45a708 · a45a708
1 parent 2a4c6f5
commit a45a708
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte b/sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte
@@ -163,6 +163,7 @@
 	title={clean(layer.name)}
 	bind:isExpanded
 	isSelected={$editingLayerStore?.id === layer.id}
+	showHoveredColor={true}
 >
 	<div class="is-flex is-align-items-center" slot="buttons">
 		{#if accessLevel !== AccessLevel.PUBLIC}

diff --git a/sites/geohub/src/components/util/Accordion.svelte b/sites/geohub/src/components/util/Accordion.svelte
@@ -7,6 +7,7 @@
 	export let title: string;
 	export let isExpanded: boolean;
 	export let isSelected = false;
+	export let showHoveredColor = false;
 
 	const tippyTooltip = initTooltipTippy();
 
@@ -21,7 +22,13 @@
 </script>
 
 <div
-	class="accordion p-1 {isSelected ? 'selected' : `${isHovered ? 'border-primary' : 'border'}`}"
+	class="accordion p-1 {`${
+		showHoveredColor
+			? `${
+					isSelected ? 'has-background-danger-light' : `${isHovered ? 'border-primary' : 'border'}`
+				}`
+			: ''
+	}`}"
 	role="menuitem"
 	tabindex="-1"
 	on:mouseenter={() => {
@@ -93,10 +100,6 @@
 			}
 		}
 
-		&.selected {
-			background-color: hsl(347, 90%, 96%);
-		}
-
 		&.border {
 			border-bottom: 1px #d4d6d8 solid;
 		}