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';
|
---|
11 | import VIcon from '@mui/icons-material/Visibility';
|
---|
12 | import VOffIcon from '@mui/icons-material/VisibilityOff';
|
---|
13 |
|
---|
14 | export const EmployeeEditWrapper = styled.div`
|
---|
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};
|
---|
26 | `;
|
---|
27 |
|
---|
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;
|
---|
32 | `;
|
---|
33 |
|
---|
34 | export const RowWrapper = styled.div`
|
---|
35 | display: flex;
|
---|
36 | flex-direction: row;
|
---|
37 | justify-content: space-between;
|
---|
38 | margin-bottom: 25px;
|
---|
39 | position: relative;
|
---|
40 | `;
|
---|
41 |
|
---|
42 | export const LabelAndInputWrapper = styled.div``;
|
---|
43 |
|
---|
44 | export const Label = styled(InputLabel).attrs({})``;
|
---|
45 |
|
---|
46 | export const StandardInputField = styled(TextField).attrs({})`
|
---|
47 | width: 300px;
|
---|
48 | `;
|
---|
49 |
|
---|
50 | export const VisibilityIcon = styled(VIcon).attrs({
|
---|
51 | sx: {
|
---|
52 | fontSize: '2rem',
|
---|
53 | },
|
---|
54 | })``;
|
---|
55 |
|
---|
56 | export const VisibilityOffIcon = styled(VOffIcon).attrs({
|
---|
57 | sx: {
|
---|
58 | fontSize: '2rem',
|
---|
59 | },
|
---|
60 | })``;
|
---|
61 |
|
---|
62 | export const Dropdown = styled(Select).attrs({})`
|
---|
63 | width: 300px;
|
---|
64 | `;
|
---|
65 |
|
---|
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 | `;
|
---|
77 |
|
---|
78 | // export const
|
---|
79 |
|
---|
80 | export const SwitchRowWrapper = styled.div`
|
---|
81 | text-align: center;
|
---|
82 | margin-top: 10px;
|
---|
83 | margin-bottom: 50px;
|
---|
84 | `;
|
---|
85 |
|
---|
86 | export const SwitchTitle = styled.p`
|
---|
87 | font-size: 18px;
|
---|
88 | font-weight: 600;
|
---|
89 | margin: 0;
|
---|
90 | margin-bottom: 5px;
|
---|
91 | `;
|
---|
92 |
|
---|
93 | export const SwitchLabelAndInputWrapper = styled.div`
|
---|
94 | display: flex;
|
---|
95 | flex-direction: row;
|
---|
96 | align-items: center;
|
---|
97 | justify-content: center;
|
---|
98 | `;
|
---|
99 |
|
---|
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 | }
|
---|
113 | `;
|
---|
114 |
|
---|
115 | export const BackAndSaveChangesButtonsWrapper = styled.div``;
|
---|
116 |
|
---|
117 | export const DeleteButton = styled(Button).attrs((props) => ({
|
---|
118 | variant: 'contained',
|
---|
119 | sx: {
|
---|
120 | backgroundColor: `${props.theme.palette.error.main}`,
|
---|
121 | },
|
---|
122 | }))`
|
---|
123 | :hover {
|
---|
124 | background-color: ${(props) => props.theme.palette.error.dark};
|
---|
125 | }
|
---|
126 | `;
|
---|
127 |
|
---|
128 | export const BackButton = styled(Button).attrs({
|
---|
129 | variant: 'outlined',
|
---|
130 | })`
|
---|
131 | margin-right: 15px;
|
---|
132 | :hover {
|
---|
133 | border: 2px solid;
|
---|
134 | font-weight: 600;
|
---|
135 | }
|
---|
136 | `;
|
---|
137 |
|
---|
138 | export const SaveChangesButton = styled(Button).attrs((props) => ({
|
---|
139 | variant: 'contained',
|
---|
140 | sx: {
|
---|
141 | backgroundColor: `${props.theme.palette.primary.main}`,
|
---|
142 | },
|
---|
143 | }))`
|
---|
144 | padding: 10px 16px;
|
---|
145 | :hover {
|
---|
146 | background-color: ${(props) => props.theme.palette.primary.dark};
|
---|
147 | }
|
---|
148 | `;
|
---|