From 44e245751cafefb1be6addc14f635536e8a44c1c Mon Sep 17 00:00:00 2001
From: Nassim Tabchiche <n.tabchiche2@gmail.com>
Date: Fri, 29 Nov 2024 10:30:21 +0100
Subject: [PATCH] UX: Change Card container element to anchor

This makes the whole card clickable instead of only the text inside.
---
 frontend/src/lib/components/DataViz/Card.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/DataViz/Card.svelte b/frontend/src/lib/components/DataViz/Card.svelte
index ad465bb7c..277b88ed8 100644
--- a/frontend/src/lib/components/DataViz/Card.svelte
+++ b/frontend/src/lib/components/DataViz/Card.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	export let count: string = '0';
 	export let label: string;
-	export let href: string | undefined = undefined;
+	export let href: string = '#';
 	// export let help: string;
 	export let icon: string;
 	export let section: string;
@@ -12,7 +12,8 @@
 	}
 </script>
 
-<div
+<a
+	{href}
 	class="flex flex-col shadow-lg text-purple-800 p-2 h-28 bg-white hover:bg-violet-50 {cEmphasis}"
 >
 	<div class="text-xs">
@@ -20,10 +21,10 @@
 		<span>{section}</span>
 	</div>
 	<div class="mt-auto">
-		<a class="text-4xl font-bold text-left" {href}>{count}</a>
+		<p class="text-4xl font-bold text-left">{count}</p>
 		<div class="text-sm">{label}</div>
 	</div>
-</div>
+</a>
 
 <style>
 	@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');