Skip to content

refactor(hive+site): use daisyUI semantic colors and fix icon/a11y issues #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lucor merged 1 commit into from
Apr 28, 2026
Merged

refactor(hive+site): use daisyUI semantic colors and fix icon/a11y issues #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 33 additions & 33 deletions web/apps/hive/src/lib/components/install_screen.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { onboarding } from '../onboarding.svelte';
import type { InstallPlatform } from '../onboarding.svelte';
import { BeeBuzzLogo } from '@beebuzz/shared/components';
import { Share2, Share, Plus, Download } from '@lucide/svelte';
import { Share, Plus, Download } from '@lucide/svelte';

interface Props {
platform: InstallPlatform;
Expand All @@ -13,100 +13,100 @@
let installed = $derived(onboarding.state !== 'not-installed');
</script>

<main class="flex items-center justify-center min-h-dvh bg-[#FDF7ED] px-4">
<main class="flex items-center justify-center min-h-dvh bg-base-100 px-4">
<div class="w-full max-w-md">
<!-- Header -->
<div class="text-center mb-8">
<div class="flex flex-col items-center justify-center mb-4">
<BeeBuzzLogo variant="img" class="w-16 h-16 mb-2" />
<BeeBuzzLogo variant="text" class="w-48 h-12" />
</div>
<p class="text-lg text-[#2D3748]/80 font-medium">Install BeeBuzz to get started</p>
<p class="text-lg text-base-content/80 font-medium">Install BeeBuzz to get started</p>
</div>

<!-- Card -->
<div class="bg-white rounded-lg shadow-md border border-[#E6E1D8] p-8 mb-6">
<div class="rounded-lg border border-base-300 bg-base-100 p-8 mb-6 shadow-md">
{#if platform === 'ios'}
<h2 class="text-lg font-bold text-[#2D3748] mb-4">Add to Home Screen</h2>
<p class="text-[#6B7280] text-sm mb-6">
<h2 class="text-lg font-bold text-base-content mb-4">Add to Home Screen</h2>
<p class="text-base-content/70 text-sm mb-6">
BeeBuzz requires installation on iOS to receive push notifications.
</p>

<ol class="space-y-4 text-sm text-[#2D3748]">
<ol class="space-y-4 text-sm text-base-content">
<li class="flex items-start gap-3">
<span
class="flex-shrink-0 w-7 h-7 rounded-full bg-[#FFC84B] text-white flex items-center justify-center font-bold text-xs"
class="flex-shrink-0 w-7 h-7 rounded-full bg-warning text-warning-content flex items-center justify-center font-bold text-xs"
>1</span
>
<div>
<p class="font-semibold">Tap the Share icon</p>
<p class="text-[#6B7280] mt-0.5">
<Share2 size={14} class="inline-block mb-0.5" /> at the bottom of Safari
<p class="text-base-content/70 mt-0.5">
<Share size={14} class="inline-block mb-0.5" /> at the bottom of Safari
</p>
</div>
</li>
<li class="flex items-start gap-3">
<span
class="flex-shrink-0 w-7 h-7 rounded-full bg-[#FFC84B] text-white flex items-center justify-center font-bold text-xs"
class="flex-shrink-0 w-7 h-7 rounded-full bg-warning text-warning-content flex items-center justify-center font-bold text-xs"
>2</span
>
<div>
<p class="font-semibold">Tap "Add to Home Screen"</p>
<p class="text-[#6B7280] mt-0.5">
<p class="text-base-content/70 mt-0.5">
<Plus size={14} class="inline-block mb-0.5" /> Scroll down in the share sheet
</p>
</div>
</li>
<li class="flex items-start gap-3">
<span
class="flex-shrink-0 w-7 h-7 rounded-full bg-[#FFC84B] text-white flex items-center justify-center font-bold text-xs"
class="flex-shrink-0 w-7 h-7 rounded-full bg-warning text-warning-content flex items-center justify-center font-bold text-xs"
>3</span
>
<div>
<p class="font-semibold">Open BeeBuzz from your Home Screen</p>
<p class="text-[#6B7280] mt-0.5">The app will continue from this step</p>
<p class="text-base-content/70 mt-0.5">The app will continue from this step</p>
</div>
</li>
</ol>
{:else if platform === 'safari-macos'}
<h2 class="text-lg font-bold text-[#2D3748] mb-4">Add to Dock</h2>
<p class="text-[#6B7280] text-sm mb-6">
<h2 class="text-lg font-bold text-base-content mb-4">Add to Dock</h2>
<p class="text-base-content/70 text-sm mb-6">
Install BeeBuzz as a standalone app for reliable notifications.
</p>

<ol class="space-y-4 text-sm text-[#2D3748]">
<ol class="space-y-4 text-sm text-base-content">
<li class="flex items-start gap-3">
<span
class="flex-shrink-0 w-7 h-7 rounded-full bg-[#FFC84B] text-white flex items-center justify-center font-bold text-xs"
class="flex-shrink-0 w-7 h-7 rounded-full bg-warning text-warning-content flex items-center justify-center font-bold text-xs"
>1</span
>
<div>
<p class="font-semibold">Select "Add to Dock"</p>
<p class="text-[#6B7280] mt-0.5">
<p class="text-base-content/70 mt-0.5">
From the <Share size={14} class="inline-block mb-0.5" /> Share menu or File menu
</p>
</div>
</li>
<li class="flex items-start gap-3">
<span
class="flex-shrink-0 w-7 h-7 rounded-full bg-[#FFC84B] text-white flex items-center justify-center font-bold text-xs"
class="flex-shrink-0 w-7 h-7 rounded-full bg-warning text-warning-content flex items-center justify-center font-bold text-xs"
>2</span
>
<div>
<p class="font-semibold">Open BeeBuzz from the Dock</p>
<p class="text-[#6B7280] mt-0.5">The app will continue from this step</p>
<p class="text-base-content/70 mt-0.5">The app will continue from this step</p>
</div>
</li>
</ol>

<div class="mt-4 p-3 bg-[#FDF7ED] rounded-lg">
<p class="text-xs text-[#6B7280]">
<div class="mt-4 rounded-lg bg-base-200 p-3">
<p class="text-xs text-base-content/70">
Tip: For auto-start, go to System Settings, General, Login Items and add BeeBuzz.
</p>
</div>
{:else if platform === 'chromium'}
<h2 class="text-lg font-bold text-[#2D3748] mb-4">Install BeeBuzz</h2>
<p class="text-[#6B7280] text-sm mb-6">
<h2 class="text-lg font-bold text-base-content mb-4">Install BeeBuzz</h2>
<p class="text-base-content/70 text-sm mb-6">
Install the app for a dedicated window and reliable notifications.
</p>

Expand All @@ -121,27 +121,27 @@
</button>

{#if installed}
<p class="text-sm text-center text-[#6B7280]">
<p class="text-sm text-center text-base-content/70">
Now open BeeBuzz from your apps to continue.
</p>
{/if}
{:else if platform === 'already-installed'}
<h2 class="text-lg font-bold text-[#2D3748] mb-4">BeeBuzz is already installed</h2>
<p class="text-[#6B7280] text-sm mb-6">
<h2 class="text-lg font-bold text-base-content mb-4">BeeBuzz is already installed</h2>
<p class="text-base-content/70 text-sm mb-6">
Open the app to continue setup. If you installed it recently, check your home screen or
app drawer.
</p>
<button
type="button"
class="text-sm text-[#6B7280] hover:text-[#2D3748] underline"
class="text-sm text-base-content/70 hover:text-base-content underline"
onclick={() => onboarding.skipInstall()}
>
Can't find it? Continue in browser
</button>
{:else}
<!-- browser-fallback: Chromium without beforeinstallprompt, or unknown browser -->
<h2 class="text-lg font-bold text-[#2D3748] mb-4">Install BeeBuzz</h2>
<p class="text-[#6B7280] text-sm mb-6">
<h2 class="text-lg font-bold text-base-content mb-4">Install BeeBuzz</h2>
<p class="text-base-content/70 text-sm mb-6">
Install BeeBuzz for reliable notifications. Look for the install icon in your browser's
address bar, or use your browser's menu to install this app.
</p>
Expand All @@ -152,12 +152,12 @@
<div class="text-center">
<button
type="button"
class="text-sm text-[#6B7280] hover:text-[#2D3748] underline"
class="text-sm text-base-content/70 hover:text-base-content underline"
onclick={() => onboarding.skipInstall()}
>
Can't install? Continue in browser
</button>
<p class="text-xs text-[#6B7280] mt-1 max-w-xs mx-auto">
<p class="text-xs text-base-content/70 mt-1 max-w-xs mx-auto">
Notification reliability may be reduced without installation.
</p>
</div>
Expand Down
8 changes: 4 additions & 4 deletions web/apps/hive/src/lib/components/onboarding_error.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import { TriangleAlert, RefreshCw } from '@lucide/svelte';
</script>

<main class="flex items-center justify-center min-h-dvh bg-[#FDF7ED] px-4">
<main class="flex items-center justify-center min-h-dvh bg-base-100 px-4">
<div class="w-full max-w-md">
<!-- Header -->
<div class="text-center mb-8">
Expand All @@ -14,16 +14,16 @@
</div>

<!-- Card -->
<div class="bg-white rounded-lg shadow-md border border-[#E6E1D8] p-8">
<div class="rounded-lg border border-base-300 bg-base-100 p-8 shadow-md">
<div class="flex items-center justify-center mb-4">
<div class="p-3 bg-amber-100 rounded-full">
<TriangleAlert size={32} class="text-amber-500" />
</div>
</div>

<h2 class="text-lg font-bold text-[#2D3748] text-center mb-2">Something went wrong</h2>
<h2 class="text-lg font-bold text-base-content text-center mb-2">Something went wrong</h2>

<p class="text-[#6B7280] text-sm text-center mb-6">
<p class="text-base-content/70 text-sm text-center mb-6">
{onboarding.errorMessage ?? 'An unexpected error occurred during pairing.'}
</p>

Expand Down
14 changes: 7 additions & 7 deletions web/apps/hive/src/lib/components/permission_blocked.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
};
</script>

<main class="flex items-center justify-center min-h-dvh bg-[#FDF7ED] px-4">
<main class="flex items-center justify-center min-h-dvh bg-base-100 px-4">
<div class="w-full max-w-md">
<!-- Header -->
<div class="text-center mb-8">
Expand All @@ -23,26 +23,26 @@
</div>

<!-- Card -->
<div class="bg-white rounded-lg shadow-md border border-[#E6E1D8] p-8">
<div class="rounded-lg border border-base-300 bg-base-100 p-8 shadow-md">
<div class="flex items-center justify-center mb-4">
<div class="p-3 bg-red-100 rounded-full">
<BellOff size={32} class="text-red-500" />
</div>
</div>

<h2 class="text-lg font-bold text-[#2D3748] text-center mb-2">Notifications Blocked</h2>
<h2 class="text-lg font-bold text-base-content text-center mb-2">Notifications Blocked</h2>

<p class="text-[#6B7280] text-sm text-center mb-6">
<p class="text-base-content/70 text-sm text-center mb-6">
BeeBuzz needs notification permission to deliver messages. You have blocked notifications
for this site.
</p>

<div class="bg-[#FDF7ED] rounded-lg p-4 mb-6">
<p class="text-sm font-semibold text-[#2D3748] mb-2 flex items-center gap-2">
<div class="rounded-lg bg-base-200 p-4 mb-6">
<p class="text-sm font-semibold text-base-content mb-2 flex items-center gap-2">
<Settings size={16} />
How to re-enable
</p>
<ol class="text-xs text-[#6B7280] space-y-1 list-decimal list-inside">
<ol class="text-xs text-base-content/70 space-y-1 list-decimal list-inside">
<li>Open your browser settings</li>
<li>Find "Site Settings" or "Permissions"</li>
<li>Locate this site and allow notifications</li>
Expand Down
14 changes: 7 additions & 7 deletions web/apps/hive/src/lib/components/unsupported.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
});
</script>

