x (#132)

Author: dancer

apps/dashboard/app/(main)/billing/components/cancel-subscription-dialog.tsx

@@ -54,7 +54,7 @@ export function CancelSubscriptionDialog({
 					>
 						<div className="mb-2 flex items-center gap-3">
 							<div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
-								<CalendarIcon className="text-blue-600" size={16} />
+								<CalendarIcon className="text-foreground" size={16} />
 							</div>
 							<div>
 								<div className="font-medium">Cancel at period end</div>

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

@@ -341,7 +341,7 @@ export default function AcceptInvitationPage() {
 						<div className="relative mb-8">
 							<div className="rounded-full border border-blue-500/20 bg-blue-500/10 p-8">
 								<CheckCircle
-									className="h-16 w-16 text-blue-600"
+									className="h-16 w-16 text-foreground"
 									weight="duotone"
 								/>
 							</div>

apps/dashboard/app/(main)/observability/database/[id]/performance/_components/query-detail-sheet.tsx

@@ -83,7 +83,7 @@ export const QueryDetailSheet = ({
 		if (time < 50) {
 			return {
 				level: 'Good',
-				color: 'bg-blue-100 text-blue-800 border-blue-200',
+				color: 'bg-muted text-muted-foreground border-border',
 			};
 		}
 		if (time < 100) {
@@ -325,10 +325,10 @@ Resource Usage:
 										<div className="flex items-start gap-3">
 											<div className="mt-0.5 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500" />
 											<div className="min-w-0">
-												<p className="font-medium text-blue-900 dark:text-blue-100">
+												<p className="font-medium text-foreground">
 													Low Cache Hit Rate
 												</p>
-												<p className="mt-1 text-blue-800 text-sm dark:text-blue-200">
+												<p className="mt-1 text-muted-foreground text-sm">
 													Consider increasing shared_buffers, optimizing data
 													access patterns, or reviewing query selectivity.
 												</p>

apps/dashboard/app/(main)/observability/database/[id]/performance/page.tsx

@@ -392,8 +392,8 @@ export default function PerformancePage({ params }: PerformancePageProps) {
 				q.query.includes('Query ID:')
 			) && (
 				<Alert className="border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/20">
-					<DatabaseIcon className="h-4 w-4 text-blue-600" />
-					<AlertDescription className="text-blue-800 dark:text-blue-200">
+					<DatabaseIcon className="h-4 w-4 text-muted-foreground" />
+					<AlertDescription className="text-muted-foreground">
 						<div className="space-y-2">
 							<div>
 								<strong>Limited Query Visibility:</strong> Query text is hidden

apps/dashboard/app/(main)/observability/database/[id]/plugins/page.tsx

@@ -249,8 +249,8 @@ function ConfigurationRequiredDialog({
 
 				<div className="space-y-4">
 					<Alert className="border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/20">
-						<WarningIcon className="h-4 w-4 text-blue-600" />
-						<AlertDescription className="text-blue-800 dark:text-blue-200">
+						<WarningIcon className="h-4 w-4 text-muted-foreground" />
+						<AlertDescription className="text-muted-foreground">
 							<p className="font-medium text-sm">
 								Server Configuration Required
 							</p>

apps/dashboard/app/(main)/observability/database/_components/connection-card.tsx

@@ -43,7 +43,7 @@ export function ConnectionCard({
 		switch (type.toLowerCase()) {
 			case 'postgres':
 			case 'postgresql':
-				return <DatabaseIcon className="text-blue-600" weight="duotone" />;
+				return <DatabaseIcon className="text-foreground" weight="duotone" />;
 			case 'mysql':
 				return <DatabaseIcon className="text-orange-600" weight="duotone" />;
 			case 'sqlite':

apps/dashboard/app/(main)/revenue/_components/onboarding/steps/overview-step.tsx

@@ -11,37 +11,37 @@ export function OverviewStep({ onNext }: OverviewStepProps) {
 	return (
 		<div className="space-y-4">
 			<div className="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-950/20">
-				<h3 className="mb-2 font-medium text-blue-900 dark:text-blue-100">
+				<h3 className="mb-2 font-medium text-foreground">
 					What you'll get:
 				</h3>
-				<ul className="space-y-2 text-blue-800 text-sm dark:text-blue-200">
+				<ul className="space-y-2 text-muted-foreground text-sm">
 					<li className="flex items-center gap-2">
 						<CheckCircleIcon
-							className="h-4 w-4 text-blue-600 dark:text-blue-400"
+							className="h-4 w-4 text-foreground"
 							size={16}
 							weight="fill"
 						/>
 						Real-time payment tracking
 					</li>
 					<li className="flex items-center gap-2">
 						<CheckCircleIcon
-							className="h-4 w-4 text-blue-600 dark:text-blue-400"
+							className="h-4 w-4 text-foreground"
 							size={16}
 							weight="fill"
 						/>
 						Revenue analytics and trends
 					</li>
 					<li className="flex items-center gap-2">
 						<CheckCircleIcon
-							className="h-4 w-4 text-blue-600 dark:text-blue-400"
+							className="h-4 w-4 text-foreground"
 							size={16}
 							weight="fill"
 						/>
 						Refund and chargeback monitoring
 					</li>
 					<li className="flex items-center gap-2">
 						<CheckCircleIcon
-							className="h-4 w-4 text-blue-600 dark:text-blue-400"
+							className="h-4 w-4 text-foreground"
 							size={16}
 							weight="fill"
 						/>

apps/dashboard/app/(main)/revenue/_components/onboarding/steps/testing-step.tsx

@@ -48,15 +48,15 @@ export function TestingStep({
 					</div>
 
 					<div className="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-950/20">
-						<h4 className="mb-2 font-medium text-blue-900 dark:text-blue-100">
+						<h4 className="mb-2 font-medium text-foreground">
 							Integration Status
 						</h4>
 						<div className="space-y-2">
 							<div className="flex items-center gap-2 text-sm">
 								<div className="h-2 w-2 rounded-full bg-yellow-500" />
 								<span>Waiting for test webhook...</span>
 							</div>
-							<p className="text-blue-800 text-xs dark:text-blue-200">
+							<p className="text-muted-foreground text-xs">
 								Create a test payment in Stripe to verify the integration
 							</p>
 						</div>

apps/dashboard/app/(main)/settings/_components/email-form.tsx

@@ -82,7 +82,7 @@ export function EmailForm() {
 						<div className="flex items-center gap-3">
 							<div className="flex h-10 w-10 items-center justify-center rounded-full border border-blue-500/20 bg-gradient-to-br from-blue-500/20 to-blue-600/5">
 								<EnvelopeSimpleIcon
-									className="h-5 w-5 text-blue-600"
+									className="h-5 w-5 text-foreground"
 									size={20}
 									weight="duotone"
 								/>
@@ -125,7 +125,7 @@ export function EmailForm() {
 			{/* Security Notice */}
 			<Alert className="border-blue-200 bg-blue-50/50 dark:border-blue-800 dark:bg-blue-950/20">
 				<ShieldCheckIcon
-					className="h-4 w-4 text-blue-600"
+					className="h-4 w-4 text-muted-foreground"
 					size={16}
 					weight="duotone"
 				/>

apps/dashboard/app/(main)/settings/_components/password-form.tsx

@@ -210,7 +210,7 @@ export function PasswordForm() {
 														'text-yellow-600',
 													passwordStrength.score >= 70 &&
 														passwordStrength.score < 90 &&
-														'text-blue-600',
+														'text-foreground',
 													passwordStrength.score >= 90 && 'text-green-600'
 												)}
 											>