fix: colors

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/_components/shared/tracking-components.tsx

@@ -100,7 +100,7 @@ export function CodeBlock({
 			)}
 			<div className="relative">
 				<div
-					className="[&_pre]:!bg-transparent [&_code]:!bg-transparent [&_*]:!font-mono overflow-hidden rounded border bg-slate-50 p-6 text-sm leading-relaxed dark:bg-slate-900"
+					className="[&_pre]:!bg-transparent [&_code]:!bg-transparent [&_*]:!font-mono overflow-hidden rounded border bg-muted p-6 text-sm leading-relaxed"
 					dangerouslySetInnerHTML={{ __html: highlightedCode }}
 					style={{
 						fontSize: '14px',
@@ -110,13 +110,16 @@ export function CodeBlock({
 					}}
 				/>
 				<Button
-					className="absolute top-2 right-2 h-6 w-6 rounded border-0 shadow-none transition-colors duration-200 hover:bg-white/80 dark:hover:bg-slate-800/80"
+					className="absolute top-2 right-2 h-6 w-6 rounded border-0 shadow-none transition-colors duration-200 hover:bg-accent"
 					onClick={onCopy}
 					size="icon"
 					variant="ghost"
 				>
 					{copied ? (
-						<CheckIcon className="h-3.5 w-3.5 text-green-500" weight="bold" />
+						<CheckIcon
+							className="h-3.5 w-3.5 text-accent-foreground"
+							weight="bold"
+						/>
 					) : (
 						<ClipboardIcon
 							className="h-3.5 w-3.5 text-muted-foreground hover:text-foreground"
@@ -209,17 +212,17 @@ export function TrackingOptionCard({
 				<Switch checked={isEnabled} onCheckedChange={onToggle} />
 			</div>
 			{required && !isEnabled && (
-				<div className="mb-3 rounded border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-950">
+				<div className="mb-3 rounded border border-destructive/20 bg-destructive/10 p-3">
 					<div className="flex items-start gap-2">
 						<WarningCircleIcon
-							className="mt-0.5 h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400"
+							className="mt-0.5 h-4 w-4 flex-shrink-0 text-destructive"
 							weight="duotone"
 						/>
 						<div>
-							<span className="font-medium text-red-800 text-sm dark:text-red-200">
+							<span className="font-medium text-destructive text-sm">
 								Warning:
 							</span>
-							<p className="mt-1 text-red-700 text-xs dark:text-red-300">
+							<p className="mt-1 text-destructive text-xs">
 								Disabling page views will prevent analytics from working. This
 								option is required.
 							</p>

apps/dashboard/app/(main)/websites/[id]/_components/tabs/settings-tab.tsx

@@ -833,9 +833,9 @@ function DeleteWebsiteDialog({
 								? This action cannot be undone.
 							</p>
 
-							<div className="rounded-md bg-amber-50 p-3 text-amber-700 text-sm dark:bg-amber-950/20 dark:text-amber-400">
+							<div className="rounded-md bg-muted p-3 text-muted-foreground text-sm">
 								<div className="flex items-start gap-2">
-									<WarningCircleIcon className="h-5 w-5 flex-shrink-0 text-amber-500" />
+									<WarningCircleIcon className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
 									<div className="space-y-1">
 										<p className="font-medium">Warning:</p>
 										<ul className="list-disc space-y-1 pl-4 text-xs">
@@ -852,7 +852,7 @@ function DeleteWebsiteDialog({
 				<AlertDialogFooter>
 					<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
 					<AlertDialogAction
-						className="bg-red-600 text-white hover:bg-red-700 hover:text-white"
+						className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						disabled={isDeleting}
 						onClick={onConfirmDelete}
 					>

apps/dashboard/app/(main)/websites/[id]/experiments/page.tsx

@@ -189,19 +189,19 @@ export default function ExperimentsPage() {
 	if (experimentsError) {
 		return (
 			<div className="mx-auto max-w-[1600px] p-3 sm:p-4 lg:p-6">
-				<Card className="rounded border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950">
+				<Card className="rounded border-destructive/20 bg-destructive/10">
 					<CardContent className="pt-6">
 						<div className="flex items-center gap-2">
 							<FlaskIcon
-								className="h-5 w-5 text-red-600"
+								className="h-5 w-5 text-destructive"
 								size={16}
 								weight="duotone"
 							/>
-							<p className="font-medium text-red-600">
+							<p className="font-medium text-destructive">
 								Error loading experiment data
 							</p>
 						</div>
-						<p className="mt-2 text-red-600/80 text-sm">
+						<p className="mt-2 text-destructive/80 text-sm">
 							{experimentsError.message}
 						</p>
 					</CardContent>

apps/dashboard/app/(main)/websites/[id]/flags/_components/flag-row.tsx

@@ -81,9 +81,7 @@ export function FlagRow({
 		switch (status) {
 			case 'active':
 				return (
-					<Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
-						● Active
-					</Badge>
+					<Badge className="bg-accent text-accent-foreground">● Active</Badge>
 				);
 			case 'inactive':
 				return <Badge variant="secondary">○ Inactive</Badge>;

apps/dashboard/components/analytics/stat-card.tsx

@@ -204,13 +204,13 @@ export function StatCard({
 	const getVariantClasses = () => {
 		switch (variant) {
 			case 'success':
-				return 'bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-900';
+				return 'bg-accent/10 border-accent/20';
 			case 'info':
-				return 'bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-900';
+				return 'bg-accent/10 border-accent/20';
 			case 'warning':
-				return 'bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 dark:border-yellow-900';
+				return 'bg-muted border-border';
 			case 'danger':
-				return 'bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-900';
+				return 'bg-destructive/10 border-destructive/20';
 			default:
 				return '';
 		}

apps/dashboard/components/layout/navigation/navigation-item.tsx

@@ -135,16 +135,11 @@ export function NavigationItem({
 					<span
 						className={cn(
 							'rounded px-1.5 py-0.5 font-medium text-xs',
-							badge.variant === 'purple' &&
-								'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
-							badge.variant === 'blue' &&
-								'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
-							badge.variant === 'green' &&
-								'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
-							badge.variant === 'orange' &&
-								'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
-							badge.variant === 'red' &&
-								'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
+							badge.variant === 'purple' && 'bg-accent text-accent-foreground',
+							badge.variant === 'blue' && 'bg-accent text-accent-foreground',
+							badge.variant === 'green' && 'bg-accent text-accent-foreground',
+							badge.variant === 'orange' && 'bg-muted text-muted-foreground',
+							badge.variant === 'red' && 'bg-destructive/10 text-destructive'
 						)}
 					>
 						{badge.text}