refactor(ui): improve UI/UX design and spacing
- Increase card padding and gaps for better visual hierarchy - Add hover lift effect to cards with smooth transitions - Improve typography with larger headings and better line-height - Darken meta text colors for better readability - Add checkbox styling with accent color - Make tags interactive with hover effects - Add mobile responsive styles for forms and footer - Replace Unicode arrows with SVG icons - Improve focus styles for accessibility - Increase badge padding and font-weight - Add subtle shadow to cards by default
This commit is contained in:
@@ -15,15 +15,15 @@
|
||||
type="button"
|
||||
class="theme-toggle"
|
||||
data-testid="theme-toggle"
|
||||
aria-label="Toggle theme"
|
||||
title="Toggle theme"
|
||||
aria-label="Toggle dark mode"
|
||||
title="Toggle dark mode"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="theme-light-icon" style="display: none;">
|
||||
<path d="M10 2v2M10 16v2M4.22 4.22l1.42 1.42M14.36 14.36l1.42 1.42M2 10h2M16 10h2M4.22 15.78l1.42-1.42M14.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="10" cy="10" r="4" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M10 2v2M10 16v2M4.22 4.22l1.42 1.42M14.36 14.36l1.42 1.42M2 10h2M16 10h2M4.22 15.78l1.42-1.42M14.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="10" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="theme-dark-icon" style="display: none;">
|
||||
<path d="M18 10.79A9 9 0 1 1 9.21 2 7 7 0 0 0 18 10.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.293 13.293A8 8 0 116.707 2.707a8.003 8.003 0 0010.586 10.586z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user