mirror of
https://github.com/tinyhumansai/openhuman.git
synced 2026-07-27 21:08:00 +00:00
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.
This commit is contained in:
Steven Enamakel
@@ -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 = {
|
||||
|
||||
+5
-5
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user