1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
// ========== Desktop ==========
const desktopContainer = {
height: 'auto',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: '100px 0',
};
const desktopPaper = {
height: 'fit-content',
display: 'flex',
justifyContent: 'center',
color: 'white',
textAlign: 'center',
width: '100%',
};
const baseBox = {
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
padding: '30px 70px',
};
const desktopBoxLogo = {
...baseBox,
backgroundColor: 'secondary.main',
height: 'auto',
};
const desktopBoxForm = {
...baseBox,
'> h1, p ': {
textAlign: 'initial',
},
'> h1': {
color: 'primary.black',
margin: 0,
},
'> p': {
color: 'primary.lightGray',
},
};
const logoContainerDesktop = {};
const desktop = {
container: desktopContainer,
paper: desktopPaper,
boxLogo: desktopBoxLogo,
boxForm: desktopBoxForm,
logoContainer: logoContainerDesktop,
};
// ========== Mobile ==========
const mobileContainer = {
...desktopContainer,
padding: '100px 10px',
};
const mobilePaper = {
...desktopPaper,
flexDirection: 'column-reverse',
height: 'fit-content',
};
const mobileBoxLogo = {
...desktopBoxLogo,
height: '50%',
padding: '0',
};
const mobileBoxForm = {
...desktopBoxForm,
padding: '20px 15px',
width: '100%',
};
const logoContainerMobile = {
padding: '20px 16px',
};
const mobile = {
container: mobileContainer,
paper: mobilePaper,
boxLogo: mobileBoxLogo,
boxForm: mobileBoxForm,
logoContainer: logoContainerMobile,
};
// ========== Unset ==========
const unset = {
container: null,
paper: null,
boxLogo: null,
boxForm: null,
logoContainer: null,
};
const styles = { desktop, mobile, unset };
export default styles;
|
