style pin input

.eslintrc.js

@@ -7,7 +7,7 @@ const RESTRICTED_MODULES = {
     { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
     {
       name: '@chakra-ui/react',
-      importNames: [ 'Popover', 'Menu', 'useToast' ],
+      importNames: [ 'Popover', 'Menu', 'PinInput', 'useToast' ],
       message: 'Please use corresponding component or hook from ui/shared/chakra component instead',
     },
     {

theme/components/PinInput.ts

+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+
+import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
+
+const baseStyle = defineStyle({
+  textAlign: 'center',
+  bgColor: 'dialog_bg',
+});
+
+const sizes = {
+  md: defineStyle({
+    fontSize: 'md',
+    w: 10,
+    h: 10,
+    borderRadius: 'md',
+  }),
+};
+
+const variants = {
+  outline: defineStyle(
+    (props) => getOutlinedFieldStyles(props),
+  ),
+};
+
+const PinInput = defineStyleConfig({
+  baseStyle,
+  sizes,
+  variants,
+  defaultProps: {
+    size: 'md',
+  },
+});
+
+export default PinInput;

theme/components/index.ts

@@ -10,6 +10,7 @@ import Input from './Input';
 import Link from './Link';
 import Menu from './Menu';
 import Modal from './Modal';
+import PinInput from './PinInput';
 import Popover from './Popover';
 import Radio from './Radio';
 import Select from './Select';
@@ -36,6 +37,7 @@ const components = {
   Link,
   Menu,
   Modal,
+  PinInput,
   Popover,
   Radio,
   Select,

ui/shared/chakra/PinInput.tsx

+import type { PinInputProps, StyleProps } from '@chakra-ui/react';
+// eslint-disable-next-line no-restricted-imports
+import { PinInput as PinInputBase } from '@chakra-ui/react';
+import React from 'react';
+
+const PinInput = (props: PinInputProps & { bgColor?: StyleProps['bgColor'] }) => {
+  return <PinInputBase { ...props }/>;
+};
+
+export default React.memo(PinInput);

ui/snippets/auth/fields/AuthModalFieldEmail.tsx

@@ -29,6 +29,7 @@ const AuthModalFieldEmail = ({ className }: Props) => {
         isInvalid={ Boolean(fieldState.error) }
         isDisabled={ isDisabled }
         autoComplete="off"
+        bgColor="dialog_bg"
       />
       <InputPlaceholder text="Email" error={ fieldState.error }/>
     </FormControl>

ui/snippets/auth/fields/AuthModalFieldOtpCode.tsx

-import { HStack, PinInput, PinInputField, Text } from '@chakra-ui/react';
+import { HStack, PinInputField, Text } from '@chakra-ui/react';
 import React from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 
 import type { OtpCodeFormFields } from '../types';
 
+import PinInput from 'ui/shared/chakra/PinInput';
+
 const CODE_LENGTH = 6;
 
 const AuthModalFieldOtpCode = () => {
@@ -19,9 +21,9 @@ const AuthModalFieldOtpCode = () => {
   return (
     <>
       <HStack>
-        <PinInput otp placeholder="" { ...field } isDisabled={ isDisabled } isInvalid={ Boolean(fieldState.error) }>
+        <PinInput otp placeholder="" { ...field } isDisabled={ isDisabled } isInvalid={ Boolean(fieldState.error) } bgColor="dialog_bg">
           { Array.from({ length: CODE_LENGTH }).map((_, index) => (
-            <PinInputField key={ index } borderRadius="base" borderWidth="2px"/>
+            <PinInputField key={ index } borderRadius="base" borderWidth="2px" bgColor="dialog_bg"/>
           )) }
         </PinInput>
       </HStack>