From 60c299ca47fd1f50f0651e5f6f8f7e38263dd51d Mon Sep 17 00:00:00 2001
From: Darius Kassi <kassidarius@gmail.com>
Date: Tue, 13 Jan 2026 07:14:39 +0000
Subject: [PATCH] style: refactor referral screen to use theme colors

---
 .../components/referrals/referral-stats.tsx   | 44 +++++++--------
 .../src/components/referrals/share-card.tsx   | 54 +++++++++----------
 .../src/routes/_auth/app/referrals.tsx        | 14 ++---
 tasks/prd-referral-color-refactor.md          | 42 +++++++++++++++
 tasks/tasks-referral-color-refactor.md        | 29 ++++++++++
 5 files changed, 127 insertions(+), 56 deletions(-)
 create mode 100644 tasks/prd-referral-color-refactor.md
 create mode 100644 tasks/tasks-referral-color-refactor.md

diff --git a/apps/user-application/src/components/referrals/referral-stats.tsx b/apps/user-application/src/components/referrals/referral-stats.tsx
index 3002479..e2446a2 100644
--- a/apps/user-application/src/components/referrals/referral-stats.tsx
+++ b/apps/user-application/src/components/referrals/referral-stats.tsx
@@ -31,40 +31,40 @@ export function ReferralStats({ className }: ReferralStatsProps) {
       label: 'Total parrainages',
       value: stats?.totalReferrals ?? 0,
       icon: Users,
-      color: 'text-zinc-400',
-      bg: 'bg-zinc-500/10',
-      border: 'border-zinc-500/20',
+      color: 'text-muted-foreground',
+      bg: 'bg-muted/10',
+      border: 'border-muted/20',
     },
     {
       label: 'Complétés',
       value: stats?.completedReferrals ?? 0,
       icon: CheckCircle,
-      color: 'text-emerald-400',
-      bg: 'bg-emerald-500/10',
-      border: 'border-emerald-500/20',
+      color: 'text-success-from',
+      bg: 'bg-success-from/10',
+      border: 'border-success-from/20',
     },
     {
       label: 'En attente',
       value: stats?.pendingReferrals ?? 0,
       icon: Clock,
-      color: 'text-amber-400',
-      bg: 'bg-amber-500/10',
-      border: 'border-amber-500/20',
+      color: 'text-warning-from',
+      bg: 'bg-warning-from/10',
+      border: 'border-warning-from/20',
     },
     {
       label: 'Gains totaux',
       value: formatCurrency(stats?.totalEarnings ?? 0),
       icon: Coins,
-      color: 'text-indigo-400',
-      bg: 'bg-indigo-500/10',
-      border: 'border-indigo-500/20',
+      color: 'text-info-from',
+      bg: 'bg-info-from/10',
+      border: 'border-info-from/20',
     },
   ]
 
   return (
-    <Card className={cn('border-white/5 bg-zinc-900/40 backdrop-blur-xl', className)}>
+    <Card className={cn('backdrop-blur-xl bg-card/40', className)}>
       <CardHeader className="pb-2">
-        <CardTitle className="text-lg text-white">Statistiques de parrainage</CardTitle>
+        <CardTitle className="text-lg text-foreground">Statistiques de parrainage</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="grid grid-cols-2 gap-4">
@@ -79,8 +79,8 @@ export function ReferralStats({ className }: ReferralStatsProps) {
             >
               <item.icon className={cn('h-5 w-5', item.color)} />
               <div>
-                <p className="text-2xl font-bold text-white">{item.value}</p>
-                <p className="text-xs text-zinc-400">{item.label}</p>
+                <p className="text-2xl font-bold text-foreground">{item.value}</p>
+                <p className="text-xs text-muted-foreground">{item.label}</p>
               </div>
             </div>
           ))}
