[bc20307] | 1 | import styled from 'styled-components';
|
---|
| 2 | import Box from '@mui/material/Box';
|
---|
| 3 | import { Typography } from '@mui/material';
|
---|
| 4 | import Button from '@mui/material/Button';
|
---|
| 5 | import DeleteIcon from '@mui/icons-material/Delete';
|
---|
| 6 | import CancelIcon from '@mui/icons-material/Cancel';
|
---|
| 7 | import CIcon from '@mui/icons-material/Close';
|
---|
| 8 | import SaveIcon from '@mui/icons-material/Save';
|
---|
| 9 |
|
---|
| 10 | export const ZoneSectorAndDeleteButtonWrapper = styled.div`
|
---|
| 11 | position: relative;
|
---|
| 12 | `;
|
---|
| 13 |
|
---|
| 14 | export const DeleteButton = styled(Button).attrs({
|
---|
| 15 | variant: 'outlined',
|
---|
| 16 | startIcon: <DeleteIcon />,
|
---|
| 17 | })`
|
---|
| 18 | position: absolute;
|
---|
| 19 | font-size: 1rem;
|
---|
| 20 | font-weight: 600;
|
---|
| 21 | color: red;
|
---|
| 22 | border: 3px solid red;
|
---|
| 23 | padding: 5px 10px;
|
---|
| 24 | top: -48px;
|
---|
| 25 | :hover {
|
---|
| 26 | border: 3px dashed red;
|
---|
| 27 | background-color: rgba(255, 0, 0, 0.1);
|
---|
| 28 | }
|
---|
| 29 | `;
|
---|
| 30 |
|
---|
| 31 | export const RightSideWrapper = styled.div`
|
---|
| 32 | display: flex;
|
---|
| 33 | flex-direction: column;
|
---|
| 34 | justify-content: space-between;
|
---|
| 35 | height: 100%;
|
---|
| 36 | min-width: 500px;
|
---|
| 37 | width: 500px;
|
---|
| 38 | position: relative;
|
---|
| 39 | `;
|
---|
| 40 |
|
---|
| 41 | export const SaveButton = styled(Button).attrs({
|
---|
| 42 | variant: 'contained',
|
---|
| 43 | startIcon: <SaveIcon />,
|
---|
| 44 | })`
|
---|
| 45 | position: absolute;
|
---|
| 46 | font-size: 1rem;
|
---|
| 47 | font-weight: 600;
|
---|
| 48 | background-color: ${(props) => props.theme.palette.primary.main};
|
---|
| 49 | padding: 8px 15px;
|
---|
| 50 | right: 150px;
|
---|
| 51 | top: -49px;
|
---|
| 52 | :hover {
|
---|
| 53 | background-color: ${(props) => props.theme.palette.primary.dark};
|
---|
| 54 | }
|
---|
| 55 | `;
|
---|
| 56 |
|
---|
| 57 | export const CancelButton = styled(Button).attrs({
|
---|
| 58 | variant: 'outlined',
|
---|
| 59 | startIcon: <CancelIcon />,
|
---|
| 60 | })`
|
---|
| 61 | position: absolute;
|
---|
| 62 | font-size: 1rem;
|
---|
| 63 | font-weight: 600;
|
---|
| 64 | color: ${(props) => props.theme.palette.third.main};
|
---|
| 65 | border: 3px solid ${(props) => props.theme.palette.third.main};
|
---|
| 66 | padding: 5px 10px;
|
---|
| 67 | right: 0;
|
---|
| 68 | top: -48px;
|
---|
| 69 | :hover {
|
---|
| 70 | border: 3px dashed ${(props) => props.theme.palette.third.main};
|
---|
| 71 | background-color: rgba(246, 80, 38, 0.1);
|
---|
| 72 | }
|
---|
| 73 | `;
|
---|
| 74 |
|
---|
| 75 | export const CloseIcon = styled(CIcon).attrs({
|
---|
| 76 | sx: {
|
---|
| 77 | color: 'red',
|
---|
| 78 | fontSize: '2.5rem',
|
---|
| 79 | },
|
---|
| 80 | })``;
|
---|
| 81 |
|
---|
| 82 | export const ModalContainer = styled(Box).attrs({
|
---|
| 83 | width: 400,
|
---|
| 84 | height: 350,
|
---|
| 85 | bgcolor: 'background.paper',
|
---|
| 86 | boxShadow: 24,
|
---|
| 87 | zIndex: 1000,
|
---|
| 88 | marginBottom: '10%',
|
---|
| 89 | position: 'relative',
|
---|
| 90 | })`
|
---|
| 91 | padding: 0 25px 16px 25px;
|
---|
| 92 | `;
|
---|
| 93 |
|
---|
| 94 | export const ModalTitle = styled(Typography).attrs({
|
---|
| 95 | variant: 'h5',
|
---|
| 96 | fontWeight: 600,
|
---|
| 97 | marginBottom: '20px',
|
---|
| 98 | })``;
|
---|
| 99 |
|
---|
| 100 | export const ModalDescription = styled(Typography).attrs({
|
---|
| 101 | variant: 'body1',
|
---|
| 102 | paddingLeft: '10px',
|
---|
| 103 | })``;
|
---|
| 104 |
|
---|
| 105 | export const ButtonsWrapper = styled.div`
|
---|
| 106 | width: 100%;
|
---|
| 107 | display: flex;
|
---|
| 108 | flex-direction: row;
|
---|
| 109 | justify-content: space-between;
|
---|
| 110 | position: absolute;
|
---|
| 111 | bottom: 15px;
|
---|
| 112 | left: 0;
|
---|
| 113 | padding: 0 20px;
|
---|
| 114 | `;
|
---|
| 115 |
|
---|
| 116 | export const ModalButton = styled(Button).attrs((props) => ({
|
---|
| 117 | variant: 'contained',
|
---|
| 118 | size: 'large',
|
---|
| 119 | sx: {
|
---|
| 120 | backgroundColor: `${props.theme.palette.primary.main}`,
|
---|
| 121 | minWidth: '35%',
|
---|
| 122 | maxWidth: '45%',
|
---|
| 123 | height: 'auto',
|
---|
| 124 | },
|
---|
| 125 | }))`
|
---|
| 126 | :hover {
|
---|
| 127 | background-color: ${(props) => props.theme.palette.primary.dark};
|
---|
| 128 | }
|
---|
| 129 | `;
|
---|