Skip to content

Commit 12416fc

Browse files
evereqevereq
authored
Merge pull request #436 from ever-works/refactor/use-sitelogo-in-login-content
refactor(auth): replace Image with SiteLogo component in login content
2 parents 7073275 + cdcd064 commit 12416fc

File tree

3 files changed

+537
-543
lines changed

3 files changed

+537
-543
lines changed

‎components/auth/login-content.tsx‎

Lines changed: 166 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -1,185 +1,190 @@
1-
"use client";
1+
'use client';
22

3-
import { CredentialsForm } from "@/app/[locale]/auth/components/credentials-form";
4-
import { SocialLogin } from "@/app/[locale]/auth/components/social-login";
5-
import { useConfig } from "@/app/[locale]/config";
6-
import { cn } from "@/lib/utils";
7-
import { useTheme } from "@/hooks/use-theme";
8-
import Image from "next/image";
9-
import { authFeatures } from "@/lib/config/auth-features";
10-
import { useTranslations } from "next-intl";
3+
import { CredentialsForm } from '@/app/[locale]/auth/components/credentials-form';
4+
import { SocialLogin } from '@/app/[locale]/auth/components/social-login';
5+
import { useConfig } from '@/app/[locale]/config';
6+
import { cn } from '@/lib/utils';
7+
import { useTheme } from '@/hooks/use-theme';
8+
import { authFeatures } from '@/lib/config/auth-features';
9+
import { useTranslations } from 'next-intl';
10+
import { SiteLogo } from '../shared/site-logo';
1111

1212
interface LoginContentProps {
13-
variant?: 'modal' | 'page';
14-
message?: string;
15-
type?: 'login' | 'signup';
16-
onSuccess?: () => void;
13+
variant?: 'modal' | 'page';
14+
message?: string;
15+
type?: 'login' | 'signup';
16+
onSuccess?: () => void;
1717
}
1818

