feat: update styles to match figma

alchemyplatform · Nov 22, 2024 · eba0a4e · eba0a4e
1 parent bad935e
commit eba0a4e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/account-kit/react/src/components/otp-input/otp-input.stories.tsx b/account-kit/react/src/components/otp-input/otp-input.stories.tsx
@@ -42,13 +42,15 @@ export const TestTyping: Story = {
     await userEvent.type(inputs[2], "3");
     await userEvent.type(inputs[3], "4");
     await userEvent.type(inputs[4], "5");
+    await userEvent.type(inputs[5], "6");
 
     // Verify values
     expect(inputs[0]).toHaveValue("1");
     expect(inputs[1]).toHaveValue("2");
     expect(inputs[2]).toHaveValue("3");
     expect(inputs[3]).toHaveValue("4");
     expect(inputs[4]).toHaveValue("5");
+    expect(inputs[5]).toHaveValue("6");
   },
 };
 
@@ -59,7 +61,7 @@ export const TestPasting: Story = {
 
     // Simulate paste event
     const clipboardData = new DataTransfer();
-    clipboardData.setData("text/plain", "12345");
+    clipboardData.setData("text/plain", "123456");
 
     const pasteEvent = new ClipboardEvent("paste", {
       clipboardData,
@@ -75,6 +77,7 @@ export const TestPasting: Story = {
       expect(inputs[2]).toHaveValue("3");
       expect(inputs[3]).toHaveValue("4");
       expect(inputs[4]).toHaveValue("5");
+      expect(inputs[5]).toHaveValue("6");
     });
   },
 };
@@ -99,8 +102,11 @@ export const TestKeyboardNavigation: Story = {
     // Test backspace
     await userEvent.type(inputs[0], "1");
     await userEvent.keyboard("{Backspace}");
+    await userEvent.keyboard("{Backspace}");
     expect(inputs[0]).toHaveValue("");
     expect(document.activeElement).toBe(inputs[0]);
+    await userEvent.type(inputs[0], "1");
+    await userEvent.keyboard("23456");
   },
 };
 
@@ -134,7 +140,7 @@ export const TestErrorState: Story = {
     // Check for error message
     await waitFor(() => {
       const errorMessage = canvas.getByText(
-        /Paste does not match the code structure/i
+        /The code you entered is incorrect/i
       );
       expect(errorMessage).toBeInTheDocument();
     });

diff --git a/account-kit/react/src/components/otp-input/otp-input.tsx b/account-kit/react/src/components/otp-input/otp-input.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
+import { ls } from "../../strings.js";
 
-export type OTPCodeType = [string, string, string, string, string];
-export const initialValue: OTPCodeType = ["", "", "", "", ""];
-const OTP_LENGTH = 5;
+export type OTPCodeType = [string, string, string, string, string, string];
+export const initialValue: OTPCodeType = ["", "", "", "", "", ""];
+const OTP_LENGTH = 6;
 type OTPInputProps = {
   errorText?: string;
   value: OTPCodeType;
@@ -91,9 +92,7 @@ export const OTPInput: React.FC<OTPInputProps> = ({
     if (isOTPCodeType(pasteData)) {
       setValue(pasteData);
     } else {
-      setErrorText(
-        "Paste does not match the code structure, please copy the entire code"
-      );
+      setErrorText(ls.error.otp.invalid);
     }
   };
 
@@ -122,7 +121,7 @@ export const OTPInput: React.FC<OTPInputProps> = ({
   };
 
   return (
-    <div>
+    <div className="flex flex-col gap-2 items-center">
       {/* Input for autocomplete, visibility hidden */}
       <input
         className="invisible h-0 w-0 p-[0] m-[-1px]"
@@ -133,13 +132,12 @@ export const OTPInput: React.FC<OTPInputProps> = ({
         onChange={(e) => setAutoComplete(e.target.value)}
         onClick={handleReset}
       />
-      <div>
-        <label>Code</label>
-      </div>
-      <div className="flex gap-2">
+      <div className="flex gap-2.5">
         {initialValue.map((_, i) => (
           <input
-            className="border h-7 w-7 rounded text-center"
+            className={`border w-8 bg-bg-surface-default h-10 rounded text-center focus:outline-active ${
+              !!errorText && "border-fg-critical"
+            }`}
             ref={(el) => (refs.current[i] = el)}
             tabIndex={i + 1}
             type="text"
@@ -161,7 +159,9 @@ export const OTPInput: React.FC<OTPInputProps> = ({
           />
         ))}
       </div>
-      {errorText && <p className="text-red-500">{errorText}</p>}
+      {errorText && (
+        <p className="text-fg-critical text-sm text-center">{errorText}</p>
+      )}
     </div>
   );
 };
diff --git a/account-kit/react/src/strings.ts b/account-kit/react/src/strings.ts
@@ -84,6 +84,9 @@ const STRINGS = {
           },
         },
       },
+      otp: {
+        invalid: "The code you entered is incorrect",
+      },
     },
     oauthContactSupport: {
       title: "Need help?",