fix: icon colors

Author: izadoesdev

apps/dashboard/app/(main)/settings/page.tsx

@@ -3,6 +3,7 @@
 import {
 	BellIcon,
 	GearSixIcon,
+	KeyIcon,
 	ShieldIcon,
 	UserIcon,
 } from '@phosphor-icons/react';
@@ -125,7 +126,7 @@ const tabs: NavItem[] = [
 	{
 		id: 'api-keys',
 		label: 'API keys',
-		icon: GearSixIcon,
+		icon: KeyIcon,
 	},
 	{
 		id: 'notifications',
@@ -179,7 +180,7 @@ export default function SettingsPage() {
 								size="sm"
 								variant={activeTab === item.id ? 'secondary' : 'ghost'}
 							>
-								<item.icon className="mr-2 h-4 w-4" />
+								<item.icon className="mr-2 h-4 w-4" weight="duotone" />
 								{item.label}
 							</Button>
 						))}

apps/dashboard/components/organizations/api-key-create-dialog.tsx

@@ -207,7 +207,10 @@ export function ApiKeyCreateDialog({
 				<SheetHeader className="space-y-3 border-border/50 border-b pb-6">
 					<div className="flex items-center gap-3">
 						<div className="rounded border p-3">
-							<KeyIcon className="h-6 w-6" weight="duotone" />
+							<KeyIcon
+								className="h-6 w-6 not-dark:text-primary"
+								weight="duotone"
+							/>
 						</div>
 						<div>
 							<SheetTitle className="font-semibold text-foreground text-xl">
@@ -319,7 +322,7 @@ export function ApiKeyCreateDialog({
 												onClick={addWebsite}
 												type="button"
 											>
-												<PlusIcon className="mr-2 h-4 w-4" />
+												<PlusIcon className="mr-2 h-4 w-4 not-dark:text-primary" />
 												Add
 											</Button>
 										</div>

apps/dashboard/components/organizations/api-key-detail-dialog.tsx

@@ -313,7 +313,10 @@ export function ApiKeyDetailDialog({
 				<SheetHeader className="space-y-3 border-border/50 border-b pb-6">
 					<div className="flex items-center gap-3">
 						<div className="rounded border p-3">
-							<KeyIcon className="h-6 w-6" weight="duotone" />
+							<KeyIcon
+								className="h-6 w-6 not-dark:text-primary"
+								weight="duotone"
+							/>
 						</div>
 						<div>
 							<SheetTitle className="font-semibold text-foreground text-xl">
@@ -335,7 +338,10 @@ export function ApiKeyDetailDialog({
 							<div className="rounded border p-4">
 								<div className="flex items-center gap-4">
 									<div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded bg-muted">
-										<KeyIcon className="h-6 w-6" weight="duotone" />
+										<KeyIcon
+											className="h-6 w-6 not-dark:text-primary"
+											weight="duotone"
+										/>
 									</div>
 									<div className="flex-1">
 										<div className="font-semibold text-foreground text-lg">
@@ -361,7 +367,10 @@ export function ApiKeyDetailDialog({
 							{/* Configuration Form */}
 							<div className="space-y-4">
 								<div className="flex items-center gap-2">
-									<PencilIcon className="h-5 w-5" weight="duotone" />
+									<PencilIcon
+										className="h-5 w-5 not-dark:text-primary"
+										weight="duotone"
+									/>
 									<h3 className="font-semibold text-base text-foreground">
 										Configuration
 									</h3>

apps/dashboard/components/organizations/api-key-list.tsx

@@ -75,7 +75,7 @@ export function ApiKeyList({
 		return (
 			<div className="rounded border p-6 text-center">
 				<div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
-					<KeyIcon className="h-6 w-6 text-muted-foreground" weight="duotone" />
+					<KeyIcon className="h-6 w-6 not-dark:text-primary" weight="duotone" />
 				</div>
 				<div className="font-semibold text-foreground text-sm">
 					Failed to load API keys
@@ -108,7 +108,7 @@ export function ApiKeyList({
 					</div>
 				</div>
 				<Button onClick={onCreateNew} type="button">
-					<PlusIcon className="mr-2 h-4 w-4" />
+					<PlusIcon className="mr-2 h-4 w-4 not-dark:text-primary" />
 					Create Key
 				</Button>
 			</div>
@@ -215,7 +215,7 @@ export function ApiKeyList({
 				<div className="rounded border border-dashed p-8 text-center">
 					<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
 						<KeyIcon
-							className="h-6 w-6 text-muted-foreground"
+							className="h-6 w-6 not-dark:text-primary text-muted-foreground"
 							weight="duotone"
 						/>
 					</div>
@@ -226,7 +226,7 @@ export function ApiKeyList({
 						Create your first API key to start integrating with our platform.
 					</div>
 					<Button onClick={onCreateNew} type="button">
-						<PlusIcon className="mr-2 h-4 w-4" />
+						<PlusIcon className="mr-2 h-4 w-4 not-dark:text-primary" />
 						Create Your First Key
 					</Button>
 				</div>