From 31c7b31e65e5d7b256647dbad4b4ade2724e0d93 Mon Sep 17 00:00:00 2001
From: PhatPhuckDave <david.majdandzic@hotmail.com>
Date: Fri, 8 Nov 2024 10:21:17 +0100
Subject: [PATCH] Make it not look like such dogshit

---
 .../Aggregated/AggregatedFoodTable.svelte     | 100 +++++++++++++-----
 .../components/Energy/EmptyFoodComp.svelte    |  14 +--
 .../lib/components/Energy/EnergyToday.svelte  |   5 +-
 .../components/Energy/FoodSearchEntry.svelte  |  16 ++-
 .../lib/components/Energy/FoodTable.svelte    |  23 ++--
 frontend/src/lib/components/Header.svelte     |  36 +++----
 .../lib/components/RefreshComponent.svelte    |   2 +-
 .../Aggregated/AggregatedWeightTable.svelte   |  98 ++++++++++++-----
 .../lib/components/Weight/WeightTable.svelte  |  18 ++--
 9 files changed, 194 insertions(+), 118 deletions(-)

diff --git a/frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte b/frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte
index 90b566d..f8bc5f7 100644
--- a/frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte
+++ b/frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte
@@ -24,17 +24,18 @@
 	let reversedItems = items.slice().reverse();
 
 	const defaultOptions = {
-		backgroundColor: "rgba(225, 204,230, .3)",
-		borderColor: "rgb(205, 130, 158)",
-		pointBorderColor: "rgb(205, 130, 158)",
+		backgroundColor: "rgba(59, 130, 246, 0.1)",
+		borderColor: "rgb(59, 130, 246)",
+		pointBorderColor: "rgb(59, 130, 246)",
 		pointBackgroundColor: "rgb(255, 255, 255)",
-		pointBorderWidth: 10,
-		pointHoverRadius: 5,
-		pointHoverBackgroundColor: "rgb(0, 157, 123)",
-		pointHoverBorderColor: "rgba(220, 220, 220, 1)",
+		pointBorderWidth: 2,
+		pointHoverRadius: 6,
+		pointHoverBackgroundColor: "rgb(59, 130, 246)",
+		pointHoverBorderColor: "rgb(255, 255, 255)",
 		pointHoverBorderWidth: 2,
-		pointRadius: 1,
+		pointRadius: 3,
 		pointHitRadius: 20,
+		tension: 0.4,
 	};
 	const data: ChartData<"line", (number | Point)[]> = {
 		labels: reversedItems.map((f) => f.period),
@@ -87,25 +88,70 @@
 </script>
 
 <template>
-	<Line {data} class="max-h-[50vh] h-[50vh]" />
-	<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
-		<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
-					<tr>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Period </th>
-						<th class="px-6 py-3" scope="col"> Amount </th>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col"> AvgPer100 </th>
-						<th class="px-6 py-3" scope="col"> Energy </th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each items as f}
-						<AggregatedFoodComp item={f} />
-					{/each}
-				</tbody>
-			</table>
+	<div class="flex flex-col gap-6 p-6 bg-gray-900 min-h-screen">
+		<div class="bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
+			<Line {data} 
+				options={{
+					responsive: true,
+					maintainAspectRatio: false,
+					plugins: {
+						legend: {
+							position: 'top',
+							labels: {
+								padding: 20,
+								color: 'rgb(229, 231, 235)',
+								font: {
+									size: 12,
+									family: "'Nunito', sans-serif"
+								}
+							}
+						}
+					},
+					scales: {
+						y: {
+							grid: {
+								color: 'rgba(75, 85, 99, 0.2)'
+							},
+							ticks: {
+								color: 'rgb(229, 231, 235)',
+								font: {
+									family: "'Nunito', sans-serif"
+								}
+							}
+						},
+						x: {
+							grid: {
+								color: 'rgba(75, 85, 99, 0.2)'
+							},
+							ticks: {
+								color: 'rgb(229, 231, 235)',
+								font: {
+									family: "'Nunito', sans-serif"
+								}
+							}
+						}
+					}
+				}}
+				class="max-h-[50vh] h-[50vh]" />
+		</div>
+		<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
+			<div class="relative overflow-x-auto shadow-md rounded-lg">
+				<table class="w-full text-sm text-left text-gray-400">
+					<thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
+						<tr>
+							<th class="px-6 py-4 font-semibold" scope="col">Period</th>
+							<th class="px-6 py-4 font-semibold" scope="col">Amount</th>
+							<th class="px-6 py-4 font-semibold" scope="col">AvgPer100</th>
+							<th class="px-6 py-4 font-semibold" scope="col">Energy</th>
+						</tr>
+					</thead>
+					<tbody class="divide-y divide-gray-700">
+						{#each items as f}
+							<AggregatedFoodComp item={f} />
+						{/each}
+					</tbody>
+				</table>
+			</div>
 		</div>
-		<div></div>
 	</div>
 </template>
diff --git a/frontend/src/lib/components/Energy/EmptyFoodComp.svelte b/frontend/src/lib/components/Energy/EmptyFoodComp.svelte
index 038d647..b3320f2 100644
--- a/frontend/src/lib/components/Energy/EmptyFoodComp.svelte
+++ b/frontend/src/lib/components/Energy/EmptyFoodComp.svelte
@@ -151,17 +151,13 @@
 <svelte:window on:keydown={navigateList} />
 
 <template>
-	<tr class="border-b border-gray-200 dark:border-gray-700 text-lg font-bold relative">
-		<th
-			class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
-			scope="row"
-		></th>
-		<!-- svelte-ignore a11y-autofocus -->
+	<tr class="border-b border-gray-700 text-lg font-medium hover:bg-gray-800/50 transition-colors">
+		<th class="px-6 py-4 font-medium text-gray-200 whitespace-nowrap" scope="row" />
 		<td
 			bind:innerText={name}
-			class:border-[3px]={!name}
-			class:border-red-600={!name}
-			class="px-6 py-4 overflow-hidden"
+			class="px-6 py-4 overflow-hidden focus:outline-none focus:ring-2 focus:ring-blue-500 rounded transition-all"
+			class:ring-2={!name}
+			class:ring-red-500={!name}
 			contenteditable="true"
 			autofocus
 			on:keydown={update}
diff --git a/frontend/src/lib/components/Energy/EnergyToday.svelte b/frontend/src/lib/components/Energy/EnergyToday.svelte
index 4f4f684..51393fc 100644
--- a/frontend/src/lib/components/Energy/EnergyToday.svelte
+++ b/frontend/src/lib/components/Energy/EnergyToday.svelte
@@ -57,5 +57,8 @@
 </script>
 
 <template>
-	<div class="px-4 text-bold text-3xl" style="color: {color}">{remainingToday}</div>
+	<div class="px-6 py-3 text-3xl font-bold rounded-lg bg-gray-800/50 shadow-lg border border-gray-700" style="color: {color}">
+		<span class="mr-2">{remainingToday}</span>
+		<span class="text-lg text-gray-400">kcal remaining</span>
+	</div>
 </template>
diff --git a/frontend/src/lib/components/Energy/FoodSearchEntry.svelte b/frontend/src/lib/components/Energy/FoodSearchEntry.svelte
index a6b8836..d68dc07 100644
--- a/frontend/src/lib/components/Energy/FoodSearchEntry.svelte
+++ b/frontend/src/lib/components/Energy/FoodSearchEntry.svelte
@@ -1,15 +1,13 @@
-<script>
-	// This doesn't update when navigating with arrows keys...
-	// Fucking svelte and reactivity again, here we fucking go
-	export let itemLabel;
-	export let highlighted;
+<script lang="ts">
+	export let itemLabel: string;
+	export let highlighted: boolean;
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <li
-	class="list-none border-b border-gray-800 z-50 px-2 py-2 cursor-pointer bg-[#1b2636] hover:bg-[#81921f] hover:text-white active:bg-DodgerBlue active:text-white text-lg"
-	class:bg-DodgerBlue={highlighted}
+	class="list-none px-4 py-3 cursor-pointer bg-gray-800 text-gray-200 text-base border-b border-gray-700 transition-colors"
+	class:bg-blue-600={highlighted}
 	class:text-white={highlighted}
-	on:click>
+	on:click
+>
 	{itemLabel}
 </li>
diff --git a/frontend/src/lib/components/Energy/FoodTable.svelte b/frontend/src/lib/components/Energy/FoodTable.svelte
index 600ce2d..73dacc6 100644
--- a/frontend/src/lib/components/Energy/FoodTable.svelte
+++ b/frontend/src/lib/components/Energy/FoodTable.svelte
@@ -59,20 +59,20 @@
 </script>
 
 <template>
-	<div class="relative flex flex-col flex-grow h-[93vh] select-none" data-vaul-drawer-wrapper id="page">
-		<div class="relative overflow-auto h-full shadow-md sm:rounded-lg">
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
+	<div class="relative flex flex-col flex-grow h-[93vh] select-none bg-gray-900" data-vaul-drawer-wrapper id="page">
+		<div class="relative overflow-auto h-full shadow-md rounded-lg">
+			<table class="w-full text-sm text-left text-gray-400">
+				<thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
 					<tr>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Date </th>
-						<th class="px-6 py-3 w-3/12" scope="col"> Food </th>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-4/12" scope="col"> Description </th>
-						<th class="px-6 py-3 w-1/12" scope="col"> Amount </th>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-1/12" scope="col"> Cal Per 100 </th>
-						<th class="px-6 py-3 w-1/12" scope="col"> Energy </th>
+						<th class="px-6 py-4 font-semibold w-2/12" scope="col">Date</th>
+						<th class="px-6 py-4 font-semibold" scope="col">Food</th>
+						<th class="px-6 py-4 font-semibold" scope="col">Description</th>
+						<th class="px-6 py-4 font-semibold" scope="col">Amount</th>
+						<th class="px-6 py-4 font-semibold" scope="col">Cal Per 100</th>
+						<th class="px-6 py-4 font-semibold" scope="col">Energy</th>
 					</tr>
 				</thead>
-				<tbody>
+				<tbody class="divide-y divide-gray-700">
 					<EmptyFoodComp />
 					{#each items as f}
 						<FoodComp
@@ -85,6 +85,5 @@
 				</tbody>
 			</table>
 		</div>
-		<div></div>
 	</div>
 </template>
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
index 353eb3e..05c60cd 100644
--- a/frontend/src/lib/components/Header.svelte
+++ b/frontend/src/lib/components/Header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { link, location } from "svelte-spa-router";
-	import { faGear} from "@fortawesome/free-solid-svg-icons";
+	import { faGear } from "@fortawesome/free-solid-svg-icons";
 	import Fa from "svelte-fa";
 	import Settings from "./Settings/Settings.svelte";
 	import EnergyToday from "./Energy/EnergyToday.svelte";
@@ -49,48 +49,40 @@
 </script>
 
 <header
-	class="flex h-22 items-center justify-center bg-base-100 shadow-lg sticky top-0 z-50 border-b
-   border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+	class="flex h-24 items-center justify-between bg-gray-900 shadow-lg sticky top-0 z-50 border-b border-gray-700/40 backdrop-blur supports-[backdrop-filter]:bg-gray-900/60 px-6"
 >
-	<div>
-		<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
+	<div class="flex flex-col gap-2">
+		<nav class="flex space-x-6 text-2xl font-bold select-none">
 			<a
 				use:link
-				class={"/" == $location
-					? "transition-colors hover:text-foreground/80"
-					: "transition-colors hover:text-foreground/80 text-foreground/60"}
+				class="transition-colors hover:text-gray-200 {$location === '/' ? 'text-white' : 'text-gray-400'}"
 				href="/"
-				on:click={(e) => (selected = "Energy")}>Energy</a
+				on:click={() => (selected = "Energy")}>Energy</a
 			>
 			<a
 				use:link
-				class={"/Weight" == $location
-					? "transition-colors hover:text-foreground/80"
-					: "transition-colors hover:text-foreground/80 text-foreground/60"}
+				class="transition-colors hover:text-gray-200 {$location === '/Weight' ? 'text-white' : 'text-gray-400'}"
 				href="/Weight"
-				on:click={(e) => (selected = "Weight")}>Weight</a
+				on:click={() => (selected = "Weight")}>Weight</a
 			>
 		</nav>
-		<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
+		<nav class="flex space-x-6 text-xl font-medium select-none">
 			{#each sublinks as { label, href }}
 				<a
 					use:link
 					{href}
-					class={href == $location
-						? "transition-colors hover:text-foreground/80"
-						: "transition-colors hover:text-foreground/80 text-foreground/60"}>{label}</a
+					class="transition-colors hover:text-gray-200 {href === $location ? 'text-white' : 'text-gray-400'}"
+					>{label}</a
 				>
 			{/each}
 		</nav>
 	</div>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div class="absolute right-0 pt-4 pb-4 pr-8 pl-8 cursor-pointer" on:click={() => (showModal = true)}>
-		<button>
+	<div class="flex items-center gap-6">
+		<EnergyToday />
+		<button class="p-3 hover:bg-gray-800 rounded-lg transition-colors" on:click={() => (showModal = true)}>
 			<Fa icon={faGear} scale={2} />
 		</button>
 	</div>
-	<RefreshComponent />
-	<EnergyToday />
 </header>
 
 <Settings bind:showModal />
diff --git a/frontend/src/lib/components/RefreshComponent.svelte b/frontend/src/lib/components/RefreshComponent.svelte
index 8266448..b1de8f2 100644
--- a/frontend/src/lib/components/RefreshComponent.svelte
+++ b/frontend/src/lib/components/RefreshComponent.svelte
@@ -35,7 +35,7 @@
 <template>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div class="absolute right-20 pt-4 pb-4 pr-8 pl-8 cursor-pointer" on:click={refreshStores}>
-		<button>
+		<button class="p-3 hover:bg-gray-800 rounded-lg transition-colors">
 			<Fa icon={faRefresh} scale={2} />
 		</button>
 	</div>
diff --git a/frontend/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte b/frontend/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte
index 65881ff..820ec9c 100644
--- a/frontend/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte
+++ b/frontend/src/lib/components/Weight/Aggregated/AggregatedWeightTable.svelte
@@ -21,17 +21,18 @@
 	let reversedItems = items.slice().reverse();
 
 	const defaultOptions = {
-		backgroundColor: "rgba(225, 204,230, .3)",
-		borderColor: "rgb(205, 130, 158)",
-		pointBorderColor: "rgb(205, 130, 158)",
+		backgroundColor: "rgba(59, 130, 246, 0.1)",
+		borderColor: "rgb(59, 130, 246)",
+		pointBorderColor: "rgb(59, 130, 246)",
 		pointBackgroundColor: "rgb(255, 255, 255)",
-		pointBorderWidth: 10,
-		pointHoverRadius: 5,
-		pointHoverBackgroundColor: "rgb(0, 157, 123)",
-		pointHoverBorderColor: "rgba(220, 220, 220, 1)",
+		pointBorderWidth: 2,
+		pointHoverRadius: 6,
+		pointHoverBackgroundColor: "rgb(59, 130, 246)",
+		pointHoverBorderColor: "rgb(255, 255, 255)",
 		pointHoverBorderWidth: 2,
-		pointRadius: 1,
-		pointHitRadius: 10,
+		pointRadius: 3,
+		pointHitRadius: 20,
+		tension: 0.4,
 	};
 	const data: ChartData<"line", (number | Point)[]> = {
 		labels: reversedItems.map((f) => f.period),
@@ -56,23 +57,68 @@
 </script>
 
 <template>
-	<Line {data} class="max-h-[50vh] h-[50vh]" />
-	<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
-		<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
-					<tr>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Period </th>
-						<th class="px-6 py-3" scope="col"> Amount </th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each items as f}
-						<AggregatedWeightComp item={f} />
-					{/each}
-				</tbody>
-			</table>
+	<div class="flex flex-col gap-6 p-6 bg-gray-900 min-h-screen">
+		<div class="bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
+			<Line {data} 
+				options={{
+					responsive: true,
+					maintainAspectRatio: false,
+					plugins: {
+						legend: {
+							position: 'top',
+							labels: {
+								padding: 20,
+								color: 'rgb(229, 231, 235)',
+								font: {
+									size: 12,
+									family: "'Nunito', sans-serif"
+								}
+							}
+						}
+					},
+					scales: {
+						y: {
+							grid: {
+								color: 'rgba(75, 85, 99, 0.2)'
+							},
+							ticks: {
+								color: 'rgb(229, 231, 235)',
+								font: {
+									family: "'Nunito', sans-serif"
+								}
+							}
+						},
+						x: {
+							grid: {
+								color: 'rgba(75, 85, 99, 0.2)'
+							},
+							ticks: {
+								color: 'rgb(229, 231, 235)',
+								font: {
+									family: "'Nunito', sans-serif"
+								}
+							}
+						}
+					}
+				}}
+				class="max-h-[50vh] h-[50vh]" />
+		</div>
+		<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
+			<div class="relative overflow-x-auto shadow-md rounded-lg">
+				<table class="w-full text-sm text-left text-gray-400">
+					<thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
+						<tr>
+							<th class="px-6 py-4 font-semibold" scope="col">Period</th>
+							<th class="px-6 py-4 font-semibold" scope="col">Amount</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each items as f}
+							<AggregatedWeightComp item={f} />
+						{/each}
+					</tbody>
+				</table>
+			</div>
 		</div>
-		<div></div>
 	</div>
 </template>
diff --git a/frontend/src/lib/components/Weight/WeightTable.svelte b/frontend/src/lib/components/Weight/WeightTable.svelte
index 2ddf54c..5e44e42 100644
--- a/frontend/src/lib/components/Weight/WeightTable.svelte
+++ b/frontend/src/lib/components/Weight/WeightTable.svelte
@@ -15,25 +15,22 @@
 		const date = item.date.toString().split("T")[0];
 		if (!date) return GenerateColor();
 		if (!dateColors.has(date)) dateColors.set(date, GenerateColor());
-		// THERE'S NOTHING UNDEFINED HERE
-		// WE GOT RID OF UNDEFINED ON LINE 33
-		// ASSHOLE
 		// @ts-ignore
 		return dateColors.get(date);
 	}
 </script>
 
 <template>
-	<div class="relative flex flex-col flex-grow h-[93vh]" data-vaul-drawer-wrapper id="page">
-		<div class="relative overflow-auto h-full shadow-md sm:rounded-lg">
-			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
+	<div class="relative flex flex-col flex-grow h-[93vh] select-none bg-gray-900" data-vaul-drawer-wrapper id="page">
+		<div class="relative overflow-auto h-full shadow-md rounded-lg">
+			<table class="w-full text-sm text-left text-gray-400">
+				<thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
 					<tr>
-						<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Date </th>
-						<th class="px-6 py-3 w-10/12" scope="col"> Weight </th>
+						<th class="px-6 py-4 font-semibold w-2/12" scope="col">Date</th>
+						<th class="px-6 py-4 font-semibold" scope="col">Weight</th>
 					</tr>
 				</thead>
-				<tbody>
+				<tbody class="divide-y divide-gray-700">
 					<EmptyWeightComp />
 					{#each items as f}
 						<WeightComp item={f} dateColor={getDateColor(f)} />
@@ -41,6 +38,5 @@
 				</tbody>
 			</table>
 		</div>
-		<div></div>
 	</div>
 </template>