xevion/banner
1
0
Fork 0
mirror of https://github.com/Xevion/banner.git synced 2026-02-01 14:23:41 -06:00
Code Issues Packages Projects Releases 2 Wiki Activity

style(web): update spacing and color classes across components

Browse Source
This commit is contained in:
Xevion
2026-01-31 20:51:28 -06:00
parent dfaaa88d54
commit 005adb8792
14 changed files with 164 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/CourseDetail.svelte
+2 -2
View File
@@ -73,7 +73,7 @@ const clipboard = useClipboard();
</span>
{/snippet}
{#snippet content()}
<div class="space-y-1.5">
<div class="flex flex-col gap-y-1.5">
<div class="font-medium">
{instructor.displayName}
</div>
@@ -136,7 +136,7 @@ const clipboard = useClipboard();
<div>
<h4 class="text-sm text-foreground mb-2">Meeting Times</h4>
{#if course.meetingTimes.length > 0}
<ul class="space-y-2">
<ul class="flex flex-col gap-y-2">
{#each course.meetingTimes as mt}
<li>
{#if isMeetingTimeTBA(mt) && isTimeTBA(mt)}
web/src/lib/components/ErrorBoundaryFallback.svelte
+44 -30
View File
@@ -19,38 +19,52 @@ let errorStack = $derived(error instanceof Error ? error.stack : null);
</script>
<div class="flex items-center justify-center py-16 px-4">
<div class="w-full max-w-lg rounded-lg border border-status-red/25 bg-status-red/5 overflow-hidden text-sm">
<div class="px-4 py-2.5 border-b border-status-red/15 flex items-center justify-between gap-4">
<div class="flex items-center gap-2 text-status-red">
<TriangleAlert size={16} strokeWidth={2.25} />
<span class="font-semibold">{title}</span>
</div>
<span class="text-xs text-muted-foreground font-mono">{page.url.pathname}</span>
</div>
<div
class="w-full max-w-lg rounded-lg border border-status-red/25 bg-status-red/5 overflow-hidden text-sm"
>
<div
class="px-4 py-2.5 border-b border-status-red/15 flex items-center justify-between gap-4"
>
<div class="flex items-center gap-2 text-status-red">
<TriangleAlert size={16} strokeWidth={2.25} />
<span class="font-semibold">{title}</span>
</div>
<span class="text-xs text-muted-foreground font-mono"
>{page.url.pathname}</span
>
</div>
<div class="px-4 py-3 border-b border-status-red/15">
<span class="text-xs text-muted-foreground/70 font-mono">{errorName}</span>
<pre class="mt-1 text-xs text-foreground/80 overflow-auto whitespace-pre-wrap break-words">{errorMessage}</pre>
</div>
<div class="px-4 py-3 border-b border-status-red/15">
<span class="text-xs text-muted-foreground/70 font-mono"
>{errorName}</span
>
<pre
class="mt-1 text-xs text-foreground/80 overflow-auto whitespace-pre-wrap wrap-break-word">{errorMessage}</pre>
</div>
{#if errorStack}
<details class="border-b border-status-red/15">
<summary class="px-4 py-2 text-xs text-muted-foreground/70 cursor-pointer hover:text-muted-foreground select-none">
Stack trace
</summary>
<pre class="px-4 py-3 text-xs text-muted-foreground/60 overflow-auto whitespace-pre-wrap break-words max-h-48">{errorStack}</pre>
</details>
{/if}
{#if errorStack}
<details class="border-b border-status-red/15">
<summary
class="px-4 py-2 text-xs text-muted-foreground/70 cursor-pointer hover:text-muted-foreground select-none"
>
Stack trace
</summary>
<pre
class="px-4 py-3 text-xs text-muted-foreground/60 overflow-auto whitespace-pre-wrap break-words max-h-48">{errorStack}</pre>
</details>
{/if}
<div class="px-4 py-2.5 flex items-center justify-end gap-3">
<span class="text-xs text-muted-foreground/60">Retries this section, not the full page</span>
<button
class="shrink-0 cursor-pointer inline-flex items-center gap-1.5 rounded-md bg-status-red px-3 py-1.5 text-sm font-medium text-white hover:brightness-110 transition-all"
onclick={reset}
>
<RotateCcw size={14} strokeWidth={2.25} />
Try again
</button>
<div class="px-4 py-2.5 flex items-center justify-end gap-3">
<span class="text-xs text-muted-foreground/60"
>Retries this section, not the full page</span
>
<button
class="shrink-0 cursor-pointer inline-flex items-center gap-1.5 rounded-md bg-status-red px-3 py-1.5 text-sm font-medium text-white hover:brightness-110 transition-all"
onclick={reset}
>
<RotateCcw size={14} strokeWidth={2.25} />
Try again
</button>
</div>
</div>
</div>
</div>
web/src/lib/components/FilterChip.svelte
+1 -1
View File
@@ -10,7 +10,7 @@ let {
<button
type="button"
class="inline-flex items-center rounded-full border border-border bg-muted/40 px-2.5 py-0.5 text-xs text-foreground hover:bg-muted/60 transition-colors cursor-pointer"
class="inline-flex items-center rounded-full border border-border bg-muted/40 px-2.5 py-0.5 text-xs text-muted-foreground hover:bg-muted/60 transition-colors cursor-pointer"
onclick={onRemove}
aria-label="Remove {label} filter"
>
web/src/lib/components/SegmentedChip.svelte
+1 -1
View File
@@ -10,7 +10,7 @@ let {
{#if segments.length > 0}
<span
class="inline-flex items-center rounded-full border border-border bg-muted/40 text-xs text-foreground"
class="inline-flex items-center rounded-full border border-border bg-muted/40 text-xs text-muted-foreground"
>
{#each segments as segment, i}
{#if i > 0}
web/src/lib/components/SimpleTooltip.svelte
+36 -30
View File
@@ -31,34 +31,40 @@ let {
</script>
<Tooltip.Root delayDuration={delay} disableHoverableContent={passthrough}>
<Tooltip.Trigger>
{#snippet child({ props })}
<span class={triggerClass} {...props}>
{@render children()}
</span>
{/snippet}
</Tooltip.Trigger>
{#if portal}
<Tooltip.Portal>
<Tooltip.Content
{side}
{sideOffset}
{avoidCollisions}
{collisionPadding}
class={cn("z-50 bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-sm whitespace-pre-line max-w-max text-left", contentClass)}
>
{text}
</Tooltip.Content>
</Tooltip.Portal>
{:else}
<Tooltip.Content
{side}
{sideOffset}
{avoidCollisions}
{collisionPadding}
class={cn("z-50 bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-sm whitespace-pre-line max-w-max text-left", contentClass)}
>
{text}
</Tooltip.Content>
{/if}
<Tooltip.Trigger>
{#snippet child({ props })}
<span class={triggerClass} {...props}>
{@render children()}
</span>
{/snippet}
</Tooltip.Trigger>
{#if portal}
<Tooltip.Portal>
<Tooltip.Content
{side}
{sideOffset}
{avoidCollisions}
{collisionPadding}
class={cn(
"z-50 bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-sm whitespace-pre-line max-w-max text-left",
contentClass,
)}
>
{text}
</Tooltip.Content>
</Tooltip.Portal>
{:else}
<Tooltip.Content
{side}
{sideOffset}
{avoidCollisions}
{collisionPadding}
class={cn(
"z-50 bg-card text-card-foreground text-xs border border-border rounded-md px-2.5 py-1.5 shadow-sm whitespace-pre-line max-w-max text-left",
contentClass,
)}
>
{text}
</Tooltip.Content>
{/if}
</Tooltip.Root>
web/src/lib/components/SubjectCombobox.svelte
+2 -2
View File
@@ -86,8 +86,8 @@ $effect(() => {
onclick={(e) => { e.stopPropagation(); removeSubject(code); }}
onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") { e.stopPropagation(); removeSubject(code); } }}
class="inline-flex items-center rounded bg-muted px-1.5 py-0.5 text-xs font-mono shrink-0
text-muted-foreground hover:outline hover:outline-1 hover:outline-ring
cursor-pointer transition-[outline] duration-100 first:ml-2"
text-muted-foreground hover:bg-muted-foreground/15
cursor-pointer transition-colors first:ml-2"
>
{code}
</span>
web/src/lib/components/TimelineDrawer.svelte
+1 -1
View File
@@ -110,7 +110,7 @@ function onKeyDown(e: KeyboardEvent) {
>
</div>
</div>
<div class="space-y-0.5">
<div class="flex flex-col gap-y-0.5">
{#each subjects as subject}
{@const enabled = enabledSubjects.has(subject)}
{@const color = getSubjectColor(subject)}
web/src/lib/components/TimelineTooltip.svelte
+32 -30
View File
@@ -18,35 +18,37 @@ const fmtTime = timeFormat("%-I:%M %p");
</script>
{#if visible && slot}
{@const total = enabledTotalClasses(slot, activeSubjects)}
<div
class="pointer-events-none fixed z-50 rounded-lg border border-border/60 bg-background/95
backdrop-blur-sm shadow-lg px-3 py-2 text-xs min-w-[140px]"
style="left: {x + 12}px; top: {y - 10}px; transform: translateY(-100%);"
>
<div class="font-semibold text-foreground mb-1.5">
{fmtTime(slot.time)}
{@const total = enabledTotalClasses(slot, activeSubjects)}
<div
class="pointer-events-none fixed z-50 rounded-lg border border-border/60 bg-background/95
backdrop-blur-sm shadow-lg px-3 py-2 text-xs min-w-35"
style="left: {x + 12}px; top: {y - 10}px; transform: translateY(-100%);"
>
<div class="font-semibold text-foreground mb-1.5">
{fmtTime(slot.time)}
</div>
<div class="flex flex-col gap-y-0.5">
{#each activeSubjects as subject}
{@const count = slot.subjects[subject] || 0}
{#if count > 0}
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-1.5">
<span
class="inline-block w-2 h-2 rounded-sm"
style="background: {getSubjectColor(subject)}"
></span>
<span class="text-muted-foreground">{subject}</span>
</div>
<span class="font-medium tabular-nums">{count}</span>
</div>
{/if}
{/each}
</div>
<div
class="mt-1.5 pt-1.5 border-t border-border/40 flex justify-between font-medium"
>
<span>Total</span>
<span class="tabular-nums">{total}</span>
</div>
</div>
<div class="space-y-0.5">
{#each activeSubjects as subject}
{@const count = slot.subjects[subject] || 0}
{#if count > 0}
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-1.5">
<span
class="inline-block w-2 h-2 rounded-sm"
style="background: {getSubjectColor(subject)}"
></span>
<span class="text-muted-foreground">{subject}</span>
</div>
<span class="font-medium tabular-nums">{count}</span>
</div>
{/if}
{/each}
</div>
<div class="mt-1.5 pt-1.5 border-t border-border/40 flex justify-between font-medium">
<span>Total</span>
<span class="tabular-nums">{total}</span>
</div>
</div>
{/if}
web/src/lib/composables/useOverlayScrollbars.svelte.ts
+5 -15
View File
@@ -1,12 +1,13 @@
import { themeStore } from "$lib/stores/theme.svelte";
import { OverlayScrollbars, type PartialOptions } from "overlayscrollbars";
import { onMount } from "svelte";
/**
* Set up OverlayScrollbars on an element with automatic theme reactivity.
* Set up OverlayScrollbars on an element.
*
* Theme colors are handled purely via CSS custom properties on `:root` / `.dark`
* (see layout.css), so no JS theme-switching is needed.
*
* Must be called during component initialization (uses `onMount` internally).
* The scrollbar theme automatically syncs with `themeStore.isDark`.
*/
export function useOverlayScrollbars(getElement: () => HTMLElement, options: PartialOptions = {}) {
onMount(() => {
@@ -15,22 +16,11 @@ export function useOverlayScrollbars(getElement: () => HTMLElement, options: Par
...options,
scrollbars: {
...options.scrollbars,
theme: themeStore.isDark ? "os-theme-dark" : "os-theme-light",
theme: "os-theme-light",
},
});
const unwatch = $effect.root(() => {
$effect(() => {
osInstance.options({
scrollbars: {
theme: themeStore.isDark ? "os-theme-dark" : "os-theme-light",
},
});
});
});
return () => {
unwatch();
osInstance.destroy();
};
});
web/src/routes/(app)/admin/audit/+page.svelte
+1 -1
View File
@@ -398,7 +398,7 @@ const columnCount = columns.length;
<td colspan={columnCount} class="p-0">
<div transition:slide={{ duration: 200 }}>
<div class="bg-muted/20 px-4 py-3">
<div class="space-y-1.5">
<div class="flex flex-col gap-y-1.5">
{#each change.diffs as d}
<div class="font-mono text-xs">
<span class="text-muted-foreground">{formatDiffPath(d.path)}:</span>
web/src/routes/(app)/admin/instructors/+page.svelte
+11 -11
View File
@@ -480,10 +480,10 @@ function formatScore(score: number): string {
<div class="bg-muted mb-6 h-2 rounded-full overflow-hidden"></div>
<!-- Skeleton table rows -->
<div class="bg-card border-border overflow-hidden rounded-lg border">
<div class="divide-y divide-border">
{#each Array(8) as _}
<div class="flex items-center gap-4 px-4 py-3">
<div class="space-y-1.5 flex-1">
<div>
{#each Array(8) as _, i}
<div class="flex items-center gap-4 px-4 py-3{i > 0 ? ' border-t border-border' : ''}">
<div class="flex flex-col gap-y-1.5 flex-1">
<div class="h-4 w-40 animate-pulse rounded bg-muted"></div>
<div class="h-3 w-28 animate-pulse rounded bg-muted"></div>
</div>
@@ -660,17 +660,17 @@ function formatScore(score: number): string {
<div transition:slide={{ duration: 200 }} class="p-4">
{#if detailLoading}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="space-y-3 animate-pulse">
<div class="flex flex-col gap-y-3 animate-pulse">
<div class="h-4 w-20 rounded bg-muted"></div>
<div class="space-y-2">
<div class="flex flex-col gap-y-2">
<div class="h-3 w-36 rounded bg-muted"></div>
<div class="h-3 w-44 rounded bg-muted"></div>
<div class="h-3 w-28 rounded bg-muted"></div>
</div>
</div>
<div class="lg:col-span-2 space-y-3 animate-pulse">
<div class="lg:col-span-2 flex flex-col gap-y-3 animate-pulse">
<div class="h-4 w-32 rounded bg-muted"></div>
<div class="space-y-2">
<div class="flex flex-col gap-y-2">
<div class="h-20 rounded bg-muted"></div>
<div class="h-20 rounded bg-muted"></div>
</div>
@@ -683,7 +683,7 @@ function formatScore(score: number): string {
{:else if detail}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Instructor info -->
<div class="space-y-3">
<div class="flex flex-col gap-y-3">
<h3 class="font-medium text-foreground text-sm">Instructor</h3>
<dl
class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm"
@@ -723,7 +723,7 @@ function formatScore(score: number): string {
</div>
<!-- Candidates -->
<div class="lg:col-span-2 space-y-3">
<div class="lg:col-span-2 flex flex-col gap-y-3">
<div class="flex items-center justify-between gap-2">
<h3 class="font-medium text-foreground text-sm">
Candidates
@@ -785,7 +785,7 @@ function formatScore(score: number): string {
No candidates available.
</p>
{:else}
<div class="max-h-80 overflow-y-auto space-y-2 pr-1">
<div class="max-h-80 overflow-y-auto flex flex-col gap-y-2 pr-1">
{#each detail.candidates as candidate (candidate.id)}
<CandidateCard
{candidate}
web/src/routes/(app)/admin/scraper/+page.svelte
+3 -3
View File
@@ -332,7 +332,7 @@ $effect(() => {
});
</script>
<div class="space-y-6">
<div class="flex flex-col gap-y-6">
<!-- Header -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
@@ -493,7 +493,7 @@ $effect(() => {
classes={{ root: "text-xs" }}
variant="none"
>
<div class="bg-card text-card-foreground shadow-md rounded-md px-2.5 py-1.5 space-y-1">
<div class="bg-card text-card-foreground shadow-md rounded-md px-2.5 py-1.5 flex flex-col gap-y-1">
<p class="text-muted-foreground font-medium">{data.date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}</p>
<div class="flex items-center justify-between gap-4">
<span class="flex items-center gap-1.5"><span class="inline-block size-2 rounded-full bg-status-green"></span>Successful</span>
@@ -547,7 +547,7 @@ $effect(() => {
classes={{ root: "text-xs" }}
variant="none"
>
<div class="bg-card text-card-foreground shadow-md rounded-md px-2.5 py-1.5 space-y-1">
<div class="bg-card text-card-foreground shadow-md rounded-md px-2.5 py-1.5 flex flex-col gap-y-1">
<p class="text-muted-foreground font-medium">{data.date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}</p>
<div class="flex items-center justify-between gap-4">
<span class="flex items-center gap-1.5"><span class="inline-block size-2 rounded-full bg-status-blue"></span>Changed</span>
web/src/routes/layout.css
+23 -29
View File
@@ -13,6 +13,8 @@
--muted-foreground: oklch(0.556 0 0);
--border: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--accent: oklch(0.96 0 0);
--accent-foreground: oklch(0.145 0 0);
@@ -21,6 +23,12 @@
--status-orange: oklch(0.75 0.18 70);
--status-gray: oklch(0.556 0 0);
--status-blue: oklch(0.55 0.15 250);
--scrollbar-thumb: rgba(0, 0, 0, 0.25);
--scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);
--os-handle-bg: rgba(0, 0, 0, 0.25);
--os-handle-bg-hover: rgba(0, 0, 0, 0.35);
--os-handle-bg-active: rgba(0, 0, 0, 0.45);
}
.dark {
@@ -32,6 +40,8 @@
--muted-foreground: oklch(0.708 0 0);
--border: oklch(0.269 0 0);
--ring: oklch(0.556 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
@@ -40,6 +50,12 @@
--status-orange: oklch(0.8 0.16 70);
--status-gray: oklch(0.708 0 0);
--status-blue: oklch(0.7 0.15 250);
--scrollbar-thumb: rgba(255, 255, 255, 0.3);
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
--os-handle-bg: rgba(255, 255, 255, 0.35);
--os-handle-bg-hover: rgba(255, 255, 255, 0.45);
--os-handle-bg-active: rgba(255, 255, 255, 0.55);
}
@theme inline {
@@ -51,6 +67,8 @@
--color-muted-foreground: var(--muted-foreground);
--color-border: var(--border);
--color-ring: var(--ring);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-status-green: var(--status-green);
@@ -142,19 +160,7 @@ input[type="checkbox"]:checked::before {
mix-blend-mode: normal;
}
/* OverlayScrollbars — custom handle colors per theme */
:root .os-scrollbar {
--os-handle-bg: rgba(0, 0, 0, 0.25);
--os-handle-bg-hover: rgba(0, 0, 0, 0.35);
--os-handle-bg-active: rgba(0, 0, 0, 0.45);
}
.dark .os-scrollbar {
--os-handle-bg: rgba(255, 255, 255, 0.35);
--os-handle-bg-hover: rgba(255, 255, 255, 0.45);
--os-handle-bg-active: rgba(255, 255, 255, 0.55);
}
/* OverlayScrollbars — handle colors via inherited custom properties (set in :root / .dark) */
.os-scrollbar-handle {
border-radius: 4px;
}
@@ -171,14 +177,10 @@ body::-webkit-scrollbar {
display: none;
}
/* Native scrollbars — theme-aware styling for inner scrollable elements */
/* Native scrollbars — theme-aware via inherited custom properties (no .dark * selectors) */
* {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
.dark * {
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
scrollbar-color: var(--scrollbar-thumb) transparent;
}
::-webkit-scrollbar {
@@ -191,20 +193,12 @@ body::-webkit-scrollbar {
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.25);
background: var(--scrollbar-thumb);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.35);
}
.dark ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
}
.dark ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.4);
background: var(--scrollbar-thumb-hover);
}
@keyframes accordion-down {
web/src/routes/login/+page.svelte
+2 -2
View File
@@ -32,7 +32,7 @@ const faqItems = [
</script>
<div class="flex flex-1 items-center justify-center px-4 pb-14">
<div class="w-full max-w-md space-y-8">
<div class="w-full max-w-md flex flex-col gap-y-8">
<!-- Sign-in card -->
<div
class="rounded-xl border border-border bg-card p-8 text-center shadow-sm"
@@ -51,7 +51,7 @@ const faqItems = [
</div>
<!-- FAQ section -->
<div class="space-y-3">
<div class="flex flex-col gap-y-3">
<h2
class="text-center text-xs font-medium uppercase tracking-widest text-muted-foreground"
>