From b76a540dc4cadca2232aa46d5e3b3a1d8b3e977e Mon Sep 17 00:00:00 2001 From: NeilClack Date: Thu, 27 Aug 2026 12:03:59 -0500 Subject: [PATCH] Add mobile-first styling to layouts, auth, and user pages - Consolidated navbar with hamburger menu for mobile - Responsive styling for root/protected layouts and auth pages - Mobile-friendly account, dashboard, license-key, and setup pages --- src/app.html | 17 +- src/lib/components/containers/Window.svelte | 6 +- .../(protected)/(user)/account/+page.svelte | 215 +++++++---------- .../(user)/account/setup/+page.svelte | 95 +++++--- .../(protected)/(user)/dashboard/+page.svelte | 39 ++-- .../(user)/license-keys/+page.svelte | 78 ++++--- src/routes/(protected)/+layout.svelte | 73 +----- src/routes/+error.svelte | 9 +- src/routes/+layout.svelte | 219 +++++++++++++----- src/routes/+page.svelte | 24 +- src/routes/forgot-password/+page.svelte | 82 ++++--- src/routes/layout.css | 96 +------- src/routes/login/+page.svelte | 124 ++++++---- src/routes/register/+page.svelte | 164 +++++++++---- src/routes/reset-password/+page.svelte | 59 +++-- 15 files changed, 694 insertions(+), 606 deletions(-) diff --git a/src/app.html b/src/app.html index b063808..78500ec 100644 --- a/src/app.html +++ b/src/app.html @@ -3,23 +3,10 @@ - %sveltekit.head% - -
%sveltekit.body%
+ +
%sveltekit.body%
diff --git a/src/lib/components/containers/Window.svelte b/src/lib/components/containers/Window.svelte index f2a9c72..8a3caa6 100644 --- a/src/lib/components/containers/Window.svelte +++ b/src/lib/components/containers/Window.svelte @@ -2,6 +2,8 @@ let { children } = $props(); -
- {@render children()} +
+
+ {@render children()} +
diff --git a/src/routes/(protected)/(user)/account/+page.svelte b/src/routes/(protected)/(user)/account/+page.svelte index 0c4c578..a4fa191 100644 --- a/src/routes/(protected)/(user)/account/+page.svelte +++ b/src/routes/(protected)/(user)/account/+page.svelte @@ -23,67 +23,58 @@ } -
-

Account

+
+

Account

+

Manage your profile and addresses.

-
-

Email

-

{data.user.email}

+
+

Email

+

{data.user.email}

-
-

Profile

+
+

Profile

