From d042da11bbe4c56ffd6a8d0152cf234cf21dbde8 Mon Sep 17 00:00:00 2001
From: mateo-berri <277851410+mateo-berri@users.noreply.github.com>
Date: Wed, 27 May 2026 00:37:19 +0000
Subject: [PATCH] style(mcp/ui): give env-vars section its production look

Drop the experimental purple dashed-border treatment on the
Environment Variables form section in favor of the standard neutral
solid-bordered section style, and switch the info tooltip icon to the
codebase's conventional blue.

https://claude.ai/code/session_01A3Rkwd7PRAL8EXc6wJUouA
---
 .../src/components/mcp_tools/EnvVarsSection.tsx               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/mcp_tools/EnvVarsSection.tsx b/ui/litellm-dashboard/src/components/mcp_tools/EnvVarsSection.tsx
index 02eed25a1ac..b666d9676a4 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/EnvVarsSection.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/EnvVarsSection.tsx
@@ -25,7 +25,7 @@ const SCOPE_OPTIONS = [
  */
 const EnvVarsSection: React.FC = () => {
   return (
-    <div className="rounded-lg border border-dashed border-purple-300 bg-purple-50 p-4">
+    <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
       <div className="flex items-center gap-2 mb-1">
         <Text strong className="text-sm">
           Environment Variables
@@ -42,7 +42,7 @@ const EnvVarsSection: React.FC = () => {
             </>
           }
         >
-          <InfoCircleOutlined className="text-purple-500" />
+          <InfoCircleOutlined className="text-blue-400 hover:text-blue-600 cursor-help" />
         </Tooltip>
       </div>
       <Text className="text-xs text-gray-600 block mb-3">