pjandro/OmniRoute
1
0
Fork 0
mirror of https://github.com/diegosouzapw/OmniRoute.git synced 2026-07-31 04:12:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

style(dashboard): shrink identity grid cell 46px -> 32px (~30% smaller) (#4143)

Browse Source 
Owner found the 46px graph-paper cells a touch large for the dashboard
layout; tightening --grid-size to 32px (a ~30% reduction). Mirrors the
matching change on the marketing site so the two stay identical.

Guard test + design.md updated. Build verified: --grid-size compiles to 32px.
This commit is contained in:
Diego Rodrigues de Sa e Souza
2026-06-18 02:27:05 -03:00
committed by GitHub
parent 9f1d5a0763
commit 3beba2d77f
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
design.md
View File

@@ -51,7 +51,7 @@ Every brand color and surface already matches the site **by value** (only the na
| Gap | Site has | Dashboard | Action |
| ----------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------- | ---------------------- |
| **Grid wallpaper** | `body::before` graph-paper, `--grid-line`, `--grid-size 46px`, `--section-alt` | **✅ added (Phase 1)** | **Part A** |
| **Grid wallpaper** | `body::before` graph-paper, `--grid-line`, `--grid-size 32px`, `--section-alt` | **✅ added (Phase 1)** | **Part A** |
| **Radius scale** | `--radius 14px`, `--radius-sm 9px` | `--radius 14px` added; `-sm` + component repoint pending | **Part B / Phase 2** |
| **Brand gradient** | `--grad-brand 135deg primary→accent-3` | **✅ token added (Phase 1)**; consumed in Phase 2 | **Part B** |
| **Nested surface** | `--surface-2 #1c2230` | **✅ added (Phase 1)** | **Part B** |
@@ -100,7 +100,7 @@ body::before {
/* light — grid opacity tuned up from the site's 0.045 so the wallpaper is
actually visible on the dense dashboard (cards/chrome cover most of the viewport) */
--grid-line: rgba(0, 0, 0, 0.07);
--grid-size: 46px;
--grid-size: 32px;
--section-alt: rgba(0, 0, 0, 0.022);
}
.dark {
@@ -185,7 +185,7 @@ Each phase: `npm run lint` + `npm run typecheck:core` + a visual pass.
## 8. Open decisions (recommendations)
- **D1 — Button primary:** keep red→red or switch to **red→violet `--grad-brand`**? Rec: **red→violet** (Phase 2).
- **D2 — Grid line color:** **neutral** (site style) — chosen — vs brand-red. Size **46px**.
- **D2 — Grid line color:** **neutral** (site style) — chosen — vs brand-red. Size **32px** (shrunk ~30% from the original 46px on owner feedback — 46px cells read too large on the dashboard layout).
- **D3 — Chrome vibrancy:** sidebar/header **solid** — chosen.
- **D4 — Auth/login grid:** soften `login/page.tsx` wrappers (Phase 2). Rec: yes.
- **D5 — Landing page:** leave animated splash as-is. Chosen.

2
src/app/globals.css
View File

@@ -92,7 +92,7 @@
Opacity tuned up from the site's 0.045 so the wallpaper is actually visible on
the dense dashboard (cards/chrome cover most of the viewport). */
--grid-line: rgba(0, 0, 0, 0.07);
--grid-size: 46px;
--grid-size: 32px;
--section-alt: rgba(0, 0, 0, 0.022);
/* Identity tokens mirrored from the site. Definitions only in this phase —

4
tests/unit/design-grid-background.test.ts
View File

@@ -18,8 +18,8 @@ test("globals.css defines the grid wallpaper tokens for both themes", () => {
assert.match(globalsCss, /--grid-line:\s*rgba\(0,\s*0,\s*0,\s*0\.07\)/);
// dark
assert.match(globalsCss, /--grid-line:\s*rgba\(255,\s*255,\s*255,\s*0\.06\)/);
// size + alternating-section overlay
assert.match(globalsCss, /--grid-size:\s*46px/);
// size (shrunk ~30% from 46px for a tighter grid) + alternating-section overlay
assert.match(globalsCss, /--grid-size:\s*32px/);
assert.match(globalsCss, /--section-alt:\s*rgba\(0,\s*0,\s*0,\s*0\.022\)/);
assert.match(globalsCss, /--section-alt:\s*rgba\(255,\s*255,\s*255,\s*0\.018\)/);
});