UI Redesign and Bug Fixes

app/client/src/components/chart/DashboardCharts.svelte

@@ -85,7 +85,7 @@
 						{
 							label: `Total Fuel Cost (${getCurrencySymbol()})`,
 							data: costData,
-							fill: false,
+							fill: true,
 							borderColor: 'rgb(75, 192, 192)',
 							tension: 0.3,
 							borderWidth: 2,
@@ -102,9 +102,13 @@
 						{
 							label: `Mileage (${getMileageUnit()})`,
 							data: mileageDataPoints,
-							fill: true,
 							borderColor: 'rgb(255, 99, 132)',
-							tension: 0.1
+							fill: true,
+							tension: 0.3,
+							borderWidth: 2,
+							borderCapStyle: 'round',
+							pointStyle: 'circle',
+							pointRadius: 2
 						}
 					]
 				};

app/client/src/components/common/Button.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import { Jumper } from 'svelte-loading-spinners';
+
+	const {
+		text,
+		type,
+		variant,
+		icon: Icon = undefined,
+		loading = false,
+		onclick = () => {}
+	}: {
+		text: string;
+		type: 'submit' | 'button';
+		variant: 'primary' | 'hero';
+		icon?: Component;
+		loading?: boolean;
+		onclick?: () => void;
+	} = $props();
+	const getVariantStyles = () => {
+		switch (variant) {
+			case 'hero':
+				return `border-gray-200 bg-gray-200 text-gray-900 hover:bg-gray-200 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800`;
+			case 'primary':
+				return `border-blue-700 bg-blue-700 text-gray-100 hover:bg-blue-800 dark:border-blue-800 dark:bg-blue-800 dark:text-gray-50 dark:hover:bg-blue-900`;
+		}
+	};
+</script>
+
+<div class="flex justify-center">
+	{#if !loading}
+		<button
+			{type}
+			class={`flex min-w-36 cursor-pointer items-center justify-center gap-2 rounded-full border-2 px-4 py-2 shadow-lg 
+			transition-all duration-300 hover:shadow-xl focus:border-blue-600 dark:shadow-black ${getVariantStyles()}`}
+			{onclick}
+		>
+			{#if Icon}
+				<Icon class="h-4 w-4" />
+			{/if}
+			{text}
+		</button>
+	{:else}
+		<Jumper size="40" color="#155dfc" unit="px" duration="2s" />
+	{/if}
+</div>

app/client/src/components/common/FormField.svelte

@@ -6,6 +6,7 @@
 		value = $bindable(),
 		icon = null,
 		required = false,
+		label = undefined,
 		ariaLabel = '',
 		disabled = false,
 		inputClass = '',
@@ -14,14 +15,19 @@
 	const Icon = icon;
 </script>
 
-<div class="mb-6">
+<div>
+	{#if label}
+		<label for={id} class="pl-2 text-lg text-gray-400"
+			>{label}<span class="pl-1 text-red-800">{required ? '*' : ''}</span></label
+		>
+	{/if}
 	<div class="relative">
 		<input
 			{id}
 			{type}
-			{placeholder}
 			bind:value
-			class={`w-full rounded-xl border border-gray-300 bg-white py-3 pr-4 pl-12 text-lg text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-blue-400 dark:focus:ring-blue-400 ${inputClass}`}
+			{placeholder}
+			class={`w-full rounded-xl border border-gray-300 bg-white py-3 pr-4 pl-12 text-gray-900 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-blue-400 dark:focus:ring-blue-400 ${inputClass}`}
 			{required}
 			aria-label={ariaLabel}
 			{disabled}
@@ -31,7 +37,7 @@
 		/>
 		{#if icon}
 			<Icon
-				class="absolute top-1/2 left-4 h-6 w-6 -translate-y-1/2 text-gray-400 dark:text-gray-500"
+				class="absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 text-gray-400 dark:text-gray-500"
 				aria-hidden="true"
 			/>
 		{/if}

app/client/src/components/common/IconButton.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	const {
+		buttonStyles,
+		iconStyles,
+		onclick,
+		icon: Icon,
+		ariaLabel
+	}: {
+		buttonStyles: string;
+		iconStyles: string;
+		onclick: () => void;
+		icon: Component;
+		ariaLabel: string;
+	} = $props();
+</script>
+
+<button
+	type="button"
+	class={`cursor-pointer rounded-full p-2 transition-colors duration-300 ${buttonStyles}`}
+	{onclick}
+	aria-label={ariaLabel}
+>
+	<Icon class={`h-5 w-5 transition-colors duration-300 ${iconStyles}`} />
+</button>

app/client/src/components/common/ModalContainer.svelte

@@ -1,39 +1,29 @@
 <script lang="ts">
+	import { Plus, PlusCircle } from '@lucide/svelte';
 	import { scale } from 'svelte/transition';
+	import IconButton from './IconButton.svelte';
 
 	const { onclose, children, title, loading } = $props();
 </script>
 
 <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
 	<div
 		in:scale={{ duration: 500 }}
-		class="relative max-h-[90vh] w-full max-w-xl overflow-y-auto rounded-2xl bg-white p-10 shadow-2xl dark:bg-gray-800"
+		class="max-h-[90vh] w-full max-w-xl overflow-y-auto rounded-2xl bg-white p-10 shadow-2xl dark:bg-gray-800"
 	>
-		<button
-			type="button"
-			class="absolute top-6 right-6 rounded-full bg-gray-100 p-2 text-gray-400 transition hover:text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:hover:text-white"
-			onclick={() => onclose()}
-			aria-label="Close"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M6 18L18 6M6 6l12 12"
-				/>
-			</svg>
-		</button>
-		<h2 class="mb-2 text-left text-3xl font-semibold text-gray-900 dark:text-gray-100">
-			{title}
-		</h2>
-		<div class="mb-8 border-b border-gray-200 dark:border-gray-700"></div>
+		<div class="mb-2 flex flex-row items-center justify-between">
+			<h2 class="text-left text-2xl font-bold text-gray-900 dark:text-gray-100">
+				{title}
+			</h2>
+			<IconButton
+				buttonStyles="bg-gray-200 dark:bg-gray-700"
+				iconStyles="text-gray-600 dark:text-gray-100 hover:text-red-500 rotate-45 h-6 w-6"
+				icon={Plus}
+				onclick={onclose}
+				ariaLabel="Close"
+			/>
+		</div>
+		<div class="mb-4 border-b border-gray-200 dark:border-gray-700"></div>
 		{@render children()}
 	</div>
 </div>

app/client/src/components/common/StatusBlock.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import ChartCard from '$components/chart/ChartCard.svelte';
+
+	let {
+		message,
+		type = 'INFO'
+	}: {
+		message?: string;
+		type: 'INFO' | 'SUCCESS' | 'ERROR';
+	} = $props();
+
+	const getStatusTypeClasses = () => {
+		if (type === 'INFO') return 'bg-blue-50 text-blue-600 dark:bg-blue-900 dark:text-blue-100';
+		if (type === 'SUCCESS')
+			return 'bg-green-50 text-green-600 dark:bg-green-900 dark:text-green-100';
+		if (type === 'ERROR') return 'bg-red-50 text-red-600 dark:bg-red-900 dark:text-red-100';
+	};
+</script>
+
+{#if message}
+	<p class={`mt-4 rounded-md p-2 text-start text-sm ${getStatusTypeClasses()}`}>
+		{#each message.split('\n') as error}
+			{error}<br />
+		{/each}
+	</p>
+{/if}

app/client/src/components/common/ThemeToggle.svelte

@@ -31,17 +31,17 @@
 	<div class="relative flex items-center">
 		<!-- Switch background -->
 		<span
-			class="inline-block h-5 w-10 rounded-full bg-gray-400 transition-colors duration-300 dark:bg-gray-800"
+			class="inline-block h-5 w-10 rounded-full bg-gray-400 transition-colors duration-300 dark:bg-gray-700"
 		></span>
 		<!-- Switch knob -->
 		<span
-			class="absolute top-0 left-0 flex h-5 w-5 items-center justify-center rounded-full bg-white shadow transition-transform duration-300 dark:bg-black"
+			class="absolute top-0 left-0 flex h-5 w-5 items-center justify-center rounded-full bg-white shadow transition-transform duration-300 dark:bg-gray-800"
 			style="transform: translateX({darkMode ? '20px' : '0px'});"
 		>
 			{#if darkMode}
-				<Moon class="h-3 w-3 text-white" />
+				<Moon class="h-4 w-4 text-yellow-500" />
 			{:else}
-				<Sun class="h-3 w-3 text-black" />
+				<Sun class="h-4 w-4 text-red-500" />
 			{/if}
 		</span>
 	</div>