From c29af5be117ada20388d9f9ccd04afc7c1a3abdf Mon Sep 17 00:00:00 2001
From: cyrus <cyrus@zerolend.xyz>
Date: Wed, 28 Jan 2026 19:18:05 +0530
Subject: [PATCH] Update connections panel styling to match main settings modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Updated SettingsHeader with back button support and custom titles
- Redesigned ConnectionsPanel to use consistent styling with SettingsHome
- Replaced glass morphism layout with standard settings modal structure
- Applied matching colors, fonts, borders, and spacing throughout
- Maintained all existing functionality while improving visual consistency

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../settings/components/SettingsHeader.tsx    |  33 ++++-
 .../settings/panels/ConnectionsPanel.tsx      | 139 ++++++++++--------
 2 files changed, 108 insertions(+), 64 deletions(-)

diff --git a/src/components/settings/components/SettingsHeader.tsx b/src/components/settings/components/SettingsHeader.tsx
index 00040d42c..3a280832f 100644
--- a/src/components/settings/components/SettingsHeader.tsx
+++ b/src/components/settings/components/SettingsHeader.tsx
@@ -2,18 +2,41 @@ import { useSettingsNavigation } from '../hooks/useSettingsNavigation';
 
 interface SettingsHeaderProps {
   className?: string;
+  title?: string;
+  showBackButton?: boolean;
+  onBack?: () => void;
 }
 
-const SettingsHeader = ({ className = '' }: SettingsHeaderProps) => {
+const SettingsHeader = ({
+  className = '',
+  title = 'Settings',
+  showBackButton = false,
+  onBack
+}: SettingsHeaderProps) => {
   const { closeSettings } = useSettingsNavigation();
 
   return (
     <div className={`bg-black/30 border-b border-stone-700 p-6 relative ${className}`}>
       <div className="flex items-center justify-between">
-        {/* Settings title */}
-        <h2 className="text-lg font-semibold text-white" id="settings-modal-title">
-          Settings
-        </h2>
+        <div className="flex items-center">
+          {/* Back button */}
+          {showBackButton && onBack && (
+            <button
+              onClick={onBack}
+              className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-stone-800/50 transition-colors mr-3"
+              aria-label="Go back"
+            >
+              <svg className="w-5 h-5 opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+          )}
+
+          {/* Title */}
+          <h2 className="text-lg font-semibold text-white" id="settings-modal-title">
+            {title}
+          </h2>
+        </div>
 
         {/* Close button */}
         <button
diff --git a/src/components/settings/panels/ConnectionsPanel.tsx b/src/components/settings/panels/ConnectionsPanel.tsx
index a52d39ef1..8fb48035b 100644
--- a/src/components/settings/panels/ConnectionsPanel.tsx
+++ b/src/components/settings/panels/ConnectionsPanel.tsx
@@ -2,7 +2,7 @@ import { useState, useMemo } from 'react';
 import { useAppSelector } from '../../../store/hooks';
 import { selectIsAuthenticated } from '../../../store/telegramSelectors';
 import { useSettingsNavigation } from '../hooks/useSettingsNavigation';
-import SettingsPanelLayout from '../components/SettingsPanelLayout';
+import SettingsHeader from '../components/SettingsHeader';
 import TelegramConnectionModal from '../../TelegramConnectionModal';
 
 import BinanceIcon from '../../../assets/icons/binance.svg';
@@ -113,75 +113,96 @@ const ConnectionsPanel = () => {
 
   return (
     <>
-      <SettingsPanelLayout title="Connections" onBack={navigateBack}>
-        <div className="p-6">
-          <div className="space-y-3">
-            {connectOptions.map((option) => {
-              const isConnected = isAccountConnected(option.id);
-              return (
-                <div
-                  key={option.id}
-                  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="overflow-hidden h-full flex flex-col">
+        <SettingsHeader
+          title="Connections"
+          showBackButton={true}
+          onBack={navigateBack}
+        />
 
-                  <div className="flex items-center space-x-3 flex-1 min-w-0">
-                    <div className="flex-shrink-0">
+        <div className="flex-1 overflow-y-auto">
+          <div className="p-4 space-y-6">
+            {/* Connection Options */}
+            <div>
+              {connectOptions.map((option, index) => {
+                const isConnected = isAccountConnected(option.id);
+                return (
+                  <button
+                    key={option.id}
+                    onClick={() => handleConnect(option.id)}
+                    disabled={option.comingSoon}
+                    className={`w-full flex items-center justify-between p-3 bg-black/50 ${
+                      index === connectOptions.length - 1 ? '' : 'border-b border-stone-700'
+                    } hover:bg-stone-800/30 transition-all duration-200 text-left ${
+                      index === 0 ? 'first:rounded-t-3xl' : ''
+                    } ${
+                      index === connectOptions.length - 1 ? 'last:rounded-b-3xl' : ''
+                    } focus:outline-none focus:ring-0 focus:border-inherit relative ${
+                      option.comingSoon ? 'opacity-60 cursor-not-allowed' : ''
+                    }`}
+                  >
+                    {/* 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="w-5 h-5 opacity-60 flex-shrink-0 mr-3 text-white">
                       {option.icon}
                     </div>
-                    <div className="flex-1 min-w-0">
-                      <h4 className="font-medium text-white text-sm">{option.name}</h4>
-                      <p className="text-xs text-stone-400 truncate">{option.description}</p>
+                    <div className="flex-1">
+                      <div className="font-medium text-sm mb-1 text-white">
+                        {option.name}
+                      </div>
+                      <p className="opacity-70 text-xs">
+                        {option.description}
+                      </p>
                     </div>
-                  </div>
 
-                  <div className="flex items-center space-x-3">
-                    {/* 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>
-                    )}
+                    <div className="flex items-center space-x-3">
+                      {/* Coming Soon badge */}
+                      {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 && (
-                      <button
-                        onClick={() => handleConnect(option.id)}
-                        className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
-                          isConnected
-                            ? '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'}
-                      </button>
-                    )}
-                  </div>
+                      {/* Action button for active connections */}
+                      {!option.comingSoon && isConnected && (
+                        <span className="px-2 py-1 text-xs font-medium rounded-full border bg-sage-500/20 text-sage-400 border-sage-500/30">
+                          Connected
+                        </span>
+                      )}
+
+                      {/* Action button for non-connected */}
+                      {!option.comingSoon && !isConnected && (
+                        <span className="px-2 py-1 text-xs font-medium rounded-full border bg-blue-500/20 text-blue-400 border-blue-500/30">
+                          Connect
+                        </span>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Security notice */}
+            <div className="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-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-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>
                 </div>
-              );
-            })}
-          </div>
-
-          {/* Security notice */}
-          <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-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-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>
               </div>
             </div>
           </div>
         </div>
-      </SettingsPanelLayout>
+      </div>
 
       {/* Telegram Connection Modal */}
       <TelegramConnectionModal