Extract reusable UI components for repeated style patterns #21

New issue

Open

opened 2026-03-23 01:57:35 +01:00 by myrmidex · 0 comments

myrmidex commented

2026-03-23 01:57:35 +01:00

Owner

There's significant style duplication across the scenario page, particularly:

Buttons: Multiple raw <button> elements with repeated 80s-theme classes (border-2 border-red-500 bg-black px-6 py-2 text-xs font-mono font-bold uppercase tracking-wider text-red-500 hover:bg-red-500 hover:text-black transition-colors)
Form inputs: Income input, modal inputs all share the same base styling
Selects: Modal selects duplicate styling
Modal containers: Create and Edit modals share identical overlay + panel structure

Extract these into reusable components (or extend existing shadcn/ui components with 80s theme variants):

Button — primary, secondary, danger variants
Input — themed input with consistent styling
Select — themed select dropdown
Modal / Dialog — shared overlay + panel wrapper

This is a UI-only refactor — no behavior changes.

There's significant style duplication across the scenario page, particularly: - **Buttons**: Multiple raw `<button>` elements with repeated 80s-theme classes (`border-2 border-red-500 bg-black px-6 py-2 text-xs font-mono font-bold uppercase tracking-wider text-red-500 hover:bg-red-500 hover:text-black transition-colors`) - **Form inputs**: Income input, modal inputs all share the same base styling - **Selects**: Modal selects duplicate styling - **Modal containers**: Create and Edit modals share identical overlay + panel structure Extract these into reusable components (or extend existing shadcn/ui components with 80s theme variants): - `Button` — primary, secondary, danger variants - `Input` — themed input with consistent styling - `Select` — themed select dropdown - `Modal` / `Dialog` — shared overlay + panel wrapper This is a UI-only refactor — no behavior changes.