admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: US-010 - Fix minor typography inconsistencies

Browse Source
This commit is contained in:
Andy Charlwood
2026-02-15 14:33:53 +00:00
parent 615198b080
commit 526ee7dd90
3 changed files with 42 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Ralph/progress.txt
+34
View File
@@ -28,6 +28,7 @@
- --bg-dashboard: #F0F5F4 (warm sage content background)
- --accent: #0D6E6E (teal primary)
- --accent-hover: #0A8080
- --accent-pressed: #085858
- --accent-light: rgba(10,128,128,0.08)
- --border: #D4E0DE (structural borders)
- --border-card: #E4EDEB (card/inner borders)
@@ -156,3 +157,36 @@
- The button has 18-space indentation vs 20-space for inputs — `replace_all` may not catch all instances if matching on indentation
- The spinner (`borderRadius: '50%'`) and status indicator dot should NOT be changed — they're circles, not card elements
---
## 2026-02-15 - US-009: Replace hardcoded colors with design tokens
- Replaced all hardcoded hex colors in LoginScreen.tsx with CSS custom property references (`var()` with fallbacks)
- Input text color: `#111827` → `var(--text-primary, #1A2B2A)`
- Cursor/caret color: `#0D6E6E` → `var(--accent, #0D6E6E)` (2 instances)
- Button backgrounds: `#0D6E6E` → `var(--accent)`, `#0A8080` → `var(--accent-hover)`, `#085858` → `var(--accent-pressed)`
- Spinner border/top: `#E4EDEB` → `var(--border-light)`, `#0D6E6E` → `var(--accent)`
- Input inactive borders: `#E4EDEB` → `var(--border-light)` (username + password fields)
- Card border: `#E4EDEB` → `var(--border-light)`
- Footer border: `#E4EDEB` → `var(--border-light)`
- Connection status colors: `#059669` → `var(--success)`, `#DC2626` → `var(--alert)` (dot bg + text)
- Focus ring: `ring-[#0D6E6E]/40` → `ring-accent/40` (Tailwind token)
- Added `--accent-pressed: #085858` token to `index.css` `:root` (completes the accent state trio)
- Files changed: `src/components/LoginScreen.tsx`, `src/index.css`
- **Learnings for future iterations:**
- `#FFFFFF` on button text is intentional for contrast — no `--text-on-accent` token exists; leave as hardcoded white
- `rgba(240, 245, 244, 0.7)` overlay bg is `--bg-dashboard` at 70% opacity — no token for this; leave as rgba
- Status dot glow `boxShadow` uses rgba variants of success/alert colors at 40% opacity — no token for these glow effects
- Tailwind config has `accent` and `accent-hover` color tokens, so `ring-accent/40` works in class names
- Always add fallback values in `var()` references (e.g., `var(--accent, #0D6E6E)`) for resilience
---
## 2026-02-15 - US-010: Fix minor typography inconsistencies
- Changed form label fontWeight from 500 to 600 (both Username and Password labels) to match dashboard card header weight convention
- Adjusted input text fontSize mid-value from `clamp(13px, 1.1vw, 15px)` to `clamp(13px, 1.2vw, 15px)` — renders ~14-15px on standard viewports
- Adjusted button text fontSize mid-value from `clamp(14px, 1.1vw, 16px)` to `clamp(14px, 1.2vw, 16px)` — renders ~15px on standard viewports
- Changed connection status indicator gap from 6px to 8px (matching dashboard CardHeader gap)
- Files changed: `src/components/LoginScreen.tsx`
- **Learnings for future iterations:**
- These are all subtle alignment tweaks — the clamp mid-value change from 1.1vw to 1.2vw shifts rendering by ~1px on 1280px viewports
- The label fontWeight 600 matches the dashboard's `CardHeader` convention (seen in `Card.tsx`)
- The connection indicator gap of 8px matches the standard icon-text gap used in dashboard card headers
---