[bc20307] | 1 | import styled from 'styled-components';
|
---|
| 2 | import {
|
---|
| 3 | Button,
|
---|
| 4 | InputLabel,
|
---|
| 5 | MenuItem,
|
---|
| 6 | Select,
|
---|
| 7 | Switch,
|
---|
| 8 | TextField,
|
---|
| 9 | Typography,
|
---|
| 10 | } from '@mui/material';
|
---|
[3a58bd6] | 11 | import VIcon from '@mui/icons-material/Visibility';
|
---|
| 12 | import VOffIcon from '@mui/icons-material/VisibilityOff';
|
---|
| 13 |
|
---|
| 14 | export const EmployeeEditWrapper = styled.div`
|
---|
[bc20307] | 15 | display: flex;
|
---|
| 16 | flex-direction: column;
|
---|
| 17 | max-width: 800px;
|
---|
| 18 | height: 693px;
|
---|
| 19 | border: 1px solid whiteSmoke;
|
---|
| 20 | border-radius: 10px;
|
---|
| 21 | padding: 10px 20px;
|
---|
| 22 | margin-top: 20px;
|
---|
| 23 | margin-left: 30px;
|
---|
| 24 | background-color: white;
|
---|
| 25 | box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
|
---|
[3a58bd6] | 26 | `;
|
---|
| 27 |
|
---|
[bc20307] | 28 | export const Title = styled(Typography).attrs({})`
|
---|
| 29 | border-bottom: 2px solid rgba(0, 0, 0, 0.12);
|
---|
| 30 | padding-bottom: 10px;
|
---|
| 31 | margin-bottom: 15px;
|
---|
[3a58bd6] | 32 | `;
|
---|
| 33 |
|
---|
| 34 | export const RowWrapper = styled.div`
|
---|
[bc20307] | 35 | display: flex;
|
---|
| 36 | flex-direction: row;
|
---|
| 37 | justify-content: space-between;
|
---|
| 38 | margin-bottom: 25px;
|
---|
| 39 | position: relative;
|
---|
[3a58bd6] | 40 | `;
|
---|
| 41 |
|
---|
[bc20307] | 42 | export const LabelAndInputWrapper = styled.div``;
|
---|
[3a58bd6] | 43 |
|
---|
[bc20307] | 44 | export const Label = styled(InputLabel).attrs({})``;
|
---|
[3a58bd6] | 45 |
|
---|
[bc20307] | 46 | export const StandardInputField = styled(TextField).attrs({})`
|
---|
| 47 | width: 300px;
|
---|
[3a58bd6] | 48 | `;
|
---|
| 49 |
|
---|
| 50 | export const VisibilityIcon = styled(VIcon).attrs({
|
---|
[bc20307] | 51 | sx: {
|
---|
| 52 | fontSize: '2rem',
|
---|
| 53 | },
|
---|
[3a58bd6] | 54 | })``;
|
---|
| 55 |
|
---|
| 56 | export const VisibilityOffIcon = styled(VOffIcon).attrs({
|
---|
[bc20307] | 57 | sx: {
|
---|
| 58 | fontSize: '2rem',
|
---|
| 59 | },
|
---|
[3a58bd6] | 60 | })``;
|
---|
| 61 |
|
---|
[bc20307] | 62 | export const Dropdown = styled(Select).attrs({})`
|
---|
| 63 | width: 300px;
|
---|
[3a58bd6] | 64 | `;
|
---|
| 65 |
|
---|
[bc20307] | 66 | export const DropdownOption = styled(MenuItem).attrs({})`
|
---|
| 67 | > span {
|
---|
| 68 | color: ${(props) => props.theme.palette.primary.main};
|
---|
| 69 | svg {
|
---|
| 70 | color: ${(props) => props.theme.palette.primary.main};
|
---|
| 71 | }
|
---|
| 72 | }
|
---|
| 73 | > div > span {
|
---|
| 74 | font-size: 1.3rem;
|
---|
| 75 | }
|
---|
| 76 | `;
|
---|
[3a58bd6] | 77 |
|
---|
[bc20307] | 78 | // export const
|
---|
[3a58bd6] | 79 |
|
---|
| 80 | export const SwitchRowWrapper = styled.div`
|
---|
[bc20307] | 81 | text-align: center;
|
---|
| 82 | margin-top: 10px;
|
---|
| 83 | margin-bottom: 50px;
|
---|
[3a58bd6] | 84 | `;
|
---|
| 85 |
|
---|
| 86 | export const SwitchTitle = styled.p`
|
---|
[bc20307] | 87 | font-size: 18px;
|
---|
| 88 | font-weight: 600;
|
---|
| 89 | margin: 0;
|
---|
| 90 | margin-bottom: 5px;
|
---|
[3a58bd6] | 91 | `;
|
---|
| 92 |
|
---|
| 93 | export const SwitchLabelAndInputWrapper = styled.div`
|
---|
[bc20307] | 94 | display: flex;
|
---|
| 95 | flex-direction: row;
|
---|
| 96 | align-items: center;
|
---|
| 97 | justify-content: center;
|
---|
[3a58bd6] | 98 | `;
|
---|
| 99 |
|
---|
[bc20307] | 100 | export const AccountSwitch = styled(Switch).attrs((props) => ({}))`
|
---|
| 101 | .MuiSwitch-switchBase {
|
---|
| 102 | color: red;
|
---|
| 103 | }
|
---|
| 104 | .MuiSwitch-track {
|
---|
| 105 | background-color: red;
|
---|
| 106 | }
|
---|
| 107 | .MuiSwitch-switchBase.Mui-checked {
|
---|
| 108 | color: ${(props) => props.theme.palette.primary.main};
|
---|
| 109 | }
|
---|
| 110 | .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
|
---|
| 111 | background-color: ${(props) => props.theme.palette.primary.main};
|
---|
| 112 | }
|
---|
[3a58bd6] | 113 | `;
|
---|
| 114 |
|
---|
[bc20307] | 115 | export const BackAndSaveChangesButtonsWrapper = styled.div``;
|
---|
[3a58bd6] | 116 |
|
---|
[bc20307] | 117 | export const DeleteButton = styled(Button).attrs((props) => ({
|
---|
| 118 | variant: 'contained',
|
---|
| 119 | sx: {
|
---|
| 120 | backgroundColor: `${props.theme.palette.error.main}`,
|
---|
| 121 | },
|
---|
[3a58bd6] | 122 | }))`
|
---|
[bc20307] | 123 | :hover {
|
---|
| 124 | background-color: ${(props) => props.theme.palette.error.dark};
|
---|
| 125 | }
|
---|
[3a58bd6] | 126 | `;
|
---|
| 127 |
|
---|
| 128 | export const BackButton = styled(Button).attrs({
|
---|
[bc20307] | 129 | variant: 'outlined',
|
---|
[3a58bd6] | 130 | })`
|
---|
[bc20307] | 131 | margin-right: 15px;
|
---|
| 132 | :hover {
|
---|
| 133 | border: 2px solid;
|
---|
| 134 | font-weight: 600;
|
---|
| 135 | }
|
---|
[3a58bd6] | 136 | `;
|
---|
| 137 |
|
---|
[bc20307] | 138 | export const SaveChangesButton = styled(Button).attrs((props) => ({
|
---|
| 139 | variant: 'contained',
|
---|
| 140 | sx: {
|
---|
| 141 | backgroundColor: `${props.theme.palette.primary.main}`,
|
---|
| 142 | },
|
---|
[3a58bd6] | 143 | }))`
|
---|
[bc20307] | 144 | padding: 10px 16px;
|
---|
| 145 | :hover {
|
---|
| 146 | background-color: ${(props) => props.theme.palette.primary.dark};
|
---|
| 147 | }
|
---|
| 148 | `;
|
---|