登陆注册页，忘记密码页，登录弹窗样式

src/app/(public)/customer/forget-password/_components/ForgetPasswordForm.tsx

@@ -53,7 +53,7 @@ export default function ForgetPasswordForm() {
 
     return (<>{!emailValue ?
 
-        <div className="w-full box-border px-3">
+        <div className="w-full box-border">
             <h2 className="text-center text-ly-18 font-bold">
                 Retrieve Your Password Here
             </h2>
@@ -66,7 +66,7 @@ export default function ForgetPasswordForm() {
                 className="w-full  mt-9"
                 onSubmit={handleSubmit(onSubmit)}
             >
-                <label className="text-ly-12 block mb-1 font-semibold">
+                <label className="text-ly-16 block mb-1">
                     *Email Address
                 </label>
                 <InputText
@@ -101,8 +101,8 @@ export default function ForgetPasswordForm() {
                 </div>
             </form>
         </div>
-    :
-        <div className="w-full box-border px-3 mt-6">
+        : 
+        <div className="w-full box-border mt-20">
 
             <h2 className="text-center text-ly-18 font-bold">
                 Password Reset
@@ -113,7 +113,7 @@ export default function ForgetPasswordForm() {
                 with a link to resetyour password.<br/>
                 Please check your mailbox and follow theinstruction.
             </p>
-            <p className="relative pl-4 mt-6 text-ly-16 leading-6">
+            <p className="relative pl-4 mt-4 text-ly-16 leading-6">
                 <span className="absolute left-0 top-2 w-1.5 h-1.5 rounded-sm bg-[#00BAAD] mr-2.5"></span>
                 Emails may experience few-minute delays.
             </p>

src/app/(public)/customer/forget-password/page.tsx

@@ -8,7 +8,7 @@ export async function generateMetadata() {
 }
 
 export default function ForgetPasswordPage() {
-    return (<div className="w-full mt-6 box-border">
+    return (<div className="w-87.5 mx-auto mt-20 mb-30 box-border">
         <ForgetPasswordForm />
 
     </div>);

src/app/(public)/customer/login/_components/LoginPageWrapper.tsx

@@ -140,7 +140,7 @@ export function LoginPageWrapper({
     };
 
     return (
-        <div className="box-border w-full mt-6 pb-8">
+        <div className="box-border w-87.5 mt-6 mb-8 mx-auto">
             <div className="flex justify-center items-center">
                 <button 
                     className={clsx('text-ly-18',{
@@ -165,12 +165,12 @@ export function LoginPageWrapper({
                 </button>
             </div>
 
-            <form className={clsx(["relative px-4 pt-2", (activeTab === 'login' ? 'block' : 'hidden')])}
+            <form className={clsx(["relative mt-6", (activeTab === 'login' ? 'block' : 'hidden')])}
                 onSubmit={loginForm.handleSubmit(loginSubmit)}
             >
                                 
                 <div className="w-full">
-                    <label className="text-ly-12 block mb-3 font-semibold">
+                    <label className="text-ly-16 block mb-1 font-semibold">
                         Email *
                     </label>
                     <InputText
@@ -187,7 +187,7 @@ export function LoginPageWrapper({
                     />
                 </div>
                 <div className="w-full mt-4">
-                    <label className="text-ly-12 block mb-3 font-semibold">
+                    <label className="text-ly-16 block mb-1 font-semibold">
                         Password *
                     </label>
                     <PasswordInput
@@ -211,7 +211,7 @@ export function LoginPageWrapper({
                     />
                 </div>
                 
-                <button className="flex items-center justify-center mt-6 w-full h-12 bg-ly-green text-white rounded-3xl text-ly-16 font-bold">Log In</button>
+                <button className="flex items-center justify-center mt-6 w-full h-12 bg-ly-green text-white rounded-3xl text-ly-16">Log In</button>
                 
                 <div className="flex justify-end mt-4">
                     <Link href="/customer/forget-password"
@@ -221,13 +221,13 @@ export function LoginPageWrapper({
             </form>
 
             <form 
-                className={clsx(["relative px-4 pt-2 pb-6",(activeTab === 'register' ? 'block' : 'hidden')])} 
+                className={clsx(["relative mt-6",(activeTab === 'register' ? 'block' : 'hidden')])} 
                 onSubmit={registerForm.handleSubmit(registerSubmit)}
             >
                                     
                 <div className="w-full flex justify-between">
                     <div className="w-41.25 flex-none">
-                        <label className="text-ly-12 block mb-3 font-semibold">
+                        <label className="text-ly-16 block mb-1 font-semibold">
                             First Name *
                         </label>
                         <InputText
@@ -244,7 +244,7 @@ export function LoginPageWrapper({
                         />
                     </div>
                     <div className="w-41.25 flex-none">
-                        <label className="text-ly-12 block mb-3 font-semibold">
+                        <label className="text-ly-16 block mb-1 font-semibold">
                             Last Name *
                         </label>
                         <InputText
@@ -263,7 +263,7 @@ export function LoginPageWrapper({
 
                 </div>
                 <div className="w-full mt-4">
-                    <label className="text-ly-12 block mb-3 font-semibold">
+                    <label className="text-ly-16 block mb-1 font-semibold">
                         Email *
                     </label>
                     <InputText
@@ -281,7 +281,7 @@ export function LoginPageWrapper({
                 </div>
 
                 <div className="w-full mt-4">
-                    <label className="text-ly-12 block mb-3 font-semibold">
+                    <label className="text-ly-16 block mb-1 font-semibold">
                         Password *
                     </label>
                     <PasswordInput
@@ -306,7 +306,7 @@ export function LoginPageWrapper({
                 </div>
 
                 <div className="w-full mt-4">
-                    <label className="text-ly-12 block mb-3 font-semibold">
+                    <label className="text-ly-16 block mb-1 font-semibold">
                         Confirm Password *
                     </label>
                     <PasswordInput
@@ -333,7 +333,7 @@ export function LoginPageWrapper({
                     />
                 </div>
                 <div className="w-full mt-4"> 
-                    <label className="text-ly-12 block mb-3 font-semibold">Phone number *</label>
+                    <label className="text-ly-16 block mb-1 font-semibold">Phone number *</label>
                     <Controller
                         name="phone"
                         control={registerForm.control}
@@ -363,7 +363,7 @@ export function LoginPageWrapper({
                     
                 </div>
 
-                <button className="flex items-center justify-center mt-6 w-full h-12 bg-ly-green text-white rounded-3xl text-ly-16 font-bold">
+                <button className="flex items-center justify-center mt-6 w-full h-12 bg-ly-green text-white rounded-3xl text-ly-16">
                     Register
                 </button>
                 <div className="relative w-full mt-4">

src/app/(public)/customer/reset-password/_components/ResetPasswordWrapper.tsx

@@ -80,14 +80,14 @@ export default function ResetPasswordWrapper({
 
     return (
 
-        <div className="w-full box-border px-3 mt-6">
+        <div className="w-87.5 box-border mx-auto mt-20 mb-30">
             <h2 className="text-center text-ly-18 font-bold">
                 Change Password
             </h2>
 
             <form className="w-full mt-6" onSubmit={handleSubmit(onSubmit)}>
                 <div className="w-full">
-                    <label className="text-ly-12 block mb-1 font-semibold">
+                    <label className="text-ly-16 block mb-1 font-semibold">
                         *New Password
                     </label>
                     <PasswordInput
@@ -111,7 +111,7 @@ export default function ResetPasswordWrapper({
                     />
                 </div>
                 <div className="w-full mt-4">
-                    <label className="text-ly-12 block mb-1 font-semibold">
+                    <label className="text-ly-16 block mb-1 font-semibold">
                         *Confirm Password
                     </label>
 
@@ -140,7 +140,7 @@ export default function ResetPasswordWrapper({
                 </div>
 
 
-                <div className="w-full mt-9">
+                <div className="w-full mt-6">
                     <button type="submit" 
                         title="Reset Password"
                         className="flex items-center justify-center w-full h-12 bg-ly-middlegreen text-ly-16 text-white rounded-3xl"

src/app/(public)/customer/reset-password/page.tsx

@@ -16,7 +16,7 @@ export default async function ResetPasswordPage({
 
     return (<>
         {errorMsg ?
-            <p className="mt-6 text-center text-ly-14">{errorMsg}</p>
+            <p className="mt-20 text-center text-ly-14">{errorMsg}</p>
         :
             <ResetPasswordWrapper 
                 token={resolvedParams.token}

src/components/common/LoginModal/LoginModal.tsx

@@ -190,45 +190,52 @@ export default function LoginModal({
         <CommonModal 
             isOpen={isShow}
             onClose={closeModal}
-            header={
-                <div className="relative flex justify-center items-center pt-6 px-4 pb-4">
-                    <button 
-                        className={clsx("flex-none",{
-                            "text-ly-18 font-bold": activeTab === "register",
-                            "text-ly-16 font-media text-ly-deepgray": activeTab !== "register"
-                        })}
-                        onClick={() => toggleLoginRegister("register")}
-                    >
-                        Register
+            contentClassName={"top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-145 w-99.5 bg-white rounded-xl"}
+            header={<div className="box-border w-full pt-6 px-6 pb-6">
+                <div className="flex justify-end">
+                    <button className="w-6 h-6 flex-none" onClick={() => closeModal(false)}>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" className="h-6 transition-all ease-in-out hover:scale-110"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg>
                     </button>
-                    <span className="flex-none w-0.5 h-4.5 bg-ly-deepgray mx-5"></span>
+                </div>
+                
+                <div className="relative flex justify-center items-center mt-1.5">
                     <button 
                          className={clsx("flex-none",{
                             "text-ly-18 font-bold": activeTab === "login",
-                            "text-ly-16 font-media text-ly-deepgray": activeTab !== "login"
+                            "text-ly-18 text-ly-deepgray": activeTab !== "login"
                         })}
                         onClick={() => toggleLoginRegister("login")}
                     >
-                        Sign in
+                        Log in
                     </button>
-
-                    <button className="absolute top-4 right-4 w-6 h-6" onClick={() => closeModal(false)}>
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" className="h-6 transition-all ease-in-out hover:scale-110"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg>
+                    
+                    <span className="flex-none w-0.5 h-4.5 bg-ly-deepgray mx-5"></span>
+                    <button 
+                        className={clsx("flex-none",{
+                            "text-ly-18 font-bold": activeTab === "register",
+                            "text-ly-18 text-ly-deepgray": activeTab !== "register"
+                        })}
+                        onClick={() => toggleLoginRegister("register")}
+                    >
+                        Sign Up
                     </button>
+                    
                 </div>
-            }
+                    
+            </div>}
+            footer={<div className="h-6">{/**布局占位 */}</div>}
             body={
                 <>
                     <form 
-                        className={clsx("relative px-4 pt-2 pb-6",{
+                        className={clsx("relative box-border px-6",{
                             "hidden": activeTab !== 'register'
                         })} 
                         onSubmit={registerForm.handleSubmit(registerSubmit)}
                     >
-                        
+                  
                         <div className="w-full flex justify-between">
                             <div className="w-41.25 flex-none">
-                                <label className="text-ly-12 block mb-3 font-semibold">
+                                <label className="text-ly-16 block mb-1">
                                     First Name *
                                 </label>
                                 <InputText
@@ -245,7 +252,7 @@ export default function LoginModal({
                                 />
                             </div>
                             <div className="w-41.25 flex-none">
-                                <label className="text-ly-12 block mb-3 font-semibold">
+                                <label className="text-ly-16 block mb-1">
                                     Last Name *
                                 </label>
                                 <InputText
@@ -264,7 +271,7 @@ export default function LoginModal({
 
                         </div>
                         <div className="w-full mt-4">
-                            <label className="text-ly-12 block mb-3 font-semibold">
+                            <label className="text-ly-16 block mb-1">
                                 Email *
                             </label>
                             <InputText
@@ -282,7 +289,7 @@ export default function LoginModal({
                         </div>
 
                         <div className="w-full mt-4">
-                            <label className="text-ly-12 block mb-3 font-semibold">
+                            <label className="text-ly-16 block mb-1">
                                 Password *
                             </label>
                             <PasswordInput
@@ -307,7 +314,7 @@ export default function LoginModal({
                         </div>
 
                         <div className="w-full mt-4">
-                            <label className="text-ly-12 block mb-3 font-semibold">
+                            <label className="text-ly-16 block mb-1">
                                Confirm Password *
                             </label>
                             <PasswordInput
@@ -334,7 +341,7 @@ export default function LoginModal({
                             />
                         </div>
                         <div className="w-full mt-4"> 
-                            <label className="text-ly-12 block mb-3 font-semibold">Phone number *</label>
+                            <label className="text-ly-16 block mb-1">Phone number *</label>
                             <Controller
                                 name="phone"
                                 control={registerForm.control}
@@ -413,19 +420,19 @@ export default function LoginModal({
                                                 
                             </label>
                         </div>
-
+                  
                     </form>
 
 
                     <form 
-                        className={clsx("relative px-4 pt-2",{
+                        className={clsx("relative px-6",{
                             "hidden": activeTab !== "login"
                         })} 
                         onSubmit={loginForm.handleSubmit(loginSubmit)}
                     >
                     
                         <div className="w-full">
-                            <label className="text-ly-12 block mb-3 font-semibold">
+                            <label className="text-ly-16 block mb-1">
                                 Email *
                             </label>
                             <InputText
@@ -442,7 +449,7 @@ export default function LoginModal({
                             />
                         </div>
                         <div className="w-full mt-4">
-                            <label className="text-ly-12 block mb-3 font-semibold">
+                            <label className="text-ly-16 block mb-1">
                                 Password *
                             </label>
                             <PasswordInput
@@ -466,7 +473,7 @@ export default function LoginModal({
                             />
                         </div>
                         
-                        <button className="flex items-center justify-center mt-6 w-full h-12 bg-ly-green text-white rounded-3xl text-ly-16 font-bold">Log In</button>
+                        <button className="flex items-center justify-center mt-6 w-full h-12 bg-ly-green text-white rounded-3xl text-ly-16">Log In</button>
                         
                     </form>
                 </>

src/components/theme/ui/CommonModal.tsx

@@ -174,15 +174,13 @@ export default function CommonModal({
                         {header && header}
                     </div>
                     
-                    <div className="w-full box-border h-full overflow-y-auto relative">
+                    <div className="w-full box-border h-full overflow-y-auto relative scrollbar-thin scrollbar-thumb-gray-200">
                         
                         {body}
                         
                     </div>
 
-                    <div ref={footerRef} className={clsx("w-full box-border absolute bottom-0 left-0",{
-                        "border-t border-gray-200": footer !==null && footer !== undefined
-                    })}>
+                    <div ref={footerRef} className={clsx("z-1 w-full box-border absolute bottom-0 left-0")}>
                         {footer && footer}
                     </div>
                 </div>