{#if form?.action === 'updateProfile' && form?.success} -
+
Profile updated successfully.
{/if} {#if form?.action === 'updateProfile' && form?.error} -
+ {/if} -
-
-
- + +
+
+
-
- +
+
-
- +
+
@@ -106,138 +97,112 @@
-
-
-

Addresses

+
+
+

Addresses

{#if form?.action === 'addAddress' && form?.success} -
+
Address added successfully.
{/if} {#if form?.action === 'addAddress' && form?.error} -
+ {/if} {#if showAddressForm} - -
-
- + +
+ + +
+
+
+
-
-
- - -
-
- - -
+
+ +
-
-
- - -
-
- - -
+
+
+
+ +
-
- +
+ +
+
+ +
{/if} {#if data.user.profile?.addresses && data.user.profile.addresses.length > 0} -
- {#each data.user.profile.addresses as address} -
-

{address.street}

-

+

+ {#each data.user.profile.addresses as address (address.id)} +
+

{address.street}

+

{address.city}, {address.state} {address.postalCode}

-

{address.country}

+

{address.country}

{/each}
{:else if !showAddressForm} -

No addresses on file.

+

No addresses on file.

{/if}
diff --git a/src/routes/(protected)/(user)/account/setup/+page.svelte b/src/routes/(protected)/(user)/account/setup/+page.svelte index c2abf6b..4441afc 100644 --- a/src/routes/(protected)/(user)/account/setup/+page.svelte +++ b/src/routes/(protected)/(user)/account/setup/+page.svelte @@ -42,41 +42,74 @@ -
-

Please finish setting up your profile

+ +

+ Please finish setting up your profile +

+ {#if data.user?.image} - Profile + Profile {:else} -
+
+ {data.user?.name?.charAt(0)?.toUpperCase() ?? '?'} +
{/if} -

{data.user?.email}

-
- - - - + +

{data.user?.email}

+ +
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
- + Submit + diff --git a/src/routes/(protected)/(user)/dashboard/+page.svelte b/src/routes/(protected)/(user)/dashboard/+page.svelte index 00a37e8..7dfffc1 100644 --- a/src/routes/(protected)/(user)/dashboard/+page.svelte +++ b/src/routes/(protected)/(user)/dashboard/+page.svelte @@ -1,42 +1,33 @@ -
-

+
+

Welcome, {data.firstName}!

+

Here's an overview of your account.

-
+
-

Active License Keys

-

{data.activeKeys}

-

{data.totalKeys} total

+ Active License Keys + {data.activeKeys} + {data.totalKeys} total -

Proclamations

-

- {data.proclamationCount} -

-

Browse all

- - - -

Account

-

Manage Profile

-

Edit your details

+ Account + Manage Profile + Edit your details
diff --git a/src/routes/(protected)/(user)/license-keys/+page.svelte b/src/routes/(protected)/(user)/license-keys/+page.svelte index 8401cf1..c0a0e11 100644 --- a/src/routes/(protected)/(user)/license-keys/+page.svelte +++ b/src/routes/(protected)/(user)/license-keys/+page.svelte @@ -4,47 +4,35 @@ let { data }: PageProps = $props(); -
-

License Keys

+
+
+
+

License Keys

+

Your active and inactive license keys.

+
+
{#if data.licenseKeys.length > 0} -
- - +
+ +
+ - - - + + - - {#each data.licenseKeys as key} - - - - + {#each data.licenseKeys as key (key.key)} + + + + + +
    + {#each data.licenseKeys as key (key.key)} +
  • + {key.key} + + {key.active ? 'Active' : 'Inactive'} + +
    • + {/each} +
{:else} -
-

You don't have any license keys yet.

+
+

You don't have any license keys yet.

{/if}
diff --git a/src/routes/(protected)/+layout.svelte b/src/routes/(protected)/+layout.svelte index 2325b25..cbb18aa 100644 --- a/src/routes/(protected)/+layout.svelte +++ b/src/routes/(protected)/+layout.svelte @@ -1,74 +1,11 @@ -
- - - -
+
+
{@render children()} -
+
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte index da2d2fb..f838111 100644 --- a/src/routes/+error.svelte +++ b/src/routes/+error.svelte @@ -5,12 +5,9 @@ {#if $page.status === 403} -

Not Authorized

-

- You don't have permission to view this page. Go home. +

Not Authorized

+

+ You don't have permission to view this page. Go home.

{/if} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index c49c3e2..38ed42f 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,79 +1,188 @@ - Rhema Wave Technologies - - - - + Rhema Wave User Portal + + - + - -
+ + +{#if menuOpen} +
+ +
+{/if} + +
{@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 1337197..f456339 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,3 +1,23 @@ -
-

Hello

+ + +
+
+
+

+ Welcome to your Rhema Wave Portal +

+

+ Manage your account and license keys all in one place. +

+
+ + + Get Started + +
diff --git a/src/routes/forgot-password/+page.svelte b/src/routes/forgot-password/+page.svelte index e702c06..9bb4d7f 100644 --- a/src/routes/forgot-password/+page.svelte +++ b/src/routes/forgot-password/+page.svelte @@ -1,49 +1,57 @@ -
-

Forgot Password

- + {#if form?.success} -
- If an account with that email exists, we've sent a password reset link. +
+

Check your email

+

+ If an account with that email exists, we've sent a password reset link. +

- {/if} + {:else} + {#if form?.error && !form?.success} + + {/if} - {#if form?.error && !form?.success} -
+

Forgot Password

+

+ Enter your email and we'll send you a link to reset your password. +

+ +
+ + +
+ + + + + - {form.error} -
+ Back to Login + {/if} - -
- - -
- - - Back to Login - -
+ diff --git a/src/routes/layout.css b/src/routes/layout.css index bb67d48..530afd5 100644 --- a/src/routes/layout.css +++ b/src/routes/layout.css @@ -2,95 +2,9 @@ @plugin '@tailwindcss/forms'; @plugin '@tailwindcss/typography'; -/* Use class-based dark mode instead of prefers-color-scheme */ -@custom-variant dark (&:where(.dark, .dark *)); - -/* ------------------------------------------------------------------ */ -/* Wireframe base — remap all non-gray colors to grayscale */ -/* Use var(--color-gray-N) so dark-mode inversion flows through */ -/* ------------------------------------------------------------------ */ -@theme { - --color-blue-50: var(--color-gray-100); - --color-blue-100: var(--color-gray-200); - --color-blue-200: var(--color-gray-300); - --color-blue-300: var(--color-gray-400); - --color-blue-400: var(--color-gray-500); - --color-blue-500: var(--color-gray-500); - --color-blue-600: var(--color-gray-600); - --color-blue-700: var(--color-gray-700); - --color-blue-800: var(--color-gray-800); - --color-green-50: var(--color-gray-100); - --color-green-100: var(--color-gray-200); - --color-green-200: var(--color-gray-300); - --color-green-300: var(--color-gray-400); - --color-green-400: var(--color-gray-500); - --color-green-500: var(--color-gray-500); - --color-green-600: var(--color-gray-600); - --color-green-700: var(--color-gray-700); - --color-green-800: var(--color-gray-800); - --color-red-50: var(--color-gray-100); - --color-red-100: var(--color-gray-200); - --color-red-200: var(--color-gray-300); - --color-red-300: var(--color-gray-400); - --color-red-400: var(--color-gray-500); - --color-red-500: var(--color-gray-500); - --color-red-600: var(--color-gray-600); - --color-red-700: var(--color-gray-700); - --color-red-800: var(--color-gray-800); - --color-purple-50: var(--color-gray-100); - --color-purple-100: var(--color-gray-200); - --color-purple-200: var(--color-gray-300); - --color-purple-300: var(--color-gray-400); - --color-purple-400: var(--color-gray-500); - --color-purple-500: var(--color-gray-500); - --color-purple-600: var(--color-gray-600); - --color-purple-700: var(--color-gray-700); - --color-purple-800: var(--color-gray-800); - --color-purple-900: var(--color-gray-900); - --color-slate-50: var(--color-gray-50); - --color-slate-100: var(--color-gray-100); - --color-slate-200: var(--color-gray-200); - --color-slate-300: var(--color-gray-300); - --color-slate-400: var(--color-gray-400); - --color-slate-500: var(--color-gray-500); - --color-slate-600: var(--color-gray-600); - --color-slate-700: var(--color-gray-700); - --color-slate-800: var(--color-gray-800); - --color-slate-900: var(--color-gray-900); - - --radius: 0px; - --radius-sm: 0px; - --radius-md: 0px; - --radius-lg: 0px; - --radius-xl: 0px; - --radius-2xl: 0px; - --radius-3xl: 0px; - - --shadow-sm: 0 0 #0000; - --shadow: 0 0 #0000; - --shadow-md: 0 0 #0000; - --shadow-lg: 0 0 #0000; - --shadow-xl: 0 0 #0000; - --shadow-2xl: 0 0 #0000; -} - -/* ------------------------------------------------------------------ */ -/* Dark mode form elements */ -/* ------------------------------------------------------------------ */ -.dark input, -.dark select, -.dark textarea { - background-color: #1f2937; - color: #f9fafb; - border-color: #374151; -} - -/* ------------------------------------------------------------------ */ -/* Force-disable transitions, animations, and remaining decoration */ -/* ------------------------------------------------------------------ */ -*, -::before, -::after { - transition: none !important; - animation: none !important; +@layer base { + body { + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + } } diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte index 3b87660..c9a2a12 100644 --- a/src/routes/login/+page.svelte +++ b/src/routes/login/+page.svelte @@ -1,6 +1,7 @@ -
- {#if verified} -
- Your email has been verified. You can now log in. -
- {/if} - {#if error} - {error} - {/if} -
-

Login

- - - -
-
- Forgot Password? - Don't have an account? Register + {#if verified} +
+ Your email has been verified. You can now log in.
-
- Or - + {/if} + + {#if error} + + {/if} + +
+

Login

+ +
+ + +
+ +
+ + +
+ + + + +
+ +
+ + Forgot Password? + + + Don't have an account? + + Register + + +
+ +
+
+
+ Or +
+
+
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte index 8b042e4..ad8bbc1 100644 --- a/src/routes/register/+page.svelte +++ b/src/routes/register/+page.svelte @@ -1,60 +1,128 @@ -
- {#if form?.success} -
-
-

Account created!

-

- We've sent a verification email. Check your inbox and click the link to verify your - email address, then log in. -

-
-
- {:else} -
- {#if form?.error} -
- {form.error} -
- {/if} -
- - - - - - -
-

Or

- + {#if form?.success} +
+

Account created!

+

+ We've sent a verification email. Check your inbox and click the link to verify your email + address, then log in. +

+ + Go to Login + +
+ {:else} + {#if form?.error} + {/if} -
+ +
+

Create Account

+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ +
+
+
+ Or +
+
+ +
+ +

+ Already have an account? + + Login + +

+ {/if} diff --git a/src/routes/reset-password/+page.svelte b/src/routes/reset-password/+page.svelte index f74f746..7d1c957 100644 --- a/src/routes/reset-password/+page.svelte +++ b/src/routes/reset-password/+page.svelte @@ -1,42 +1,53 @@ -
-

Reset Password

- + {#if form?.error} -
+ {/if}
- - +

Reset Password

+ +
+ + +
+ +
+ + +
+
-
+