feat: US-010 - Fix minor typography inconsistencies
This commit is contained in:
+2
-2
@@ -145,7 +145,7 @@
|
||||
"Typecheck passes"
|
||||
],
|
||||
"priority": 9,
|
||||
"passes": false,
|
||||
"passes": true,
|
||||
"notes": "Search LoginScreen.tsx for all hex color values (#xxxxxx) and check whether a corresponding CSS custom property exists in index.css. Some colors were already tokenized in the previous login rework (US-003 of previous run) — verify which ones are still hardcoded. The button has multiple color states (default, hover, pressed) — check all three."
|
||||
},
|
||||
{
|
||||
@@ -161,7 +161,7 @@
|
||||
"Typecheck passes"
|
||||
],
|
||||
"priority": 10,
|
||||
"passes": false,
|
||||
"passes": true,
|
||||
"notes": "These are small inline style tweaks in LoginScreen.tsx. The labels, inputs, and button already use clamp() for responsive sizing — just adjust the mid-values. The connection indicator gap is in the flex container styling near the bottom of the component."
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -280,7 +280,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
|
||||
display: 'block',
|
||||
fontFamily: "var(--font-ui)",
|
||||
fontSize: 'clamp(12px, 1vw, 14px)',
|
||||
fontWeight: 500,
|
||||
fontWeight: 600,
|
||||
color: 'var(--text-secondary, #5B7A78)',
|
||||
marginBottom: '6px',
|
||||
}}
|
||||
@@ -292,7 +292,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
|
||||
width: '100%',
|
||||
padding: '9px 11px',
|
||||
fontFamily: "'Geist Mono', 'Fira Code', monospace",
|
||||
fontSize: 'clamp(13px, 1.1vw, 15px)',
|
||||
fontSize: 'clamp(13px, 1.2vw, 15px)',
|
||||
backgroundColor: activeField === 'username' ? 'var(--surface, #FFFFFF)' : 'var(--bg-dashboard, #F0F5F4)',
|
||||
border: activeField === 'username' ? '1px solid var(--accent, #0D6E6E)' : '1px solid var(--border-light, #E4EDEB)',
|
||||
borderRadius: 'var(--radius-sm, 6px)',
|
||||
@@ -322,7 +322,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
|
||||
display: 'block',
|
||||
fontFamily: "var(--font-ui)",
|
||||
fontSize: 'clamp(12px, 1vw, 14px)',
|
||||
fontWeight: 500,
|
||||
fontWeight: 600,
|
||||
color: 'var(--text-secondary, #5B7A78)',
|
||||
marginBottom: '6px',
|
||||
}}
|
||||
@@ -334,7 +334,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
|
||||
width: '100%',
|
||||
padding: '9px 11px',
|
||||
fontFamily: "'Geist Mono', 'Fira Code', monospace",
|
||||
fontSize: 'clamp(13px, 1.1vw, 15px)',
|
||||
fontSize: 'clamp(13px, 1.2vw, 15px)',
|
||||
backgroundColor: activeField === 'password' ? 'var(--surface, #FFFFFF)' : 'var(--bg-dashboard, #F0F5F4)',
|
||||
border: activeField === 'password' ? '1px solid var(--accent, #0D6E6E)' : '1px solid var(--border-light, #E4EDEB)',
|
||||
borderRadius: 'var(--radius-sm, 6px)',
|
||||
@@ -370,7 +370,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
|
||||
width: '100%',
|
||||
padding: '10px 16px',
|
||||
fontFamily: "var(--font-ui)",
|
||||
fontSize: 'clamp(14px, 1.1vw, 16px)',
|
||||
fontSize: 'clamp(14px, 1.2vw, 16px)',
|
||||
fontWeight: 600,
|
||||
color: '#FFFFFF',
|
||||
backgroundColor: buttonBg,
|
||||
@@ -390,7 +390,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '6px',
|
||||
gap: '8px',
|
||||
marginTop: '4px',
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user