3.4 KiB
Plan: Fix Add-on Card Visibility & Styling
Date: 2026-07-28
Status: Ready for implementation
Ref: docs/UI_STANDARDS.md Section 6
Problem
The add-on cards in SubscriptionPlansView.vue use glass/dark-themed classes that make them invisible against the garage-bg.png background. The text is white/transparent on a semi-transparent emerald glass bg → completely unreadable.
Target
Align add-on cards with the standard card pattern used by base plan cards (BaseCard.vue) and Finance cards (FinanceMainView.vue), but with a green header to differentiate them.
Changes
File: SubscriptionPlansView.vue
The add-on card template currently at lines ~122-195 needs to be rewritten with solid white card styling:
Add-on card wrapper (selected):
bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden border-emerald-500 ring-1 ring-emerald-500/50 transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl
Add-on card wrapper (unselected):
bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden border-slate-200 transition-all duration-300 hover:border-slate-400 hover:-translate-y-2 hover:shadow-2xl
Change summary:
- Replace the entire add-on card
<div>inner structure to include a green gradient header bar - Change from dark glass classes to white solid classes
- Update stat badges from
bg-white/10 text-white/50tobg-slate-50 text-slate-700 - Update toggle button (unselected) from
bg-white/10 text-white/80tobg-slate-100 text-slate-700 border border-slate-200 - Add
flex flex-col h-fullstructure inside the card body
File: No other files need changes
The PlanDetailsModal already has solid white styling and was not affected.
Tailwind Classes Used
| Purpose | Classes |
|---|---|
| Card wrapper | bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden |
| Border (unselected) | border-slate-200 |
| Border (selected) | border-emerald-500 ring-1 ring-emerald-500/50 |
| Hover | transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl |
| Header bar | h-12 bg-gradient-to-r from-emerald-600 to-emerald-700 shrink-0 flex items-center px-4 |
| Header text | text-white font-bold text-sm tracking-wide |
| Body | p-4 flex flex-col h-full text-slate-800 |
| Price (large) | text-xl font-bold text-slate-900 |
| Price (small) | text-slate-500 text-xs |
| Stat badge | bg-slate-50 rounded-lg p-2 text-center |
| Stat number | text-base font-bold text-slate-900 |
| Stat label | text-[10px] text-slate-500 mt-0.5 uppercase tracking-wider |
| Toggle (selected) | w-full py-2 rounded-xl text-sm font-semibold bg-emerald-600 hover:bg-emerald-700 text-white |
| Toggle (unselected) | w-full py-2 rounded-xl text-sm font-semibold bg-slate-100 hover:bg-emerald-50 text-slate-700 hover:text-emerald-700 border border-slate-200 hover:border-emerald-300 |
| Cart summary | Stays on dark bg (above add-on grid) — bg-white/10 backdrop-blur-sm border border-white/20 is fine |
Result
After fix:
- Add-on cards will have solid white backgrounds — readable on any background
- Green emerald headers visually distinguish them from base plan cards (dark blue headers)
- Same hover animation as all other cards
- Toggle buttons are recognizable as interactive elements (solid bg vs transparent)