fix: adjust styling and layout of login form elements
This commit is contained in:
Manh Pham
parent
c8e27fa9a7
commit
b13edf0c0a
1 changed files with 19 additions and 19 deletions
|
|
@ -181,22 +181,22 @@ const Login = () => {
|
|||
{/* Login Form */}
|
||||
<FlipCard3D isLoginPage={isLoginPage}>
|
||||
<div className="flex flex-col items-center justify-center w-full">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-xl font-semibold text-text-primary">
|
||||
<div className="text-center mb-4">
|
||||
<h2 className="text-lg font-semibold text-text-primary">
|
||||
{title === 'login' ? t('loginTitle') : t('signUpTitle')}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="w-full max-w-[540px] bg-bg-component backdrop-blur-sm rounded-2xl shadow-xl pt-14 px-10 pb-8 border border-border-button">
|
||||
<div className="w-full max-w-[540px] bg-bg-component backdrop-blur-sm rounded-2xl shadow-xl pt-8 px-8 pb-6 border border-border-button">
|
||||
<Form {...form}>
|
||||
<form
|
||||
className="flex flex-col gap-6 text-text-primary"
|
||||
className="flex flex-col gap-3.5 text-text-primary"
|
||||
onSubmit={form.handleSubmit((data) => onCheck(data))}
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-2">
|
||||
<FormItem className="space-y-1.5">
|
||||
<FormLabel required className="text-sm font-medium">
|
||||
{t('emailLabel')}
|
||||
</FormLabel>
|
||||
|
|
@ -204,7 +204,7 @@ const Login = () => {
|
|||
<Input
|
||||
placeholder={t('emailPlaceholder')}
|
||||
autoComplete="email"
|
||||
className="h-11 rounded-lg border-border-button focus:border-accent-primary transition-colors"
|
||||
className="h-9 rounded-lg border-border-button focus:border-accent-primary transition-colors"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
|
|
@ -217,7 +217,7 @@ const Login = () => {
|
|||
control={form.control}
|
||||
name="nickname"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-2">
|
||||
<FormItem className="space-y-1.5">
|
||||
<FormLabel required className="text-sm font-medium">
|
||||
{t('nicknameLabel')}
|
||||
</FormLabel>
|
||||
|
|
@ -225,7 +225,7 @@ const Login = () => {
|
|||
<Input
|
||||
placeholder={t('nicknamePlaceholder')}
|
||||
autoComplete="username"
|
||||
className="h-11 rounded-lg border-border-button focus:border-accent-primary transition-colors"
|
||||
className="h-9 rounded-lg border-border-button focus:border-accent-primary transition-colors"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
|
|
@ -239,7 +239,7 @@ const Login = () => {
|
|||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-2">
|
||||
<FormItem className="space-y-1.5">
|
||||
<FormLabel required className="text-sm font-medium">
|
||||
{t('passwordLabel')}
|
||||
</FormLabel>
|
||||
|
|
@ -253,7 +253,7 @@ const Login = () => {
|
|||
? 'current-password'
|
||||
: 'new-password'
|
||||
}
|
||||
className="h-11 rounded-lg border-border-button focus:border-accent-primary transition-colors pr-10"
|
||||
className="h-9 rounded-lg border-border-button focus:border-accent-primary transition-colors pr-10"
|
||||
{...field}
|
||||
/>
|
||||
{/* <button
|
||||
|
|
@ -281,7 +281,7 @@ const Login = () => {
|
|||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={(checked) => {
|
||||
|
|
@ -310,24 +310,24 @@ const Login = () => {
|
|||
<ButtonLoading
|
||||
type="submit"
|
||||
loading={loading}
|
||||
className="bg-metallic-gradient border-b-[#00BEB4] border-b-2 hover:bg-metallic-gradient hover:border-b-[#02bcdd] w-full h-11 rounded-lg mt-2 mb-4 font-medium text-base shadow-sm transition-all duration-200"
|
||||
className="bg-metallic-gradient border-b-[#00BEB4] border-b-2 hover:bg-metallic-gradient hover:border-b-[#02bcdd] w-full h-9 rounded-lg mt-1 mb-2 font-medium text-sm shadow-sm transition-all duration-200"
|
||||
>
|
||||
{title === 'login' ? t('login') : t('continue')}
|
||||
</ButtonLoading>
|
||||
{title === 'login' && channels && channels.length > 0 && (
|
||||
<div className="mt-2 space-y-2.5 border-t border-border-button pt-4">
|
||||
<div className="mt-1 space-y-2 border-t border-border-button pt-2.5">
|
||||
{channels.map((item) => (
|
||||
<Button
|
||||
variant={'transparent'}
|
||||
key={item.channel}
|
||||
onClick={() => handleLoginWithChannel(item.channel)}
|
||||
className="w-full h-11 rounded-lg border border-border-button bg-transparent hover:bg-bg-secondary hover:border-accent-primary/50 transition-all duration-200 mt-0"
|
||||
className="w-full h-9 rounded-lg border border-border-button bg-transparent hover:bg-bg-secondary hover:border-accent-primary/50 transition-all duration-200 mt-0"
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2.5">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<SvgIcon
|
||||
name={item.icon || 'sso'}
|
||||
width={20}
|
||||
height={20}
|
||||
width={18}
|
||||
height={18}
|
||||
className="mr-0"
|
||||
/>
|
||||
<span className="text-sm font-medium">
|
||||
|
|
@ -342,7 +342,7 @@ const Login = () => {
|
|||
</Form>
|
||||
|
||||
{title === 'login' && registerEnabled && (
|
||||
<div className="mt-10 text-right">
|
||||
<div className="mt-4 text-right">
|
||||
<p className="text-text-disabled text-sm">
|
||||
{t('signInTip')}
|
||||
<Button
|
||||
|
|
@ -356,7 +356,7 @@ const Login = () => {
|
|||
</div>
|
||||
)}
|
||||
{title === 'register' && (
|
||||
<div className="mt-10 text-right">
|
||||
<div className="mt-4 text-right">
|
||||
<p className="text-text-disabled text-sm">
|
||||
{t('signUpTip')}
|
||||
<Button
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue