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

Added styling to the labels.

Browse Source
This commit is contained in:
M M committed 2024-06-28 17:42:28 -07:00
1 parent b254c9058e
commit d954b58766
2 files changed
+11 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/Label/index.jsx
+5 -2
View File
@@ -124,7 +124,7 @@ ColoredLabel.propTypes = {
* <StatusLabel status="Active" />
*/
const StatusLabel = ({ status }) => {
const StatusLabel = ({ status, customStyles }) => {
const theme = useTheme();
const colorLookup = {
@@ -132,13 +132,15 @@ const StatusLabel = ({ status }) => {
Waiting: theme.palette.labelRed.color,
New: theme.palette.labelOrange.color,
Active: theme.palette.labelGreen.color,
Down: theme.palette.error.main, // Assuming theme.palette.error.main is red
};
// Look up the color for the status, default to labelGray if not found
const color = colorLookup[status] || theme.palette.labelGray.color;
return (
<BaseLabel label={status}>
<BaseLabel label={status} styles={customStyles}>
<Box
width={12}
height={12}
@@ -152,6 +154,7 @@ const StatusLabel = ({ status }) => {
StatusLabel.propTypes = {
status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
customStyles: PropTypes.object,
};
export { ColoredLabel, StatusLabel };
Client/src/Pages/Incidents/index.jsx
+6 -5
View File
@@ -36,13 +36,14 @@ function createData(name, calories, fat, carbs, protein) {
}
const rows = [
createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
createData(<StatusLabel status="Cannot resolve" />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
createData(<StatusLabel status="Down" />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
createData(<StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
createData(<StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
];
export default function CustomizedTables() {
return (
<TableContainer component={Paper}>