more fix and update

apps/frontend/components/ui/otp-input.tsx

@@ -3,16 +3,35 @@
 import { useRef } from 'react';
 import { cn } from '@/lib/utils';
 
+const otpThemes = {
+  dark: {
+    box: 'border-[#555762] bg-transparent text-white focus:border-[#7b7f8f] focus:ring-white/10'
+  },
+  light: {
+    box: 'border-[#eceef4] bg-white text-[#111827] focus:border-[#c7cad6] focus:ring-[#eceef4]'
+  }
+} as const;
+
 interface OtpInputProps {
   value: string;
   onChange: (value: string) => void;
   onComplete?: (value: string) => void;
   length?: number;
   disabled?: boolean;
+  variant?: keyof typeof otpThemes;
   className?: string;
 }
 
-export function OtpInput({ value, onChange, onComplete, length = 6, disabled = false, className }: OtpInputProps) {
+export function OtpInput({
+  value,
+  onChange,
+  onComplete,
+  length = 6,
+  disabled = false,
+  variant = 'dark',
+  className
+}: OtpInputProps) {
+  const theme = otpThemes[variant];
   const inputsRef = useRef<Array<HTMLInputElement | null>>([]);
   const digits = Array.from({ length }, (_, index) => value[index] ?? '');
 
@@ -83,7 +102,10 @@ export function OtpInput({ value, onChange, onComplete, length = 6, disabled = f
           onChange={(event) => handleChange(index, event.target.value)}
           onKeyDown={(event) => handleKeyDown(index, event)}
           onPaste={handlePaste}
-          className="h-14 w-full rounded-2xl border border-[#555762] bg-transparent text-center text-2xl font-semibold text-white outline-none transition focus:border-[#7b7f8f] focus:ring-4 focus:ring-white/10 disabled:opacity-50"
+          className={cn(
+            'h-14 w-full rounded-2xl border text-center text-2xl font-semibold outline-none transition focus:ring-4 disabled:opacity-50',
+            theme.box
+          )}
         />
       ))}
     </div>