Phase 3: Give Lepo its own look - #4
Merged
Merged
Conversation
Replace Pinterest-copied design system with Lepo's monitoring-focused identity: - Dark-first, information-dense, cool-neutral palette - Sky blue (#38bdf8) as the single interactive accent - Semantic status colors (green/red/amber) for CI and rate limits - Tabular numerics, tight spacing, 44px table rows - Light mode defined as a surface-hierarchy inversion - Logo/favicon SVG documented
Replace Pinterest-copied palette with Lepo's dark-first identity: - Dark mode is default (:root), light mode inverts via [data-theme='light'] - Sky blue (#38bdf8) as primary accent, replacing Pinterest Red - Cool-neutral surface hierarchy (canvas/surface/raised/hover) - Semantic status colors (green/red/amber) for CI and rate limits - Tighter spacing (4px base), smaller radius (4px/8px/12px) - Tabular numerics on all numeric columns - Inter font with mono fallback for code/numbers - Zero hardcoded hex in component styles (all via tokens)
- Replace simple red-square favicon with full Lepo brand mark SVG - Nav brand uses <img> tag with the SVG logo instead of CSS pseudo-element - Login page shows the logo above the title
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Revert CSS to original warm-cream palette (light mode default) - Keep tokenized structure (all colors via CSS custom properties) - Fix logo: inline SVG instead of img tag (Trunk hashes assets) - Login page shows inline SVG logo - Update DESIGN.md to document warm-tone identity
SVG presentation attributes have type-selector specificity, so class-based CSS rules override them without !important. In dark mode: body fill → --colors-secondary-bg, strokes → --colors-ink.
- Summary strip: 4th skeleton uses summary-freshness (not summary-value) - Table skeleton: add ci-col, center, actions classes to td - Card skeleton: mirror 3-section layout (head, counts, ci) - Repo detail: skeleton rows during initial load instead of blank - Token form + load-more buttons: spinner animation while loading - Skeleton rows: pointer-events none, proper flex layout
Root causes: 1. Issues effect cleared items on every tab switch → skeleton flash 2. Pulls reset effect destroyed cached data when switching tabs 3. fetch closures always extended items → filter changes appended instead of replaced 4. issues_fetched/pulls_fetched were dead code Fixes: - Don't clear items on tab switch or filter change (old data stays visible) - Replace items on fresh fetch (next_url.is_none()), extend on load-more - Remove dead issues_fetched and pulls_fetched signals - Remove pulls reset effect (data stays cached across tab switches) - Use ref borrow for next_url to avoid partial-move error
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replace Pinterest-copied design system with Lepo's own dark-first monitoring identity.
Changes
Commit 1: Rewrite DESIGN.md
Commit 2: Retune CSS tokens
Commit 3: Add SVG favicon and logo
Commit 4: Update ROADMAP
CI