From f77e36d9f0eb4405db46a7972738773802a8d646 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Thu, 16 Apr 2026 15:45:37 +0200
Subject: feat: refactor homepage buttons to use btn component classes

- Update index.html to use .btn .btn-primary .btn-lg and .btn .btn-outline .btn-lg
- Update CLAUDE.md documentation
- Update settings.local.json with additional permissions

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 COMPONENT-TEST.md | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 COMPONENT-TEST.md

(limited to 'COMPONENT-TEST.md')

diff --git a/COMPONENT-TEST.md b/COMPONENT-TEST.md
new file mode 100644
index 0000000..3ffcb9c
--- /dev/null
+++ b/COMPONENT-TEST.md
@@ -0,0 +1,104 @@
+# Button & Badge Component Test
+
+## Buttons
+
+### Primary Button
+```html
+<button class="btn btn-primary">Primary Action</button>
+<button class="btn btn-primary" disabled>Disabled</button>
+```
+
+### Secondary Button
+```html
+<button class="btn btn-secondary">Secondary Action</button>
+<button class="btn btn-secondary" disabled>Disabled</button>
+```
+
+### Outline Button
+```html
+<a href="#" class="btn btn-outline">Outline Button</a>
+```
+
+### Sizes
+```html
+<button class="btn btn-sm">Small Button</button>
+<button class="btn">Normal Button</button>
+<button class="btn btn-lg">Large Button</button>
+```
+
+### Icon Button
+```html
+<button class="btn btn-icon" aria-label="Close">
+  <i data-feather="x"></i>
+</button>
+```
+
+### With Icon
+```html
+<a href="#" class="btn">
+  Read More
+  <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+</a>
+```
+
+## Badges
+
+### Article Type Badges
+```html
+<span class="badge badge-tech">Tech</span>
+<span class="badge badge-life">Life</span>
+<span class="badge badge-quote">Quote</span>
+<span class="badge badge-link">Link</span>
+<span class="badge badge-photo">Photo</span>
+```
+
+### Pinned Badge
+```html
+<span class="badge badge-life">📌 PINNED</span>
+```
+
+## Testing Checklist
+
+### Visual Testing
+- [ ] Buttons render with purple accent background
+- [ ] Buttons have white text
+- [ ] Buttons have rounded corners
+- [ ] Secondary buttons show green/emerald background
+- [ ] Outline buttons have border but transparent background
+- [ ] Button sizes scale correctly (sm, normal, lg)
+- [ ] Icon buttons are circular
+- [ ] Badges show with subtle background + colored text
+- [ ] All 5 type badges (tech, life, quote, link, photo) display correctly
+
+### Interactive Testing
+- [ ] Buttons lift on hover (translateY -1px)
+- [ ] Buttons opacity changes on hover (0.85)
+- [ ] Buttons opacity changes on active (0.75)
+- [ ] Buttons return to normal opacity on release
+- [ ] Focus states show ring around button
+- [ ] Disabled buttons are greyed out (0.5 opacity)
+- [ ] Disabled buttons don't respond to hover
+- [ ] Badges have slight background change on hover
+
+### Dark/Light Mode Testing
+- [ ] Dark mode: Primary button purple on dark bg ✓
+- [ ] Dark mode: Secondary button green on dark bg ✓
+- [ ] Light mode: Primary button darker purple ✓
+- [ ] Light mode: Secondary button green/emerald ✓
+- [ ] Light mode: All text readable on button backgrounds ✓
+- [ ] Light mode: Badge text readable ✓
+
+### Responsive Testing
+- [ ] Buttons stack vertically on mobile
+- [ ] Button text doesn't wrap or overflow
+- [ ] Icon buttons stay circular at all sizes
+- [ ] Badge text doesn't wrap
+
+### Accessibility Testing
+- [ ] Button hover state clear and visible
+- [ ] Focus ring visible (2px ring offset 2px)
+- [ ] Disabled buttons clearly appear inactive
+- [ ] Icon buttons have aria-label
+- [ ] All buttons keyboard accessible (Tab, Enter)
+- [ ] Focus order logical
+- [ ] High contrast maintained in all states
-- 
cgit v1.2.3