b870bdd999
screen is enabled fix: enable/disable the Terms & Conditions form based on the Show on screen toggle fix: replaced deactivated field with plain text when not editing fix: make de non editable text content field scrollable style: make it follow the same style as the other screens, with the edit button and links to save and cancel
145 lines
2.7 KiB
JavaScript
145 lines
2.7 KiB
JavaScript
import typographyStyles from 'src/components/typography/styles'
|
|
import theme from 'src/styling/theme'
|
|
import { offColor } from 'src/styling/variables'
|
|
|
|
const { p } = typographyStyles
|
|
|
|
const styles = {
|
|
header: {
|
|
display: 'flex',
|
|
'& > p': {
|
|
marginTop: 0
|
|
},
|
|
'& > div': {
|
|
marginLeft: 20,
|
|
'& > button': {
|
|
border: 'none',
|
|
backgroundColor: 'transparent',
|
|
cursor: 'pointer'
|
|
}
|
|
}
|
|
},
|
|
section: {
|
|
marginBottom: 52
|
|
},
|
|
row: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: 28,
|
|
width: 600,
|
|
'&:last-child': {
|
|
marginBottom: 0
|
|
}
|
|
},
|
|
switchRow: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
marginBottom: 28,
|
|
width: 600
|
|
},
|
|
switch: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
marginLeft: 120
|
|
},
|
|
submit: {
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'center',
|
|
height: 19,
|
|
padding: [[0, 4, 4, 4]],
|
|
'& > button': {
|
|
marginRight: 40
|
|
}
|
|
},
|
|
singleButton: {
|
|
marginTop: 50,
|
|
paddingLeft: 0
|
|
}
|
|
}
|
|
|
|
const contactInfoStyles = {
|
|
infoMessage: {
|
|
display: 'flex',
|
|
marginBottom: 52,
|
|
'& > p': {
|
|
width: 330,
|
|
color: offColor,
|
|
marginTop: 4,
|
|
marginLeft: 16
|
|
}
|
|
},
|
|
radioButtonsRow: {
|
|
height: 60,
|
|
marginBottom: 14
|
|
},
|
|
radioButtons: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
paddingLeft: 4
|
|
}
|
|
}
|
|
|
|
const termsConditionsStyles = {
|
|
enable: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
marginBottom: 22 - theme.spacing(1),
|
|
'& > span:first-child': {
|
|
extend: p,
|
|
marginRight: 116 - theme.spacing(1)
|
|
},
|
|
'& > span:last-child': {
|
|
marginLeft: 4
|
|
}
|
|
}
|
|
}
|
|
|
|
const fieldStyles = {
|
|
field: {
|
|
position: 'relative',
|
|
width: 280,
|
|
padding: [[0, 4, 4, 0]]
|
|
},
|
|
notEditing: {
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
},
|
|
notEditingSingleLine: {
|
|
'& > p:first-child': {
|
|
height: 16,
|
|
lineHeight: '16px',
|
|
transform: 'scale(0.75)',
|
|
transformOrigin: 'left',
|
|
paddingLeft: 0,
|
|
margin: [[1, 0, 6, 0]]
|
|
},
|
|
'& > p:last-child': {
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
height: 25,
|
|
margin: 0
|
|
}
|
|
},
|
|
notEditingMultiline: {
|
|
'& > p:first-child': {
|
|
height: 16,
|
|
lineHeight: '16px',
|
|
transform: 'scale(0.75)',
|
|
transformOrigin: 'left',
|
|
paddingLeft: 0,
|
|
margin: [[1, 0, 5, 0]]
|
|
},
|
|
'& > p:last-child': {
|
|
width: 502,
|
|
height: 121,
|
|
overflowY: 'auto',
|
|
lineHeight: '19px',
|
|
wordWrap: 'anywhere',
|
|
margin: 0
|
|
}
|
|
}
|
|
}
|
|
|
|
export { styles, contactInfoStyles, termsConditionsStyles, fieldStyles }
|