fix(1451): card form autocomplete (#447)

src/features/AddCardForm/components/ElementContainer/index.tsx

@@ -47,6 +47,10 @@ const Label = styled.label<LabelProps>`
      }
     `
     : ''};
+
+  .StripeElement--webkit-autofill {
+    background-color: transparent !important;
+  }
 `
 
 const Text = styled(T9n)`

src/features/AddCardForm/components/Form/index.tsx

@@ -24,19 +24,27 @@ import {
   SectionTitle,
 } from '../../styled'
 
+const autoFillStyles = {
+  ':-webkit-autofill': {
+    color: '#fff',
+  },
+}
+
 const baseStyles = isMobileDevice
   ? {
     color: '#fff',
     fontSize: '12px',
     fontWeight: 'bold',
     lineHeight: '12px',
+    ...autoFillStyles,
   }
   : {
     color: '#fff',
     fontFamily: 'Montserrat, Tahoma, sans-serif',
     fontSize: '20px',
     fontWeight: 'bold',
-    lineHeight: '50px',
+    lineHeight: '48px',
+    ...autoFillStyles,
   }
 
 const options = { placeholder: '', style: { base: baseStyles } }
@@ -81,12 +89,18 @@ export const AddCardFormInner = (props: Props) => {
           label={isLabelVisible(ElementTypes.CardHolder) ? 'card_holder_name' : ''}
           backgroundColor={inputsBackground}
         >
-          <Input
-            value={name}
-            onChange={onNameChange}
-            onFocus={onInputsFocus(ElementTypes.CardHolder)}
-            onBlur={onInputsBlur(ElementTypes.CardHolder)}
-          />
+          {/* не удаляем, без Form автозаполнение не работает */}
+          <Form>
+            <Input
+              type='text'
+              name='ccname'
+              autoComplete='cc-name'
+              value={name}
+              onChange={onNameChange}
+              onFocus={onInputsFocus(ElementTypes.CardHolder)}
+              onBlur={onInputsBlur(ElementTypes.CardHolder)}
+            />
+          </Form>
         </ElementContainer>
 
         <ElementContainer

src/features/AddCardForm/index.tsx

@@ -14,7 +14,6 @@ import { AddCardFormInner } from './components/Form'
 
 export const AddCardForm = ({
   initialformOpen,
-  inputsBackground,
   onAddSuccess,
 }: Props) => {
   const { isOpen, toggle } = useToggle(initialformOpen)
@@ -33,7 +32,6 @@ export const AddCardForm = ({
     isOpen
       ? (
         <AddCardFormInner
-          inputsBackground={inputsBackground}
           onAddSuccess={onSuccess}
         >
           <SolidButton type='submit'>

src/features/AddCardForm/styled.tsx

@@ -33,8 +33,8 @@ export const Input = styled.input`
   :-webkit-autofill,
   :-webkit-autofill:hover,
   :-webkit-autofill:focus,
-  :-webkit-autofill:active  {
-    box-shadow: 0 0 0 30px #535353 inset;
+  :-webkit-autofill:active {
+    box-shadow: 0 0 0 30px #3f3f3f inset;
     caret-color: ${({ theme: { colors } }) => colors.text100};
     -webkit-text-fill-color: ${({ theme: { colors } }) => colors.text100};
   }