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:
2026-05-02 15:03:20 +03:00
parent e2802d83f2
commit 2aed9f5c8a
6 changed files with 123 additions and 26 deletions

View File

@@ -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>