resolutionflow/docs/plans/Frontend/COMPONENT_EXAMPLES.md

Component Migration Examples

Common Component Transformations

1. Card Component

BEFORE (Old Design):

<div className="bg-slate-900 border border-slate-800 rounded-lg p-6">
  <h3 className="text-slate-200">Title</h3>
  <p className="text-slate-400">Content</p>
</div>

AFTER (New Design):

<div className="bg-gradient-to-br from-white/[0.04] to-white/[0.01] border border-white/8 backdrop-blur-xl rounded-2xl p-6 hover:from-white/[0.06] hover:to-white/[0.02] hover:border-white/12 transition-all">
  <h3 className="text-white font-bold">Title</h3>
  <p className="text-white/40">Content</p>
</div>

---

2. Active/Highlighted Card

BEFORE:

<div className="bg-purple-900/20 border border-purple-700 rounded-lg p-8">
  {/* content */}
</div>

AFTER (Bright Glow):

<div className="bg-gradient-to-br from-white/[0.08] to-white/[0.04] border border-white/20 rounded-2xl p-8 shadow-[0_0_40px_rgba(255,255,255,0.1)]">
  {/* content */}
</div>

---

3. Icon in Card

BEFORE:

<div className="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center">
  <Icon className="w-5 h-5 text-white" />
</div>

AFTER (with subtle color):

<div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center">
  <Icon className="w-6 h-6 text-blue-400" />
</div>

---

4. Badge/Status

BEFORE:

<span className="px-3 py-1 bg-purple-900 text-purple-200 rounded-md text-sm">
  Admin
</span>

AFTER:

<div className="px-4 py-2 rounded-xl bg-white/10 border border-white/20">
  <span className="text-sm text-white font-semibold">Admin</span>
</div>

---

5. Primary Button

BEFORE:

<button className="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg">
  Click Me
</button>

AFTER:

<button className="px-6 py-3 bg-white text-black font-semibold rounded-xl hover:bg-white/90 transition-all hover:scale-105">
  Click Me
</button>

---

6. Secondary Button

BEFORE:

<button className="px-6 py-3 border border-slate-700 text-slate-300 hover:bg-slate-800 rounded-lg">
  Cancel
</button>

AFTER:

<button className="px-6 py-3 bg-white/10 border border-white/20 text-white font-medium rounded-xl hover:bg-white/20 transition-all">
  Cancel
</button>

---

7. Input/Search

BEFORE:

<input 
  className="bg-slate-800 border border-slate-700 text-white placeholder-slate-400 rounded-lg px-4 py-3"
  placeholder="Search..."
/>

AFTER:

<div className="bg-gradient-to-br from-white/[0.04] to-white/[0.01] border border-white/8 backdrop-blur-xl rounded-2xl p-1">
  <div className="flex items-center bg-black/50 rounded-xl">
    <svg className="ml-5 w-5 h-5 text-blue-400">{/* search icon */}</svg>
    <input 
      className="flex-1 bg-transparent py-4 px-4 text-white placeholder:text-white/30 focus:outline-none"
      placeholder="Search..."
    />
  </div>
</div>

---

8. Progress Bar

BEFORE:

<div className="h-2 bg-slate-800 rounded-full overflow-hidden">
  <div className="h-full bg-purple-600 rounded-full" style={{width: '60%'}}></div>
</div>

AFTER:

<div className="h-2 bg-white/10 rounded-full overflow-hidden">
  <div className="h-full bg-white rounded-full" style={{width: '60%'}}></div>
</div>

---

9. Stat Card with Trend

BEFORE:

<div className="bg-slate-900 border border-slate-800 rounded-lg p-6">
  <div className="text-slate-400 text-sm">Active Users</div>
  <div className="text-2xl font-bold text-white">1,234</div>
</div>

AFTER:

<div className="bg-[rgba(20,20,25,0.5)] border border-white/[0.06] backdrop-blur-xl rounded-2xl p-6 hover:scale-105 transition-transform">
  <div className="text-sm text-white/40 mb-2 font-medium">Active Users</div>
  <div className="text-4xl font-bold text-white mb-1">1,234</div>
  <div className="flex items-center gap-1 text-xs text-emerald-400 font-medium">
    <svg className="w-3 h-3">{/* up arrow */}</svg>
    12% vs last week
  </div>
</div>

---

10. Section Header

BEFORE:

<div className="mb-8">
  <h2 className="text-2xl font-bold text-slate-100">Recent Trees</h2>
  <p className="text-slate-400 mt-1">Your recently accessed decision trees</p>
</div>

AFTER:

<div className="flex items-center justify-between mb-6">
  <h2 className="text-2xl font-bold text-white">Recent Trees</h2>
  <button className="text-sm text-white/60 hover:text-white font-medium transition-colors">
    View all →
  </button>
</div>

---

Icon Color Guidelines

AI/Automation Icons

<svg className="w-5 h-5 text-cyan-400">{/* sparkle/star */}</svg>

Search Icons

<svg className="w-5 h-5 text-blue-400">{/* magnifying glass */}</svg>

Active/Playing State

<svg className="w-6 h-6 text-violet-400">{/* play button */}</svg>

Network Category

<svg className="w-6 h-6 text-blue-400">{/* wifi/network */}</svg>

Printer Category

<svg className="w-6 h-6 text-indigo-400">{/* printer */}</svg>

Email Category

<svg className="w-6 h-6 text-cyan-400">{/* envelope */}</svg>

Success Indicators

<svg className="w-4 h-4 text-emerald-400">{/* check/arrow up */}</svg>

Error Indicators

<svg className="w-4 h-4 text-red-400">{/* x/arrow down */}</svg>

Time/Clock (NO COLOR - keep gray)

<svg className="w-4 h-4 text-white/30">{/* clock */}</svg>

---

Common Mistakes to Avoid

❌ DON'T:

• Use colored backgrounds on cards
• Use gradient text
• Color ALL icons
• Use slate-900, slate-800 (use white/opacity instead)
• Use purple gradients anywhere

✅ DO:

• Use white/black with opacity for all backgrounds
• Keep text white (with varying opacity)
• Only color functional icons
• Use backdrop-blur on cards
• Use white for primary buttons

---

Quick Reference: Opacity Levels

Text:

• Primary: text-white
• Secondary: text-white/70
• Tertiary: text-white/40
• Placeholder: text-white/30

Backgrounds:

• Card: bg-white/[0.04] to bg-white/[0.01]
• Card hover: bg-white/[0.06] to bg-white/[0.02]
• Active card: bg-white/[0.08] to bg-white/[0.04]
• Button secondary: bg-white/10
• Badge: bg-white/10

Borders:

• Subtle: border-white/8
• Normal: border-white/10
• Prominent: border-white/20
• Active: border-white/30