mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Update Recurly card style based on split test variants
GitOrigin-RevId: 6c5bd6dffb9254400e7e134da8334957b929d78e
This commit is contained in:
parent
63dbea0092
commit
9fd9e991a7
1 changed files with 23 additions and 7 deletions
|
@ -4,6 +4,7 @@ import { FormGroup, ControlLabel } from 'react-bootstrap'
|
|||
import { CardElementChangeState } from '../../../../../../../types/recurly/elements'
|
||||
import { ElementsInstance } from 'recurly__recurly-js'
|
||||
import classnames from 'classnames'
|
||||
import getMeta from '../../../../../utils/meta'
|
||||
|
||||
type CardElementProps = {
|
||||
className?: string
|
||||
|
@ -21,16 +22,31 @@ function CardElement({ className, elements, onChange }: CardElementProps) {
|
|||
useEffect(() => {
|
||||
if (!cardRef.current) return
|
||||
|
||||
const showNewDesign =
|
||||
getMeta('ol-splitTestVariants')?.['design-system-updates'] === 'enabled'
|
||||
|
||||
const style = showNewDesign
|
||||
? {
|
||||
fontColor: '#1b222c',
|
||||
placeholder: {
|
||||
color: '#677283',
|
||||
},
|
||||
invalid: {
|
||||
fontColor: '#b83a33',
|
||||
},
|
||||
}
|
||||
: {
|
||||
fontColor: '#5d6879',
|
||||
placeholder: {},
|
||||
invalid: {
|
||||
fontColor: '#a93529',
|
||||
},
|
||||
}
|
||||
|
||||
const card = elements.CardElement({
|
||||
displayIcon: true,
|
||||
inputType: 'mobileSelect',
|
||||
style: {
|
||||
fontColor: '#5d6879',
|
||||
placeholder: {},
|
||||
invalid: {
|
||||
fontColor: '#a93529',
|
||||
},
|
||||
},
|
||||
style,
|
||||
})
|
||||
|
||||
card.attach(cardRef.current)
|
||||
|
|
Loading…
Reference in a new issue