Polish pass — consistency, a11y, theme correctness

- Fix bg-white toggle thumbs in Settings (broke on dark themes)
- Eliminate 2px layout shift when switching Media feed tabs
- Unify "Follow"/"Mute" capitalization in NoteCard context menu
- Replace ASCII "..." with unicode ellipsis across compose/search/article
- Add rounded-sm to dropdowns, emoji picker, post/reply buttons
- Add aria-labels to sidebar toggle and onboarding copy buttons
- Add role=tablist/tab/aria-selected to login mode tabs
- Replace inline width/height styles with Tailwind w-16 h-16 in ProfileView
- Replace inline transform style with rotate-90 class in SettingsView
- Unify sidebar active state opacity (bg-accent/8 → bg-accent/10)
- Pad sidebar badges with py-0.5 for consistent pill height
- Match thread reply button sizing to compose post button
- Use var(--font-reading) on non-zen article title for consistency
- Format 'saved Xs ago' as minutes/hours after 60s
- Unify expand chevron to ▶ + rotate-90 pattern
- PollWidget: transition-all → transition-colors (no layout animation)
- Remove cryptic 'Ctrl+Enter' hint from compose and thread reply
This commit is contained in:
Jure
2026-04-09 13:32:59 +02:00
parent acd5a5979b
commit d134702da7
15 changed files with 49 additions and 35 deletions
+5 -3
View File
@@ -46,6 +46,7 @@ export function Sidebar() {
<button
onClick={toggleSidebar}
title="Expand sidebar"
aria-label="Expand sidebar"
className="w-full flex items-center justify-center text-text-dim hover:text-accent transition-colors"
>
<span className="text-[13px]"></span>
@@ -60,6 +61,7 @@ export function Sidebar() {
<button
onClick={toggleSidebar}
title="Collapse sidebar"
aria-label="Collapse sidebar"
className="text-text-dim hover:text-accent transition-colors px-1"
>
<span className="text-[13px]"></span>
@@ -89,7 +91,7 @@ export function Sidebar() {
</span>
{!c && <span>write article</span>}
{!c && draftCount > 0 && (
<span className="ml-auto text-[10px] bg-accent/20 text-accent px-1 rounded-sm">{draftCount}</span>
<span className="ml-auto text-[10px] bg-accent/20 text-accent px-1.5 py-0.5 rounded-sm">{draftCount}</span>
)}
</button>
)}
@@ -103,7 +105,7 @@ export function Sidebar() {
title={c ? item.label : undefined}
className={`w-full text-left px-3 py-1.5 flex items-center gap-2 text-[12px] transition-colors ${
currentView === item.id
? "text-accent bg-accent/8"
? "text-accent bg-accent/10"
: "text-text-muted hover:text-text hover:bg-bg-hover"
}`}
>
@@ -115,7 +117,7 @@ export function Sidebar() {
</span>
{!c && <span>{item.label}</span>}
{!c && badge > 0 && (
<span className="ml-auto text-[10px] bg-accent/20 text-accent px-1 rounded-sm">{badge}</span>
<span className="ml-auto text-[10px] bg-accent/20 text-accent px-1.5 py-0.5 rounded-sm">{badge}</span>
)}
</button>
);