From 272fd5606a9bd781e1d9ad88c9f774f573e8c99c Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Mon, 23 Jun 2025 20:10:18 +1000
Subject: [PATCH] Soften modal background with radial gradient

- Replace solid black 50% opacity with radial gradient
- Center: 80% black (rgba(0,0,0,0.8))
- Corners: 70% black (rgba(0,0,0,0.7))
- Apply to both ModelSelectionModal and McpServerModal
- Creates softer, more visually appealing backdrop
- Remove bg-black bg-opacity-50 classes and use inline style
---
 examples/chat-ui/src/components/McpServerModal.tsx      | 3 ++-
 examples/chat-ui/src/components/ModelSelectionModal.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/examples/chat-ui/src/components/McpServerModal.tsx b/examples/chat-ui/src/components/McpServerModal.tsx
index 07f207e..fb6e546 100644
--- a/examples/chat-ui/src/components/McpServerModal.tsx
+++ b/examples/chat-ui/src/components/McpServerModal.tsx
@@ -240,7 +240,8 @@ const McpServerModal: React.FC<McpServerModalProps> = ({
   return (
     <>
       <div 
-        className={`fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 ${isOpen ? 'block' : 'hidden'}`}
+        className={`fixed inset-0 z-50 flex items-center justify-center p-4 ${isOpen ? 'block' : 'hidden'}`}
+        style={{ background: 'radial-gradient(circle, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.7) 100%)' }}
         onClick={onClose}
       >
         <div 
diff --git a/examples/chat-ui/src/components/ModelSelectionModal.tsx b/examples/chat-ui/src/components/ModelSelectionModal.tsx
index 3e28816..9699395 100644
--- a/examples/chat-ui/src/components/ModelSelectionModal.tsx
+++ b/examples/chat-ui/src/components/ModelSelectionModal.tsx
@@ -87,7 +87,8 @@ const ModelSelectionModal: React.FC<ModelSelectionModalProps> = ({
   return (
     <>
       <div 
-        className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
+        className="fixed inset-0 z-50 flex items-center justify-center p-4"
+        style={{ background: 'radial-gradient(circle, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.7) 100%)' }}
         onClick={onClose}
       >
         <div