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

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"
           />
         )}

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;
   }