Skip to content

REDESIGN_PLAN.md

Latest commit

 

History

History
361 lines (309 loc) · 12.8 KB

REDESIGN_PLAN.md

File metadata and controls

361 lines (309 loc) · 12.8 KB

LocalWalletPWA - Minimal Luxury Redesign Plan

Design Direction

Style: Minimal Luxury / Premium Dark Inspiration: Apple Wallet, Apple Card app, Amex Platinum Theme: Deep dark with gold/champagne accents and subtle vibrant touches

Color Palette

Base Colors

Background Primary:    #050505  (Near black)
Background Secondary:  #0A0A0A  (Soft black)
Background Elevated:   #141414  (Card backgrounds)
Background Subtle:     #1A1A1A  (Input fields)

Accent Colors

Gold Primary:          #D4AF37  (Main accent - buttons, highlights)
Gold Light:            #F4E4BC  (Hover states, subtle accents)
Gold Muted:            #8B7355  (Disabled states)
Champagne:             #F7E7CE  (Text accents)

Vibrant Touches (Sparingly)

Success:               #34C759  (iOS green)
Error:                 #FF3B30  (iOS red)
Info:                  #5E5CE6  (Soft purple)

Text Colors

Text Primary:          #FFFFFF  (Headings)
Text Secondary:        #A1A1A6  (Body text)
Text Muted:            #636366  (Placeholders)
Text Gold:             #D4AF37  (Accent text)

Typography

Font Stack

font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Scale

Display:    32px / 700 weight  (Screen titles)
Title:      24px / 600 weight  (Section headers)
Headline:   20px / 600 weight  (Card titles)
Body:       17px / 400 weight  (Regular text)
Caption:    13px / 500 weight  (Labels)
Micro:      11px / 600 weight  (Tags, badges)

Letter Spacing

Headings:   -0.02em (tight)
Body:       0 (normal)
Caps:       0.08em (wide)

Component Design Specs

Cards (WalletCard)

  • Background: Subtle gradient (#141414 to #1A1A1A)
  • Border: 1px solid rgba(212, 175, 55, 0.1) (faint gold)
  • Border-radius: 20px
  • Shadow: 0 8px 32px rgba(0, 0, 0, 0.4)
  • Hover: Gold shimmer edge animation
  • Aspect ratio: 1.586:1 (credit card)

Buttons

Primary (Gold):

  • Background: linear-gradient(135deg, #D4AF37, #B8962E)
  • Text: #050505 (dark)
  • Border-radius: 14px
  • Height: 56px
  • Shadow: 0 4px 16px rgba(212, 175, 55, 0.3)

Secondary (Outline):

  • Background: transparent
  • Border: 1px solid rgba(255, 255, 255, 0.15)
  • Text: #FFFFFF
  • Border-radius: 14px

Ghost:

  • Background: rgba(255, 255, 255, 0.05)
  • Text: #A1A1A6
  • Border-radius: 12px

Input Fields

  • Background: #1A1A1A
  • Border: 1px solid rgba(255, 255, 255, 0.08)
  • Border-radius: 14px
  • Height: 56px
  • Focus: Border becomes rgba(212, 175, 55, 0.5)
  • Padding: 16px

Headers

  • Background: rgba(5, 5, 5, 0.85)
  • Backdrop-filter: blur(20px)
  • Border-bottom: 1px solid rgba(255, 255, 255, 0.05)

Screen Redesigns

Dashboard (Home)

┌─────────────────────────────────┐
│  ← [subtle]     WALLET    [⚙️] │  Header with centered title
│─────────────────────────────────│
│                                 │
│  ┌─────────────────────────┐   │  Search bar (subtle, gold focus)
│  │ 🔍 Search cards...      │   │
│  └─────────────────────────┘   │
│                                 │
│  YOUR CARDS                     │  Section label (gold, caps)
│                                 │
│  ┌─────────────────────────┐   │
│  │ ████████████████████████│   │  Card with gold edge glow
│  │ █  IKEA               █ │   │
│  │ █                     █ │   │
│  │ █  •••• 4532          █ │   │
│  └─────────────────────────┘   │
│                                 │
│  ┌─────────────────────────┐   │
│  │ ████████████████████████│   │  Stacked cards
│  └─────────────────────────┘   │
│                                 │
│            [  ＋  ]             │  Gold FAB
└─────────────────────────────────┘

Empty State:

  • Elegant illustration (thin line art)
  • "Your wallet is empty" in light text
  • "Add your first card" with gold accent
  • Subtle gold border dashed rectangle

Add Card

┌─────────────────────────────────┐
│  ← Back       ADD CARD          │
│─────────────────────────────────│
│                                 │
│  ┌─────────────────────────┐   │  Live preview card
│  │                         │   │  (gold shimmer edge)
│  │   Store Name            │   │
│  │                         │   │
│  │   ••••••••              │   │
│  └─────────────────────────┘   │
│                                 │
│  STORE NAME                     │  Gold label
│  ┌─────────────────────────┐   │
│  │ Enter store name...     │   │
│  └─────────────────────────┘   │
│                                 │
│  CARD NUMBER                    │
│  ┌─────────────────────────┐   │
│  │ Enter or scan       [📷]│   │
│  └─────────────────────────┘   │
│                                 │
│  BARCODE FORMAT                 │
│  ┌─────────────────────────┐   │
│  │ Auto-detect          ▼  │   │
│  └─────────────────────────┘   │
│                                 │
│  ┌─────────────────────────┐   │
│  │      ADD TO WALLET      │   │  Gold gradient button
│  └─────────────────────────┘   │
└─────────────────────────────────┘

Settings

┌─────────────────────────────────┐
│  ← Back      SETTINGS           │
│─────────────────────────────────│
│                                 │
│  ┌──────────┐  ┌──────────┐    │  Stats cards
│  │    12    │  │    ✓     │    │  (subtle gold numbers)
│  │  CARDS   │  │ OFFLINE  │    │
│  └──────────┘  └──────────┘    │
│                                 │
│  DATA                           │  Section label
│  ┌─────────────────────────┐   │
│  │ ↑  Export Cards       → │   │
│  │─────────────────────────│   │
│  │ ↓  Import Cards       → │   │
│  └─────────────────────────┘   │
│                                 │
│  DANGER ZONE                    │  Red label
│  ┌─────────────────────────┐   │
│  │ 🗑  Delete All Data     │   │  Red text
│  └─────────────────────────┘   │
│                                 │
│          ♥ Made with love       │
│             v1.0.0              │
└─────────────────────────────────┘

Scanner (Fixed)

┌─────────────────────────────────┐
│  [✕]    SCAN BARCODE            │  Semi-transparent header
│─────────────────────────────────│
│                                 │
│  █████████████████████████████  │
│  █                           █  │
│  █   ┌─────────────────┐    █  │  Camera feed
│  █   │                 │    █  │
│  █   │   [viewfinder]  │    █  │  Gold corner brackets
│  █   │      ═══        │    █  │  Gold scan line
│  █   │                 │    █  │
│  █   └─────────────────┘    █  │
│  █                           █  │
│  █████████████████████████████  │
│                                 │
│  Position barcode in frame      │  Helper text
│                                 │
│  ┌─────────────────────────┐   │
│  │    ENTER MANUALLY       │   │  Secondary button
│  └─────────────────────────┘   │
└─────────────────────────────────┘

Scanner Fix Strategy

Problem

html5-qrcode has issues on iOS Safari:

  • Video element doesn't render properly
  • Camera stream gets lost
  • Black screen after permission granted

Solution: Hybrid Approach

  1. Check for native BarcodeDetector API (Safari 16.4+, Chrome)
  2. If available: Use native API with getUserMedia directly
  3. If not: Fall back to html5-qrcode with better error handling
// Pseudocode
async function initScanner() {
  if ('BarcodeDetector' in window) {
    // Use native API
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: 'environment' }
    });
    videoElement.srcObject = stream;

    const detector = new BarcodeDetector({ formats: ['ean_13', 'code_128', ...] });
    // Scan loop with requestAnimationFrame
  } else {
    // Fallback to html5-qrcode with improved config
  }
}