@@ -92,18 +92,18 @@ export function ReferralStats({ className }: ReferralStatsProps) {
 
 function ReferralStatsSkeleton({ className }: { className?: string }) {
   return (
-    <Card className={cn('border-white/5 bg-zinc-900/40', className)}>
+    <Card className={cn('bg-card/40', className)}>
       <CardHeader className="pb-2">
-        <Skeleton className="h-6 w-48 bg-zinc-800" />
+        <Skeleton className="h-6 w-48 bg-muted" />
       </CardHeader>
       <CardContent>
         <div className="grid grid-cols-2 gap-4">
           {[1, 2, 3, 4].map(i => (
-            <div key={i} className="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50">
-              <Skeleton className="h-5 w-5 rounded bg-zinc-700" />
+            <div key={i} className="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
+              <Skeleton className="h-5 w-5 rounded bg-muted-foreground/20" />
               <div className="space-y-1">
-                <Skeleton className="h-6 w-12 bg-zinc-700" />
-                <Skeleton className="h-3 w-16 bg-zinc-700" />
+                <Skeleton className="h-6 w-12 bg-muted-foreground/20" />
+                <Skeleton className="h-3 w-16 bg-muted-foreground/20" />
               </div>
             </div>
           ))}
diff --git a/apps/user-application/src/components/referrals/share-card.tsx b/apps/user-application/src/components/referrals/share-card.tsx
index a246df3..b0f190a 100644
--- a/apps/user-application/src/components/referrals/share-card.tsx
+++ b/apps/user-application/src/components/referrals/share-card.tsx
@@ -66,13 +66,13 @@ export function ReferralShareCard({ className }: ShareCardProps) {
   }
 
   return (
-    <Card className={cn('border-white/5 bg-zinc-900/40 backdrop-blur-xl', className)}>
+    <Card className={cn('backdrop-blur-xl bg-card/40', className)}>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-white">
-          <Gift className="h-5 w-5 text-indigo-400" />
+        <CardTitle className="flex items-center gap-2 text-foreground">
+          <Gift className="h-5 w-5 text-info-from" />
           Parrainage
         </CardTitle>
-        <CardDescription className="text-zinc-400">
+        <CardDescription className="text-muted-foreground">
           Invite tes amis et gagne 3€ de crédit pour chaque inscription !
         </CardDescription>
       </CardHeader>
@@ -80,12 +80,12 @@ export function ReferralShareCard({ className }: ShareCardProps) {
       <CardContent className="space-y-4">
         {/* Referral Code */}
         <div className="space-y-2">
-          <span className="text-sm font-medium text-zinc-300">Ton code de parrainage</span>
+          <span className="text-sm font-medium text-muted-foreground">Ton code de parrainage</span>
           <div className="flex gap-2">
             <Input
               value={referralCode || ''}
               readOnly
-              className="font-mono text-center text-lg tracking-wider bg-zinc-800/50 border-white/10 text-white"
+              className="font-mono text-center text-lg tracking-wider bg-muted/50 border-input text-foreground"
               aria-label="Code de parrainage"
             />
             <Button
@@ -93,27 +93,27 @@ export function ReferralShareCard({ className }: ShareCardProps) {
               size="icon"
               onClick={() => handleCopy(referralCode || '')}
               aria-label={copied ? 'Copié' : 'Copier le code'}
-              className="border-white/10 bg-transparent text-white hover:bg-white/5"
+              className="border-input bg-transparent text-foreground hover:bg-muted/20"
             >
               {copied
                 ? (
-                    <Check className="h-4 w-4 text-emerald-400" />
-                  )
+                  <Check className="h-4 w-4 text-emerald-400" />
+                )
                 : (
-                    <Copy className="h-4 w-4" />
-                  )}
+                  <Copy className="h-4 w-4" />
+                )}
             </Button>
           </div>
         </div>
 
         {/* Referral Link */}
         <div className="space-y-2">
-          <span className="text-sm font-medium text-zinc-300">Lien de parrainage</span>
+          <span className="text-sm font-medium text-muted-foreground">Lien de parrainage</span>
           <div className="flex gap-2">
             <Input
               value={referralLink}
               readOnly
-              className="text-sm text-zinc-400 bg-zinc-800/50 border-white/10"
+              className="text-sm text-muted-foreground bg-muted/50 border-input"
               aria-label="Lien de parrainage"
             />
             <Button
@@ -121,7 +121,7 @@ export function ReferralShareCard({ className }: ShareCardProps) {
               size="icon"
               onClick={() => handleCopy(referralLink)}
               aria-label="Copier le lien"
-              className="border-white/10 bg-transparent text-white hover:bg-white/5"
+              className="border-input bg-transparent text-foreground hover:bg-muted/20"
             >
               <Copy className="h-4 w-4" />
             </Button>
@@ -130,7 +130,7 @@ export function ReferralShareCard({ className }: ShareCardProps) {
 
         {/* Share Button */}
         <Button
-          className="w-full bg-gradient-to-r from-indigo-500 to-purple-600 hover:opacity-90 text-white border-0"
+          className="w-full bg-linear-to-r from-info-from to-xp-to hover:opacity-90 text-white border-0"
           onClick={handleShare}
         >
           <Share2 className="h-4 w-4 mr-2" />
@@ -138,12 +138,12 @@ export function ReferralShareCard({ className }: ShareCardProps) {
         </Button>
 
         {/* Reward Info */}
-        <div className="flex items-center gap-2 p-3 rounded-lg bg-indigo-500/10 border border-indigo-500/20 text-sm">
-          <Users className="h-4 w-4 text-indigo-400" />
-          <span className="text-indigo-200">
+        <div className="flex items-center gap-2 p-3 rounded-lg bg-info-from/10 border border-info-from/20 text-sm">
+          <Users className="h-4 w-4 text-info-from" />
+          <span className="text-info-from">
             Tu gagnes
             {' '}
-            <span className="font-semibold text-indigo-300">3€</span>
+            <span className="font-semibold text-info-from">3€</span>
             {' '}
             pour chaque ami qui s'abonne !
           </span>
@@ -155,21 +155,21 @@ export function ReferralShareCard({ className }: ShareCardProps) {
 
 function ReferralShareCardSkeleton({ className }: { className?: string }) {
   return (
-    <Card className={cn('border-white/5 bg-zinc-900/40', className)}>
+    <Card className={cn('bg-card/40', className)}>
       <CardHeader>
-        <Skeleton className="h-6 w-32 bg-zinc-800" />
-        <Skeleton className="h-4 w-full mt-2 bg-zinc-800" />
+        <Skeleton className="h-6 w-32 bg-muted/50" />
+        <Skeleton className="h-4 w-full mt-2 bg-muted/50" />
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="space-y-2">
-          <Skeleton className="h-4 w-24 bg-zinc-800" />
-          <Skeleton className="h-10 w-full bg-zinc-800" />
+          <Skeleton className="h-4 w-24 bg-muted/50" />
+          <Skeleton className="h-10 w-full bg-muted/50" />
         </div>
         <div className="space-y-2">
-          <Skeleton className="h-4 w-24 bg-zinc-800" />
-          <Skeleton className="h-10 w-full bg-zinc-800" />
+          <Skeleton className="h-4 w-24 bg-muted/50" />
+          <Skeleton className="h-10 w-full bg-muted/50" />
         </div>
-        <Skeleton className="h-10 w-full bg-zinc-800" />
+        <Skeleton className="h-10 w-full bg-muted/50" />
       </CardContent>
     </Card>
   )
diff --git a/apps/user-application/src/routes/_auth/app/referrals.tsx b/apps/user-application/src/routes/_auth/app/referrals.tsx
index 39b9c13..ff59e44 100644
--- a/apps/user-application/src/routes/_auth/app/referrals.tsx
+++ b/apps/user-application/src/routes/_auth/app/referrals.tsx
@@ -18,8 +18,8 @@ function ReferralsPage() {
     <div className="min-h-screen bg-background pb-24 text-foreground">
       {/* Ambient Background */}
       <div className="fixed inset-0 pointer-events-none overflow-hidden">
-        <div className="absolute top-[10%] left-[20%] w-[60%] h-[40%] rounded-full bg-indigo-600/10 blur-[120px]" />
-        <div className="absolute bottom-[20%] right-[10%] w-[50%] h-[50%] rounded-full bg-purple-600/10 blur-[120px]" />
+        <div className="absolute top-[10%] left-[20%] w-[60%] h-[40%] rounded-full bg-info-from/10 blur-[120px]" />
+        <div className="absolute bottom-[20%] right-[10%] w-[50%] h-[50%] rounded-full bg-xp-from/10 blur-[120px]" />
       </div>
 
       <AppHeader title="Parrainage" className="bg-transparent/0 border-none relative z-20" />
@@ -27,7 +27,7 @@ function ReferralsPage() {
       <div className="container mx-auto max-w-2xl px-4 py-8 relative z-10">
         {/* Header */}
         <div className="mb-8 text-center">
-          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-linear-to-br from-indigo-500 to-purple-600 shadow-lg shadow-indigo-500/25 animate-pulse">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-linear-to-br from-info-from to-xp-to shadow-lg shadow-info-from/25 animate-pulse">
             <Gift className="h-8 w-8 text-foreground" />
           </div>
           <h1 className="mb-2 text-3xl font-bold bg-linear-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
@@ -51,7 +51,7 @@ function ReferralsPage() {
             <h2 className="mb-4 text-lg font-semibold text-foreground">Comment ça marche ?</h2>
             <ol className="space-y-4">
               <li className="flex gap-4">
-                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-500/20 border border-indigo-500/30 text-sm font-bold text-indigo-300">
+                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-info-from/20 border border-info-from/30 text-sm font-bold text-info-from">
                   1
                 </span>
                 <div>
@@ -62,7 +62,7 @@ function ReferralsPage() {
                 </div>
               </li>
               <li className="flex gap-4">
-                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-500/20 border border-indigo-500/30 text-sm font-bold text-indigo-300">
+                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-info-from/20 border border-info-from/30 text-sm font-bold text-info-from">
                   2
                 </span>
                 <div>
@@ -73,7 +73,7 @@ function ReferralsPage() {
                 </div>
               </li>
               <li className="flex gap-4">
-                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-500/20 border border-indigo-500/30 text-sm font-bold text-indigo-300">
+                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-info-from/20 border border-info-from/30 text-sm font-bold text-info-from">
                   3
                 </span>
                 <div>
@@ -81,7 +81,7 @@ function ReferralsPage() {
                   <p className="text-sm text-muted-foreground">
                     Tu reçois
                     {' '}
-                    <span className="text-indigo-400 font-semibold">3€</span>
+                    <span className="text-info-from font-semibold">3€</span>
                     {' '}
                     de crédit et ton ami bénéficie d'une réduction
                   </p>
diff --git a/tasks/prd-referral-color-refactor.md b/tasks/prd-referral-color-refactor.md
new file mode 100644
index 0000000..c719b0b
--- /dev/null
+++ b/tasks/prd-referral-color-refactor.md
@@ -0,0 +1,42 @@
+# PRD: Referral Screen Inline Color Refactoring
+
+## Introduction/Overview
+
+This task addresses a UI/UX bug on the referral screen where colors are currently defined using inline or hardcoded values rather than leveraging the application's established theme colors. This approach leads to inconsistency across the application's UI, makes global theme updates difficult, and can introduce visual regressions. The objective is to refactor the referral screen's styling to exclusively use the defined theme colors.
+
+## Goals
+
+1. **Eliminate Inline Colors:** Remove all instances of hardcoded hex codes, RGB values, or named colors that are not part of the theme system in the Referral Screen.
+2. **Ensure Theme Consistency:** Bind all color properties to the application's design tokens/theme variables (e.g., Tailwind classes like `text-primary`, `bg-background`, `border-border`).
+3. **Visual Parity:** Maintain the current visual design while switching the underlying implementation to the theme system.
+4. **Dark/Light Mode Support:** Ensure that the refactoring correctly supports color mode switching (if applicable) by using semantic tokens.
+
+## User Stories
+
+- **As a developer**, I want global theme changes to automatically reflect on the referral screen so that the app remains visually consistent.
+- **As a user**, I want the referral screen to look and feel like the rest of the application, with consistent colors and styling.
+
+## Functional Requirements
+
+1. **Identify Components:** Locate `ReferralPage` (or equivalent) and its sub-components.
+2. **Refactor Styling:**
+    - Replace arbitrary hex values (e.g., `#A020F0`) with semantic classes (e.g., `text-purple-600` or `text-primary` if mapped).
+    - Replace inline `style={{ color: '...' }}` with Tailwind classes or CSS variables.
+3. **Validation:** Ensure text contrast and visual hierarchy remain intact.
+
+## Technical Considerations
+
+- **Tech Stack:** React, Tailwind CSS (assumed based on previous file views).
+- **Theme Source:** `tailwind.config.ts` or `globals.css` (CSS variables).
+- **Scope:** Specifically the Referral/Parrainage screen/route.
+
+## Acceptance Criteria
+
+- [ ] No hardcoded color values (hex, rgb, etc.) remain in the referral screen files.
+- [ ] All colors use Tailwind utility classes or app-specific CSS variables.
+- [ ] The screen looks visually identical to the "before" state (or better, if the hardcoded values were slightly off).
+- [ ] No regressions in functionality.
+
+## Open Questions
+
+- *Are there specific custom colors used in the referral screen that need to be added to the theme config first?* (Will check during implementation).
diff --git a/tasks/tasks-referral-color-refactor.md b/tasks/tasks-referral-color-refactor.md
new file mode 100644
index 0000000..2c20fad
--- /dev/null
+++ b/tasks/tasks-referral-color-refactor.md
@@ -0,0 +1,29 @@
+# Tasks: Referral Screen Inline Color Refactoring
+
+## Relevant Files
+
+- `apps/user-application/src/routes/_auth/app/referrals.tsx`
+- `apps/user-application/src/components/referrals/share-card.tsx`
+- `apps/user-application/src/index.css` (for checking theme variables)
+- `tailwind.config.ts` (for checking theme configuration)
+
+## Instructions
+
+Check off tasks as you go.
+
+## Tasks
+
+- [x] 0.0 Create feature branch
+  - [x] 0.1 Create and checkout branch `fix/referral-inline-colors`
+- [x] 1.0 Analyze and Map Colors
+  - [x] 1.1 Inspect `apps/user-application/src/routes/_auth/app/referrals.tsx` for hardcoded colors.
+  - [x] 1.2 Inspect `apps/user-application/src/components/referrals/share-card.tsx` for hardcoded colors.
+  - [x] 1.3 Inspect `apps/user-application/src/components/referrals/referral-stats.tsx` for hardcoded colors.
+  - [x] 1.4 Map identified colors to existing Tailwind classes or CSS variables.
+- [x] 2.0 Refactor Styling
+  - [x] 2.1 Replace hardcoded colors in `referrals.tsx` with theme classes.
+  - [x] 2.2 Replace hardcoded colors in `share-card.tsx` with theme classes.
+  - [x] 2.3 Replace hardcoded colors in `referral-stats.tsx` with theme classes.
+- [x] 3.0 Verification
+  - [x] 3.1 Verify visual consistency.
+  - [x] 3.2 Ensure no regression.