admin/openhuman
1
0
Fork 0
mirror of https://github.com/tinyhumansai/openhuman.git synced 2026-07-30 23:14:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Tailwind configuration and enhance onboarding steps for clarity and engagement

Browse Source 
- Optimized primary color definitions in tailwind.config.js for better visibility on dark backgrounds.
- Updated text in the Welcome, Connect, Features, Get Started, and Privacy steps to improve clarity and user engagement.
- Adjusted button labels to create a more inviting and action-oriented experience for users.

These changes aim to enhance the overall onboarding experience, ensuring users have a clear understanding of the application while maintaining a visually appealing design.
This commit is contained in:
Steven Enamakel
2026-01-28 01:39:06 +05:30
parent 5350737b3d
commit f8f5e314d7
8 changed files with 33 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+1 -1
View File
@@ -18,4 +18,4 @@ function App() {
);
}
export default App;
export default App;
src/pages/Welcome.tsx
+2 -2
View File
@@ -47,13 +47,13 @@ const Welcome = () => {
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
</svg>
<span>Login with Telegram</span>
<span>Yes, Login with Telegram</span>
</button>
</div>
{/* Bottom text */}
<p className="text-center opacity-60 text-sm mt-6">
Made with ❤️ by poor Web3 nerds
Made with ❤️ by a bunch of Web3 nerds
</p>
</div>
</div>
src/pages/onboarding/steps/AnalyticsStep.tsx
+8 -8
View File
@@ -77,14 +77,7 @@ const AnalyticsStep = ({ onNext }: AnalyticsStepProps) => {
</div>
</div>
<button
onClick={onNext}
className="btn-primary w-full py-2.5 text-sm font-medium rounded-xl mb-4"
>
Continue
</button>
<div className="p-4 bg-stone-800/50 rounded-xl border border-stone-700">
<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" />
@@ -95,6 +88,13 @@ const AnalyticsStep = ({ onNext }: AnalyticsStepProps) => {
</div>
</div>
</div>
<button
onClick={onNext}
className="btn-primary w-full py-2.5 text-sm font-medium rounded-xl"
>
Continue
</button>
</div>
);
};
src/pages/onboarding/steps/ConnectStep.tsx
+4 -3
View File
@@ -68,7 +68,7 @@ const ConnectStep = ({ onNext }: ConnectStepProps) => {
<div className="text-center mb-4">
<h1 className="text-xl font-bold mb-2">Connect Accounts</h1>
<p className="opacity-70 text-sm">
To get the most out of AlphaHuman, you need to connect at least one account to your assistant. The more
To get the most out of AlphaHuman, you need to connect at least one account. The more
accounts you connect, the more powerful the intelligence will be.
</p>
</div>
@@ -99,9 +99,10 @@ const ConnectStep = ({ onNext }: ConnectStepProps) => {
<div className="mt-4 p-4 bg-stone-800/50 rounded-xl border border-stone-700">
<div className="flex items-start space-x-2">
<div>
<p className="font-medium text-sm">🔒 Your data stays private</p>
<p className="font-medium text-sm">🔒 Remember everything stays private!</p>
<p className="opacity-70 text-xs mt-1">AlphaHuman saves all data and credentials
locally and follows a strict zero-data retention policy when it communicats with different AI mod</p>
locally and follows a strict zero-data retention policy so you won't have to worry about anything
getting leaked.</p>
</div>
</div>
</div>
src/pages/onboarding/steps/FeaturesStep.tsx
+6 -6
View File
@@ -7,16 +7,16 @@ interface FeaturesStepProps {
const FeaturesStep = ({ onNext }: FeaturesStepProps) => {
const features = [
{
title: 'Keeps you on track',
description: 'Organize your chats and tasks, finds you alpha and gets you deep insights. Get more done!',
title: 'Keep track of Everything',
description: 'Sometimes your chats, emails, tasks can get a bit too much. Stay on track, organize things and get more done.',
},
{
title: 'Has Infinite Memory & Learns',
description: 'Your assistant can remember everything you tell it and learn from your interactions to help you get more done.',
description: 'Missed something? Have a sexy assistant give you exactly what you need, every time.',
},
{
title: 'Trades the Trenches',
description: 'Your assistant comes with it\'s own private wallet that can trade on any exchange for you.',
description: 'With it\'s own private wallet, trade or reasearch on any exchange or shitcoin autonomously. Go big or go home.',
},
];
@@ -25,7 +25,7 @@ const FeaturesStep = ({ onNext }: FeaturesStepProps) => {
<div className="text-center mb-4">
<h1 className="text-xl font-bold mb-2">Are You Ready For This?</h1>
<p className="opacity-70 text-sm">
Here are a few things that AlphaHuman can do that might surprise you.
Here's some of the things that AlphaHuman can do
</p>
</div>
@@ -43,7 +43,7 @@ const FeaturesStep = ({ onNext }: FeaturesStepProps) => {
onClick={onNext}
className="btn-primary w-full py-2.5 text-sm font-medium rounded-xl"
>
Yes I'm Ready. Bring It On 🚀
Looks Amazing. Bring It On 🚀
</button>
</div>
);
src/pages/onboarding/steps/GetStartedStep.tsx
+4 -7
View File
@@ -22,7 +22,7 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => {
<div className="text-center mb-4">
<h1 className="text-xl font-bold mb-2">You Are Ready, Soldier!</h1>
<p className="opacity-70 text-sm">
Alright you're all set up, just message the bot you're ready to cook!
Alright you're all set up, just message your assistant and you're ready to cook!
</p>
</div>
@@ -49,7 +49,7 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => {
<div>
<h3 className="font-semibold mb-1 text-sm">Start Messaging</h3>
<p className="opacity-70 text-xs">
Send a message to the bot to get started. Try asking about crypto prices, market trends, or anything crypto-related!
Send a message to the bot to get started. Try asking about crypto prices, market trends, or anything about your chats!
</p>
</div>
</div>
@@ -63,7 +63,7 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => {
<div>
<h3 className="font-semibold mb-1 text-sm">Watch the Magic Happen 🪄</h3>
<p className="opacity-70 text-xs">
Your assistant will automatically start connecting to your accounts and tools to help you get more done.
Your assistant will automatically start connecting to your accounts and tools to get insights and help you get more done.
</p>
</div>
</div>
@@ -74,10 +74,7 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => {
onClick={handleOpenTelegram}
className="w-full flex items-center justify-center space-x-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-semibold py-2.5 text-sm rounded-xl transition-all duration-300 hover:shadow-medium mb-3"
>
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
</svg>
<span>Let's Cook! 🔥</span>
<span>I'm Ready to Cook! 🔥</span>
</button>
</div>
);
src/pages/onboarding/steps/PrivacyStep.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ const PrivacyStep = ({ onNext }: PrivacyStepProps) => {
onClick={onNext}
className="btn-primary w-full py-2.5 text-sm font-medium rounded-xl"
>
Love the Privacy first features! Continue!
Got it! Let's Continue 👀
</button>
</div>
);
tailwind.config.js
+7 -7
View File
@@ -25,19 +25,19 @@ module.exports = {
300: '#D4D4D1', // Hover states
},
// Primary - Premium ocean blue with depth
// Primary - Premium ocean blue with depth (optimized for dark backgrounds)
primary: {
50: '#F0F7FF',
100: '#E0EFFF',
200: '#C7E2FF',
300: '#A5D0FF',
400: '#7AB5FF',
500: '#5B9BF3', // Main brand - sophisticated blue
600: '#4A83DD', // Hover state
700: '#3D6DC4', // Active state
800: '#345A9F',
900: '#2D4B7F',
950: '#1E3052',
500: '#4A83DD', // Main brand - darker blue for dark backgrounds
600: '#3D6DC4', // Hover state
700: '#345A9F', // Active state
800: '#2D4B7F',
900: '#1E3052',
950: '#0F1A2E',
},
// Sage - Success and growth (sophisticated green)