149 lines
2.6 KiB
JavaScript
149 lines
2.6 KiB
JavaScript
import typographyStyles from 'src/components/typography/styles'
|
|
import {
|
|
placeholderColor,
|
|
backgroundColor,
|
|
primaryColor,
|
|
mainWidth,
|
|
spring2,
|
|
spring3,
|
|
errorColor
|
|
} from 'src/styling/variables'
|
|
|
|
const { tl2, p } = typographyStyles
|
|
|
|
const fill = '100%'
|
|
const flexDirection = 'column'
|
|
|
|
const styles = {
|
|
dialog: {
|
|
backgroundColor,
|
|
width: fill,
|
|
minHeight: fill,
|
|
display: 'flex',
|
|
flexDirection,
|
|
padding: 0
|
|
},
|
|
wrapper: {
|
|
width: mainWidth,
|
|
height: fill,
|
|
margin: '0 auto',
|
|
flex: 1,
|
|
display: 'flex',
|
|
flexDirection
|
|
},
|
|
contentDiv: {
|
|
display: 'flex',
|
|
flex: 1,
|
|
flexDirection: 'row'
|
|
},
|
|
headerDiv: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center'
|
|
},
|
|
contentWrapper: {
|
|
marginLeft: 48
|
|
},
|
|
button: {
|
|
marginTop: 64
|
|
},
|
|
nameTitle: {
|
|
marginTop: 16,
|
|
marginBottom: 25
|
|
},
|
|
qrTitle: {
|
|
marginTop: 12,
|
|
marginBottom: 40
|
|
},
|
|
qrCodeWrapper: {
|
|
display: 'flex'
|
|
},
|
|
qrTextInfoWrapper: {
|
|
display: 'flex',
|
|
flexDirection: 'row'
|
|
},
|
|
qrTextWrapper: {
|
|
width: 381,
|
|
marginLeft: 80,
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
},
|
|
textWrapper: {
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
},
|
|
qrTextIcon: {
|
|
marginRight: 16
|
|
},
|
|
qrText: {
|
|
marginTop: 0
|
|
},
|
|
item: {
|
|
position: 'relative',
|
|
margin: '12px 0 12px 0',
|
|
display: 'flex'
|
|
},
|
|
itemText: {
|
|
extend: p,
|
|
color: placeholderColor,
|
|
marginRight: 24
|
|
},
|
|
itemTextActive: {
|
|
extend: tl2,
|
|
color: primaryColor
|
|
},
|
|
itemTextPast: {
|
|
color: primaryColor
|
|
},
|
|
stepperPath: {
|
|
position: 'absolute',
|
|
height: 25,
|
|
width: 1,
|
|
border: [[1, 'solid', placeholderColor]],
|
|
right: 8,
|
|
top: 18
|
|
},
|
|
stepperPast: {
|
|
border: [[1, 'solid', primaryColor]]
|
|
},
|
|
successMessageWrapper: {
|
|
backgroundColor: spring3,
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
padding: '0px 10px',
|
|
borderRadius: '8px'
|
|
},
|
|
successMessage: {
|
|
color: spring2,
|
|
margin: '8px 0px'
|
|
},
|
|
successMessageIcon: {
|
|
marginRight: 16,
|
|
marginBottom: 2,
|
|
display: 'flex',
|
|
flexDirection: 'col',
|
|
alignItems: 'center'
|
|
},
|
|
errorMessage: {
|
|
color: errorColor
|
|
},
|
|
qrCodeImageWrapper: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
backgroundColor: 'white',
|
|
border: `5px solid ${primaryColor}`,
|
|
padding: 5,
|
|
borderRadius: 15
|
|
},
|
|
qrCodeScanMessage: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
margin: [[0, 0, 20, 20]],
|
|
'& > p': {
|
|
marginLeft: 10
|
|
}
|
|
}
|
|
}
|
|
|
|
export default styles
|