diff --git a/src/features/AddCardForm/components/ElementContainer/index.tsx b/src/features/AddCardForm/components/ElementContainer/index.tsx index 49bd4cd7..00d365c2 100644 --- a/src/features/AddCardForm/components/ElementContainer/index.tsx +++ b/src/features/AddCardForm/components/ElementContainer/index.tsx @@ -47,6 +47,10 @@ const Label = styled.label` } ` : ''}; + + .StripeElement--webkit-autofill { + background-color: transparent !important; + } ` const Text = styled(T9n)` diff --git a/src/features/AddCardForm/components/Form/index.tsx b/src/features/AddCardForm/components/Form/index.tsx index c42a9205..b6dbc23c 100644 --- a/src/features/AddCardForm/components/Form/index.tsx +++ b/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 автозаполнение не работает */} +
+ +
{ const { isOpen, toggle } = useToggle(initialformOpen) @@ -33,7 +32,6 @@ export const AddCardForm = ({ isOpen ? ( diff --git a/src/features/AddCardForm/styled.tsx b/src/features/AddCardForm/styled.tsx index 81b1615e..29aeba41 100644 --- a/src/features/AddCardForm/styled.tsx +++ b/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}; }