From f0d64e8e973a03306d433fc9efd82e627bf6e8ec Mon Sep 17 00:00:00 2001
From: Steven Enamakel <enamakel@vezures.xyz>
Date: Wed, 28 Jan 2026 02:27:35 +0530
Subject: [PATCH] Update ConnectionIndicator description and refactor Home
 component styles for improved user experience

- Modified the description in the ConnectionIndicator component for clearer messaging.
- Refactored button styles in the Home component to enhance visual consistency and user interaction.
- Removed the AnalyticsStep component to streamline the onboarding process.

These changes aim to improve user clarity and engagement throughout the application.
---
 src/components/ConnectionIndicator.tsx       |   2 +-
 src/pages/Home.tsx                           |  10 +-
 src/pages/onboarding/steps/AnalyticsStep.tsx | 102 -------------------
 3 files changed, 6 insertions(+), 108 deletions(-)
 delete mode 100644 src/pages/onboarding/steps/AnalyticsStep.tsx

diff --git a/src/components/ConnectionIndicator.tsx b/src/components/ConnectionIndicator.tsx
index 4ce5fbba2..d64b1e0b7 100644
--- a/src/components/ConnectionIndicator.tsx
+++ b/src/components/ConnectionIndicator.tsx
@@ -6,7 +6,7 @@ interface ConnectionIndicatorProps {
 
 const ConnectionIndicator = ({
   status = 'connected',
-  description = 'Your browser is now connected to the AlphaHuman AI. Keep this tab open to keep the connection alive. You can message the assistant with the button below.',
+  description = 'Your browser is now connected to the AlphaHuman AI. Keep this tab open to keep the connection alive. You can message your assistant with the button below.',
   className = '',
 }: ConnectionIndicatorProps) => {
   const statusConfig = {
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 2c3a01ab8..de3e48aa1 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -79,11 +79,11 @@ const Home = () => {
             </div>
 
             {/* Action buttons */}
-            <div className="glass rounded-3xl p-6 shadow-large animate-fade-up mt-4 space-y-3">
+            <div className="glass rounded-3xl p-0 shadow-large animate-fade-up mt-4 overflow-hidden">
               {/* Manage Connections */}
               <button
                 onClick={handleManageConnections}
-                className="w-full flex items-start justify-between p-3 bg-black/50 border border-stone-700 rounded-xl hover:border-stone-600 hover:shadow-medium transition-all duration-200 text-left"
+                className="w-full flex items-start justify-between p-3 bg-black/50 border-b border-stone-700 hover:bg-stone-800/30 transition-all duration-200 text-left first:rounded-t-3xl"
               >
                 <div className="flex-1">
                   <div className="font-medium text-sm mb-1">Manage Connections</div>
@@ -98,7 +98,7 @@ const Home = () => {
               {/* View Encryption Key */}
               <button
                 onClick={handleViewEncryptionKey}
-                className="w-full flex items-start justify-between p-3 bg-black/50 border border-stone-700 rounded-xl hover:border-stone-600 hover:shadow-medium transition-all duration-200 text-left"
+                className="w-full flex items-start justify-between p-3 bg-black/50 border-b border-stone-700 hover:bg-stone-800/30 transition-all duration-200 text-left"
               >
                 <div className="flex-1">
                   <div className="font-medium text-sm mb-1">View Encryption Key</div>
@@ -112,7 +112,7 @@ const Home = () => {
               {/* Delete All Data */}
               <button
                 onClick={handleDeleteAllData}
-                className="w-full flex items-start justify-between p-3 bg-black/50 border border-coral-500/30 rounded-xl hover:border-coral-500/50 hover:shadow-medium transition-all duration-200 text-left"
+                className="w-full flex items-start justify-between p-3 bg-black/50 border-b border-coral-500/30 hover:bg-stone-800/30 transition-all duration-200 text-left"
               >
                 <div className="flex-1">
                   <div className="font-medium text-sm mb-1 text-coral-400">Delete All Data</div>
@@ -126,7 +126,7 @@ const Home = () => {
               {/* Logout */}
               <button
                 onClick={handleLogout}
-                className="w-full flex items-start justify-between p-3 bg-black/50 border border-amber-500/30 rounded-xl hover:border-amber-500/50 hover:shadow-medium transition-all duration-200 text-left"
+                className="w-full flex items-start justify-between p-3 bg-black/50 hover:bg-stone-800/30 transition-all duration-200 text-left last:rounded-b-3xl"
               >
                 <div className="flex-1">
                   <div className="font-medium text-sm mb-1 text-amber-400">Logout</div>
diff --git a/src/pages/onboarding/steps/AnalyticsStep.tsx b/src/pages/onboarding/steps/AnalyticsStep.tsx
deleted file mode 100644
index e5ab08872..000000000
--- a/src/pages/onboarding/steps/AnalyticsStep.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useState } from 'react';
-
-interface AnalyticsStepProps {
-  onNext: () => void;
-}
-
-const AnalyticsStep = ({ onNext }: AnalyticsStepProps) => {
-  const [selectedOption, setSelectedOption] = useState('shareAnalytics');
-
-  return (
-    <div className="glass rounded-3xl p-8 shadow-large animate-fade-up">
-      <div className="text-center mb-4">
-        <h1 className="text-xl font-bold mb-2">Analytics</h1>
-        <p className="opacity-70 text-sm">
-          We collect anonymized usage data to help us improve the app for you and for others. You can choose to skip this.
-        </p>
-      </div>
-
-      <div className="space-y-4 mb-4">
-        <div
-          className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${selectedOption === 'shareAnalytics'
-            ? 'border-primary-500 bg-primary-500/20'
-            : 'border-stone-700 bg-black/50 hover:border-stone-600'
-            }`}
-          onClick={() => setSelectedOption('shareAnalytics')}
-        >
-          <div className="flex items-start space-x-4">
-            <div className="flex items-center justify-center mt-0.5">
-              <div
-                className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${selectedOption === 'shareAnalytics'
-                  ? 'border-primary-500 bg-primary-500'
-                  : 'border-stone-600 bg-black'
-                  }`}
-              >
-                {selectedOption === 'shareAnalytics' && (
-                  <div className="w-2 h-2 bg-white rounded-full"></div>
-                )}
-              </div>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-1 text-sm">Share Anonymized Usage Data</h3>
-              <p className="opacity-70 text-xs leading-relaxed">
-                Share anonymized usage data to help us improve features and performance of the app.
-                This helps us improve the app for you and for others.
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div
-          className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${selectedOption === 'maximumPrivacy'
-            ? 'border-primary-500 bg-primary-500/20'
-            : 'border-stone-700 bg-black/50 hover:border-stone-600'
-            }`}
-          onClick={() => setSelectedOption('maximumPrivacy')}
-        >
-          <div className="flex items-start space-x-4">
-            <div className="flex items-center justify-center mt-0.5">
-              <div
-                className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${selectedOption === 'maximumPrivacy'
-                  ? 'border-primary-500 bg-primary-500'
-                  : 'border-stone-600 bg-black'
-                  }`}
-              >
-                {selectedOption === 'maximumPrivacy' && (
-                  <div className="w-2 h-2 bg-white rounded-full"></div>
-                )}
-              </div>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-1 text-sm">Don't Collect Anything</h3>
-              <p className="opacity-70 text-xs leading-relaxed">
-                We won't collect any usage analytics, ensuring total anonymity. Keep all your data completely private.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="p-4 bg-sage-500/10 rounded-xl border border-sage-500/30 mb-4">
-        <div className="flex items-start space-x-2">
-          <svg className="w-5 h-5 text-sage-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-            <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
-          </svg>
-          <div>
-            <p className="font-medium text-sm">You can change this setting anytime</p>
-            <p className="opacity-70 text-xs mt-1">Your privacy preferences can be updated in your account settings</p>
-          </div>
-        </div>
-      </div>
-
-      <button
-        onClick={onNext}
-        className="btn-primary w-full py-2.5 text-sm font-medium rounded-xl"
-      >
-        Continue
-      </button>
-    </div>
-  );
-};
-
-export default AnalyticsStep;