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}
         >
+          {/* не удаляем, без 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

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