gmakstutis/ragflow
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: adjust styling and layout of login form elements

Browse source
This commit is contained in:
Manh Pham 2025-11-23 04:14:44 +00:00
parent c8e27fa9a7
commit b13edf0c0a
1 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
web/src/pages/login-next/index.tsx
View file

@ -181,22 +181,22 @@ const Login = () => {
{/* Login Form */} {/* Login Form */}
<FlipCard3D isLoginPage={isLoginPage}> <FlipCard3D isLoginPage={isLoginPage}>
<div className="flex flex-col items-center justify-center w-full"> <div className="flex flex-col items-center justify-center w-full">
<div className="text-center mb-8"> <div className="text-center mb-4">
<h2 className="text-xl font-semibold text-text-primary"> <h2 className="text-lg font-semibold text-text-primary">
{title === 'login' ? t('loginTitle') : t('signUpTitle')} {title === 'login' ? t('loginTitle') : t('signUpTitle')}
</h2> </h2>
</div> </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 {...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))} onSubmit={form.handleSubmit((data) => onCheck(data))}
> >
<FormField <FormField
control={form.control} control={form.control}
name="email" name="email"
render={({ field }) => ( render={({ field }) => (
<FormItem className="space-y-2"> <FormItem className="space-y-1.5">
<FormLabel required className="text-sm font-medium"> <FormLabel required className="text-sm font-medium">
{t('emailLabel')} {t('emailLabel')}
</FormLabel> </FormLabel>
@ -204,7 +204,7 @@ const Login = () => {
<Input <Input
placeholder={t('emailPlaceholder')} placeholder={t('emailPlaceholder')}
autoComplete="email" 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} {...field}
/> />
</FormControl> </FormControl>
@ -217,7 +217,7 @@ const Login = () => {
control={form.control} control={form.control}
name="nickname" name="nickname"
render={({ field }) => ( render={({ field }) => (
<FormItem className="space-y-2"> <FormItem className="space-y-1.5">
<FormLabel required className="text-sm font-medium"> <FormLabel required className="text-sm font-medium">
{t('nicknameLabel')} {t('nicknameLabel')}
</FormLabel> </FormLabel>
@ -225,7 +225,7 @@ const Login = () => {
<Input <Input
placeholder={t('nicknamePlaceholder')} placeholder={t('nicknamePlaceholder')}
autoComplete="username" 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} {...field}
/> />
</FormControl> </FormControl>
@ -239,7 +239,7 @@ const Login = () => {
control={form.control} control={form.control}
name="password" name="password"
render={({ field }) => ( render={({ field }) => (
<FormItem className="space-y-2"> <FormItem className="space-y-1.5">
<FormLabel required className="text-sm font-medium"> <FormLabel required className="text-sm font-medium">
{t('passwordLabel')} {t('passwordLabel')}
</FormLabel> </FormLabel>
@ -253,7 +253,7 @@ const Login = () => {
? 'current-password' ? 'current-password'
: 'new-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} {...field}
/> />
{/* <button {/* <button
@ -281,7 +281,7 @@ const Login = () => {
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormControl> <FormControl>
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2">
<Checkbox <Checkbox
checked={field.value} checked={field.value}
onCheckedChange={(checked) => { onCheckedChange={(checked) => {
@ -310,24 +310,24 @@ const Login = () => {
<ButtonLoading <ButtonLoading
type="submit" type="submit"
loading={loading} 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')} {title === 'login' ? t('login') : t('continue')}
</ButtonLoading> </ButtonLoading>
{title === 'login' && channels && channels.length > 0 && ( {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) => ( {channels.map((item) => (
<Button <Button
variant={'transparent'} variant={'transparent'}
key={item.channel} key={item.channel}
onClick={() => handleLoginWithChannel(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 <SvgIcon
name={item.icon || 'sso'} name={item.icon || 'sso'}
width={20} width={18}
height={20} height={18}
className="mr-0" className="mr-0"
/> />
<span className="text-sm font-medium"> <span className="text-sm font-medium">
@ -342,7 +342,7 @@ const Login = () => {
</Form> </Form>
{title === 'login' && registerEnabled && ( {title === 'login' && registerEnabled && (
<div className="mt-10 text-right"> <div className="mt-4 text-right">
<p className="text-text-disabled text-sm"> <p className="text-text-disabled text-sm">
{t('signInTip')} {t('signInTip')}
<Button <Button
@ -356,7 +356,7 @@ const Login = () => {
</div> </div>
)} )}
{title === 'register' && ( {title === 'register' && (
<div className="mt-10 text-right"> <div className="mt-4 text-right">
<p className="text-text-disabled text-sm"> <p className="text-text-disabled text-sm">
{t('signUpTip')} {t('signUpTip')}
<Button <Button