update ui for include test campaigns

Signed-off-by: Ronni Skansing <rskansing@gmail.com>

frontend/src/lib/components/CheckboxField.svelte

@@ -8,6 +8,7 @@
 	export let toolTipText = '';
 	export let optional = false;
 	export let id = null;
+	export let inline = false;
 
 	let parentForm = null;
 	let parentFormResetListener = null;
@@ -38,7 +39,12 @@
 	});
 </script>
 
-<label class="flex flex-col py-2 w-60">
+<label
+	class="flex py-2 w-60"
+	class:flex-col={!inline}
+	class:flex-row={inline}
+	class:items-center={inline}
+>
 	<div class="flex items-center">
 		<p class="font-semibold text-slate-600 py-2">
 			<slot />
@@ -54,7 +60,7 @@
 			</div>
 		{/if}
 	</div>
-	<div class="mt-1">
+	<div class="mt-1" class:mt-0={inline} class:ml-3={inline}>
 		<label class="relative flex items-center cursor-pointer">
 			<input
 				{id}

frontend/src/routes/dashboard/+page.svelte

@@ -21,6 +21,7 @@
 	import StatsCard from '$lib/components/StatsCard.svelte';
 	import CampaignCalender from '$lib/components/CampaignCalendar.svelte';
 	import CampaignTrendChart from '$lib/components/CampaignTrendChart.svelte';
+	import CheckboxField from '$lib/components/CheckboxField.svelte';
 	import { fetchAllRows } from '$lib/utils/api-utils';
 	import { tick } from 'svelte';
 
@@ -291,16 +292,16 @@
 <main>
 	<div class="flex justify-between">
 		<Headline>Dashboard</Headline>
-		<div class="flex gap-4 items-center">
-			<label class="flex items-center gap-2 text-sm">
-				<input
-					type="checkbox"
-					bind:checked={includeTestCampaigns}
-					on:change={handleToggleChange}
-					class="rounded"
-				/>
+		<div class="flex gap-4 items-baseline">
+			<CheckboxField
+				bind:value={includeTestCampaigns}
+				on:change={handleToggleChange}
+				id="includeTestCampaigns"
+				inline={true}
+			>
 				Include test campaigns
-			</label>
+			</CheckboxField>
+
 			<AutoRefresh
 				isLoading={false}
 				onRefresh={async () => {
@@ -313,28 +314,6 @@
 		<SubHeadline>{contextCompanyName}</SubHeadline>
 	{/if}
 
-	{#if includeTestCampaigns}
-		<div class="bg-yellow-50 border border-yellow-200 rounded-md p-3 mb-4">
-			<div class="flex">
-				<div class="flex-shrink-0">
-					<svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
-						<path
-							fill-rule="evenodd"
-							d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
-				<div class="ml-3">
-					<p class="text-sm text-yellow-800">
-						<strong>Test campaigns included:</strong> The dashboard is currently showing both production
-						and test campaigns.
-					</p>
-				</div>
-			</div>
-		</div>
-	{/if}
-
 	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8 mt-4">
 		<a href="/campaign">
 			<StatsCard