From b13edf0c0a15232e620cd8b96363dd38bc42cbbd Mon Sep 17 00:00:00 2001
From: Manh Pham <v.manhpt1@vinit.tech>
Date: Sun, 23 Nov 2025 04:14:44 +0000
Subject: [PATCH] fix: adjust styling and layout of login form elements

---
 web/src/pages/login-next/index.tsx | 38 +++++++++++++++---------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/web/src/pages/login-next/index.tsx b/web/src/pages/login-next/index.tsx
index 5b7f7383d..3001413db 100644
--- a/web/src/pages/login-next/index.tsx
+++ b/web/src/pages/login-next/index.tsx
@@ -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