Merge pull request #16521 from luchillo17/fix/BCKSTG-102-theme-aware-colors

refactor: Replace white & black colors with theme aware ones
This commit is contained in:
Patrik Oldsberg
2023-02-28 13:28:46 +01:00
committed by GitHub
38 changed files with 193 additions and 132 deletions
@@ -17,28 +17,28 @@ import { Chip, withStyles } from '@material-ui/core';
import React from 'react';
import { ACCEPTED, Alert, PENDING, RESOLVED } from '../../types';
const ResolvedChip = withStyles({
const ResolvedChip = withStyles(theme => ({
root: {
backgroundColor: '#4caf50',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
}))(Chip);
const AcceptedChip = withStyles({
const AcceptedChip = withStyles(theme => ({
root: {
backgroundColor: '#ffb74d',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
const PendingChip = withStyles({
}))(Chip);
const PendingChip = withStyles(theme => ({
root: {
backgroundColor: '#d32f2f',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
}))(Chip);
export const alertStatusLabels = {
[RESOLVED]: 'Resolved',
@@ -41,7 +41,8 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
code: {
borderRadius: 6,
margin: theme.spacing(2, 0),
background: theme.palette.type === 'dark' ? '#444' : '#fff',
background:
theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
},
header: {
display: 'inline-block',
@@ -18,13 +18,13 @@ import Chip from '@material-ui/core/Chip';
import { withStyles } from '@material-ui/core/styles';
import { AlertSource } from '../../types';
const MaintenanceChip = withStyles({
const MaintenanceChip = withStyles(theme => ({
root: {
backgroundColor: '#92949c',
color: 'white',
color: theme.palette.common.white,
marginTop: 8,
},
})(Chip);
}))(Chip);
export const ILertCardHeaderStatus = ({
alertSource,
@@ -24,42 +24,42 @@ import {
UNDER_MAINTENANCE,
} from '../../types';
const OperationalChip = withStyles({
const OperationalChip = withStyles(theme => ({
root: {
backgroundColor: '#388E3D',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
}))(Chip);
const UnderMaintenanceChip = withStyles({
const UnderMaintenanceChip = withStyles(theme => ({
root: {
backgroundColor: '#616161',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
const DegradedChip = withStyles({
}))(Chip);
const DegradedChip = withStyles(theme => ({
root: {
backgroundColor: '#FBC02D',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
const PartialOutageChip = withStyles({
}))(Chip);
const PartialOutageChip = withStyles(theme => ({
root: {
backgroundColor: '#F57C02',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
const MajorOutageChip = withStyles({
}))(Chip);
const MajorOutageChip = withStyles(theme => ({
root: {
backgroundColor: '#D22F2E',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
}))(Chip);
const serviceStatusLabels = {
[OPERATIONAL]: 'Operational',
@@ -24,42 +24,42 @@ import {
UNDER_MAINTENANCE,
} from '../../types';
const OperationalChip = withStyles({
const OperationalChip = withStyles(theme => ({
root: {
backgroundColor: '#388E3D',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
}))(Chip);
const UnderMaintenanceChip = withStyles({
const UnderMaintenanceChip = withStyles(theme => ({
root: {
backgroundColor: '#616161',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
const DegradedChip = withStyles({
}))(Chip);
const DegradedChip = withStyles(theme => ({
root: {
backgroundColor: '#FBC02D',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
const PartialOutageChip = withStyles({
}))(Chip);
const PartialOutageChip = withStyles(theme => ({
root: {
backgroundColor: '#F57C02',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
const MajorOutageChip = withStyles({
}))(Chip);
const MajorOutageChip = withStyles(theme => ({
root: {
backgroundColor: '#D22F2E',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
}))(Chip);
const statusPageStatusLabels = {
[OPERATIONAL]: 'Operational',
@@ -17,21 +17,21 @@ import { Chip, withStyles } from '@material-ui/core';
import React from 'react';
import { PRIVATE, PUBLIC, StatusPage } from '../../types';
const PrivateChip = withStyles({
const PrivateChip = withStyles(theme => ({
root: {
backgroundColor: '#4caf50',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
}))(Chip);
const PublicChip = withStyles({
const PublicChip = withStyles(theme => ({
root: {
backgroundColor: '#ffb74d',
color: 'white',
color: theme.palette.common.white,
margin: 0,
},
})(Chip);
}))(Chip);
const statusPageVisibilityLabels = {
[PUBLIC]: 'Public',