mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-15 06:09:44 -06:00
Code Issues Packages Projects Releases Wiki Activity

Placed the TableContainer in a box to better match figma design.

Browse Source
This commit is contained in:
M M
2024-07-02 20:24:51 -07:00
parent 75d16b749d
commit c2b47e5cc4
1 changed files with 43 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
Client/src/Pages/Incidents/index.jsx
View File

@@ -1,4 +1,4 @@
import { styled } from '@mui/material/styles';
import { styled, useTheme } from '@mui/material/styles';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
@@ -6,12 +6,12 @@ import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
import { StatusLabel } from "../../Components/Label/";
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.action.hover,
backgroundColor: theme.palette.action.hover,
color: theme.palette.common.black,
},
[`&.${tableCellClasses.body}`]: {
@@ -21,18 +21,18 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
const StyledTableRow = styled(TableRow)(({ theme }) => ({
'&:nth-of-type(1)': {
backgroundColor: theme.palette.action.hover,
backgroundColor: theme.palette.action.hover,
},
'&:nth-of-type(n+1)': {
backgroundColor: theme.palette.common.white,
backgroundColor: theme.palette.common.white,
},
'&:last-child td, &:last-child th': {
border: 0,
},
}));
function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
function createData(name, date, message) {
return { name, date, message };
}
const rows = [
@@ -43,30 +43,43 @@ const rows = [
createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
];
export default function CustomizedTables() {
const theme = useTheme();
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>Status</StyledTableCell>
<StyledTableCell align="right">Date & Time</StyledTableCell>
<StyledTableCell align="right">Message</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => (
<StyledTableRow key={index}>
<StyledTableCell component="th" scope="row">
{row.name}
</StyledTableCell>
<StyledTableCell align="right">{row.calories}</StyledTableCell>
<StyledTableCell align="right">{row.fat}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
<Box
sx={{
marginTop: theme.spacing(4),
marginX: 'auto',
width: '80%',
paddingX: theme.spacing(6),
[theme.breakpoints.down('md')]: {
width: '100%',
},
}}
>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>Status</StyledTableCell>
<StyledTableCell align="right">Date & Time</StyledTableCell>
<StyledTableCell align="right">Message</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => (
<StyledTableRow key={index}>
<StyledTableCell component="th" scope="row">
{row.name}
</StyledTableCell>
<StyledTableCell align="right">{row.date}</StyledTableCell>
<StyledTableCell align="right">{row.message}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
);
}