<main class="flex items-center justify-center min-h-dvh bg-[#FDF7ED] px-4">
<main class="flex items-center justify-center min-h-dvh bg-base-100 px-4">
<div class="w-full max-w-md">
<!-- Header -->
<div class="text-center mb-8">
Expand All @@ -36,16 +36,16 @@
</div>

<!-- Card -->
<div class="bg-white rounded-lg shadow-md border border-[#E6E1D8] p-8">
<div class="rounded-lg border border-base-300 bg-base-100 p-8 shadow-md">
<div class="flex items-center justify-center mb-4">
<div class="p-3 bg-red-100 rounded-full">
<CircleAlert size={32} class="text-red-500" />
</div>
</div>

<h2 class="text-lg font-bold text-[#2D3748] text-center mb-2">Browser Not Supported</h2>
<h2 class="text-lg font-bold text-base-content text-center mb-2">Browser Not Supported</h2>

<p class="text-[#6B7280] text-sm text-center mb-6">
<p class="text-base-content/70 text-sm text-center mb-6">
Your browser does not support the features required by BeeBuzz.
</p>

Expand All @@ -60,9 +60,9 @@
</div>
{/if}

<div class="bg-[#FDF7ED] rounded-lg p-4">
<p class="text-sm font-semibold text-[#2D3748] mb-3">Supported browsers</p>
<ul class="text-sm text-[#6B7280] space-y-2">
<div class="rounded-lg bg-base-200 p-4">
<p class="text-sm font-semibold text-base-content mb-3">Supported browsers</p>
<ul class="text-sm text-base-content/70 space-y-2">
<li class="flex items-center gap-2">
<Globe size={16} class="flex-shrink-0" />
<span>Chrome / Edge (desktop and Android)</span>
Expand Down
2 changes: 1 addition & 1 deletion web/apps/hive/src/routes/(app)/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,7 @@
</script>