Additional iOS Fixes

  • Add playsinline attribute to video
  • Use webkit-playsinline for older iOS
  • Handle visibilitychange event to restart camera
  • Add explicit video dimensions (100vw x 100vh)

Implementation Phases

Phase 1: Foundation (Day 1)

  • Update theme.ts with new color palette
  • Update index.css with new base styles
  • Create gold gradient utilities
  • Fix Scanner with native BarcodeDetector

Phase 2: Core Components (Day 1-2)

  • Redesign WalletCard component
  • Redesign WalletCardPreview
  • Create new button variants
  • Create new input field styles

Phase 3: Screens (Day 2-3)

  • Redesign Dashboard
  • Redesign AddCard
  • Redesign Settings
  • Redesign CardDetail
  • Redesign Scanner UI

Phase 4: Polish (Day 3)

  • Add subtle animations
  • Add gold shimmer effects
  • Test on iPhone 11 Pro
  • Performance optimization
  • Final spacing adjustments

Files to Modify

File Changes
src/lib/theme.ts New color palette, typography scale
src/index.css Base styles, utilities, animations
src/components/WalletCard.tsx New card design with gold accents
src/views/Dashboard.tsx Complete visual overhaul
src/views/AddCard.tsx New form styling
src/views/Settings.tsx New settings layout
src/views/CardDetail.tsx New detail view design
src/views/Scanner.tsx Native BarcodeDetector + new UI

Animations

Card Hover/Press

transform: scale(0.98);
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15);
transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);

Gold Shimmer Edge

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
border-image: linear-gradient(90deg, transparent, #D4AF37, transparent) 1;
animation: shimmer 3s infinite;

Button Press

transform: scale(0.96);
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);

Scan Line

@keyframes scanline {
  0%, 100% { top: 10%; opacity: 0.5; }
  50% { top: 90%; opacity: 1; }
}
background: linear-gradient(90deg, transparent, #D4AF37, transparent);
animation: scanline 2s ease-in-out infinite;

Ready to implement when approved.