devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

feat: standardize input styling with tier system, add depth and admin features

Browse Source 
- Define 4 input tier CSS classes (input-standard, input-search, input-embedded, input-danger)
  in globals.css, migrating ~50 inputs across ~28 component files to use them
- Add subtle border and inset shadow to solid input tiers for resting-state visibility
- Fix focus ring clipping in settings panel scroll container
- Fix phantom Tailwind tokens (border-border-primary, placeholder-txt-muted)
- Add admin user management panel, storage management, and account deletion utilities
This commit is contained in:
Jannis Braun
2026-03-14 13:49:32 +01:00
parent afbc4b5e31
commit 836f0acef6
45 changed files with 1478 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/auth/LoginPage.tsx
+2 -2
View File
@@ -91,7 +91,7 @@ export function LoginPage() {
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="w-full px-3 py-2.5 bg-surface-input border-none rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary transition-all"
className="input-standard w-full py-2.5"
autoFocus
autoComplete="username"
/>
@@ -105,7 +105,7 @@ export function LoginPage() {
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-3 py-2.5 bg-surface-input border-none rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary transition-all"
className="input-standard w-full py-2.5"
autoComplete="current-password"
/>
</div>
packages/web/src/components/auth/RegisterPage.tsx
+4 -4
View File
@@ -257,7 +257,7 @@ export function RegisterPage() {
type="text"
value={username}
onChange={(e) => setUsername(e.target.value.toLowerCase())}
className="w-full px-3 py-2.5 bg-surface-input border-none rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary transition-all"
className="input-standard w-full py-2.5"
autoFocus
autoComplete="username"
/>
@@ -296,7 +296,7 @@ export function RegisterPage() {
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-3 py-2.5 bg-surface-input border-none rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary transition-all"
className="input-standard w-full py-2.5"
autoComplete="new-password"
/>
</div>
@@ -309,7 +309,7 @@ export function RegisterPage() {
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className="w-full px-3 py-2.5 bg-surface-input border-none rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary transition-all"
className="input-standard w-full py-2.5"
autoComplete="new-password"
/>
</div>
@@ -396,7 +396,7 @@ export function RegisterPage() {
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
placeholder={username.trim() || 'Display name'}
className="w-full px-3 py-2.5 bg-surface-input border-none rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary transition-all placeholder:text-txt-tertiary"
className="input-standard w-full py-2.5"
autoComplete="name"
/>
</div>