From 769849d99a0c00bb2fc6343d5fa8a674f9346de0 Mon Sep 17 00:00:00 2001
From: cyrus <cyrus@zerolend.xyz>
Date: Wed, 28 Jan 2026 18:16:58 +0530
Subject: [PATCH] Apply dark glass morphism styling to ConnectionsPanel and
 improve status indicators
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ConnectionsPanel Styling:
- Apply dark glass morphism theme to match main settings modal
- Update SettingsPanelLayout to use glass container with 600px fixed height
- Convert SettingsBackButton to dark theme with proper stone colors
- Update all connection cards to use dark backgrounds and borders
- Apply consistent hover states and typography

Status Indicator Improvements:
- Replace "Connected" text badges with small green dots in top-right corner
- Use sage green color (bg-sage-500) with dark border for visibility
- Keep "Coming Soon" badges in original right-side position
- Maintain clean layout with subtle but clear status indicators

Layout Fixes:
- Restore "Coming Soon" tags to proper position on right side
- Add relative positioning for absolute green dot placement
- Improve visual hierarchy with consistent dark theme elements

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/SettingsBackButton.tsx         |  6 +--
 .../components/SettingsPanelLayout.tsx        |  4 +-
 .../settings/panels/ConnectionsPanel.tsx      | 43 +++++++++++--------
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/components/settings/components/SettingsBackButton.tsx b/src/components/settings/components/SettingsBackButton.tsx
index a970bd845..90649c36e 100644
--- a/src/components/settings/components/SettingsBackButton.tsx
+++ b/src/components/settings/components/SettingsBackButton.tsx
@@ -10,10 +10,10 @@ const SettingsBackButton = ({
   className = ''
 }: SettingsBackButtonProps) => {
   return (
-    <div className={`flex items-center p-4 border-b border-gray-100 ${className}`}>
+    <div className={`bg-black/30 border-b border-stone-700 p-6 ${className}`}>
       <button
         onClick={onClick}
-        className="flex items-center space-x-3 text-gray-600 hover:text-gray-900 transition-colors duration-150"
+        className="flex items-center space-x-3 text-white hover:text-stone-300 transition-colors duration-150"
         aria-label="Go back"
       >
         <svg
@@ -29,7 +29,7 @@ const SettingsBackButton = ({
             d="M15 19l-7-7 7-7"
           />
         </svg>
-        <span className="text-[15px] font-medium">{title}</span>
+        <span className="text-lg font-semibold">{title}</span>
       </button>
     </div>
   );
diff --git a/src/components/settings/components/SettingsPanelLayout.tsx b/src/components/settings/components/SettingsPanelLayout.tsx
index d29cf9558..7bd97ab18 100644
--- a/src/components/settings/components/SettingsPanelLayout.tsx
+++ b/src/components/settings/components/SettingsPanelLayout.tsx
@@ -15,9 +15,9 @@ const SettingsPanelLayout = ({
   className = ''
 }: SettingsPanelLayoutProps) => {
   return (
-    <div className={`bg-white rounded-2xl overflow-hidden ${className}`}>
+    <div className={`glass rounded-3xl overflow-hidden h-[600px] flex flex-col ${className}`}>
       <SettingsBackButton onClick={onBack} title={title} />
-      <div className="max-h-[70vh] overflow-y-auto">
+      <div className="flex-1 overflow-y-auto">
         {children}
       </div>
     </div>
diff --git a/src/components/settings/panels/ConnectionsPanel.tsx b/src/components/settings/panels/ConnectionsPanel.tsx
index 99dc4633b..43e4ac92f 100644
--- a/src/components/settings/panels/ConnectionsPanel.tsx
+++ b/src/components/settings/panels/ConnectionsPanel.tsx
@@ -114,13 +114,13 @@ const ConnectionsPanel = () => {
   const getConnectionStatus = (optionId: string) => {
     const isConnected = isAccountConnected(optionId);
     if (isConnected) {
-      return { label: 'Connected', className: 'bg-green-100 text-green-700 border-green-200' };
+      return { label: 'Connected', className: 'bg-green-500/20 text-green-400 border-green-500/30' };
     }
     const option = connectOptions.find(opt => opt.id === optionId);
     if (option?.comingSoon) {
-      return { label: 'Coming Soon', className: 'bg-gray-100 text-gray-600 border-gray-200' };
+      return { label: 'Coming Soon', className: 'bg-stone-500/20 text-stone-400 border-stone-500/30' };
     }
-    return { label: 'Not Connected', className: 'bg-red-50 text-red-600 border-red-200' };
+    return { label: 'Not Connected', className: 'bg-red-500/20 text-red-400 border-red-500/30' };
   };
 
   return (
@@ -128,8 +128,8 @@ const ConnectionsPanel = () => {
       <SettingsPanelLayout title="Connections" onBack={navigateBack}>
         <div className="p-6">
           <div className="mb-6">
-            <h3 className="text-lg font-semibold text-gray-900 mb-2">Connected Services</h3>
-            <p className="text-sm text-gray-500">
+            <h3 className="text-lg font-semibold text-white mb-2">Connected Services</h3>
+            <p className="text-sm text-stone-400">
               Manage your connected accounts and services. Connect more accounts for better AI intelligence.
             </p>
           </div>
@@ -142,23 +142,30 @@ const ConnectionsPanel = () => {
               return (
                 <div
                   key={option.id}
-                  className="flex items-center justify-between p-4 border border-gray-200 rounded-xl hover:border-gray-300 transition-colors"
+                  className="relative flex items-center justify-between p-3 bg-black/50 border border-stone-700 rounded-xl hover:bg-stone-800/30 transition-colors"
                 >
+                  {/* Connection status dot - top right corner */}
+                  {isConnected && !option.comingSoon && (
+                    <div className="absolute -top-1 -right-1 w-3 h-3 bg-sage-500 rounded-full border-2 border-black/50"></div>
+                  )}
+
                   <div className="flex items-center space-x-3 flex-1 min-w-0">
                     <div className="flex-shrink-0">
                       {option.icon}
                     </div>
                     <div className="flex-1 min-w-0">
-                      <h4 className="font-medium text-gray-900 text-sm">{option.name}</h4>
-                      <p className="text-xs text-gray-500 truncate">{option.description}</p>
+                      <h4 className="font-medium text-white text-sm">{option.name}</h4>
+                      <p className="text-xs text-stone-400 truncate">{option.description}</p>
                     </div>
                   </div>
 
                   <div className="flex items-center space-x-3">
-                    {/* Status badge */}
-                    <span className={`px-2 py-1 text-xs font-medium rounded-full border ${status.className}`}>
-                      {status.label}
-                    </span>
+                    {/* Coming Soon badge in original position */}
+                    {option.comingSoon && (
+                      <span className="px-2 py-1 text-xs font-medium rounded-full border bg-stone-500/20 text-stone-400 border-stone-500/30">
+                        Coming Soon
+                      </span>
+                    )}
 
                     {/* Action button */}
                     {!option.comingSoon && (
@@ -166,8 +173,8 @@ const ConnectionsPanel = () => {
                         onClick={() => handleConnect(option.id)}
                         className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
                           isConnected
-                            ? 'bg-red-50 text-red-600 hover:bg-red-100 border border-red-200'
-                            : 'bg-blue-50 text-blue-600 hover:bg-blue-100 border border-blue-200'
+                            ? 'bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/30'
+                            : 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border border-blue-500/30'
                         }`}
                       >
                         {isConnected ? 'Disconnect' : 'Connect'}
@@ -180,14 +187,14 @@ const ConnectionsPanel = () => {
           </div>
 
           {/* Security notice */}
-          <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-xl">
+          <div className="mt-6 p-4 bg-blue-500/10 border border-blue-500/20 rounded-xl">
             <div className="flex items-start space-x-2">
-              <svg className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
               <div>
-                <p className="font-medium text-blue-900 text-sm">🔒 Privacy & Security</p>
-                <p className="text-blue-800 text-xs mt-1">
+                <p className="font-medium text-blue-300 text-sm">🔒 Privacy & Security</p>
+                <p className="text-blue-200 text-xs mt-1">
                   All data and credentials are stored locally with zero-data retention policy.
                   Your information is encrypted and never shared with third parties.
                 </p>