External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-13 15:09:32 -02:30
Code Issues Packages Projects Releases Wiki Activity

Use a patternfly CSS variable instead of red

Browse Source 
Use a patternfly CSS variable instead of red.

See: https://pf4.patternfly.org/documentation/overview/global-css-variables
This commit is contained in:
nixocio
2020-08-19 17:17:32 -04:00
parent a3eff133fe
commit efa12b12ec
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.jsx
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"
/>
)}

6
awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx
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;
}