tksadik92/wrenn-releases
1
0
Fork 0
forked from wrenn/wrenn
Code Pull Requests Activity

Bolder, more delightful frontend across all pages

Browse Source 
- app.css: replace flat --shadow-sm token with real shadows; add
  --shadow-card and --shadow-dialog tokens; add @keyframes status-ping
  and .animate-status-ping utility (outward ring ripple, GPU-composited
  via will-change) for live running status dots
- login: headline 5rem → 6.5rem with tighter leading/tracking; expand
  container to 460px; add sage-green dot grid texture layer beneath the
  mouse-reactive glow for industrial depth
- capsules: upgrade all running dots (header chip + row indicators +
  status bar) from opacity-fade to ring ripple; apply --shadow-dialog
  to Launch and Snapshot dialogs
- keys: apply --shadow-dialog to all three dialogs
- audit: remove duplicate @keyframes fadeUp and iconFloat (redundant
  with app.css definitions, audit's fadeUp also subtly diverged)
- sidebar: active indicator bar taller and thicker (h-5 w-[3px] → h-6
  w-1); active bg more vivid (accent/12%); label font-medium →
  font-semibold; team dialog gets --shadow-dialog
This commit is contained in:
Rafeed M. Bhuiyan
2026-03-25 12:55:23 +06:00
parent d4eb24be7e
commit 2349f585ae
6 changed files with 56 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/routes/login/+page.svelte
View File

@ -117,10 +117,17 @@
class="relative hidden w-1/2 flex-col items-center justify-center overflow-hidden bg-[var(--color-bg-1)] lg:flex"
onmousemove={handleMouseMove}
>
<!-- Mouse-reactive radial glow -->
<!-- Dot grid texture — industrial depth layer -->
<div
class="pointer-events-none absolute inset-0 opacity-60"
style="background-image: radial-gradient(circle, rgba(94,140,88,0.09) 1px, transparent 1px); background-size: 24px 24px;"
aria-hidden="true"
></div>
<!-- Mouse-reactive radial glow — renders above dot grid -->
<div
class="pointer-events-none absolute inset-0"
style="background: radial-gradient(ellipse 55% 45% at {glowX}% {glowY}%, rgba(94, 140, 88, 0.14) 0%, transparent 70%)"
style="background: radial-gradient(ellipse 60% 50% at {glowX}% {glowY}%, rgba(94, 140, 88, 0.18) 0%, transparent 70%)"
aria-hidden="true"
></div>
@ -137,13 +144,13 @@
</span>
</div>
<!-- Tagline below logo -->
<!-- Tagline below logo — larger, more commanding -->
<div
class="relative z-10 mt-16 max-w-[360px] text-center"
class="relative z-10 mt-14 max-w-[460px] text-center"
style="animation: fadeUp 0.35s ease 0.1s both"
>
<h1
class="font-serif text-[5rem] leading-[1.1] tracking-[-0.04em] text-[var(--color-text-bright)]"
class="font-serif text-[6.5rem] leading-[0.95] tracking-[-0.06em] text-[var(--color-text-bright)]"
>
Scale Up.<br /><span class="text-[var(--color-accent-bright)]">Spin Out.</span>
</h1>
@ -151,7 +158,7 @@
<!-- Sub-tagline -->
<p
class="relative z-10 mt-12 font-mono text-ui uppercase tracking-[0.08em] text-[var(--color-text-tertiary)]"
class="relative z-10 mt-10 font-mono text-ui uppercase tracking-[0.1em] text-[var(--color-text-tertiary)]"
style="animation: fadeUp 0.35s ease 0.2s both"
>
Isolated VMs. Milliseconds to live.