Skip to content

ui: harmonize background colors and font/icon colors #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Netsbump merged 1 commit into from
Oct 23, 2025
Merged

ui: harmonize background colors and font/icon colors #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/web/src/routes/__auth.login.lazy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ function Login() {
<div className="bg-white/80 backdrop-blur-sm border rounded-2xl shadow-sm p-8">
{/* Logo */}
<div className="flex items-center justify-center gap-2 mb-8">
<BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-600" />
<span className="text-xl font-bold text-purple-600">Dropit</span>
<BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-700" />
<span className="text-xl font-bold text-purple-700">Dropit</span>
</div>

<div className="flex flex-col space-y-2 text-center mb-6">
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/routes/__auth.signup.lazy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ function Signup() {
<div className="bg-white/80 backdrop-blur-sm border rounded-2xl shadow-sm p-8">
{/* Logo */}
<div className="flex items-center justify-center gap-2 mb-8">
<BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-600" />
<span className="text-xl font-bold text-purple-600">Dropit</span>
<BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-700" />
<span className="text-xl font-bold text-purple-700">Dropit</span>
</div>

<div className="flex flex-col space-y-2 text-center mb-6">
Expand Down
3 changes: 0 additions & 3 deletions apps/web/src/routes/__auth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,6 @@ function AuthLayout() {
return (
<div
className="min-h-screen flex items-center justify-center"
style={{
background: 'linear-gradient(135deg, rgba(200, 180, 255, 0.5) 0%, rgba(180, 200, 255, 0.4) 20%, rgba(255, 200, 220, 0.3) 40%, rgba(255, 220, 200, 0.35) 60%, rgba(255, 200, 220, 0.4) 80%, rgba(220, 180, 255, 0.5) 100%)'
}}
>
<Outlet />
</div>
Expand Down
10 changes: 4 additions & 6 deletions apps/web/src/routes/create-organization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,16 +75,14 @@ function CreateOrganizationPage() {
};

return (
<div className="min-h-screen flex items-center justify-center p-8" style={{
background: 'linear-gradient(135deg, rgba(200, 180, 255, 0.5) 0%, rgba(180, 200, 255, 0.4) 20%, rgba(255, 200, 220, 0.3) 40%, rgba(255, 220, 200, 0.35) 60%, rgba(255, 200, 220, 0.4) 80%, rgba(220, 180, 255, 0.5) 100%)'
}}>
<div className="min-h-screen flex items-center justify-center p-8">
<div className="w-full max-w-md mx-auto">
<Card className="w-full bg-white/80 backdrop-blur-sm border rounded-2xl shadow-sm">
<CardHeader className="text-center p-8 pb-6">
{/* Logo */}
<div className="flex items-center justify-center gap-2 mb-6">
<BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-600" />
<span className="text-xl font-bold text-purple-600">Dropit</span>
<BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-700" />
<span className="text-xl font-bold text-purple-700">Dropit</span>
</div>

<CardTitle className="text-2xl text-gray-800">{t('create_organization.title')}</CardTitle>
Expand Down Expand Up @@ -142,7 +140,7 @@ function CreateOrganizationPage() {

<Button
type="submit"
className="w-full h-11 text-base shadow hover:shadow-md transition-shadow"
className="w-full h-11"
disabled={createOrganizationMutation.isPending}
>
{createOrganizationMutation.isPending
Expand Down
12 changes: 6 additions & 6 deletions apps/web/src/routes/download-app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,11 @@ function DownloadAppPage() {
};

return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
<div className="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 flex items-center justify-center p-4">
<div className="w-full max-w-4xl mx-auto">
<div className="text-center mb-8">
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
<Smartphone className="h-8 w-8 text-blue-600" />
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-purple-100">
<Smartphone className="h-8 w-8 text-purple-600" />
</div>
<h1 className="text-4xl font-bold text-gray-900 mb-4">
{isAthlete ? 'Bienvenue sur DropIt !' : t('download_app.title')}
Expand All @@ -86,8 +86,8 @@ function DownloadAppPage() {
}
</p>
{isAthlete && (
<div className="mt-4 p-4 bg-blue-50 rounded-lg max-w-2xl mx-auto">
<p className="text-sm text-blue-700">
<div className="mt-4 p-4 bg-purple-50 rounded-lg max-w-2xl mx-auto">
<p className="text-sm text-purple-700">
💡 L'interface web est réservée aux coachs pour la gestion des programmes d'entraînement.
Votre espace athlète vous attend sur mobile !
</p>
Expand Down Expand Up @@ -192,7 +192,7 @@ function DownloadAppPage() {
<div className="text-center mt-8 pt-8 border-t border-gray-200">
<p className="text-sm text-gray-500">
{t('download_app.footer.support')}{' '}
<a href="/support" className="text-blue-600 hover:underline">
<a href="/support" className="text-purple-600 hover:underline">
{t('download_app.footer.contact')}
</a>
</p>
Expand Down
11 changes: 5 additions & 6 deletions apps/web/src/routes/join-organization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,16 +80,14 @@ function JoinOrganizationPage() {
};

return (
<div className="min-h-screen flex items-center justify-center p-8" style={{
background: 'linear-gradient(135deg, rgba(200, 180, 255, 0.5) 0%, rgba(180, 200, 255, 0.4) 20%, rgba(255, 200, 220, 0.3) 40%, rgba(255, 220, 200, 0.35) 60%, rgba(255, 200, 220, 0.4) 80%, rgba(220, 180, 255, 0.5) 100%)'
}}>
<div className="min-h-screen flex items-center justify-center p-8">
<div className="w-full max-w-md mx-auto">
<Card className="w-full bg-white/80 backdrop-blur-sm border rounded-2xl shadow-sm">
<CardHeader className="text-center p-8 pb-6">
{/* Logo */}
<div className="flex items-center justify-center gap-2 mb-6">
<BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-600" />
<span className="text-xl font-bold text-purple-600">Dropit</span>
<BicepsFlexed className="h-8 w-8 stroke-[2.5] text-purple-700" />
<span className="text-xl font-bold text-purple-700">Dropit</span>
</div>

<CardTitle className="text-2xl text-gray-800">{t('join_organization.title')}</CardTitle>
Expand Down Expand Up @@ -117,7 +115,8 @@ function JoinOrganizationPage() {

<Button
type="submit"
className="w-full h-11 text-base bg-orange-500 hover:bg-orange-600 text-white shadow hover:shadow-md transition-shadow"
variant='default'
className="w-full h-11"
disabled={joinOrganizationMutation.isPending}
>
{joinOrganizationMutation.isPending ? (
Expand Down
24 changes: 12 additions & 12 deletions apps/web/src/routes/onboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ function OnboardingChoice() {
className="p-8"
>
<CardHeader className="text-center p-0 mb-6">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-purple-100 group-hover:bg-purple-200 transition-colors">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-purple-100">
<Trophy className="h-8 w-8 text-purple-600" />
</div>
<CardTitle className="text-2xl text-gray-800 mb-2">{t('onboarding.roles.coach.title')}</CardTitle>
Expand Down Expand Up @@ -147,8 +147,8 @@ function OnboardingChoice() {
className="p-8"
>
<CardHeader className="text-center p-0 mb-6">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-orange-100 group-hover:bg-orange-200 transition-colors">
<UserCheck className="h-8 w-8 text-orange-600" />
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-pink-100">
<UserCheck className="h-8 w-8 text-pink-600" />
</div>
<CardTitle className="text-2xl text-gray-800 mb-2">{t('onboarding.roles.athlete.title')}</CardTitle>
<CardDescription className="text-base text-gray-600">
Expand All @@ -159,33 +159,33 @@ function OnboardingChoice() {
<CardContent className="p-0">
<ul className="space-y-3 mb-8">
<li className="flex items-start gap-3 text-sm text-gray-700">
<div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center">
<CheckIcon className="w-3 h-3 text-orange-600" />
<div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-pink-100 flex items-center justify-center">
<CheckIcon className="w-3 h-3 text-pink-600" />
</div>
<span>{t('onboarding.roles.athlete.features.join_club')}</span>
</li>
<li className="flex items-start gap-3 text-sm text-gray-700">
<div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center">
<CheckIcon className="w-3 h-3 text-orange-600" />
<div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-pink-100 flex items-center justify-center">
<CheckIcon className="w-3 h-3 text-pink-600" />
</div>
<span>{t('onboarding.roles.athlete.features.follow_training')}</span>
</li>
<li className="flex items-start gap-3 text-sm text-gray-700">
<div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center">
<CheckIcon className="w-3 h-3 text-orange-600" />
<div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-pink-100 flex items-center justify-center">
<CheckIcon className="w-3 h-3 text-pink-600" />
</div>
<span>{t('onboarding.roles.athlete.features.record_performance')}</span>
</li>
<li className="flex items-start gap-3 text-sm text-gray-700">
<div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center">
<CheckIcon className="w-3 h-3 text-orange-600" />
<div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-pink-100 flex items-center justify-center">
<CheckIcon className="w-3 h-3 text-pink-600" />
</div>
<span>{t('onboarding.roles.athlete.features.communicate_coach')}</span>
</li>
</ul>

<Button
className="w-full h-11 text-base bg-orange-500 hover:bg-orange-600 text-white shadow hover:shadow-md transition-shadow"
className="w-full h-11 text-base bg-pink-500 hover:bg-pink-600 text-white shadow hover:shadow-md transition-shadow"
size="lg"
>
{t('onboarding.roles.athlete.button')}
Expand Down