From efa12b12ec434ffad9259e9f9c423ea6f13cb872 Mon Sep 17 00:00:00 2001
From: nixocio <nixocio@gmail.com>
Date: Wed, 19 Aug 2020 17:17:32 -0400
Subject: [PATCH] Use a patternfly CSS variable instead of red

Use a patternfly CSS variable instead of red.

See: https://pf4.patternfly.org/documentation/overview/global-css-variables
---
 .../InstanceGroupDetails/InstanceGroupDetails.jsx         | 8 ++++++--
 .../InstanceGroupList/InstanceGroupListItem.jsx           | 6 +++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.jsx b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.jsx
index 8df5e5b863..c6d3313ffe 100644
--- a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.jsx
+++ b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.jsx
@@ -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"
           />
         )}
diff --git a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx
index 93e334d367..915aa44d44 100644
--- a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx
+++ b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx
@@ -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;
   }