From 003be82d970214a373c5d2bf80693a549b91bdc2 Mon Sep 17 00:00:00 2001
From: Iqbal Muhammad Hasbi <39003120+IzayoiS@users.noreply.github.com>
Date: Wed, 13 May 2026 15:29:30 +0700
Subject: [PATCH] Fix zoom controls contrast in topology view (#1066)

---
 .../usage/components/ProviderTopology.js      |  2 +-
 src/app/globals.css                           | 24 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/app/(dashboard)/dashboard/usage/components/ProviderTopology.js b/src/app/(dashboard)/dashboard/usage/components/ProviderTopology.js
index 1e2bf63..6ecb6df 100644
--- a/src/app/(dashboard)/dashboard/usage/components/ProviderTopology.js
+++ b/src/app/(dashboard)/dashboard/usage/components/ProviderTopology.js
@@ -304,7 +304,7 @@ export default function ProviderTopology({ providers = [], activeRequests = [],
           nodesConnectable={false}
           elementsSelectable={false}
         >
-          <Controls showInteractive={false} />
+          <Controls showInteractive={false} className="react-flow-controls-custom" />
         </ReactFlow>
       )}
     </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 76051e9..d295153 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -427,6 +427,30 @@ button {
   opacity: 0.04;
 }
 
+/* React Flow controls: match app theme */
+.react-flow-controls-custom {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  box-shadow: var(--shadow-soft);
+  overflow: hidden;
+}
+
+.react-flow-controls-custom button {
+  background: var(--color-surface);
+  color: var(--color-text-main);
+  border: 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.react-flow-controls-custom button:last-child {
+  border-bottom: 0;
+}
+
+.react-flow-controls-custom button:hover {
+  background: var(--color-bg-alt);
+}
+
 /* Changelog markdown body */
 .changelog-body h1 {
   font-size: 1.4rem;