1 | import styled from 'styled-components';
|
---|
2 | import { Typography, Divider } from '@mui/material';
|
---|
3 | import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
|
---|
4 | import EqualizerOutlinedIcon from '@mui/icons-material/EqualizerOutlined';
|
---|
5 | import { mobile_max_width } from '../../../config/utilities';
|
---|
6 | import CircularProgress from '@mui/material/CircularProgress';
|
---|
7 |
|
---|
8 | export const NamesWrapper = styled.div`
|
---|
9 | margin-bottom: 10px;
|
---|
10 | text-align: center;
|
---|
11 | display: flex;
|
---|
12 | flex-direction: row;
|
---|
13 | justify-content: space-between;
|
---|
14 | align-items: center;
|
---|
15 | padding: 10px 10%;
|
---|
16 |
|
---|
17 | @media (max-width: ${mobile_max_width}px) {
|
---|
18 | flex-direction: column;
|
---|
19 | .zone-name {
|
---|
20 | margin-top: 30px;
|
---|
21 | }
|
---|
22 | }
|
---|
23 | `;
|
---|
24 |
|
---|
25 | export const ParkingAndZoneName = styled(Typography).attrs((props) => ({
|
---|
26 | fontSize: '2rem',
|
---|
27 | fontWeight: '600',
|
---|
28 | margin: 0,
|
---|
29 | color: `${props.theme.palette.primary.main}`,
|
---|
30 | }))`
|
---|
31 | display: flex;
|
---|
32 | align-items: center;
|
---|
33 | `;
|
---|
34 |
|
---|
35 | export const ZoneNameLoader = styled(CircularProgress).attrs({
|
---|
36 | size: 40,
|
---|
37 | sx: {
|
---|
38 | marginLeft: '10px',
|
---|
39 | },
|
---|
40 | })`
|
---|
41 | .MuiCircularProgress-svg {
|
---|
42 | color: ${(props) => props.theme.palette.primary.light};
|
---|
43 | }
|
---|
44 | `;
|
---|
45 |
|
---|
46 | export const DividerUnderNames = styled(Divider).attrs({
|
---|
47 | variant: 'middle',
|
---|
48 | sx: {
|
---|
49 | margin: '0 9%',
|
---|
50 | borderWidth: '2px',
|
---|
51 | borderBottomWidth: 'thin',
|
---|
52 | },
|
---|
53 | })``;
|
---|
54 |
|
---|
55 | export const MapsIcon = styled(MapOutlinedIcon).attrs((props) => ({
|
---|
56 | sx: {
|
---|
57 | width: props.$isactive ? '60px' : '50px',
|
---|
58 | height: props.$isactive ? '60px' : '50px',
|
---|
59 | color: props.$isactive ? `${props.theme.palette.primary.main}` : '',
|
---|
60 | },
|
---|
61 | }))``;
|
---|
62 |
|
---|
63 | export const ComponentIcon = styled(EqualizerOutlinedIcon).attrs((props) => ({
|
---|
64 | sx: {
|
---|
65 | width: props.$isactive ? '60px' : '50px',
|
---|
66 | height: props.$isactive ? '60px' : '50px',
|
---|
67 | color: props.$isactive ? `${props.theme.palette.primary.main}` : '',
|
---|
68 | },
|
---|
69 | }))``;
|
---|
70 |
|
---|
71 | export const NavigationIconsWrapper = styled.div`
|
---|
72 | height: 86px;
|
---|
73 | width: 160px;
|
---|
74 | display: flex;
|
---|
75 | justify-content: space-between;
|
---|
76 | align-self: center;
|
---|
77 | `;
|
---|
78 |
|
---|
79 | export const MainSection = styled.div`
|
---|
80 | height: 100%;
|
---|
81 | `;
|
---|