[3a58bd6] | 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';
|
---|
[bc20307] | 5 | import { mobile_max_width } from '../../../config/utilities';
|
---|
| 6 | import CircularProgress from '@mui/material/CircularProgress';
|
---|
[3a58bd6] | 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;
|
---|
[bc20307] | 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 | }
|
---|
[3a58bd6] | 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}`,
|
---|
[bc20307] | 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 | `;
|
---|
[3a58bd6] | 45 |
|
---|
| 46 | export const DividerUnderNames = styled(Divider).attrs({
|
---|
| 47 | variant: 'middle',
|
---|
| 48 | sx: {
|
---|
[bc20307] | 49 | margin: '0 9%',
|
---|
[3a58bd6] | 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 | `;
|
---|