Merge pull request #7947 from nixocio/ui_instance_group_update_css_red

Use a patternfly CSS variable instead of red

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot] 2020-08-20 16:22:29 +00:00 committed by GitHub
commit bd093b8999
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 3 deletions

View File

@ -3,7 +3,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { Link, useHistory } from 'react-router-dom';
import { Button } from '@patternfly/react-core';
import 'styled-components/macro';
import styled from 'styled-components';
import AlertModal from '../../../components/AlertModal';
import { CardBody, CardActionsRow } from '../../../components/Card';
@ -17,6 +17,10 @@ import {
import useRequest, { useDismissableError } from '../../../util/useRequest';
import { InstanceGroupsAPI } from '../../../api';
const Unavailable = styled.span`
color: var(--pf-global--danger-color--200);
`;
function InstanceGroupDetails({ instanceGroup, i18n }) {
const { id, name } = instanceGroup;
@ -78,7 +82,7 @@ function InstanceGroupDetails({ instanceGroup, i18n }) {
) : (
<Detail
label={i18n._(t`Used capacity`)}
value={<span css="color: red">{i18n._(t`Unavailable`)}</span>}
value={<Unavailable>{i18n._(t`Unavailable`)}</Unavailable>}
dataCy="instance-group-used-capacity"
/>
)}

View File

@ -46,6 +46,10 @@ const DataListAction = styled(_DataListAction)`
grid-template-columns: 40px;
`;
const Unavailable = styled.span`
color: var(--pf-global--danger-color--200);
`;
function InstanceGroupListItem({
instanceGroup,
detailUrl,
@ -78,7 +82,7 @@ function InstanceGroupListItem({
/>
);
}
return <span css="color: red">{i18n._(t`Unavailable`)}</span>;
return <Unavailable> {i18n._(t`Unavailable`)}</Unavailable>;
}
return null;
}