style: otp page and login page responsiveness

ALOK9442 · Jan 26, 2024 · 463ccce · 463ccce
1 parent 0ae94e2
commit 463ccce
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 29 deletions.
diff --git a/src/components/authcomponents/login.jsx b/src/components/authcomponents/login.jsx
@@ -69,9 +69,8 @@ function Login() {
             <div className='flex items-center justify-center w-full mt-24'>
                 <div className=" rounded-xl p-12 border border-white">
                     <h2 className="text-center text-2xl font-bold leading-tight">Sign in to your account</h2>
-
                     {error && <p className="mt-8 text-center text-red-500">{error}</p>}
-                    <form onSubmit={handleSubmit(handleLogin)} className='mt-8 w-80'>
+                    <form onSubmit={handleSubmit(handleLogin)} className='mt-8 w-full md:w-80'>
                         <div className='space-y-6'>
                             <Input
                                 label="Email"

diff --git a/src/components/authcomponents/otp.jsx b/src/components/authcomponents/otp.jsx
@@ -31,7 +31,7 @@ function EnterOtp() {
   }
 
   const handleResend = async () => {
-    console.log("resending otp ",email)
+    console.log("resending otp ", email)
     try {
       const response = await sendEmailOtp(email)
       console.log(response.data)
@@ -43,38 +43,38 @@ function EnterOtp() {
 
   return (
     <>
-      <div className=" absolute top-1 left-1/2 transform -translate-x-1/2 flex items-center justify-center space-y-6">
+      <div className="flex items-center justify-center mt-4">
         <div className="flex items-center">
           <img src={logo} alt="Logo" className="w-8 h-8 mr-2" />
           <div>
             <p className="text-white text-sm font-bold">Cryptbee</p>
           </div>
         </div>
       </div>
-      <div>
-        <div>
-          <p>check for otp</p>
-        </div>
-        <div>
+      <div className="h-screen flex flex-col items-center justify-center">
+        <div className="rounded-xl p-12 border border-white ">
           <p>Enter the OTP sent to your email address</p>
+
+          <form onSubmit={handleSubmit(handleClick)} className='mt-8 w-full md:w-80 space-y-4'>
+            <Input
+              label="OTP"
+              placeholder="Enter your OTP"
+              type="otp"
+              {...register("otp", {
+                required: true,
+                validate: {
+                  matchPattern: (value) =>
+                    /^\d{4}$/.test(value) ||
+                    "Email address must be a valid address",
+                },
+              })}
+            />
+            <p>Didn&apos;t get the OTP? <span onClick={handleResend} style={{ cursor: 'pointer', color: 'orange' }}>RESEND</span></p>
+            <Button type='submit'
+              className='w-full'
+            >Verify</Button>
+          </form>
         </div>
-        <form onSubmit={handleSubmit(handleClick)}>
-          <Input
-            label="OTP"
-            placeholder="Enter your OTP"
-            type="otp"
-            {...register("otp", {
-              required: true,
-              validate: {
-                matchPattern: (value) =>
-                  /^\d{4}$/.test(value) ||
-                  "Email address must be a valid address",
-              },
-            })}
-          />
-          <p>Didn&apos;t get the OTP? <span onClick={handleResend} style={{ cursor: 'pointer', color: 'orange' }}>RESEND</span></p>
-          <Button type='submit'>Verify</Button>
-        </form>
       </div>
     </>
   )

diff --git a/src/components/authcomponents/signup.jsx b/src/components/authcomponents/signup.jsx
@@ -59,7 +59,7 @@ function SignUp() {
 
     return (
         <>
-            <div className="absolute top-1 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
+            <div className="absolute top-1 left-1/2 transform -translate-x-1/2 flex items-center justify-center mt-4">
                 <div className="flex items-center">
                     <img src={logo} alt="Logo" className="w-8 h-8 mr-2" />
                     <div>
@@ -71,7 +71,7 @@ function SignUp() {
                 <div className="mx-auto max-w-lg rounded-xl p-10 border border-white">
                     <h2 className="text-center text-2xl font-bold leading-tight">Create your account</h2>
                     {error && <p className="mt-8 text-center text-red-500">{error}</p>}
-                    <form onSubmit={handleSubmit(handleSignup)} className='mt-8 w-80'>
+                    <form onSubmit={handleSubmit(handleSignup)} className='mt-8 w-full md:w-80'>
                         <div className='space-y-5 bg-color-orange'>
                             <Input
                                 label="Email: "

diff --git a/src/pages/components/invest/invest_tab_all.jsx b/src/pages/components/invest/invest_tab_all.jsx
@@ -79,7 +79,7 @@ function InvestTablAll() {
   return (
     <div className='mt-8 overflow-y-auto w-screen min-w-0 max-h-screen'>
       {data && data.map((item, index) => (
-        <div className='justify-around flex h-40'>
+        <div className='justify-around flex h-40' key={index}>
           <div key={index} className='w-80' onClick={(e)=>handleClickNavigate(item.Name)}>
             <CryptoCoinInvest
               name={item.Name}