{#if !ready}
<main class="flex min-h-dvh items-center justify-center bg-[#FDF7ED] px-4">
<main class="flex min-h-dvh items-center justify-center bg-base-100 px-4">
{#if startupError}
<div class="w-full max-w-md rounded-2xl border border-warning/30 bg-base-100 p-6 shadow-sm">
<div class="flex items-start gap-3">
Expand Down
2 changes: 1 addition & 1 deletion web/apps/hive/src/routes/pair/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
</script>

{#if onboarding.state === 'checking'}
<main class="flex items-center justify-center min-h-dvh bg-[#FDF7ED]">
<main class="flex items-center justify-center min-h-dvh bg-base-100">
<span class="loading loading-spinner loading-lg text-primary"></span>
</main>
{:else if onboarding.state === 'unsupported'}
Expand Down
2 changes: 1 addition & 1 deletion web/apps/site/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@
<div
class="flex h-12 w-12 items-center justify-center rounded-2xl bg-warning/15 text-warning"
>
<svelte:component this={useCase.icon} class="h-6 w-6" />
<useCase.icon class="h-6 w-6" />
</div>
<h3 class="mt-5 text-xl font-semibold text-base-content">{useCase.title}</h3>
<p class="mt-3 text-sm leading-7 text-base-content/70">{useCase.description}</p>
Expand Down
6 changes: 5 additions & 1 deletion web/packages/shared/src/components/SettingsModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,17 @@
const handleClose = () => {
onClose?.();
};

// Stable id for aria-labelledby so the dialog has an accessible name.
const titleId = `settings-modal-title-${Math.random().toString(36).slice(2, 10)}`;
</script>

{#if open}
<dialog
class="modal"
open
aria-modal="true"
aria-labelledby={titleId}
oncancel={(e) => {
e.preventDefault();
handleClose();
Expand All @@ -48,7 +52,7 @@
>
<div class="flex items-start justify-between gap-4">
<div>
<h3 class="text-lg font-bold text-base-content">{title}</h3>
<h3 id={titleId} class="text-lg font-bold text-base-content">{title}</h3>
{#if description}
<p class="text-sm text-base-content/70 mt-1">{description}</p>
{/if}
Expand Down