campbellwireless/trips
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Update dashboard header and map styling (#56)
All checks were successful
Build and Push Image / docker-build-and-push (push) Successful in 2m18s
Details

Browse Source 
Reviewed-on: #56
Co-authored-by: AI Agent <ai-agent@campbellwireless.net>
Co-committed-by: AI Agent <ai-agent@campbellwireless.net>
This commit was merged in pull request #56.
This commit is contained in:
AI Agent
2026-02-24 22:25:10 +00:00
committed by shaun
parent ebc8f80bb5
commit 894535b555
3 changed files with 876 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/routes/(protected)/dashboard/+page.svelte
View File

@@ -79,26 +79,16 @@
<svelte:head>
<title>Dashboard — Trips</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Manrope:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</svelte:head>
<div class="dashboard-shell space-y-8">
<header class="relative overflow-hidden rounded-3xl border border-slate-200 bg-gradient-to-br from-amber-50 via-white to-sky-50 p-6">
<div class="absolute -right-10 top-6 h-32 w-32 rounded-full bg-sky-200/40 blur-3xl"></div>
<div class="absolute -left-12 bottom-6 h-40 w-40 rounded-full bg-amber-200/40 blur-3xl"></div>
<div class="relative">
<p class="text-xs uppercase tracking-[0.2em] text-slate-500">Overview</p>
<h1 class="display mt-2 text-3xl text-slate-900 sm:text-4xl">Dashboard</h1>
<p class="mt-2 text-sm text-slate-600">
Welcome back, {data.session.user?.name ?? data.session.user?.email}. Here’s a quick pulse on
your travel story.
</p>
</div>
<header class="rounded-3xl bg-white p-6 shadow-sm">
<p class="text-xs uppercase tracking-[0.2em] text-slate-500">Overview</p>
<h1 class="display mt-2 text-3xl text-slate-900 sm:text-4xl">Dashboard</h1>
<p class="mt-2 text-sm text-slate-600">
Welcome back, {data.session.user?.name ?? data.session.user?.email}. Here’s a quick pulse on your
travel story.
</p>
</header>
<section class="grid gap-6 lg:grid-cols-[1.6fr,1fr]">
@@ -106,23 +96,15 @@
class="relative overflow-hidden rounded-3xl border border-slate-200 bg-slate-950/90 p-6 text-white"
data-testid="trip-map"
>
<div class="absolute inset-0 map-grid opacity-30"></div>
<div class="absolute -left-20 top-10 h-48 w-48 rounded-full bg-emerald-400/20 blur-3xl"></div>
<div class="absolute right-0 bottom-0 h-56 w-56 rounded-full bg-sky-400/20 blur-3xl"></div>
<svg
class="absolute inset-0 h-full w-full opacity-70"
viewBox="0 0 1000 500"
preserveAspectRatio="xMidYMid slice"
<div class="absolute inset-0 map-grid opacity-15"></div>
<div class="absolute -left-20 top-10 h-48 w-48 rounded-full bg-emerald-400/15 blur-3xl"></div>
<div class="absolute right-0 bottom-0 h-56 w-56 rounded-full bg-sky-400/15 blur-3xl"></div>
<img
class="map-base absolute inset-0 h-full w-full object-cover"
src="{base}/world-map.svg"
alt=""
aria-hidden="true"
>
<rect width="1000" height="500" fill="none" />
<polygon class="map-land" points="110,140 220,90 330,120 360,200 290,260 170,240" />
<polygon class="map-land" points="260,260 330,260 370,320 340,430 260,400 230,320" />
<polygon class="map-land" points="420,120 520,110 560,150 520,190 450,170" />
<polygon class="map-land" points="450,200 560,210 610,320 550,420 470,340" />
<polygon class="map-land" points="580,120 760,110 880,200 780,270 620,220" />
<polygon class="map-land" points="740,320 830,330 860,400 800,440 720,380" />
</svg>
/>
<div class="relative">
<div class="flex items-start justify-between gap-4">
<div>
@@ -325,24 +307,15 @@
</div>
<style>
.dashboard-shell {
font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
}
.display {
font-family: 'Fraunces', 'Times New Roman', serif;
}
.map-grid {
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: 48px 48px;
}
.map-land {
fill: rgba(148, 163, 184, 0.25);
stroke: rgba(148, 163, 184, 0.35);
stroke-width: 2;
.map-base {
opacity: 0.45;
filter: invert(1) grayscale(1);
}
.map-marker {