style: refactor referral screen to use theme colors

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>
           ))}

apps/user-application/src/components/referrals/share-card.tsx

@@ -66,62 +66,62 @@ 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>
 
       <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
               variant="outline"
               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
               variant="outline"
               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,20 +130,20 @@ 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" />
           Partager avec mes amis
         </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>
   )

apps/user-application/src/routes/_auth/app/referrals.tsx

@@ -18,16 +18,16 @@ 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" />
 
       <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,15 +73,15 @@ 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>
                   <p className="font-medium text-foreground">Vous gagnez tous les deux</p>
                   <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>

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).

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.