[3a58bd6] | 1 | import styled from 'styled-components';
|
---|
| 2 | import T from '@mui/material/Table';
|
---|
| 3 | import TH from '@mui/material/TableHead';
|
---|
| 4 | import TContainer from '@mui/material/TableContainer';
|
---|
| 5 | import TR from '@mui/material/TableRow';
|
---|
| 6 | import TB from '@mui/material/TableBody';
|
---|
| 7 | import TC from '@mui/material/TableCell';
|
---|
| 8 |
|
---|
| 9 | import Button from '@mui/material/Button';
|
---|
| 10 | import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
|
---|
| 11 | import TextField from '@mui/material/TextField';
|
---|
| 12 | import PermIdentityIcon from '@mui/icons-material/PermIdentity';
|
---|
| 13 |
|
---|
| 14 | import Paper from '@mui/material/Paper';
|
---|
| 15 | import { Typography } from '@mui/material';
|
---|
| 16 |
|
---|
| 17 | export const TableContainer = styled(TContainer).attrs({
|
---|
| 18 | component: Paper,
|
---|
| 19 | })`
|
---|
[bc20307] | 20 | max-width: 1100px;
|
---|
[3a58bd6] | 21 | margin-top: 20px;
|
---|
| 22 | margin-left: 30px;
|
---|
| 23 | box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
|
---|
| 24 | `;
|
---|
| 25 |
|
---|
| 26 | export const TableHeaderWrapper = styled.div`
|
---|
| 27 | display: flex;
|
---|
| 28 | flex-direction: row;
|
---|
| 29 | justify-content: space-between;
|
---|
| 30 | align-content: center;
|
---|
| 31 | width: 100%;
|
---|
| 32 | border: 1px solid grey;
|
---|
| 33 | border-bottom: none;
|
---|
| 34 | padding: 10px 16px;
|
---|
[bc20307] | 35 | position: relative;
|
---|
[3a58bd6] | 36 | background-color: ${(props) => props.theme.palette.grey[400]};
|
---|
| 37 | `;
|
---|
| 38 |
|
---|
| 39 | export const TableTitle = styled(Typography).attrs({
|
---|
| 40 | variant: 'h4',
|
---|
| 41 | })`
|
---|
| 42 | font-size: 2rem;
|
---|
| 43 | font-weight: 600;
|
---|
| 44 | `;
|
---|
| 45 |
|
---|
| 46 | export const CreateEmployeeButton = styled(Button).attrs((props) => ({
|
---|
| 47 | variant: 'contained',
|
---|
| 48 | size: 'large',
|
---|
| 49 | sx: {
|
---|
| 50 | backgroundColor: `${props.theme.palette.primary.main}`,
|
---|
| 51 | },
|
---|
| 52 | }))`
|
---|
| 53 | padding-left: 11px;
|
---|
| 54 |
|
---|
| 55 | :hover {
|
---|
| 56 | background-color: ${(props) => props.theme.palette.primary.dark};
|
---|
| 57 | }
|
---|
| 58 | `;
|
---|
| 59 |
|
---|
| 60 | export const AddIcon = styled(AddCircleOutlineIcon)`
|
---|
| 61 | margin-right: 11px;
|
---|
| 62 | `;
|
---|
| 63 |
|
---|
| 64 | export const Table = styled(T).attrs({})`
|
---|
| 65 | th,
|
---|
| 66 | td {
|
---|
| 67 | padding: 20px;
|
---|
| 68 | font-size: 1rem;
|
---|
| 69 | }
|
---|
| 70 | `;
|
---|
| 71 |
|
---|
| 72 | export const IdentityIcon = styled(PermIdentityIcon).attrs((props) => ({
|
---|
| 73 | sx: {
|
---|
| 74 | color: `${props.theme.palette.primary.dark}`,
|
---|
| 75 | },
|
---|
| 76 | }))``;
|
---|
| 77 |
|
---|
| 78 | export const TableHead = styled(TH).attrs({})`
|
---|
| 79 | tr {
|
---|
| 80 | background-color: ${(props) => `${props.theme.palette.grey[900]}`};
|
---|
| 81 | th {
|
---|
| 82 | color: white;
|
---|
| 83 | }
|
---|
| 84 | }
|
---|
| 85 | `;
|
---|
| 86 |
|
---|
| 87 | export const TableRow = styled(TR).attrs({})``;
|
---|
| 88 |
|
---|
| 89 | export const TableBody = styled(TB).attrs({})`
|
---|
| 90 | tr:last-child td,
|
---|
| 91 | tr:last-child th {
|
---|
| 92 | border: none;
|
---|
| 93 | }
|
---|
| 94 |
|
---|
| 95 | tr:nth-of-type(odd) {
|
---|
| 96 | background-color: ${(props) => `${props.theme.palette.grey[400]}`};
|
---|
| 97 | :hover {
|
---|
| 98 | cursor: pointer;
|
---|
| 99 | background-color: ${(props) => `${props.theme.palette.grey[500]}`};
|
---|
| 100 | }
|
---|
| 101 | }
|
---|
| 102 |
|
---|
| 103 | tr:nth-of-type(even) {
|
---|
| 104 | background-color: ${(props) => `${props.theme.palette.grey[200]}`};
|
---|
| 105 | :hover {
|
---|
| 106 | cursor: pointer;
|
---|
| 107 | background-color: ${(props) => `${props.theme.palette.grey[300]}`};
|
---|
| 108 | }
|
---|
| 109 | }
|
---|
| 110 | `;
|
---|
| 111 |
|
---|
| 112 | export const TableCell = styled(TC).attrs({})``;
|
---|
| 113 |
|
---|
| 114 | export const ButtonTableCell = styled(TC).attrs({
|
---|
| 115 | sx: {
|
---|
| 116 | padding: 0,
|
---|
| 117 | },
|
---|
| 118 | })`
|
---|
| 119 | z-index: 100;
|
---|
| 120 | `;
|
---|
| 121 |
|
---|
| 122 | export const ToggleAccoutStatusButton = styled(Button).attrs((props) => ({
|
---|
| 123 | variant: 'contained',
|
---|
| 124 | size: 'medium',
|
---|
| 125 | sx: {
|
---|
| 126 | backgroundColor: props.$enabled
|
---|
| 127 | ? `${props.theme.palette.primary.main}`
|
---|
| 128 | : `${props.theme.palette.error.main}`,
|
---|
| 129 | },
|
---|
| 130 | }))`
|
---|
| 131 | :hover {
|
---|
| 132 | background-color: ${(props) =>
|
---|
| 133 | props.$enabled
|
---|
| 134 | ? `${props.theme.palette.primary.light}`
|
---|
| 135 | : `${props.theme.palette.error.light}`};
|
---|
| 136 | }
|
---|
| 137 | `;
|
---|
| 138 |
|
---|
| 139 | export const SearchField = styled(TextField).attrs({
|
---|
| 140 | variant: 'standard',
|
---|
| 141 | })`
|
---|
| 142 | > div:before {
|
---|
| 143 | border-bottom: 1px solid ${(props) => props.theme.palette.primary.dark};
|
---|
| 144 | }
|
---|
| 145 | input {
|
---|
| 146 | color: ${(props) => props.theme.palette.primary.dark};
|
---|
| 147 | font-weight: 600;
|
---|
| 148 | }
|
---|
| 149 | `;
|
---|