Fix dark mode visibility for Supabase continue button (#2241)

Change the continue button variant from 'outline' to 'default' to improve visibility in dark mode. The outline variant had poor contrast against the green success background in dark mode. #skip-bugbot  --- ## Summary by cubic Improve dark mode contrast for the Supabase success state by switching the “Continue” button from outline to default. Also adjust success card and integrate prompt colors for better readability in dark mode. <sup>Written for commit f184afad3d02c069b4a33a6b5f9eeb4dca65c3ec. Summary will update on new commits.</sup>  --------- Co-authored-by: Claude <noreply@anthropic.com>

Fix dark mode visibility for Supabase continue button (#2241)
609b5848 · Will Chen · GitHub · e0dcedc1 · 609b5848
--- a/src/components/chat/DyadAddIntegration.tsx
+++ b/src/components/chat/DyadAddIntegration.tsx
@@ -50,10 +50,10 @@ export const DyadAddIntegration: React.FC<DyadAddIntegrationProps> = ({

  if (app?.supabaseProjectName) {
    return (
-      <div className="flex flex-col  my-2 p-3 border border-green-300 rounded-lg bg-green-50 shadow-sm">
+      <div className="flex flex-col my-2 p-3 border border-green-300 dark:border-green-800/50 rounded-lg bg-green-50 dark:bg-green-900/20 shadow-sm">
        <div className="flex items-center space-x-2">
          <svg
-            className="w-5 h-5 text-green-600"
+            className="w-5 h-5 text-green-600 dark:text-green-400"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
@@ -65,7 +65,8 @@ export const DyadAddIntegration: React.FC<DyadAddIntegrationProps> = ({
              r="10"
              stroke="currentColor"
              strokeWidth="2"
-              fill="#bbf7d0"
+              fill="currentColor"
+              className="opacity-20"
            />
            <path
              strokeLinecap="round"
@@ -73,14 +74,14 @@ export const DyadAddIntegration: React.FC<DyadAddIntegrationProps> = ({
              d="M9 12l2 2 4-4"
            />
          </svg>
-          <span className="font-semibold text-green-800">
+          <span className="font-semibold text-green-800 dark:text-green-300">
            Supabase integration complete
          </span>
        </div>
-        <div className="text-sm text-green-900">
+        <div className="text-sm text-green-900 dark:text-green-100">
          <p>
            This app is connected to Supabase project:{" "}
-            <span className="font-mono font-medium bg-green-100 px-1 py-0.5 rounded">
+            <span className="font-mono font-medium bg-green-100 dark:bg-green-900/40 px-1 py-0.5 rounded">
              {app.supabaseProjectName}
            </span>
          </p>
@@ -88,7 +89,7 @@ export const DyadAddIntegration: React.FC<DyadAddIntegrationProps> = ({
        <Button
          onClick={handleKeepGoingClick}
          className="self-start mt-2"
-          variant="outline"
+          variant="default"
          disabled={isStreaming}
        >
          Continue
@@ -98,9 +99,11 @@ export const DyadAddIntegration: React.FC<DyadAddIntegrationProps> = ({
  }

  return (
-    <div className="flex flex-col gap-2 my-2 p-3 border rounded-md bg-secondary/10">
+    <div className="flex flex-col gap-2 my-2 p-3 border rounded-md bg-secondary/10 dark:bg-secondary/20">
      <div className="text-sm">
-        <div className="font-medium">Integrate with {provider}?</div>
+        <div className="font-medium text-foreground">
+          Integrate with {provider}?
+        </div>
        <div className="text-muted-foreground text-xs">{children}</div>
      </div>
      <Button onClick={handleSetupClick} className="self-start w-full">