Fix tooltip text color

Harmonize tooltip text color across components by using the same component and only changing the text content.

Author: lovable-dev[bot]

src/components/CampaignInfoCards.tsx

@@ -2,10 +2,11 @@
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { TrendingUp, Calendar, ExternalLink, Copy, HelpCircle } from 'lucide-react';
+import { TrendingUp, Calendar, ExternalLink, Copy } from 'lucide-react';
 import { Campaign } from '@/types';
 import { useToast } from '@/hooks/use-toast';
 import { IntegrationStatusIndicator } from './IntegrationStatusIndicator';
+import { InfoTooltip } from './InfoTooltip';
 
 interface CampaignInfoCardsProps {
   campaign: Campaign;
@@ -82,14 +83,7 @@ export const CampaignInfoCards = ({ campaign }: CampaignInfoCardsProps) => {
         <div className="flex items-center gap-2 text-blue-600 mb-2">
           <ExternalLink className="h-4 w-4" />
           <span className="text-sm font-medium">Dashboard public</span>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <HelpCircle className="h-3 w-3 text-blue-500/70 cursor-help" />
-            </TooltipTrigger>
-             <TooltipContent>
-               <p className="text-xs text-foreground">Partagez ce lien avec vos affiliés pour qu'ils puissent consulter leurs statistiques et accéder à leurs liens de tracking.</p>
-             </TooltipContent>
-          </Tooltip>
+          <InfoTooltip text="Partagez ce lien avec vos affiliés pour qu'ils puissent consulter leurs statistiques et accéder à leurs liens de tracking." />
         </div>
         <div className="space-y-2">
           <div className="flex items-center gap-2">

src/components/InfoTooltip.tsx

@@ -0,0 +1,19 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { HelpCircle } from 'lucide-react';
+
+interface InfoTooltipProps {
+  text: string;
+}
+
+export const InfoTooltip = ({ text }: InfoTooltipProps) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <HelpCircle className="h-3 w-3 text-blue-500/70 cursor-help" />
+      </TooltipTrigger>
+      <TooltipContent>
+        <p className="text-xs">{text}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};

src/components/IntegrationStatusIndicator.tsx

@@ -2,8 +2,9 @@
 import { useState, useEffect } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { CheckCircle, AlertCircle, XCircle, RefreshCw, HelpCircle } from 'lucide-react';
+import { CheckCircle, AlertCircle, XCircle, RefreshCw } from 'lucide-react';
 import { Campaign } from '@/types';
+import { InfoTooltip } from './InfoTooltip';
 
 interface IntegrationStatusIndicatorProps {
   campaign: Campaign;
@@ -115,14 +116,7 @@ export const IntegrationStatusIndicator = ({ campaign }: IntegrationStatusIndica
           <p className="text-xs">{config.description}</p>
         </TooltipContent>
       </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <HelpCircle className="h-3 w-3 text-blue-500/70 cursor-help" />
-        </TooltipTrigger>
-        <TooltipContent>
-          <p className="text-xs text-foreground">L'indicateur "Code" vous montre si votre script de tracking RefSpring est correctement installé sur votre site e-commerce et s'il fonctionne.</p>
-        </TooltipContent>
-      </Tooltip>
+      <InfoTooltip text="L'indicateur 'Code' vous montre si votre script de tracking RefSpring est correctement installé sur votre site e-commerce et s'il fonctionne." />
     </div>
   );
 };