1919
/**
2020
* Shared login/signup content component used in both modal and full-page contexts
2121
* No motion.div wrappers to prevent content flashing
2222
*/
2323
export function LoginContent({
24-
variant = 'modal',
25-
message = "Welcome back",
26-
type = "login",
27-
onSuccess
24+
variant = 'modal',
25+
message = 'Welcome back',
26+
type = 'login',
27+
onSuccess
2828
}: LoginContentProps) {
29-
const config = useConfig();
30-
const { currentTheme } = useTheme();
31-
const isDark = currentTheme.background === "#000000" || currentTheme.text === "#ffffff";
32-
const t = useTranslations("common");
29+
const config = useConfig();
30+
const { currentTheme } = useTheme();
31+
const isDark = currentTheme.background === '#000000' || currentTheme.text === '#ffffff';
32+
const t = useTranslations('common');
3333

34-
return (
35-
<div className="relative">
36-
{/* Background Pattern - only for modal variant */}
37-
{variant === 'modal' && (
38-
<div className="absolute inset-0 opacity-[0.02] dark:opacity-[0.05] pointer-events-none"
39-
style={{
40-
backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)',
41-
backgroundSize: '20px 20px'
42-
}}
43-
/>
44-
)}
34+
return (
35+
<div className="relative">
36+
{/* Background Pattern - only for modal variant */}
37+
{variant === 'modal' && (
38+
<div
39+
className="absolute inset-0 opacity-[0.02] dark:opacity-[0.05] pointer-events-none"
40+
style={{
41+
backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)',
42+
backgroundSize: '20px 20px'
43+
}}
44+
/>
45+
)}
4546

46-
<div className="flex flex-col md:flex-row">
47-
{/* Left Side - Features */}
48-
<div className={cn(
49-
"w-full p-6 flex flex-col justify-center relative",
50-
variant === 'modal' ? "md:w-[45%]" : "md:w-1/2",
51-
"bg-linear-to-br from-gray-50 to-white",
52-
"dark:from-gray-900 dark:via-gray-900 dark:to-gray-950"
53-
)}>
54-
<div className="relative z-10">
55-
<div className="mb-6">
56-
{/* Logo */}
57-
<div className="flex items-center mb-6 space-x-2">
58-
<Image
59-
src={isDark ? "/logo-dark.png" : "/logo-light.png"}
60-
alt={config.company_name || "Logo"}
61-
width={100}
62-
height={28}
63-
className="h-7"
64-
style={{ width: 'auto', height: 'auto', maxHeight: '1.75rem' }}
65-
/>
66-
</div>
47+
<div className="flex flex-col md:flex-row">
48+
{/* Left Side - Features */}
49+
<div
50+
className={cn(
51+
'w-full p-6 flex flex-col justify-center relative',
52+
variant === 'modal' ? 'md:w-[45%]' : 'md:w-1/2',
53+
'bg-linear-to-br from-gray-50 to-white',
54+
'dark:from-gray-900 dark:via-gray-900 dark:to-gray-950'
55+
)}
56+
>
57+
<div className="relative z-10">
58+
<div className="mb-6">
59+
{/* Logo */}
60+
<div className="flex items-center mb-6 space-x-2">
61+
<SiteLogo size="sm" showText={true} />
62+
</div>
6763

68-
{/* Title */}
69-
<div>
70-
<h2 className={cn(
71-
"text-2xl font-bold mb-3",
72-
"bg-linear-to-r from-gray-900 to-gray-700",
73-
"dark:from-white dark:to-gray-300",
74-
"bg-clip-text text-transparent"
75-
)}>
76-
Discover & Connect
77-
</h2>
64+
{/* Title */}
65+
<div>
66+
<h2
67+
className={cn(
68+
'text-2xl font-bold mb-3',
69+
'bg-linear-to-r from-gray-900 to-gray-700',
70+
'dark:from-white dark:to-gray-300',
71+
'bg-clip-text text-transparent'
72+
)}
73+
>
74+
Discover & Connect
75+
</h2>
7876

79-
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed mb-8">
80-
Join our network of professionals and unlock new opportunities.
81-
</p>
82-
</div>
77+
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed mb-8">
78+
Join our network of professionals and unlock new opportunities.
79+
</p>
80+
</div>
8381

84-
{/* Features List */}
85-
<div className="space-y-4">
86-
{authFeatures.map((feature) => {
87-
const colorVariant = feature.colorVariant;
88-
const bgClasses = colorVariant === "primary"
89-
? "bg-linear-to-br from-primary-50 to-primary-100/50 dark:from-primary-900/20 dark:to-primary-800/10 group-hover:from-primary-100 group-hover:to-primary-50 dark:group-hover:from-primary-800/30 dark:group-hover:to-primary-900/20 ring-1 ring-primary-100 dark:ring-primary-800/20"
90-
: colorVariant === "accent"
91-
? "bg-linear-to-br from-accent-50 to-accent-100/50 dark:from-accent-900/20 dark:to-accent-800/10 group-hover:from-accent-100 group-hover:to-accent-50 dark:group-hover:from-accent-800/30 dark:group-hover:to-accent-900/20 ring-1 ring-accent-100 dark:ring-accent-800/20"
92-
: "bg-linear-to-br from-secondary-50 to-secondary-100/50 dark:from-secondary-900/20 dark:to-secondary-800/10 group-hover:from-secondary-100 group-hover:to-secondary-50 dark:group-hover:from-secondary-800/30 dark:group-hover:to-secondary-900/20 ring-1 ring-secondary-100 dark:ring-secondary-800/20";
82+
{/* Features List */}
83+
<div className="space-y-4">
84+
{authFeatures.map((feature) => {
85+
const colorVariant = feature.colorVariant;
86+
const bgClasses =
87+
colorVariant === 'primary'
88+
? 'bg-linear-to-br from-primary-50 to-primary-100/50 dark:from-primary-900/20 dark:to-primary-800/10 group-hover:from-primary-100 group-hover:to-primary-50 dark:group-hover:from-primary-800/30 dark:group-hover:to-primary-900/20 ring-1 ring-primary-100 dark:ring-primary-800/20'
89+
: colorVariant === 'accent'
90+
? 'bg-linear-to-br from-accent-50 to-accent-100/50 dark:from-accent-900/20 dark:to-accent-800/10 group-hover:from-accent-100 group-hover:to-accent-50 dark:group-hover:from-accent-800/30 dark:group-hover:to-accent-900/20 ring-1 ring-accent-100 dark:ring-accent-800/20'
91+
: 'bg-linear-to-br from-secondary-50 to-secondary-100/50 dark:from-secondary-900/20 dark:to-secondary-800/10 group-hover:from-secondary-100 group-hover:to-secondary-50 dark:group-hover:from-secondary-800/30 dark:group-hover:to-secondary-900/20 ring-1 ring-secondary-100 dark:ring-secondary-800/20';
9392

94-
const iconClasses = colorVariant === "primary"
95-
? "text-primary-600 dark:text-primary-400 group-hover:text-primary-700 dark:group-hover:text-primary-300"
96-
: colorVariant === "accent"
97-
? "text-accent-600 dark:text-accent-400 group-hover:text-accent-700 dark:group-hover:text-accent-300"
98-
: "text-secondary-600 dark:text-secondary-400 group-hover:text-secondary-700 dark:group-hover:text-secondary-300";
93+
const iconClasses =
94+
colorVariant === 'primary'
95+
? 'text-primary-600 dark:text-primary-400 group-hover:text-primary-700 dark:group-hover:text-primary-300'
96+
: colorVariant === 'accent'
97+
? 'text-accent-600 dark:text-accent-400 group-hover:text-accent-700 dark:group-hover:text-accent-300'
98+
: 'text-secondary-600 dark:text-secondary-400 group-hover:text-secondary-700 dark:group-hover:text-secondary-300';
9999

100-
const titleHoverClasses = colorVariant === "primary"
101-
? "group-hover:text-primary-600 dark:group-hover:text-primary-400"
102-
: colorVariant === "accent"
103-
? "group-hover:text-accent-600 dark:group-hover:text-accent-400"
104-
: "group-hover:text-secondary-600 dark:group-hover:text-secondary-400";
100+
const titleHoverClasses =
101+
colorVariant === 'primary'
102+
? 'group-hover:text-primary-600 dark:group-hover:text-primary-400'
103+
: colorVariant === 'accent'
104+
? 'group-hover:text-accent-600 dark:group-hover:text-accent-400'
105+
: 'group-hover:text-secondary-600 dark:group-hover:text-secondary-400';
105106

106-
return (
107-
<div
108-
key={feature.titleKey}
109-
className="flex items-start group"
110-
>
111-
<div className={cn(
112-
"p-2 rounded-lg mr-3 transition-all duration-300 transform group-hover:scale-110",
113-
bgClasses
114-
)}>
115-
<feature.icon className={cn(
116-
"h-4 w-4",
117-
iconClasses
118-
)} />
119-
</div>
120-
<div>
121-
<h3 className={cn(
122-
"font-medium text-gray-900 dark:text-white text-sm transition-colors",
123-
titleHoverClasses
124-
)}>
125-
{t(feature.titleKey as any)}
126-
</h3>
127-
<p className="text-gray-500 dark:text-gray-400 text-xs leading-relaxed">
128-
{t(feature.descriptionKey as any)}
129-
</p>
130-
</div>
131-
</div>
132-
);
133-
})}
134-
</div>
135-
</div>
136-
</div>
107+
return (
108+
<div key={feature.titleKey} className="flex items-start group">
109+
<div
110+
className={cn(
111+
'p-2 rounded-lg mr-3 transition-all duration-300 transform group-hover:scale-110',
112+
bgClasses
113+
)}
114+
>
115+
<feature.icon className={cn('h-4 w-4', iconClasses)} />
116+
</div>
117+
<div>
118+
<h3
119+
className={cn(
120+
'font-medium text-gray-900 dark:text-white text-sm transition-colors',
121+
titleHoverClasses
122+
)}
123+
>
124+
{t(feature.titleKey as any)}
125+
</h3>
126+
<p className="text-gray-500 dark:text-gray-400 text-xs leading-relaxed">
127+
{t(feature.descriptionKey as any)}
128+
</p>
129+
</div>
130+
</div>
131+
);
132+
})}
133+
</div>
134+
</div>
135+
</div>
137136

138-
{/* Decorative gradient */}
139-
<div className="absolute bottom-0 left-0 right-0 h-32 bg-linear-to-t from-white dark:from-gray-950 to-transparent pointer-events-none" />
140-
</div>
137+
{/* Decorative gradient */}
138+
<div className="absolute bottom-0 left-0 right-0 h-32 bg-linear-to-t from-white dark:from-gray-950 to-transparent pointer-events-none" />
139+
</div>
141140

142-
{/* Right Side - Auth Form */}
143-
<div className={cn(
144-
"w-full p-6 flex items-center justify-center relative bg-white/40 dark:bg-gray-900/40 backdrop-blur-xs",
145-
variant === 'modal' ? "md:w-[55%]" : "md:w-1/2"
146-
)}>
147-
<div className="w-full max-w-sm">
148-
<div className="text-center mb-5">
149-
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
150-
{message}
151-
</h3>
152-
<p className="text-gray-600 dark:text-gray-400 text-xs">
153-
Enter your credentials to continue
154-
</p>
155-
</div>
141+
{/* Right Side - Auth Form */}
142+
<div
143+
className={cn(
144+
'w-full p-6 flex items-center justify-center relative bg-white/40 dark:bg-gray-900/40 backdrop-blur-xs',
145+
variant === 'modal' ? 'md:w-[55%]' : 'md:w-1/2'
146+
)}
147+
>
148+
<div className="w-full max-w-sm">
149+
<div className="text-center mb-5">
150+
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">{message}</h3>
151+
<p className="text-gray-600 dark:text-gray-400 text-xs">
152+
Enter your credentials to continue
153+
</p>
154+
</div>
156155

157-
<div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-xs border border-gray-100 dark:border-gray-800">
158-
<CredentialsForm type={type} onSuccess={onSuccess}>
159-
<div className="space-y-3">
160-
<div className="relative">
161-
<div className="absolute inset-0 flex items-center">
162-
<div className="w-full border-t border-gray-200 dark:border-gray-800" />
163-
</div>
164-
</div>
165-
<SocialLogin />
166-
</div>
167-
</CredentialsForm>
168-
</div>
156+
<div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-xs border border-gray-100 dark:border-gray-800">
157+
<CredentialsForm type={type} onSuccess={onSuccess}>
158+
<div className="space-y-3">
159+
<div className="relative">
160+
<div className="absolute inset-0 flex items-center">
161+
<div className="w-full border-t border-gray-200 dark:border-gray-800" />
162+
</div>
163+
</div>
164+
<SocialLogin />
165+
</div>
166+
</CredentialsForm>
167+
</div>
169168

170-
<p className="text-center text-[11px] text-gray-500 dark:text-gray-400 mt-4">
171-
By signing in, you agree to our{" "}
172-
<a href="#" className="text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 hover:underline">
173-
Terms
174-
</a>{" "}
175-
&{" "}
176-
<a href="#" className="text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 hover:underline">
177-
Privacy
178-
</a>
179-
</p>
180-
</div>
181-
</div>
182-
</div>
183-
</div>
184-
);
169+
<p className="text-center text-[11px] text-gray-500 dark:text-gray-400 mt-4">
170+
By signing in, you agree to our{' '}
171+
<a
172+
href="#"
173+
className="text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 hover:underline"
174+
>
175+
Terms
176+
</a>{' '}
177+
&{' '}
178+
<a
179+
href="#"
180+
className="text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 hover:underline"
181+
>
182+
Privacy
183+
</a>
184+
</p>
185+
</div>
186+
</div>
187+
</div>
188+
</div>
189+
);
185190
}

0 commit comments

Comments
 (0)