TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored components styling 1/?

Browse Source
This commit is contained in:
Daniel Cojocea committed 2024-08-27 12:18:25 -04:00
1 parent e72212a467
commit 8b27bc2ab2
20 files changed
+278 -197
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/BasicTable/index.css
+3 -53
View File
@@ -17,8 +17,6 @@
.MuiPaper-root:has(table.MuiTable-root) {
box-shadow: none;
border: solid 1px var(--border-color);
border-radius: var(--env-var-radius-1);
}
.MuiTable-root
.MuiTableBody-root
@@ -26,10 +24,7 @@
.MuiTableCell-root {
border: none;
}
.MuiTable-root .MuiTableHead-root,
.MuiTable-root .MuiTableRow-root:hover {
background-color: var(--primary-bg-accent);
}
.MuiTable-root .MuiTableHead-root .MuiTableCell-root,
.MuiTable-root .MuiTableBody-root .MuiTableCell-root {
font-size: var(--env-var-font-size-medium);
@@ -37,7 +32,6 @@
.MuiTable-root .MuiTableHead-root .MuiTableCell-root {
padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
font-weight: 500;
color: var(--secondary-color-light);
}
.MuiTable-root .MuiTableHead-root span {
display: inline-block;
@@ -52,7 +46,6 @@
height: 20px;
}
.MuiTable-root .MuiTableBody-root .MuiTableCell-root {
color: var(--secondary-color);
padding: 6px var(--env-var-spacing-2);
}
.MuiTable-root .MuiTableBody-root .MuiTableRow-root {
@@ -61,21 +54,14 @@
.MuiPaper-root + .MuiPagination-root {
margin-top: 24px;
background-color: var(--primary-bg);
border: solid 1px var(--border-color);
border-radius: var(--env-var-radius-1);
padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
}
.MuiPaper-root + .MuiPagination-root ul {
justify-content: center;
}
.MuiPaper-root
+ .MuiPagination-root
ul
li:not(:first-child):not(:last-child)
button {
.MuiPaper-root + .MuiPagination-root button {
font-size: var(--env-var-font-size-medium);
color: var(--secondary-color);
font-weight: 500;
}
.MuiPaper-root + .MuiPagination-root ul li:first-child {
@@ -84,11 +70,6 @@
.MuiPaper-root + .MuiPagination-root ul li:last-child {
margin-left: auto;
}
.MuiPaper-root + .MuiPagination-root ul li:first-child button,
.MuiPaper-root + .MuiPagination-root ul li:last-child button {
border: solid 1px var(--border-color);
border-radius: var(--env-var-radius-1);
}
.MuiPaper-root + .MuiPagination-root ul li:first-child button {
padding: 0 var(--env-var-spacing-1) 0 var(--env-var-spacing-1-plus);
}
@@ -108,23 +89,14 @@
content: "Next";
margin-right: 15px;
}
.MuiPaper-root + .MuiPagination-root .MuiPaginationItem-root.Mui-selected {
background-color: var(--primary-bg-fill);
}
.MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root {
user-select: none;
}
.MuiTablePagination-root p {
color: var(--secondary-color-light);
font-weight: 500;
font-size: var(--env-var-font-size-small-plus);
}
.MuiTablePagination-root button,
.MuiTablePagination-root .MuiSelect-select {
border: solid 1px var(--border-color);
border-radius: var(--env-var-radius-1);
}
.MuiTablePagination-root .MuiTablePagination-select.MuiSelect-select {
text-align: left;
text-align-last: left;
@@ -138,10 +110,6 @@
width: 22px;
height: 22px;
}
.MuiTablePagination-root svg path {
stroke: var(--secondary-color-light);
stroke-width: 1.3;
}
.MuiTablePagination-root .MuiSelect-icon {
width: 16px;
height: 16px;
@@ -152,30 +120,13 @@
.MuiTablePagination-root button.Mui-disabled {
opacity: 0.4;
}
.MuiTablePagination-root button:not(.Mui-disabled):hover {
background-color: var(--primary-bg-fill);
border-color: var(--primary-bg-fill);
}
.pagination-dropdown.MuiPaper-root {
box-shadow: var(--env-var-shadow-1);
border: solid 1px var(--border-color);
border-radius: var(--env-var-radius-1);
}
.pagination-dropdown ul {
padding: 4px;
min-width: 100px;
}
.pagination-dropdown li,
body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
.pagination-dropdown li {
font-size: var(--env-var-font-size-medium);
color: var(--secondary-color-light);
padding: 4px;
}
.pagination-dropdown li.Mui-selected,
.pagination-dropdown li.Mui-selected.Mui-focusVisible,
.pagination-dropdown li.Mui-selected:hover {
background-color: var(--primary-bg-fill);
}
body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
font-size: var(--env-var-font-size-small-plus);
@@ -183,7 +134,6 @@ body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
.monitors .MuiTable-root .MuiTableHead-root .MuiTableCell-root {
text-transform: uppercase;
color: var(--secondary-color);
opacity: 0.8;
font-size: var(--env-var-font-size-small-plus);
font-weight: 400;
Client/src/Components/BasicTable/index.jsx
+73 -12
View File
@@ -200,12 +200,29 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
return (
<>
<TableContainer component={Paper}>
<TableContainer
component={Paper}
sx={{
border: `solid 1px ${theme.palette.border.light}`,
borderRadius: theme.shape.borderRadius,
}}
>
<Table>
<TableHead>
<TableHead
sx={{
backgroundColor: theme.palette.background.accent,
}}
>
<TableRow>
{data.cols.map((col) => (
<TableCell key={col.id}>{col.name}</TableCell>
<TableCell
key={col.id}
sx={{
color: theme.palette.text.secondary,
}}
>
{col.name}
</TableCell>
))}
</TableRow>
</TableHead>
@@ -215,12 +232,24 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
<TableRow
sx={{
cursor: row.handleClick ? "pointer" : "default",
"&:hover": {
backgroundColor: theme.palette.background.accent,
},
}}
key={row.id}
onClick={row.handleClick ? row.handleClick : null}
>
{row.data.map((cell) => {
return <TableCell key={cell.id}>{cell.data}</TableCell>;
return (
<TableCell
key={cell.id}
sx={{
color: theme.palette.text.secondary,
}}
>
{cell.data}
</TableCell>
);
})}
</TableRow>
);
@@ -233,9 +262,14 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
direction="row"
alignItems="center"
justifyContent="space-between"
px={theme.gap.small}
px={theme.spacing(4)}
sx={{
"& p": {
color: theme.palette.text.tertiary,
},
}}
>
<Typography sx={{ opacity: 0.7 }}>
<Typography px={theme.spacing(2)} sx={{ opacity: 0.7 }}>
Showing {getRange()} of {data.rows.length} monitor(s)
</Typography>
<TablePagination
@@ -260,6 +294,20 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
keepMounted: true,
PaperProps: {
className: "pagination-dropdown",
sx: {
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
boxShadow: theme.shape.boxShadow,
"& li": {
p: theme.spacing(2),
color: theme.palette.text.tertiary,
},
"& li.Mui-selected, & li.Mui-selected.Mui-focusVisible, & li.Mui-selected:hover":
{
backgroundColor: theme.palette.background.fill,
},
},
},
transformOrigin: { vertical: "bottom", horizontal: "left" },
anchorOrigin: { vertical: "top", horizontal: "left" },
@@ -268,19 +316,32 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
inputProps: { id: "pagination-dropdown" },
IconComponent: SelectorVertical,
sx: {
ml: theme.gap.small,
mr: theme.gap.large,
minWidth: theme.gap.xl,
ml: theme.spacing(4),
mr: theme.spacing(12),
minWidth: theme.spacing(20),
textAlign: "left",
"&.Mui-focused > div": {
backgroundColor: theme.palette.otherColors.white,
backgroundColor: theme.palette.background.main,
},
},
},
}}
sx={{
mt: theme.gap.medium,
color: theme.palette.otherColors.bluishGray,
mt: theme.spacing(6),
color: theme.palette.text.secondary,
"& button, & .MuiSelect-select": {
border: 1,
borderColor: theme.palette.border.light,
borderRadius: theme.shape.borderRadius,
},
"& svg path": {
stroke: theme.palette.text.tertiary,
strokeWidth: 1.3,
},
"& button:not(.Mui-disabled):hover": {
backgroundColor: theme.palette.background.fill,
borderColor: theme.palette.background.fill,
},
}}
/>
</Stack>