Staging

src/app/sign-in/components/OtpInputForm.tsx

@@ -2,7 +2,6 @@
 
 import { Anchor } from '@/components/Anchor';
 import { Button } from '@/components/Button';
-import { TextField } from '@/components/TextField';
 import { useAuth } from '@/hooks';
 import { gtSuper } from '@/utils/font';
 import { FC, useEffect, useRef, useState } from 'react';
@@ -151,7 +150,7 @@ export const OtpInputForm: FC<IProps> = ({ currentEmail, currentWallet }) => {
           {Array(6)
             .fill('')
             .map((_, i) => (
-              <TextField
+              <input
                 key={i}
                 className="otp-input"
                 maxLength={1}
@@ -161,9 +160,13 @@ export const OtpInputForm: FC<IProps> = ({ currentEmail, currentWallet }) => {
                 }}
                 readOnly={false}
                 value={otp[i]}
-                onChange={(e) => handleChange(e.target.value, i)}
-                onKeyDown={(e) => handleKeyDown(e, i)}
-                onPaste={(e) => handlePaste(e)}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  handleChange(e.target.value, i)
+                }
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>
+                  handleKeyDown(e, i)
+                }
+                onPaste={(e: React.ClipboardEvent<HTMLInputElement>) => handlePaste(e)}
               />
             ))}
         </div>

src/app/sign-in/components/View/View.css

@@ -15,12 +15,8 @@
     .otp-inputs {
       @apply flex justify-center gap-x-4;
 
-      .text-field {
-        @apply w-12 h-12 rounded-md bg-muted p-0 justify-center items-center;
-      }
-
       .otp-input {
-        @apply text-center text-2xl text-foreground h-full;
+        @apply w-12 h-12 text-center text-2xl text-foreground bg-muted border border-border rounded-md outline-none focus:ring-2 focus:ring-ring;
       }
     }
     .sign-in__input {