alexei.dolgolyov/notify-bridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 31 Wiki Activity

fix(redesign): brand snap, event sentences, palette glass, full width

Browse Source 
Round-up of feedback:

- Brand: drop italic-gradient 'Bridge' wordmark + 'SERVICE
  NOTIFICATIONS' tag. Now plain 'Notify Bridge' bold sans + 'v0.5.2'
  mono — exactly what the Aurora mockup shows.
- Event rows: replaced [collection_name] [event_tag] [count_tag] with
  a sentence form — bold provider, muted verb, bold count, gradient
  italic-feeling collection. Matches the mockup's 'Immich added 14
  assets to «...»' pattern. Tracker → provider trail kept underneath.
- SearchPalette: re-skinned to Aurora glass — solid surface (was
  using the now-translucent --color-card token and was nearly
  invisible), backdrop blur, hairline section headers with
  letterspaced mono labels, gradient active row, glass-bordered
  result icons + detail pills.
- 'On watch' provider deck hidden when a global provider filter is
  active (deck would only show that one provider — redundant). Two-col
  grid collapses to single full-width column in that mode.
- Layout: dropped the max-w-7xl cap on the topbar and the page
  container. Pages now stretch to full available width on wide
  displays.
- Section labels in sidebar: dropped :global() wrapper since the
  element is in the same component. Added font-mono for tighter
  letterspacing match to the mockup.

Build clean.
This commit is contained in:
Admin
2026-04-25 01:46:16 +03:00
parent 0105d9f0ec
commit 1895c5e2d4
3 changed files with 151 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/+layout.svelte
+27 -38
View File
@@ -367,16 +367,16 @@
<!-- Header -->
<div class="sidebar-header flex items-center {collapsed ? 'justify-center p-3' : 'justify-between px-5 py-5'}">
{#if !collapsed}
<div class="animate-fade-slide-in flex items-center gap-2.5">
<div class="animate-fade-slide-in flex items-center gap-3">
<div class="brand-orb"></div>
<div>
<h1 class="brand-mark">
<div class="brand-text">
<h1 class="brand-name">
{#if globalProviderFilter.provider}
<span class="brand-mark__icon" style="color: var(--color-primary);"><NavIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={16} /></span>
<span class="brand-mark__icon" style="color: var(--color-primary);"><NavIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={14} /></span>
{/if}
<span class="brand-mark__notify">Notify</span> <em>Bridge</em>
Notify Bridge
</h1>
<p class="brand-tag">{t('app.tagline')}</p>
<p class="brand-version font-mono">v0.5.2</p>
</div>
</div>
{:else}
@@ -607,7 +607,7 @@
style="padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));">
<!-- Always-visible topbar — search + utilities + primary CTA -->
<div class="topbar max-w-7xl mx-auto px-4 md:px-8 pt-4 md:pt-6">
<div class="topbar px-4 md:px-8 pt-4 md:pt-6">
<div class="topbar-glass">
<button type="button" class="topbar-search" onclick={() => openSearch?.()}>
<NavIcon name="mdiMagnify" size={16} />
@@ -630,7 +630,7 @@
</div>
{#key page.url.pathname}
<div class="max-w-7xl mx-auto px-4 md:px-8 pb-4 md:pb-8 pt-4" in:fade={{ duration: 200, delay: 50 }}>
<div class="px-4 md:px-8 pb-4 md:pb-8 pt-4" in:fade={{ duration: 200, delay: 50 }}>
{@render children()}
</div>
{/key}
@@ -717,41 +717,29 @@
border-bottom: 1px solid var(--color-border);
}
/* Brand mark — italic Newsreader serif */
.brand-mark {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.15rem;
letter-spacing: -0.02em;
color: var(--color-foreground);
margin: 0;
line-height: 1;
display: flex;
align-items: baseline;
gap: 0.3rem;
}
.brand-mark__notify {
/* Brand — snapped to Aurora mockup: bold sans wordmark + mono version */
.brand-text { line-height: 1.1; min-width: 0; }
.brand-name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.95rem;
}
.brand-mark em {
font-style: italic;
background: linear-gradient(135deg, var(--color-orchid), var(--color-primary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.01em;
color: var(--color-foreground);
margin: 0;
display: flex;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
}
.brand-mark__icon {
margin-right: 2px;
align-self: center;
display: inline-flex;
align-items: center;
}
.brand-tag {
font-size: 0.62rem;
.brand-version {
font-size: 0.65rem;
color: var(--color-muted-foreground);
margin-top: 3px;
letter-spacing: 0.13em;
text-transform: uppercase;
margin: 3px 0 0;
letter-spacing: 0.02em;
font-weight: 500;
}
.brand-orb {
@@ -898,7 +886,7 @@
}
/* Section labels above each nav group */
:global(.nav-section-label) {
.nav-section-label {
display: flex;
align-items: center;
gap: 0.55rem;
@@ -908,8 +896,9 @@
text-transform: uppercase;
color: var(--color-muted-foreground);
padding: 0.85rem 0.85rem 0.4rem;
font-family: var(--font-mono);
}
:global(.nav-section-label::after) {
.nav-section-label::after {
content: '';
flex: 1;
height: 1px;