From 34b717d00cdd33fd95cff793c8c667408f77f362 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Wed, 12 Feb 2020 14:41:14 -0500
Subject: [PATCH 1/5] Remove vertical separator

---
 .../DataListToolbar/DataListToolbar.jsx       |  8 -------
 .../Lookup/MultiCredentialsLookup.jsx         |  6 ++---
 .../components/SelectedList/SelectedList.jsx  |  4 +---
 .../VerticalSeparator/VerticalSeparator.jsx   | 20 ----------------
 .../VerticalSeparator.test.jsx                | 11 ---------
 .../src/components/VerticalSeparator/index.js |  1 -
 .../CredentialList/CredentialList.test.jsx    | 20 ++++++++--------
 .../CredentialList/CredentialListItem.jsx     |  4 +---
 .../screens/Host/HostList/HostListItem.jsx    |  4 +---
 .../InventoryGroups/InventoryGroupItem.jsx    |  4 +---
 .../InventoryGroupsList.test.jsx              | 20 ++++++++--------
 .../InventoryHosts/InventoryHostItem.jsx      |  4 +---
 .../InventoryHosts/InventoryHostList.test.jsx | 24 +++++++++----------
 .../InventoryList/InventoryListItem.jsx       |  4 +---
 .../src/screens/Job/JobList/JobListItem.jsx   |  5 +++-
 .../WorkflowOutput/WorkflowOutputToolbar.jsx  |  4 +---
 .../OrganizationList/OrganizationListItem.jsx |  4 +---
 .../Project/ProjectList/ProjectListItem.jsx   |  4 +---
 .../screens/Team/TeamList/TeamListItem.jsx    |  4 +---
 .../TemplateList/TemplateListItem.jsx         |  4 +---
 .../screens/User/UserList/UserListItem.jsx    |  4 +---
 21 files changed, 51 insertions(+), 112 deletions(-)
 delete mode 100644 awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.jsx
 delete mode 100644 awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.test.jsx
 delete mode 100644 awx/ui_next/src/components/VerticalSeparator/index.js

diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
index 3b03ac838e..0d5563a6f2 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
@@ -34,13 +34,6 @@ const AdditionalControlsDataToolbarGroup = styled(DataToolbarGroup)`
   margin-right: 0 !important;
 `;
 
-const DataToolbarSeparator = styled(DataToolbarItem)`
-  width: 1px !important;
-  height: 30px !important;
-  margin-left: 3px !important;
-  margin-right: 10px !important;
-`;
-
 class DataListToolbar extends React.Component {
   render() {
     const {
@@ -80,7 +73,6 @@ class DataListToolbar extends React.Component {
                   id="select-all"
                 />
               </DataToolbarItem>
-              <DataToolbarSeparator variant="separator" />
             </DataToolbarGroup>
           )}
           <DataToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">
diff --git a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
index 782b11da36..cf05f48e89 100644
--- a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
@@ -8,7 +8,6 @@ import { CredentialsAPI, CredentialTypesAPI } from '@api';
 import AnsibleSelect from '@components/AnsibleSelect';
 import { FieldTooltip } from '@components/FormField';
 import CredentialChip from '@components/CredentialChip';
-import VerticalSeperator from '@components/VerticalSeparator';
 import { getQSConfig, parseQueryString } from '@util/qs';
 import Lookup from './Lookup';
 import OptionsList from './shared/OptionsList';
@@ -97,8 +96,9 @@ function MultiCredentialsLookup(props) {
             <Fragment>
               {credentialTypes && credentialTypes.length > 0 && (
                 <ToolbarItem css=" display: flex; align-items: center;">
-                  <div css="flex: 0 0 25%;">{i18n._(t`Selected Category`)}</div>
-                  <VerticalSeperator />
+                  <div css="flex: 0 0 25%; margin-right: 32px">
+                    {i18n._(t`Selected Category`)}
+                  </div>
                   <AnsibleSelect
                     css="flex: 1 1 75%;"
                     id="multiCredentialsLookUp-select"
diff --git a/awx/ui_next/src/components/SelectedList/SelectedList.jsx b/awx/ui_next/src/components/SelectedList/SelectedList.jsx
index c452c68657..60045a04b0 100644
--- a/awx/ui_next/src/components/SelectedList/SelectedList.jsx
+++ b/awx/ui_next/src/components/SelectedList/SelectedList.jsx
@@ -7,7 +7,6 @@ import {
   SplitItem,
 } from '@patternfly/react-core';
 import styled from 'styled-components';
-import VerticalSeparator from '../VerticalSeparator';
 
 const Split = styled(PFSplit)`
   margin: 20px 0px;
@@ -40,8 +39,7 @@ class SelectedList extends Component {
 
     return (
       <Split>
-        <SplitLabelItem>{label}</SplitLabelItem>
-        <VerticalSeparator />
+        <SplitLabelItem css="margin-right: 32px">{label}</SplitLabelItem>
         <SplitItem>
           <ChipGroup numChips={5}>
             {selected.map(item =>
diff --git a/awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.jsx b/awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.jsx
deleted file mode 100644
index ebe53e5ada..0000000000
--- a/awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const Separator = styled.span`
-  display: inline-block;
-  width: 1px;
-  height: 30px;
-  margin-right: 20px;
-  margin-left: 20px;
-  background-color: #d7d7d7;
-  vertical-align: middle;
-`;
-
-const VerticalSeparator = () => (
-  <div>
-    <Separator />
-  </div>
-);
-
-export default VerticalSeparator;
diff --git a/awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.test.jsx b/awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.test.jsx
deleted file mode 100644
index 3de7ae1e3e..0000000000
--- a/awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.test.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import VerticalSeparator from './VerticalSeparator';
-
-describe('VerticalSeparator', () => {
-  test('renders the expected content', () => {
-    const wrapper = mount(<VerticalSeparator />);
-    expect(wrapper).toHaveLength(1);
-  });
-});
diff --git a/awx/ui_next/src/components/VerticalSeparator/index.js b/awx/ui_next/src/components/VerticalSeparator/index.js
deleted file mode 100644
index 73c51cd580..0000000000
--- a/awx/ui_next/src/components/VerticalSeparator/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './VerticalSeparator';
diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.test.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.test.jsx
index 8ec83f2f49..5bab169d03 100644
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.test.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.test.jsx
@@ -54,44 +54,44 @@ describe('<CredentialList />', () => {
 
   test('should check and uncheck the row item', async () => {
     expect(
-      wrapper.find('PFDataListCheck[id="select-credential-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
     ).toBe(false);
     await act(async () => {
       wrapper
-        .find('PFDataListCheck[id="select-credential-1"]')
+        .find('DataListCheck[id="select-credential-1"]')
         .invoke('onChange')(true);
     });
     wrapper.update();
     expect(
-      wrapper.find('PFDataListCheck[id="select-credential-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
     ).toBe(true);
     await act(async () => {
       wrapper
-        .find('PFDataListCheck[id="select-credential-1"]')
+        .find('DataListCheck[id="select-credential-1"]')
         .invoke('onChange')(false);
     });
     wrapper.update();
     expect(
-      wrapper.find('PFDataListCheck[id="select-credential-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
     ).toBe(false);
   });
 
   test('should check all row items when select all is checked', async () => {
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(true);
     });
     wrapper.update();
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(true);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(false);
     });
     wrapper.update();
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
   });
@@ -102,7 +102,7 @@ describe('<CredentialList />', () => {
 
     await act(async () => {
       wrapper
-        .find('PFDataListCheck[id="select-credential-3"]')
+        .find('DataListCheck[id="select-credential-3"]')
         .invoke('onChange')();
     });
     wrapper.update();
@@ -119,7 +119,7 @@ describe('<CredentialList />', () => {
     );
     await act(async () => {
       wrapper
-        .find('PFDataListCheck[id="select-credential-2"]')
+        .find('DataListCheck[id="select-credential-2"]')
         .invoke('onChange')();
     });
     wrapper.update();
diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
index 937dde8607..f5f6cff512 100644
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
@@ -5,6 +5,7 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells as _DataListItemCells,
@@ -13,8 +14,6 @@ import {
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import VerticalSeparator from '@components/VerticalSeparator';
 import styled from 'styled-components';
 import { Credential } from '@types';
 
@@ -50,7 +49,6 @@ function CredentialListItem({
         <DataListItemCells
           dataListCells={[
             <DataListCell key="name">
-              <VerticalSeparator />
               <Link to={`${detailUrl}`}>
                 <b>{credential.name}</b>
               </Link>
diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
index cb81224fd3..72baf5e8f9 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -14,9 +15,7 @@ import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
 import { Sparkline } from '@components/Sparkline';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { Host } from '@types';
 
 class HostListItem extends React.Component {
@@ -56,7 +55,6 @@ class HostListItem extends React.Component {
           <DataListItemCells
             dataListCells={[
               <DataListCell key="name">
-                <VerticalSeparator />
                 <Link to={`${detailUrl}`}>
                   <b>{host.name}</b>
                 </Link>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
index 94c4edb7f4..55ef6ccdce 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
@@ -6,6 +6,7 @@ import { Group } from '@types';
 
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -15,8 +16,6 @@ import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import VerticalSeparator from '@components/VerticalSeparator';
 
 function InventoryGroupItem({
   i18n,
@@ -41,7 +40,6 @@ function InventoryGroupItem({
         <DataListItemCells
           dataListCells={[
             <DataListCell key="divider">
-              <VerticalSeparator />
               <Link to={`${detailUrl}`} id={labelId}>
                 <b>{group.name}</b>
               </Link>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
index 3c9df3ec3b..d3f9f042c1 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
@@ -98,46 +98,46 @@ describe('<InventoryGroupsList />', () => {
 
   test('should check and uncheck the row item', async () => {
     expect(
-      wrapper.find('PFDataListCheck[id="select-group-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-group-1"]').props().checked
     ).toBe(false);
 
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')(
+      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
         true
       );
     });
     wrapper.update();
     expect(
-      wrapper.find('PFDataListCheck[id="select-group-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-group-1"]').props().checked
     ).toBe(true);
 
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')(
+      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
         false
       );
     });
     wrapper.update();
     expect(
-      wrapper.find('PFDataListCheck[id="select-group-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-group-1"]').props().checked
     ).toBe(false);
   });
 
   test('should check all row items when select all is checked', async () => {
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(true);
     });
     wrapper.update();
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(true);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(false);
     });
     wrapper.update();
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
   });
@@ -157,7 +157,7 @@ describe('<InventoryGroupsList />', () => {
       Promise.reject(new Error())
     );
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')();
+      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
@@ -191,7 +191,7 @@ describe('<InventoryGroupsList />', () => {
       })
     );
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')();
+      wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
index 305fdfca92..89a19fec6f 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -14,9 +15,7 @@ import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
 import { Sparkline } from '@components/Sparkline';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { Host } from '@types';
 
 function InventoryHostItem(props) {
@@ -50,7 +49,6 @@ function InventoryHostItem(props) {
         <DataListItemCells
           dataListCells={[
             <DataListCell key="divider">
-              <VerticalSeparator />
               <Link to={`${detailUrl}`}>
                 <b>{host.name}</b>
               </Link>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
index 0a60a71ada..6e8c5ffdb6 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
@@ -104,48 +104,48 @@ describe('<InventoryHostList />', () => {
 
   test('should check and uncheck the row item', async () => {
     expect(
-      wrapper.find('PFDataListCheck[id="select-host-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-host-1"]').props().checked
     ).toBe(false);
 
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')(
+      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
         true
       );
     });
 
     wrapper.update();
     expect(
-      wrapper.find('PFDataListCheck[id="select-host-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-host-1"]').props().checked
     ).toBe(true);
 
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')(
+      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
         false
       );
     });
 
     wrapper.update();
     expect(
-      wrapper.find('PFDataListCheck[id="select-host-1"]').props().checked
+      wrapper.find('DataListCheck[id="select-host-1"]').props().checked
     ).toBe(false);
   });
 
   test('should check all row items when select all is checked', async () => {
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(true);
     });
     wrapper.update();
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(true);
     });
     await act(async () => {
       wrapper.find('Checkbox#select-all').invoke('onChange')(false);
     });
     wrapper.update();
-    wrapper.find('PFDataListCheck').forEach(el => {
+    wrapper.find('DataListCheck').forEach(el => {
       expect(el.props().checked).toBe(false);
     });
   });
@@ -186,7 +186,7 @@ describe('<InventoryHostList />', () => {
 
   test('delete button is disabled if user does not have delete capabilities on a selected host', async () => {
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-host-3"]').invoke('onChange')();
+      wrapper.find('DataListCheck[id="select-host-3"]').invoke('onChange')();
     });
     wrapper.update();
     expect(wrapper.find('ToolbarDeleteButton button').props().disabled).toBe(
@@ -197,7 +197,7 @@ describe('<InventoryHostList />', () => {
   test('should call api delete hosts for each selected host', async () => {
     HostsAPI.destroy = jest.fn();
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')();
+      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
@@ -220,7 +220,7 @@ describe('<InventoryHostList />', () => {
       })
     );
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')();
+      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
@@ -242,7 +242,7 @@ describe('<InventoryHostList />', () => {
       Promise.reject(new Error())
     );
     await act(async () => {
-      wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')();
+      wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
     });
     wrapper.update();
     await act(async () => {
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
index 168ac9e61b..60092cc06c 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
@@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -13,8 +14,6 @@ import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { Inventory } from '@types';
 
 class InventoryListItem extends React.Component {
@@ -44,7 +43,6 @@ class InventoryListItem extends React.Component {
           <DataListItemCells
             dataListCells={[
               <DataListCell key="divider">
-                <VerticalSeparator />
                 <Link to={`${detailUrl}`}>
                   <b>{inventory.name}</b>
                 </Link>
diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
index 5cbdec219b..fe93aa04e1 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@@ -38,7 +38,10 @@ class JobListItem extends Component {
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell key="divider">
+              <DataListCell
+                key="name"
+                css="display: inline-flex; align-items: center;"
+              >
                 {job.status && <PaddedIcon status={job.status} />}
                 <span>
                   <Link
diff --git a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
index 26907ab3e4..d5b810b64d 100644
--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
@@ -9,11 +9,10 @@ import { shape } from 'prop-types';
 import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
 import { CompassIcon, WrenchIcon } from '@patternfly/react-icons';
 import { StatusIcon } from '@components/Sparkline';
-import VerticalSeparator from '@components/VerticalSeparator';
 import styled from 'styled-components';
 
 const Toolbar = styled.div`
-  align-items: center
+  align-items: center;
   border-bottom: 1px solid grey;
   display: flex;
   height: 56px;
@@ -73,7 +72,6 @@ function WorkflowOutputToolbar({ i18n, job }) {
       <ToolbarActions>
         <div>{i18n._(t`Total Nodes`)}</div>
         <Badge isRead>{totalNodes}</Badge>
-        <VerticalSeparator />
         <Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
           <ActionButton
             id="workflow-output-toggle-legend"
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
index 261dee5700..fe99e91716 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
@@ -5,6 +5,7 @@ import { t } from '@lingui/macro';
 import {
   Badge as PFBadge,
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -15,8 +16,6 @@ import styled from 'styled-components';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { Organization } from '@types';
 
 const Badge = styled(PFBadge)`
@@ -63,7 +62,6 @@ function OrganizationListItem({
         <DataListItemCells
           dataListCells={[
             <DataListCell key="divider">
-              <VerticalSeparator />
               <span id={labelId}>
                 <Link to={`${detailUrl}`}>
                   <b>{organization.name}</b>
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
index 10626c5c70..993293785f 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -14,10 +15,8 @@ import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
 
 import ClipboardCopyButton from '@components/ClipboardCopyButton';
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
 import ProjectSyncButton from '../shared/ProjectSyncButton';
 import { StatusIcon } from '@components/Sparkline';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { toTitleCase } from '@util/strings';
 import { Project } from '@types';
 
@@ -74,7 +73,6 @@ class ProjectListItem extends React.Component {
           <DataListItemCells
             dataListCells={[
               <DataListCell key="divider">
-                <VerticalSeparator />
                 {project.summary_fields.last_job && (
                   <Tooltip
                     position="top"
diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
index 6668547824..ff5da73316 100644
--- a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
+++ b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -13,8 +14,6 @@ import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { Team } from '@types';
 
 class TeamListItem extends React.Component {
@@ -40,7 +39,6 @@ class TeamListItem extends React.Component {
           <DataListItemCells
             dataListCells={[
               <DataListCell key="divider">
-                <VerticalSeparator />
                 <Link id={labelId} to={`${detailUrl}`}>
                   <b>{team.name}</b>
                 </Link>
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index b3742dc574..b9c2debc50 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -16,9 +17,7 @@ import {
 } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
 import LaunchButton from '@components/LaunchButton';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { Sparkline } from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
 
@@ -46,7 +45,6 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
         <DataListItemCells
           dataListCells={[
             <DataListCell key="divider">
-              <VerticalSeparator />
               <span>
                 <Link to={`${detailUrl}`}>
                   <b>{template.name}</b>
diff --git a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
index cf9ee9a382..723b38bbe0 100644
--- a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -13,8 +14,6 @@ import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import VerticalSeparator from '@components/VerticalSeparator';
 import { User } from '@types';
 
 class UserListItem extends React.Component {
@@ -40,7 +39,6 @@ class UserListItem extends React.Component {
           <DataListItemCells
             dataListCells={[
               <DataListCell key="divider">
-                <VerticalSeparator />
                 <Link to={`${detailUrl}`} id={labelId}>
                   <b>{user.username}</b>
                 </Link>

From d2f6c367f0ed83d951f535b1297951bdde5addfa Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Mon, 17 Feb 2020 15:33:11 -0500
Subject: [PATCH 2/5] Remove alert modal styles

---
 awx/ui_next/dist/index.html                   |   2 +-
 awx/ui_next/src/App.jsx                       |   2 +-
 awx/ui_next/src/app.scss                      | 113 -------
 .../src/components/AlertModal/AlertModal.jsx  |  59 ++--
 .../components/AlertModal/AlertModal.test.jsx |   4 +-
 .../components/ContentError/ContentError.jsx  |   8 +-
 .../components/DeleteButton/DeleteButton.jsx  |  31 +-
 .../components/LaunchButton/LaunchButton.jsx  |   2 +-
 .../NotificationList/NotificationList.jsx     |   2 +-
 .../PaginatedDataList/ToolbarDeleteButton.jsx |   9 +-
 .../ResourceAccessList/ResourceAccessList.jsx |   2 +-
 .../DeleteRoleConfirmationModal.test.jsx.snap | 301 ++++++++++++------
 .../CredentialDetail/CredentialDetail.jsx     |   2 +-
 .../CredentialList/CredentialList.jsx         |   2 +-
 .../screens/Host/HostDetail/HostDetail.jsx    |   4 +-
 .../src/screens/Host/HostList/HostList.jsx    |   4 +-
 .../InventoryGroupDetail.jsx                  |   2 +-
 .../InventoryGroups/InventoryGroupsList.jsx   |   2 +-
 .../InventoryGroupsList.test.jsx              |   2 +-
 .../InventoryHosts/InventoryHostList.jsx      |   4 +-
 .../Inventory/InventoryList/InventoryList.jsx |   2 +-
 .../shared/InventoryGroupsDeleteModal.jsx     |   2 +-
 .../src/screens/Job/JobDetail/JobDetail.jsx   |   2 +-
 .../src/screens/Job/JobList/JobList.jsx       |   2 +-
 .../Job/JobOutput/shared/OutputToolbar.jsx    |   3 -
 .../OrganizationDetail/OrganizationDetail.jsx |   2 +-
 .../OrganizationList/OrganizationList.jsx     |   2 +-
 .../Project/ProjectDetail/ProjectDetail.jsx   |   2 +-
 .../Project/ProjectList/ProjectList.jsx       |   2 +-
 .../Project/shared/ProjectSyncButton.jsx      |   2 +-
 .../screens/Team/TeamDetail/TeamDetail.jsx    |   2 +-
 .../src/screens/Team/TeamList/TeamList.jsx    |   2 +-
 .../JobTemplateDetail/JobTemplateDetail.jsx   |   2 +-
 .../Template/TemplateList/TemplateList.jsx    |   2 +-
 .../screens/User/UserDetail/UserDetail.jsx    |   2 +-
 .../src/screens/User/UserList/UserList.jsx    |   2 +-
 36 files changed, 286 insertions(+), 304 deletions(-)

diff --git a/awx/ui_next/dist/index.html b/awx/ui_next/dist/index.html
index 10a4088e01..8afa7581c8 100644
--- a/awx/ui_next/dist/index.html
+++ b/awx/ui_next/dist/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <div id="app"></div>
+    <div id="app" style="height: 100%"></div>
     <script src="/bundle.js"></script>
   </body>
 </html>
diff --git a/awx/ui_next/src/App.jsx b/awx/ui_next/src/App.jsx
index 704515c113..fdc4bb4ec2 100644
--- a/awx/ui_next/src/App.jsx
+++ b/awx/ui_next/src/App.jsx
@@ -204,7 +204,7 @@ class App extends Component {
         />
         <AlertModal
           isOpen={configError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={this.handleConfigErrorClose}
         >
diff --git a/awx/ui_next/src/app.scss b/awx/ui_next/src/app.scss
index 2c02873917..6da11a0e7a 100644
--- a/awx/ui_next/src/app.scss
+++ b/awx/ui_next/src/app.scss
@@ -2,116 +2,3 @@
 #app {
   height: 100%;
 }
-
-//
-// data list overrides
-//
-
-.pf-c-data-list {
-  --pf-global--target-size--MinHeight: 32px;
-  --pf-global--target-size--MinWidth: 32px;
-  --pf-global--FontSize--md: 14px;
-
-  .pf-c-badge:not(:last-child),
-  .pf-c-switch:not(:last-child) {
-    margin-right: 18px;
-  }
-}
-
-.pf-c-data-list__item-row {
-  --pf-c-data-list__item-row--PaddingRight: 20px;
-  --pf-c-data-list__item-row--PaddingLeft: 20px;
-}
-
-.pf-c-data-list__item-content {
-  --pf-c-data-list__item-content--PaddingBottom: 16px;
-
-  min-height: 59px;
-  align-items: center;
-}
-
-.pf-c-data-list__item-control {
-  --pf-c-data-list__item-control--PaddingTop: 16px;
-  --pf-c-data-list__item-control--MarginRight: 8px;
-  --pf-c-data-list__item-control--PaddingBottom: 16px;
-}
-
-.pf-c-data-list__item {
-  --pf-c-data-list__item--PaddingLeft: 20px;
-  --pf-c-data-list__item--PaddingRight: 20px;
-}
-
-.pf-c-data-list__cell {
-  --pf-c-data-list__cell--PaddingTop: 16px;
-  --pf-c-data-list__cell-cell--PaddingTop: 16px;
-
-  &.pf-c-data-list__cell--divider {
-    --pf-c-data-list__cell-cell--MarginRight: 0;
-    --pf-c-data-list__cell--PaddingTop: 12px;
-    flex-grow: 0;
-  }
-}
-
-//
-// AlertModal styles
-//
-
-.at-c-alertModal.pf-c-modal-box {
-  border: 0;
-  border-left: 56px solid black;
-
-  .at-c-alertModal__icon {
-    position: absolute;
-    font-size: 23px;
-    top: 28px;
-    left: -39px;
-  }
-}
-
-.at-c-alertModal--warning.pf-c-modal-box {
-  border-color: var(--pf-global--warning-color--100);
-
-  .pf-c-title {
-    color: var(--pf-global--warning-color--200);
-  }
-
-  .at-c-alertModal__icon {
-    color: var(--pf-global--warning-color--200);
-  }
-}
-
-.at-c-alertModal--danger.pf-c-modal-box {
-  border-color: var(--pf-global--danger-color--100);
-
-  .pf-c-title {
-    color: var(--pf-global--danger-color--200);
-  }
-
-  .at-c-alertModal__icon {
-    color: white;
-  }
-}
-
-.at-c-alertModal--info.pf-c-modal-box {
-  border-color: var(--pf-global--info-color--100);
-
-  .pf-c-title {
-    color: var(--pf-global--info-color--200);
-  }
-
-  .at-c-alertModal__icon {
-    color: var(--pf-global--info-color--200);
-  }
-}
-
-.at-c-alertModal--success.pf-c-modal-box {
-  border-color: var(--pf-global--success-color--100);
-
-  .pf-c-title {
-    color: var(--pf-global--success-color--200);
-  }
-
-  .at-c-alertModal__icon {
-    color: var(--pf-global--success-color--200);
-  }
-}
diff --git a/awx/ui_next/src/components/AlertModal/AlertModal.jsx b/awx/ui_next/src/components/AlertModal/AlertModal.jsx
index 1b31f79653..f600d77745 100644
--- a/awx/ui_next/src/components/AlertModal/AlertModal.jsx
+++ b/awx/ui_next/src/components/AlertModal/AlertModal.jsx
@@ -1,42 +1,47 @@
 import React from 'react';
-
-import { Modal } from '@patternfly/react-core';
-
+import { Modal, Title } from '@patternfly/react-core';
 import {
-  ExclamationTriangleIcon,
-  ExclamationCircleIcon,
-  InfoCircleIcon,
   CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InfoCircleIcon,
+  TimesCircleIcon,
 } from '@patternfly/react-icons';
+import styled from 'styled-components';
 
-const getIcon = variant => {
-  let icon;
-  if (variant === 'warning') {
-    icon = <ExclamationTriangleIcon className="at-c-alertModal__icon" />;
-  } else if (variant === 'danger') {
-    icon = <ExclamationCircleIcon className="at-c-alertModal__icon" />;
+const Header = styled.div`
+  display: flex;
+  svg {
+    margin-right: 16px;
   }
-  if (variant === 'info') {
-    icon = <InfoCircleIcon className="at-c-alertModal__icon" />;
-  }
-  if (variant === 'success') {
-    icon = <CheckCircleIcon className="at-c-alertModal__icon" />;
-  }
-  return icon;
-};
+`;
+
+export default ({ isOpen = null, title, variant, children, ...props }) => {
+  const variantIcons = {
+    danger: <ExclamationCircleIcon size="lg" css="color: #c9190b" />,
+    error: <TimesCircleIcon size="lg" css="color: #c9190b" />,
+    info: <InfoCircleIcon size="lg" css="color: #73bcf7" />,
+    success: <CheckCircleIcon size="lg" css="color: #92d400" />,
+    warning: <ExclamationTriangleIcon size="lg" css="color: #f0ab00" />,
+  };
+
+  const customHeader = (
+    <Header>
+      {variant ? variantIcons[variant] : null}
+      <Title size="2xl">{title}</Title>
+    </Header>
+  );
 
-export default ({ variant, children, ...props }) => {
-  const { isOpen = null } = props;
-  props.isOpen = Boolean(isOpen);
   return (
     <Modal
-      isLarge
-      className={`awx-c-modal${variant &&
-        ` at-c-alertModal at-c-alertModal--${variant}`}`}
+      header={customHeader}
+      isFooterLeftAligned
+      isOpen={Boolean(isOpen)}
+      isSmall
+      title={title}
       {...props}
     >
       {children}
-      {getIcon(variant)}
     </Modal>
   );
 };
diff --git a/awx/ui_next/src/components/AlertModal/AlertModal.test.jsx b/awx/ui_next/src/components/AlertModal/AlertModal.test.jsx
index 4c9389543f..da8b234e5c 100644
--- a/awx/ui_next/src/components/AlertModal/AlertModal.test.jsx
+++ b/awx/ui_next/src/components/AlertModal/AlertModal.test.jsx
@@ -5,7 +5,9 @@ import AlertModal from './AlertModal';
 
 describe('AlertModal', () => {
   test('renders the expected content', () => {
-    const wrapper = mount(<AlertModal title="Danger!" />);
+    const wrapper = mount(
+      <AlertModal title="Danger!">Are you sure?</AlertModal>
+    );
     expect(wrapper).toHaveLength(1);
   });
 });
diff --git a/awx/ui_next/src/components/ContentError/ContentError.jsx b/awx/ui_next/src/components/ContentError/ContentError.jsx
index 548cb77c89..7f766f7e91 100644
--- a/awx/ui_next/src/components/ContentError/ContentError.jsx
+++ b/awx/ui_next/src/components/ContentError/ContentError.jsx
@@ -1,12 +1,11 @@
 import React, { Fragment } from 'react';
-import styled from 'styled-components';
 import { Link, Redirect } from 'react-router-dom';
 import { bool, instanceOf } from 'prop-types';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
 import {
   Title,
-  EmptyState as PFEmptyState,
+  EmptyState,
   EmptyStateIcon,
   EmptyStateBody,
 } from '@patternfly/react-core';
@@ -14,11 +13,6 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { RootAPI } from '@api';
 import ErrorDetail from '@components/ErrorDetail';
 
-const EmptyState = styled(PFEmptyState)`
-  width: var(--pf-c-empty-state--m-lg--MaxWidth);
-  margin: 0 auto;
-`;
-
 async function logout() {
   await RootAPI.logout();
   window.location.replace('/#/login');
diff --git a/awx/ui_next/src/components/DeleteButton/DeleteButton.jsx b/awx/ui_next/src/components/DeleteButton/DeleteButton.jsx
index f434ea40d5..184caf9ef9 100644
--- a/awx/ui_next/src/components/DeleteButton/DeleteButton.jsx
+++ b/awx/ui_next/src/components/DeleteButton/DeleteButton.jsx
@@ -3,7 +3,6 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Button } from '@patternfly/react-core';
 import AlertModal from '@components/AlertModal';
-import { CardActionsRow } from '@components/Card';
 
 function DeleteButton({
   onConfirm,
@@ -29,26 +28,28 @@ function DeleteButton({
         title={modalTitle}
         variant="danger"
         onClose={() => setIsOpen(false)}
-      >
-        {i18n._(t`Are you sure you want to delete:`)}
-        <br />
-        <strong>{name}</strong>
-        <CardActionsRow>
-          <Button
-            variant="secondary"
-            aria-label={i18n._(t`Cancel`)}
-            onClick={() => setIsOpen(false)}
-          >
-            {i18n._(t`Cancel`)}
-          </Button>
+        actions={[
           <Button
+            key="delete"
             variant="danger"
             aria-label={i18n._(t`Delete`)}
             onClick={onConfirm}
           >
             {i18n._(t`Delete`)}
-          </Button>
-        </CardActionsRow>
+          </Button>,
+          <Button
+            key="cancel"
+            variant="secondary"
+            aria-label={i18n._(t`Cancel`)}
+            onClick={() => setIsOpen(false)}
+          >
+            {i18n._(t`Cancel`)}
+          </Button>,
+        ]}
+      >
+        {i18n._(t`Are you sure you want to delete:`)}
+        <br />
+        <strong>{name}</strong>
       </AlertModal>
     </>
   );
diff --git a/awx/ui_next/src/components/LaunchButton/LaunchButton.jsx b/awx/ui_next/src/components/LaunchButton/LaunchButton.jsx
index 1793eed8ba..86df83f41e 100644
--- a/awx/ui_next/src/components/LaunchButton/LaunchButton.jsx
+++ b/awx/ui_next/src/components/LaunchButton/LaunchButton.jsx
@@ -128,7 +128,7 @@ class LaunchButton extends React.Component {
         {launchError && (
           <AlertModal
             isOpen={launchError}
-            variant="danger"
+            variant="error"
             title={i18n._(t`Error!`)}
             onClose={this.handleLaunchErrorClose}
           >
diff --git a/awx/ui_next/src/components/NotificationList/NotificationList.jsx b/awx/ui_next/src/components/NotificationList/NotificationList.jsx
index 120d9c86b0..3fc3ae429f 100644
--- a/awx/ui_next/src/components/NotificationList/NotificationList.jsx
+++ b/awx/ui_next/src/components/NotificationList/NotificationList.jsx
@@ -250,7 +250,7 @@ class NotificationList extends Component {
           )}
         />
         <AlertModal
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           isOpen={toggleError && !toggleLoading}
           onClose={this.handleNotificationErrorClose}
diff --git a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
index c9d1b01247..4547c9df66 100644
--- a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
@@ -137,6 +137,7 @@ class ToolbarDeleteButton extends React.Component {
   render() {
     const { itemsToDelete, pluralizedItemName, i18n } = this.props;
     const { isModalOpen } = this.state;
+    const modalTitle = i18n._(t`Delete ${pluralizedItemName}?`);
 
     const isDisabled =
       itemsToDelete.length === 0 || itemsToDelete.some(cannotDelete);
@@ -161,7 +162,7 @@ class ToolbarDeleteButton extends React.Component {
         {isModalOpen && (
           <AlertModal
             variant="danger"
-            title={pluralizedItemName}
+            title={modalTitle}
             isOpen={isModalOpen}
             onClose={this.handleCancelDelete}
             actions={[
@@ -183,15 +184,15 @@ class ToolbarDeleteButton extends React.Component {
               </Button>,
             ]}
           >
-            {i18n._(t`Are you sure you want to delete:`)}
-            <br />
+            <div css="margin-bottom: 16px;">
+              {i18n._(t`This action will delete the following:`)}
+            </div>
             {itemsToDelete.map(item => (
               <span key={item.id}>
                 <strong>{item.name || item.username}</strong>
                 <br />
               </span>
             ))}
-            <br />
           </AlertModal>
         )}
       </Fragment>
diff --git a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx
index 1baefcf6a5..e321a14b2b 100644
--- a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx
+++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx
@@ -232,7 +232,7 @@ class ResourceAccessList extends React.Component {
         )}
         <AlertModal
           isOpen={hasDeletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={this.handleDeleteErrorClose}
         >
diff --git a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
index 50969673ec..9ea0627668 100644
--- a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
+++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
@@ -73,7 +73,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                   aria-describedby="pf-modal-0"
                   aria-label="Remove {0} Access"
                   aria-modal="true"
-                  class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg"
+                  class="pf-c-modal-box pf-m-sm"
                   role="dialog"
                 >
                   <button
@@ -96,13 +96,34 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                       />
                     </svg>
                   </button>
-                  <h1
-                    class="pf-c-title pf-m-2xl"
+                  <div
+                    class="pf-c-title"
                   >
-                     
-                    Remove {0} Access
-                     
-                  </h1>
+                    <div
+                      class="AlertModal__Header-sc-9waqvl-0 dYqVFx"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="sc-bdVaJa bkDjEn"
+                        fill="currentColor"
+                        height="2em"
+                        role="img"
+                        style="vertical-align: -0.25em;"
+                        viewBox="0 0 512 512"
+                        width="2em"
+                      >
+                        <path
+                          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                          transform=""
+                        />
+                      </svg>
+                      <h1
+                        class="pf-c-title pf-m-2xl"
+                      >
+                        Remove {0} Access
+                      </h1>
+                    </div>
+                  </div>
                   <div
                     class="pf-c-modal-box__body"
                     id="pf-modal-0"
@@ -111,24 +132,9 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                     <br />
                     <br />
                     If you only want to remove access for this particular user, please remove them from the team.
-                    <svg
-                      aria-hidden="true"
-                      class="at-c-alertModal__icon"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style="vertical-align: -0.125em;"
-                      viewBox="0 0 512 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                        transform=""
-                      />
-                    </svg>
                   </div>
                   <div
-                    class="pf-c-modal-box__footer"
+                    class="pf-c-modal-box__footer pf-m-align-left"
                   >
                     <button
                       aria-label="Confirm delete"
@@ -151,12 +157,24 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
         </body>
       }
       ariaDescribedById=""
-      className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+      className=""
+      header={
+        <ForwardRef>
+          <ForwardRef
+            size="lg"
+          />
+          <Title
+            size="2xl"
+          >
+            Remove {0} Access
+          </Title>
+        </ForwardRef>
+      }
       hideTitle={false}
-      isFooterLeftAligned={false}
-      isLarge={true}
+      isFooterLeftAligned={true}
+      isLarge={false}
       isOpen={true}
-      isSmall={false}
+      isSmall={true}
       onClose={[Function]}
       showClose={true}
       title="Remove {0} Access"
@@ -174,7 +192,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                   aria-describedby="pf-modal-0"
                   aria-label="Remove {0} Access"
                   aria-modal="true"
-                  class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg"
+                  class="pf-c-modal-box pf-m-sm"
                   role="dialog"
                 >
                   <button
@@ -197,13 +215,34 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                       />
                     </svg>
                   </button>
-                  <h1
-                    class="pf-c-title pf-m-2xl"
+                  <div
+                    class="pf-c-title"
                   >
-                     
-                    Remove {0} Access
-                     
-                  </h1>
+                    <div
+                      class="AlertModal__Header-sc-9waqvl-0 dYqVFx"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="sc-bdVaJa bkDjEn"
+                        fill="currentColor"
+                        height="2em"
+                        role="img"
+                        style="vertical-align: -0.25em;"
+                        viewBox="0 0 512 512"
+                        width="2em"
+                      >
+                        <path
+                          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                          transform=""
+                        />
+                      </svg>
+                      <h1
+                        class="pf-c-title pf-m-2xl"
+                      >
+                        Remove {0} Access
+                      </h1>
+                    </div>
+                  </div>
                   <div
                     class="pf-c-modal-box__body"
                     id="pf-modal-0"
@@ -212,24 +251,9 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                     <br />
                     <br />
                     If you only want to remove access for this particular user, please remove them from the team.
-                    <svg
-                      aria-hidden="true"
-                      class="at-c-alertModal__icon"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style="vertical-align: -0.125em;"
-                      viewBox="0 0 512 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                        transform=""
-                      />
-                    </svg>
                   </div>
                   <div
-                    class="pf-c-modal-box__footer"
+                    class="pf-c-modal-box__footer pf-m-align-left"
                   >
                     <button
                       aria-label="Confirm delete"
@@ -270,13 +294,25 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
             ]
           }
           ariaDescribedById=""
-          className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+          className=""
+          header={
+            <ForwardRef>
+              <ForwardRef
+                size="lg"
+              />
+              <Title
+                size="2xl"
+              >
+                Remove {0} Access
+              </Title>
+            </ForwardRef>
+          }
           hideTitle={false}
           id="pf-modal-0"
-          isFooterLeftAligned={false}
-          isLarge={true}
+          isFooterLeftAligned={true}
+          isLarge={false}
           isOpen={true}
-          isSmall={false}
+          isSmall={true}
           onClose={[Function]}
           showClose={true}
           title="Remove {0} Access"
@@ -301,10 +337,10 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                   className="pf-l-bullseye"
                 >
                   <ModalBox
-                    className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+                    className=""
                     id="pf-modal-0"
-                    isLarge={true}
-                    isSmall={false}
+                    isLarge={false}
+                    isSmall={true}
                     style={Object {}}
                     title="Remove {0} Access"
                   >
@@ -312,7 +348,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                       aria-describedby="pf-modal-0"
                       aria-label="Remove {0} Access"
                       aria-modal="true"
-                      className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg"
+                      className="pf-c-modal-box pf-m-sm"
                       role="dialog"
                       style={Object {}}
                     >
@@ -395,23 +431,110 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                           </ComponentWithOuia>
                         </Component>
                       </ModalBoxCloseButton>
-                      <ModalBoxHeader
-                        hideTitle={false}
+                      <div
+                        className="pf-c-title"
                       >
-                        <Title
-                          className=""
-                          headingLevel="h1"
-                          size="2xl"
-                        >
-                          <h1
-                            className="pf-c-title pf-m-2xl"
+                        <AlertModal__Header>
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "AlertModal__Header-sc-9waqvl-0",
+                                  "isStatic": true,
+                                  "lastClassName": "dYqVFx",
+                                  "rules": Array [
+                                    "display:flex;svg{margin-right:16px;}",
+                                  ],
+                                },
+                                "displayName": "AlertModal__Header",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "AlertModal__Header-sc-9waqvl-0",
+                                "target": "div",
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
                           >
-                             
-                            Remove {0} Access
-                             
-                          </h1>
-                        </Title>
-                      </ModalBoxHeader>
+                            <div
+                              className="AlertModal__Header-sc-9waqvl-0 dYqVFx"
+                            >
+                              <Styled(ExclamationCircleIcon)
+                                size="lg"
+                              >
+                                <StyledComponent
+                                  forwardedComponent={
+                                    Object {
+                                      "$$typeof": Symbol(react.forward_ref),
+                                      "attrs": Array [],
+                                      "componentStyle": ComponentStyle {
+                                        "componentId": "sc-bdVaJa",
+                                        "isStatic": true,
+                                        "lastClassName": "bkDjEn",
+                                        "rules": Array [
+                                          "color: #c9190b",
+                                        ],
+                                      },
+                                      "displayName": "Styled(ExclamationCircleIcon)",
+                                      "foldedComponentIds": Array [],
+                                      "render": [Function],
+                                      "styledComponentId": "sc-bdVaJa",
+                                      "target": [Function],
+                                      "toString": [Function],
+                                      "warnTooManyClasses": [Function],
+                                      "withComponent": [Function],
+                                    }
+                                  }
+                                  forwardedRef={null}
+                                  size="lg"
+                                >
+                                  <ExclamationCircleIcon
+                                    className="sc-bdVaJa bkDjEn"
+                                    color="currentColor"
+                                    noVerticalAlign={false}
+                                    size="lg"
+                                    title={null}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      aria-labelledby={null}
+                                      className="sc-bdVaJa bkDjEn"
+                                      fill="currentColor"
+                                      height="2em"
+                                      role="img"
+                                      style={
+                                        Object {
+                                          "verticalAlign": "-0.25em",
+                                        }
+                                      }
+                                      viewBox="0 0 512 512"
+                                      width="2em"
+                                    >
+                                      <path
+                                        d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                                        transform=""
+                                      />
+                                    </svg>
+                                  </ExclamationCircleIcon>
+                                </StyledComponent>
+                              </Styled(ExclamationCircleIcon)>
+                              <Title
+                                size="2xl"
+                              >
+                                <h1
+                                  className="pf-c-title pf-m-2xl"
+                                >
+                                  Remove {0} Access
+                                </h1>
+                              </Title>
+                            </div>
+                          </StyledComponent>
+                        </AlertModal__Header>
+                      </div>
                       <ModalBoxBody
                         id="pf-modal-0"
                       >
@@ -423,41 +546,13 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                           <br />
                           <br />
                           If you only want to remove access for this particular user, please remove them from the team.
-                          <ExclamationCircleIcon
-                            className="at-c-alertModal__icon"
-                            color="currentColor"
-                            noVerticalAlign={false}
-                            size="sm"
-                            title={null}
-                          >
-                            <svg
-                              aria-hidden={true}
-                              aria-labelledby={null}
-                              className="at-c-alertModal__icon"
-                              fill="currentColor"
-                              height="1em"
-                              role="img"
-                              style={
-                                Object {
-                                  "verticalAlign": "-0.125em",
-                                }
-                              }
-                              viewBox="0 0 512 512"
-                              width="1em"
-                            >
-                              <path
-                                d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                                transform=""
-                              />
-                            </svg>
-                          </ExclamationCircleIcon>
                         </div>
                       </ModalBoxBody>
                       <ModalBoxFooter
-                        isLeftAligned={false}
+                        isLeftAligned={true}
                       >
                         <div
-                          className="pf-c-modal-box__footer"
+                          className="pf-c-modal-box__footer pf-m-align-left"
                         >
                           <Component
                             aria-label="Confirm delete"
diff --git a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
index f20b34ce10..290275fb15 100644
--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
@@ -158,7 +158,7 @@ function CredentialDetail({ i18n, credential }) {
       {deletionError && (
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={() => setDeletionError(null)}
         >
diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
index 87451cf0e7..ada903e709 100644
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
@@ -135,7 +135,7 @@ function CredentialList({ i18n }) {
       </Card>
       <AlertModal
         isOpen={deletionError}
-        variant="danger"
+        variant="error"
         title={i18n._(t`Error!`)}
         onClose={clearDeletionError}
       >
diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
index f3c70b066f..4682abaf26 100644
--- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
+++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
@@ -69,7 +69,7 @@ function HostDetail({ host, i18n, onUpdateHost }) {
   if (toggleError && !toggleLoading) {
     return (
       <AlertModal
-        variant="danger"
+        variant="error"
         title={i18n._(t`Error!`)}
         isOpen={toggleError && !toggleLoading}
         onClose={() => setToggleError(false)}
@@ -83,7 +83,7 @@ function HostDetail({ host, i18n, onUpdateHost }) {
     return (
       <AlertModal
         isOpen={deletionError}
-        variant="danger"
+        variant="error"
         title={i18n._(t`Error!`)}
         onClose={() => setDeletionError(false)}
       >
diff --git a/awx/ui_next/src/screens/Host/HostList/HostList.jsx b/awx/ui_next/src/screens/Host/HostList/HostList.jsx
index a84af76a4c..5d1dbbdfbd 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostList.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostList.jsx
@@ -250,7 +250,7 @@ class HostsList extends Component {
         </Card>
         {toggleError && !toggleLoading && (
           <AlertModal
-            variant="danger"
+            variant="error"
             title={i18n._(t`Error!`)}
             isOpen={toggleError && !toggleLoading}
             onClose={this.handleHostToggleErrorClose}
@@ -262,7 +262,7 @@ class HostsList extends Component {
         {deletionError && (
           <AlertModal
             isOpen={deletionError}
-            variant="danger"
+            variant="error"
             title={i18n._(t`Error!`)}
             onClose={this.handleDeleteErrorClose}
           >
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx
index 36aac69ed9..eaee439dfe 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx
@@ -98,7 +98,7 @@ function InventoryGroupDetail({ i18n, inventoryGroup }) {
       )}
       {error && (
         <AlertModal
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           isOpen={error}
           onClose={() => setError(false)}
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
index a60c16c973..96f9d64327 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
@@ -259,7 +259,7 @@ function InventoryGroupsList({ i18n, location, match }) {
       {deletionError && (
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={() => setDeletionError(null)}
         >
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
index d3f9f042c1..b0f4521c30 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
@@ -213,7 +213,7 @@ describe('<InventoryGroupsList />', () => {
         .find('ModalBoxFooter Button[aria-label="Delete"]')
         .invoke('onClick')();
     });
-    await waitForElement(wrapper, { title: 'Error!', variant: 'danger' });
+    await waitForElement(wrapper, { title: 'Error!', variant: 'error' });
     await act(async () => {
       wrapper.find('ModalBoxCloseButton').invoke('onClose')();
     });
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
index df4d7783fd..1a4a7e35a7 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
@@ -198,7 +198,7 @@ function InventoryHostList({ i18n, location, match }) {
 
       {toggleError && !toggleLoading && (
         <AlertModal
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           isOpen={toggleError && !toggleLoading}
           onClose={() => setToggleError(false)}
@@ -211,7 +211,7 @@ function InventoryHostList({ i18n, location, match }) {
       {deletionError && (
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={() => setDeletionError(null)}
         >
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
index 6ac8aef809..ef7ec6ff1b 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
@@ -231,7 +231,7 @@ class InventoriesList extends Component {
         </Card>
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={this.handleDeleteErrorClose}
         >
diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx
index ca86d722b5..f17320bb1c 100644
--- a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx
+++ b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx
@@ -27,7 +27,7 @@ const InventoryGroupsDeleteModal = ({
       isOpen={isModalOpen}
       variant="danger"
       title={
-        groups.length > 1 ? i18n._(t`Delete Groups`) : i18n._(t`Delete Group`)
+        groups.length > 1 ? i18n._(t`Delete Groups?`) : i18n._(t`Delete Group?`)
       }
       onClose={onClose}
       actions={[
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index d93ee7d457..68907b4564 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -275,7 +275,7 @@ function JobDetail({ job, i18n }) {
       {errorMsg && (
         <AlertModal
           isOpen={errorMsg}
-          variant="danger"
+          variant="error"
           onClose={() => setErrorMsg()}
           title={i18n._(t`Job Delete Error`)}
         >
diff --git a/awx/ui_next/src/screens/Job/JobList/JobList.jsx b/awx/ui_next/src/screens/Job/JobList/JobList.jsx
index 1779febeed..94bb99b73e 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobList.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobList.jsx
@@ -236,7 +236,7 @@ function JobList({ i18n }) {
       </Card>
       <AlertModal
         isOpen={deletionError}
-        variant="danger"
+        variant="error"
         title={i18n._(t`Error!`)}
         onClose={clearDeletionError}
       >
diff --git a/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx b/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx
index d5b79749ae..81e75938bc 100644
--- a/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx
+++ b/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx
@@ -9,7 +9,6 @@ import {
   TrashAltIcon,
 } from '@patternfly/react-icons';
 import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
-import VerticalSeparator from '@components/VerticalSeparator';
 import DeleteButton from '@components/DeleteButton';
 import LaunchButton from '@components/LaunchButton';
 
@@ -123,8 +122,6 @@ const OutputToolbar = ({ i18n, job, onDelete }) => {
         </Tooltip>
       </BadgeGroup>
 
-      <VerticalSeparator />
-
       {job.type !== 'system_job' &&
         job.summary_fields.user_capabilities?.start && (
           <Tooltip content={i18n._(t`Relaunch Job`)}>
diff --git a/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx b/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
index 28af839efa..ceb4caef04 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
@@ -132,7 +132,7 @@ function OrganizationDetail({ i18n, organization }) {
       {deletionError && (
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={() => setDeletionError(null)}
         >
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
index 380011d545..65564f5bd0 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
@@ -169,7 +169,7 @@ function OrganizationsList({ i18n }) {
       </PageSection>
       <AlertModal
         isOpen={deletionError}
-        variant="danger"
+        variant="error"
         title={i18n._(t`Error!`)}
         onClose={clearDeletionError}
       >
diff --git a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
index 78f746c8a0..a0ef3c5041 100644
--- a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
@@ -177,7 +177,7 @@ function ProjectDetail({ project, i18n }) {
       {deletionError && (
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={() => setDeletionError(null)}
         >
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
index 95d12e828a..1f65b7da5a 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
@@ -231,7 +231,7 @@ class ProjectsList extends Component {
         </PageSection>
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={this.handleDeleteErrorClose}
         >
diff --git a/awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx b/awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx
index bc3e40d022..a2700169b4 100644
--- a/awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx
+++ b/awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx
@@ -54,7 +54,7 @@ class ProjectSyncButton extends React.Component {
         {syncError && (
           <AlertModal
             isOpen={syncError}
-            variant="danger"
+            variant="error"
             title={i18n._(t`Error!`)}
             onClose={this.handleSyncErrorClose}
           >
diff --git a/awx/ui_next/src/screens/Team/TeamDetail/TeamDetail.jsx b/awx/ui_next/src/screens/Team/TeamDetail/TeamDetail.jsx
index 90f994aa6b..9383ca148c 100644
--- a/awx/ui_next/src/screens/Team/TeamDetail/TeamDetail.jsx
+++ b/awx/ui_next/src/screens/Team/TeamDetail/TeamDetail.jsx
@@ -83,7 +83,7 @@ function TeamDetail({ team, i18n }) {
       {deletionError && (
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={() => setDeletionError(null)}
         >
diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
index 38afbc0213..91de161404 100644
--- a/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
+++ b/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
@@ -218,7 +218,7 @@ class TeamsList extends Component {
         </PageSection>
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={this.handleDeleteErrorClose}
         >
diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
index 2c63c6537e..999af636e2 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
@@ -338,7 +338,7 @@ function JobTemplateDetail({ i18n, template }) {
       {deletionError && (
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={() => setDeletionError(null)}
         >
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index cc688886b0..2b2239d0fd 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -234,7 +234,7 @@ function TemplateList({ i18n }) {
       </Card>
       <AlertModal
         isOpen={deletionError}
-        variant="danger"
+        variant="error"
         title={i18n._(t`Error!`)}
         onClose={clearDeletionError}
       >
diff --git a/awx/ui_next/src/screens/User/UserDetail/UserDetail.jsx b/awx/ui_next/src/screens/User/UserDetail/UserDetail.jsx
index 72c4bdab6a..8170ab33b0 100644
--- a/awx/ui_next/src/screens/User/UserDetail/UserDetail.jsx
+++ b/awx/ui_next/src/screens/User/UserDetail/UserDetail.jsx
@@ -99,7 +99,7 @@ function UserDetail({ user, i18n }) {
       {deletionError && (
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={() => setDeletionError(null)}
         >
diff --git a/awx/ui_next/src/screens/User/UserList/UserList.jsx b/awx/ui_next/src/screens/User/UserList/UserList.jsx
index 1cfd3b4a69..de8801669c 100644
--- a/awx/ui_next/src/screens/User/UserList/UserList.jsx
+++ b/awx/ui_next/src/screens/User/UserList/UserList.jsx
@@ -222,7 +222,7 @@ class UsersList extends Component {
         </PageSection>
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={this.handleDeleteErrorClose}
         >

From fe9b03a189778067949d211ff5bfc09f72f92ada Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Tue, 18 Feb 2020 10:31:19 -0500
Subject: [PATCH 3/5] Move ButtonGroup into CodeMirrorInput directory

---
 .../src/components/{ => CodeMirrorInput}/ButtonGroup.jsx        | 0
 awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx   | 2 +-
 awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx   | 2 +-
 awx/ui_next/src/components/CodeMirrorInput/index.js             | 1 +
 4 files changed, 3 insertions(+), 2 deletions(-)
 rename awx/ui_next/src/components/{ => CodeMirrorInput}/ButtonGroup.jsx (100%)

diff --git a/awx/ui_next/src/components/ButtonGroup.jsx b/awx/ui_next/src/components/CodeMirrorInput/ButtonGroup.jsx
similarity index 100%
rename from awx/ui_next/src/components/ButtonGroup.jsx
rename to awx/ui_next/src/components/CodeMirrorInput/ButtonGroup.jsx
diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
index 2e58337ccc..d9aae454c1 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { string, func, bool, number } from 'prop-types';
 import { Button, Split, SplitItem } from '@patternfly/react-core';
 import styled from 'styled-components';
-import ButtonGroup from '@components/ButtonGroup';
 import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
 import CodeMirrorInput from './CodeMirrorInput';
+import { ButtonGroup } from '.';
 import { JSON_MODE, YAML_MODE } from './constants';
 
 function formatJson(jsonString) {
diff --git a/awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx b/awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx
index 85703e5674..34d4d4a2ba 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { oneOf, func } from 'prop-types';
 import styled from 'styled-components';
 import { Button } from '@patternfly/react-core';
-import ButtonGroup from '../ButtonGroup';
+import { ButtonGroup } from '.';
 
 const SmallButton = styled(Button)`
   padding: 3px 8px;
diff --git a/awx/ui_next/src/components/CodeMirrorInput/index.js b/awx/ui_next/src/components/CodeMirrorInput/index.js
index 9cad016228..26ad542421 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/index.js
+++ b/awx/ui_next/src/components/CodeMirrorInput/index.js
@@ -4,3 +4,4 @@ export default CodeMirrorInput;
 export { default as VariablesDetail } from './VariablesDetail';
 export { default as VariablesInput } from './VariablesInput';
 export { default as VariablesField } from './VariablesField';
+export { default as ButtonGroup } from './ButtonGroup';

From 4ebc2573a33d7fbd528f56fdc5afaa3377f3061c Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Tue, 18 Feb 2020 10:40:18 -0500
Subject: [PATCH 4/5] Remove DataList component overrides

---
 awx/ui_next/src/app.scss                      |   4 -
 .../CheckboxListItem/CheckboxListItem.jsx     |  31 +-
 .../components/DataListCell/DataListCell.jsx  |  14 -
 .../DataListCell/DataListCell.test.jsx        |  11 -
 .../src/components/DataListCell/index.js      |   1 -
 .../DataListCheck/DataListCheck.jsx           |  15 -
 .../DataListCheck/DataListCheck.test.jsx      |  10 -
 .../src/components/DataListCheck/index.js     |   1 -
 .../DataListRadio/DataListRadio.jsx           |  47 --
 .../DataListRadio/DataListRadio.test.jsx      |  36 -
 .../src/components/DataListRadio/index.js     |   1 -
 .../DataListToolbar/DataListToolbar.jsx       |  36 +-
 .../NotificationList/NotificationListItem.jsx | 103 ++-
 .../NotificationListItem.test.jsx.snap        | 698 +++++++-----------
 .../components/SelectedList/SelectedList.jsx  |   3 +-
 .../src/components/Sparkline/Sparkline.jsx    |   8 +-
 awx/ui_next/src/index.jsx                     |   1 -
 .../CredentialList/CredentialList.jsx         |   6 +-
 .../CredentialList/CredentialListItem.jsx     |  42 +-
 .../src/screens/Host/HostList/HostList.jsx    |  11 +-
 .../screens/Host/HostList/HostListItem.jsx    |  86 ++-
 .../InventoryGroups/InventoryGroupItem.jsx    |  30 +-
 .../InventoryGroups/InventoryGroupsList.jsx   |  14 +-
 .../InventoryHosts/InventoryHostItem.jsx      |  81 +-
 .../InventoryHosts/InventoryHostList.jsx      |  14 +-
 .../Inventory/InventoryList/InventoryList.jsx |   2 +-
 .../InventoryList/InventoryListItem.jsx       |  41 +-
 .../src/screens/Job/JobList/JobList.test.jsx  |   6 +
 .../src/screens/Job/JobList/JobListItem.jsx   |  45 +-
 .../OrganizationList/OrganizationList.jsx     |   6 +-
 .../OrganizationList.test.jsx                 |   3 +
 .../OrganizationList/OrganizationListItem.jsx |  51 +-
 .../Project/ProjectList/ProjectList.jsx       |  11 +-
 .../Project/ProjectList/ProjectListItem.jsx   |  85 ++-
 .../src/screens/Team/TeamList/TeamList.jsx    |  11 +-
 .../screens/Team/TeamList/TeamList.test.jsx   |   3 +
 .../screens/Team/TeamList/TeamListItem.jsx    |  42 +-
 .../Template/TemplateList/TemplateList.jsx    |   6 +-
 .../TemplateList/TemplateListItem.jsx         |  78 +-
 .../Modals/NodeModals/NodeModal.test.jsx      |  10 +-
 .../NodeModals/NodeTypeStep/NodeTypeStep.jsx  |   6 +-
 .../NodeTypeStep/NodeTypeStep.test.jsx        |   8 +-
 .../VisualizerToolbar.jsx                     |  16 +-
 .../src/screens/User/UserList/UserList.jsx    |  11 +-
 .../screens/User/UserList/UserListItem.jsx    |  41 +-
 45 files changed, 788 insertions(+), 998 deletions(-)
 delete mode 100644 awx/ui_next/src/app.scss
 delete mode 100644 awx/ui_next/src/components/DataListCell/DataListCell.jsx
 delete mode 100644 awx/ui_next/src/components/DataListCell/DataListCell.test.jsx
 delete mode 100644 awx/ui_next/src/components/DataListCell/index.js
 delete mode 100644 awx/ui_next/src/components/DataListCheck/DataListCheck.jsx
 delete mode 100644 awx/ui_next/src/components/DataListCheck/DataListCheck.test.jsx
 delete mode 100644 awx/ui_next/src/components/DataListCheck/index.js
 delete mode 100644 awx/ui_next/src/components/DataListRadio/DataListRadio.jsx
 delete mode 100644 awx/ui_next/src/components/DataListRadio/DataListRadio.test.jsx
 delete mode 100644 awx/ui_next/src/components/DataListRadio/index.js

diff --git a/awx/ui_next/src/app.scss b/awx/ui_next/src/app.scss
deleted file mode 100644
index 6da11a0e7a..0000000000
--- a/awx/ui_next/src/app.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// https://github.com/patternfly/patternfly-react/issues/1294
-#app {
-  height: 100%;
-}
diff --git a/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx b/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
index 2616cf15cd..0213d7d113 100644
--- a/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
+++ b/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
@@ -6,19 +6,21 @@ import {
   DataListItemCells,
   DataListCell,
   DataListCheck,
+  Radio,
 } from '@patternfly/react-core';
-import DataListRadio from '@components/DataListRadio';
 
 const CheckboxListItem = ({
+  isDisabled = false,
+  isRadio = false,
+  isSelected = false,
   itemId,
-  name,
   label,
-  isSelected,
-  onSelect,
+  name,
   onDeselect,
-  isRadio,
+  onSelect,
 }) => {
-  const CheckboxRadio = isRadio ? DataListRadio : DataListCheck;
+  const CheckboxRadio = isRadio ? Radio : DataListCheck;
+
   return (
     <DataListItem
       key={itemId}
@@ -27,11 +29,14 @@ const CheckboxListItem = ({
     >
       <DataListItemRow>
         <CheckboxRadio
-          id={`selected-${itemId}`}
-          checked={isSelected}
-          onChange={isSelected ? onDeselect : onSelect}
+          aria-label={`check-action-item-${itemId}`}
           aria-labelledby={`check-action-item-${itemId}`}
+          checked={isSelected}
+          disabled={isDisabled}
+          id={`selected-${itemId}`}
+          isChecked={isSelected}
           name={name}
+          onChange={isSelected ? onDeselect : onSelect}
           value={itemId}
         />
         <DataListItemCells
@@ -53,12 +58,12 @@ const CheckboxListItem = ({
 };
 
 CheckboxListItem.propTypes = {
-  itemId: PropTypes.number.isRequired,
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
   isSelected: PropTypes.bool.isRequired,
-  onSelect: PropTypes.func.isRequired,
+  itemId: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
   onDeselect: PropTypes.func.isRequired,
+  onSelect: PropTypes.func.isRequired,
 };
 
 export default CheckboxListItem;
diff --git a/awx/ui_next/src/components/DataListCell/DataListCell.jsx b/awx/ui_next/src/components/DataListCell/DataListCell.jsx
deleted file mode 100644
index fdb3c984d8..0000000000
--- a/awx/ui_next/src/components/DataListCell/DataListCell.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { DataListCell as PFDataListCell } from '@patternfly/react-core';
-import styled from 'styled-components';
-
-const DataListCell = styled(PFDataListCell)`
-  display: flex;
-  align-items: center;
-  padding-bottom: ${props => (props.righthalf ? '16px' : '8px')};
-  @media screen and (min-width: 768px) {
-    padding-bottom: 0;
-    justify-content: ${props => (props.lastcolumn ? 'flex-end' : 'inherit')};
-  }
-`;
-
-export default DataListCell;
diff --git a/awx/ui_next/src/components/DataListCell/DataListCell.test.jsx b/awx/ui_next/src/components/DataListCell/DataListCell.test.jsx
deleted file mode 100644
index 55ec0b3018..0000000000
--- a/awx/ui_next/src/components/DataListCell/DataListCell.test.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { mountWithContexts } from '@testUtils/enzymeHelpers';
-
-import DataListCell from './DataListCell';
-
-describe('DataListCell', () => {
-  test('renders without failing', () => {
-    const wrapper = mountWithContexts(<DataListCell />);
-    expect(wrapper).toHaveLength(1);
-  });
-});
diff --git a/awx/ui_next/src/components/DataListCell/index.js b/awx/ui_next/src/components/DataListCell/index.js
deleted file mode 100644
index d925b63c7d..0000000000
--- a/awx/ui_next/src/components/DataListCell/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './DataListCell';
diff --git a/awx/ui_next/src/components/DataListCheck/DataListCheck.jsx b/awx/ui_next/src/components/DataListCheck/DataListCheck.jsx
deleted file mode 100644
index 30817989cf..0000000000
--- a/awx/ui_next/src/components/DataListCheck/DataListCheck.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { DataListCheck as PFDataListCheck } from '@patternfly/react-core';
-import styled from 'styled-components';
-
-PFDataListCheck.displayName = 'PFDataListCheck';
-export default styled(PFDataListCheck)`
-  padding-top: 18px;
-  @media screen and (min-width: 768px) {
-    padding-top: 16px;
-    justify-content: ${props => (props.lastcolumn ? 'flex-end' : 'inherit')};
-    .pf-c-data-list__check {
-      display: flex;
-      align-items: center;
-    }
-  }
-`;
diff --git a/awx/ui_next/src/components/DataListCheck/DataListCheck.test.jsx b/awx/ui_next/src/components/DataListCheck/DataListCheck.test.jsx
deleted file mode 100644
index f2414374fc..0000000000
--- a/awx/ui_next/src/components/DataListCheck/DataListCheck.test.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import DataListCheck from './DataListCheck';
-
-describe('DataListCheck', () => {
-  test('renders the expected content', () => {
-    const wrapper = mount(<DataListCheck checked aria-labelledby="Checkbox" />);
-    expect(wrapper).toHaveLength(1);
-  });
-});
diff --git a/awx/ui_next/src/components/DataListCheck/index.js b/awx/ui_next/src/components/DataListCheck/index.js
deleted file mode 100644
index cdb8b6137c..0000000000
--- a/awx/ui_next/src/components/DataListCheck/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './DataListCheck';
diff --git a/awx/ui_next/src/components/DataListRadio/DataListRadio.jsx b/awx/ui_next/src/components/DataListRadio/DataListRadio.jsx
deleted file mode 100644
index bccb1a3efe..0000000000
--- a/awx/ui_next/src/components/DataListRadio/DataListRadio.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { string, bool, func } from 'prop-types';
-
-function DataListRadio({
-  className = '',
-  onChange,
-  isValid = true,
-  isDisabled = false,
-  isChecked = null,
-  checked = null,
-  ...props
-}) {
-  return (
-    <div className={`pf-c-data-list__item-control ${className}`}>
-      <div className="pf-c-data-list__check">
-        <input
-          {...props}
-          type="radio"
-          onChange={event => onChange(event.currentTarget.checked, event)}
-          aria-invalid={!isValid}
-          disabled={isDisabled}
-          checked={isChecked || checked}
-        />
-      </div>
-    </div>
-  );
-}
-DataListRadio.propTypes = {
-  className: string,
-  isValid: bool,
-  isDisabled: bool,
-  isChecked: bool,
-  checked: bool,
-  onChange: func,
-  'aria-labelledby': string,
-};
-DataListRadio.defaultProps = {
-  className: '',
-  isValid: true,
-  isDisabled: false,
-  isChecked: false,
-  checked: false,
-  onChange: () => {},
-  'aria-labelledby': '',
-};
-
-export default DataListRadio;
diff --git a/awx/ui_next/src/components/DataListRadio/DataListRadio.test.jsx b/awx/ui_next/src/components/DataListRadio/DataListRadio.test.jsx
deleted file mode 100644
index b8fa2e4135..0000000000
--- a/awx/ui_next/src/components/DataListRadio/DataListRadio.test.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { mountWithContexts } from '@testUtils/enzymeHelpers';
-import DataListRadio from './DataListRadio';
-
-describe('DataListRadio', () => {
-  test('should call onChange', () => {
-    const onChange = jest.fn();
-    const wrapper = mountWithContexts(<DataListRadio onChange={onChange} />);
-    wrapper.find('input[type="radio"]').prop('onChange')({
-      currentTarget: { checked: true },
-    });
-    expect(onChange).toHaveBeenCalledWith(true, {
-      currentTarget: { checked: true },
-    });
-  });
-
-  test('should pass props to correct children', () => {
-    const onChange = jest.fn();
-    const wrapper = mountWithContexts(
-      <DataListRadio
-        onChange={onChange}
-        className="foo"
-        isValid
-        isDisabled
-        checked
-      />
-    );
-    const div = wrapper.find('.pf-c-data-list__item-control');
-    const input = wrapper.find('input[type="radio"]');
-
-    expect(div.prop('className')).toEqual('pf-c-data-list__item-control foo');
-    expect(input.prop('disabled')).toBe(true);
-    expect(input.prop('checked')).toBe(true);
-    expect(input.prop('aria-invalid')).toBe(false);
-  });
-});
diff --git a/awx/ui_next/src/components/DataListRadio/index.js b/awx/ui_next/src/components/DataListRadio/index.js
deleted file mode 100644
index c8f5b6d345..0000000000
--- a/awx/ui_next/src/components/DataListRadio/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './DataListRadio';
diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
index 0d5563a6f2..ce1f53f053 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
@@ -7,10 +7,10 @@ import styled from 'styled-components';
 import { SearchIcon } from '@patternfly/react-icons';
 import {
   DataToolbar,
-  DataToolbarContent,
-  DataToolbarGroup,
-  DataToolbarToggleGroup,
+  DataToolbarContent as _DataToolbarContent,
+  DataToolbarGroup as _DataToolbarGroup,
   DataToolbarItem,
+  DataToolbarToggleGroup,
 } from '@patternfly/react-core/dist/umd/experimental';
 import ExpandCollapse from '../ExpandCollapse';
 import Search from '../Search';
@@ -18,20 +18,12 @@ import Sort from '../Sort';
 
 import { SearchColumns, SortColumns, QSConfig } from '@types';
 
-const AdditionalControlsWrapper = styled.div`
-  display: flex;
-  flex-grow: 1;
-  justify-content: flex-end;
-  align-items: center;
-
-  & > :not(:first-child) {
-    margin-left: 20px;
-  }
+const DataToolbarContent = styled(_DataToolbarContent)`
+  --pf-c-data-toolbar__content--PaddingLeft: 24px;
+  --pf-c-data-toolbar__content--PaddingRight: 8px;
 `;
-
-const AdditionalControlsDataToolbarGroup = styled(DataToolbarGroup)`
-  margin-left: auto;
-  margin-right: 0 !important;
+const DataToolbarGroup = styled(_DataToolbarGroup)`
+  --pf-c-data-toolbar__group--spacer: 24px;
 `;
 
 class DataListToolbar extends React.Component {
@@ -102,13 +94,11 @@ class DataListToolbar extends React.Component {
               </Fragment>
             )}
           </DataToolbarGroup>
-          <AdditionalControlsDataToolbarGroup>
-            <DataToolbarItem>
-              <AdditionalControlsWrapper>
-                {additionalControls}
-              </AdditionalControlsWrapper>
-            </DataToolbarItem>
-          </AdditionalControlsDataToolbarGroup>
+          <DataToolbarGroup css="margin-left: auto">
+            {additionalControls.map(control => (
+              <DataToolbarItem key={control.key}>{control}</DataToolbarItem>
+            ))}
+          </DataToolbarGroup>
         </DataToolbarContent>
       </DataToolbar>
     );
diff --git a/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx b/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx
index fb4e80cfa9..6a2c1f8437 100644
--- a/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx
+++ b/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx
@@ -4,24 +4,20 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import {
+  DataListAction as _DataListAction,
+  DataListCell,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
-  DataListCell as PFDataListCell,
+  DataListItemRow,
   Switch,
 } from '@patternfly/react-core';
-
 import styled from 'styled-components';
 
-const DataListCell = styled(PFDataListCell)`
-  display: flex;
-  justify-content: ${props => (props.righthalf ? 'flex-start' : 'inherit')};
-  padding-bottom: ${props => (props.righthalf ? '16px' : '8px')};
-
-  @media screen and (min-width: 768px) {
-    justify-content: ${props => (props.righthalf ? 'flex-end' : 'inherit')};
-    padding-bottom: 0;
-  }
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(3, max-content);
 `;
 
 function NotificationListItem(props) {
@@ -51,7 +47,6 @@ function NotificationListItem(props) {
                 to={{
                   pathname: detailUrl,
                 }}
-                css="margin-right: 1.5em;"
               >
                 <b id={`items-list-item-${notification.id}`}>
                   {notification.name}
@@ -61,51 +56,47 @@ function NotificationListItem(props) {
             <DataListCell key="type">
               {typeLabels[notification.notification_type]}
             </DataListCell>,
-            <DataListCell righthalf="true" key="toggles">
-              <Switch
-                id={`notification-${notification.id}-started-toggle`}
-                label={i18n._(t`Start`)}
-                labelOff={i18n._(t`Start`)}
-                isChecked={startedTurnedOn}
-                isDisabled={!canToggleNotifications}
-                onChange={() =>
-                  toggleNotification(
-                    notification.id,
-                    startedTurnedOn,
-                    'started'
-                  )
-                }
-                aria-label={i18n._(t`Toggle notification start`)}
-              />
-              <Switch
-                id={`notification-${notification.id}-success-toggle`}
-                label={i18n._(t`Success`)}
-                labelOff={i18n._(t`Success`)}
-                isChecked={successTurnedOn}
-                isDisabled={!canToggleNotifications}
-                onChange={() =>
-                  toggleNotification(
-                    notification.id,
-                    successTurnedOn,
-                    'success'
-                  )
-                }
-                aria-label={i18n._(t`Toggle notification success`)}
-              />
-              <Switch
-                id={`notification-${notification.id}-error-toggle`}
-                label={i18n._(t`Failure`)}
-                labelOff={i18n._(t`Failure`)}
-                isChecked={errorTurnedOn}
-                isDisabled={!canToggleNotifications}
-                onChange={() =>
-                  toggleNotification(notification.id, errorTurnedOn, 'error')
-                }
-                aria-label={i18n._(t`Toggle notification failure`)}
-              />
-            </DataListCell>,
           ]}
         />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={`items-list-item-${notification.id}`}
+          id={`items-list-item-${notification.id}`}
+        >
+          <Switch
+            id={`notification-${notification.id}-started-toggle`}
+            label={i18n._(t`Start`)}
+            labelOff={i18n._(t`Start`)}
+            isChecked={startedTurnedOn}
+            isDisabled={!canToggleNotifications}
+            onChange={() =>
+              toggleNotification(notification.id, startedTurnedOn, 'started')
+            }
+            aria-label={i18n._(t`Toggle notification start`)}
+          />
+          <Switch
+            id={`notification-${notification.id}-success-toggle`}
+            label={i18n._(t`Success`)}
+            labelOff={i18n._(t`Success`)}
+            isChecked={successTurnedOn}
+            isDisabled={!canToggleNotifications}
+            onChange={() =>
+              toggleNotification(notification.id, successTurnedOn, 'success')
+            }
+            aria-label={i18n._(t`Toggle notification success`)}
+          />
+          <Switch
+            id={`notification-${notification.id}-error-toggle`}
+            label={i18n._(t`Failure`)}
+            labelOff={i18n._(t`Failure`)}
+            isChecked={errorTurnedOn}
+            isDisabled={!canToggleNotifications}
+            onChange={() =>
+              toggleNotification(notification.id, errorTurnedOn, 'error')
+            }
+            aria-label={i18n._(t`Toggle notification failure`)}
+          />
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );
diff --git a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
index c531e44c0c..2ec6011b1d 100644
--- a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
+++ b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
@@ -42,7 +42,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
           <DataListItemCells
             dataListCells={
               Array [
-                <ForwardRef>
+                <DataListCell>
                   <ForwardRef
                     to={
                       Object {
@@ -56,41 +56,10 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                       Foo
                     </b>
                   </ForwardRef>
-                </ForwardRef>,
-                <ForwardRef>
+                </DataListCell>,
+                <DataListCell>
                   Slack
-                </ForwardRef>,
-                <ForwardRef
-                  righthalf="true"
-                >
-                  <Unknown
-                    aria-label="Toggle notification start"
-                    id="notification-9000-started-toggle"
-                    isChecked={false}
-                    isDisabled={false}
-                    label="Start"
-                    labelOff="Start"
-                    onChange={[Function]}
-                  />
-                  <Unknown
-                    aria-label="Toggle notification success"
-                    id="notification-9000-success-toggle"
-                    isChecked={false}
-                    isDisabled={false}
-                    label="Success"
-                    labelOff="Success"
-                    onChange={[Function]}
-                  />
-                  <Unknown
-                    aria-label="Toggle notification failure"
-                    id="notification-9000-error-toggle"
-                    isChecked={false}
-                    isDisabled={false}
-                    label="Failure"
-                    labelOff="Failure"
-                    onChange={[Function]}
-                  />
-                </ForwardRef>,
+                </DataListCell>,
               ]
             }
             key=".0"
@@ -99,453 +68,324 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
             <div
               className="pf-c-data-list__item-content"
             >
-              <NotificationListItem__DataListCell
+              <DataListCell
                 key="name"
               >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "NotificationListItem__DataListCell-w674ng-0",
-                        "isStatic": false,
-                        "lastClassName": "dXsFLF",
-                        "rules": Array [
-                          "display:flex;justify-content:",
-                          [Function],
-                          ";padding-bottom:",
-                          [Function],
-                          ";@media screen and (min-width:768px){justify-content:",
-                          [Function],
-                          ";padding-bottom:0;}",
-                        ],
-                      },
-                      "displayName": "NotificationListItem__DataListCell",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "NotificationListItem__DataListCell-w674ng-0",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
+                <div
+                  className="pf-c-data-list__cell"
                 >
-                  <DataListCell
-                    className="NotificationListItem__DataListCell-w674ng-0 faYgxF"
+                  <Link
+                    to={
+                      Object {
+                        "pathname": "/foo",
+                      }
+                    }
                   >
-                    <div
-                      className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 faYgxF"
+                    <LinkAnchor
+                      href="/foo"
+                      navigate={[Function]}
                     >
-                      <Styled(Link)
-                        to={
-                          Object {
-                            "pathname": "/foo",
-                          }
-                        }
+                      <a
+                        href="/foo"
+                        onClick={[Function]}
                       >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "sc-bdVaJa",
-                                "isStatic": true,
-                                "lastClassName": "eBseNd",
-                                "rules": Array [
-                                  "margin-right: 1.5em;",
-                                ],
-                              },
-                              "displayName": "Styled(Link)",
-                              "foldedComponentIds": Array [],
-                              "propTypes": Object {
-                                "innerRef": [Function],
-                                "onClick": [Function],
-                                "replace": [Function],
-                                "target": [Function],
-                                "to": [Function],
-                              },
-                              "render": [Function],
-                              "styledComponentId": "sc-bdVaJa",
-                              "target": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "displayName": "Link",
-                                "propTypes": Object {
-                                  "innerRef": [Function],
-                                  "onClick": [Function],
-                                  "replace": [Function],
-                                  "target": [Function],
-                                  "to": [Function],
-                                },
-                                "render": [Function],
-                              },
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          to={
-                            Object {
-                              "pathname": "/foo",
-                            }
-                          }
+                        <b
+                          id="items-list-item-9000"
                         >
-                          <Link
-                            className="sc-bdVaJa eBseNd"
-                            to={
-                              Object {
-                                "pathname": "/foo",
-                              }
-                            }
-                          >
-                            <LinkAnchor
-                              className="sc-bdVaJa eBseNd"
-                              href="/foo"
-                              navigate={[Function]}
-                            >
-                              <a
-                                className="sc-bdVaJa eBseNd"
-                                href="/foo"
-                                onClick={[Function]}
-                              >
-                                <b
-                                  id="items-list-item-9000"
-                                >
-                                  Foo
-                                </b>
-                              </a>
-                            </LinkAnchor>
-                          </Link>
-                        </StyledComponent>
-                      </Styled(Link)>
-                    </div>
-                  </DataListCell>
-                </StyledComponent>
-              </NotificationListItem__DataListCell>
-              <NotificationListItem__DataListCell
+                          Foo
+                        </b>
+                      </a>
+                    </LinkAnchor>
+                  </Link>
+                </div>
+              </DataListCell>
+              <DataListCell
                 key="type"
               >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "NotificationListItem__DataListCell-w674ng-0",
-                        "isStatic": false,
-                        "lastClassName": "dXsFLF",
-                        "rules": Array [
-                          "display:flex;justify-content:",
-                          [Function],
-                          ";padding-bottom:",
-                          [Function],
-                          ";@media screen and (min-width:768px){justify-content:",
-                          [Function],
-                          ";padding-bottom:0;}",
-                        ],
-                      },
-                      "displayName": "NotificationListItem__DataListCell",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "NotificationListItem__DataListCell-w674ng-0",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
+                <div
+                  className="pf-c-data-list__cell"
                 >
-                  <DataListCell
-                    className="NotificationListItem__DataListCell-w674ng-0 faYgxF"
-                  >
-                    <div
-                      className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 faYgxF"
-                    >
-                      Slack
-                    </div>
-                  </DataListCell>
-                </StyledComponent>
-              </NotificationListItem__DataListCell>
-              <NotificationListItem__DataListCell
-                key="toggles"
-                righthalf="true"
+                  Slack
+                </div>
+              </DataListCell>
+            </div>
+          </DataListItemCells>
+          <NotificationListItem__DataListAction
+            aria-label="actions"
+            aria-labelledby="items-list-item-9000"
+            id="items-list-item-9000"
+            key=".1"
+            rowid="items-list-item-9000"
+          >
+            <StyledComponent
+              aria-label="actions"
+              aria-labelledby="items-list-item-9000"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "NotificationListItem__DataListAction-w674ng-0",
+                    "isStatic": true,
+                    "lastClassName": "hhZchj",
+                    "rules": Array [
+                      "align-items:center;display:grid;grid-gap:16px;grid-template-columns:repeat(3,max-content);",
+                    ],
+                  },
+                  "displayName": "NotificationListItem__DataListAction",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "NotificationListItem__DataListAction-w674ng-0",
+                  "target": [Function],
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
+              }
+              forwardedRef={null}
+              id="items-list-item-9000"
+              rowid="items-list-item-9000"
+            >
+              <DataListAction
+                aria-label="actions"
+                aria-labelledby="items-list-item-9000"
+                className="NotificationListItem__DataListAction-w674ng-0 hhZchj"
+                id="items-list-item-9000"
+                rowid="items-list-item-9000"
               >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "NotificationListItem__DataListCell-w674ng-0",
-                        "isStatic": false,
-                        "lastClassName": "dXsFLF",
-                        "rules": Array [
-                          "display:flex;justify-content:",
-                          [Function],
-                          ";padding-bottom:",
-                          [Function],
-                          ";@media screen and (min-width:768px){justify-content:",
-                          [Function],
-                          ";padding-bottom:0;}",
-                        ],
-                      },
-                      "displayName": "NotificationListItem__DataListCell",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "NotificationListItem__DataListCell-w674ng-0",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  righthalf="true"
+                <div
+                  className="pf-c-data-list__item-action NotificationListItem__DataListAction-w674ng-0 hhZchj"
+                  rowid="items-list-item-9000"
                 >
-                  <DataListCell
-                    className="NotificationListItem__DataListCell-w674ng-0 dXsFLF"
-                    righthalf="true"
+                  <Component
+                    aria-label="Toggle notification start"
+                    id="notification-9000-started-toggle"
+                    isChecked={false}
+                    isDisabled={false}
+                    label="Start"
+                    labelOff="Start"
+                    onChange={[Function]}
                   >
-                    <div
-                      className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 dXsFLF"
-                      righthalf="true"
+                    <ComponentWithOuia
+                      component={[Function]}
+                      componentProps={
+                        Object {
+                          "aria-label": "Toggle notification start",
+                          "id": "notification-9000-started-toggle",
+                          "isChecked": false,
+                          "isDisabled": false,
+                          "label": "Start",
+                          "labelOff": "Start",
+                          "onChange": [Function],
+                        }
+                      }
+                      consumerContext={null}
                     >
-                      <Component
+                      <Switch
                         aria-label="Toggle notification start"
+                        className=""
                         id="notification-9000-started-toggle"
                         isChecked={false}
                         isDisabled={false}
                         label="Start"
                         labelOff="Start"
                         onChange={[Function]}
-                      >
-                        <ComponentWithOuia
-                          component={[Function]}
-                          componentProps={
-                            Object {
-                              "aria-label": "Toggle notification start",
-                              "id": "notification-9000-started-toggle",
-                              "isChecked": false,
-                              "isDisabled": false,
-                              "label": "Start",
-                              "labelOff": "Start",
-                              "onChange": [Function],
-                            }
+                        ouiaContext={
+                          Object {
+                            "isOuia": false,
+                            "ouiaId": null,
                           }
-                          consumerContext={null}
+                        }
+                      >
+                        <label
+                          className="pf-c-switch"
+                          htmlFor="notification-9000-started-toggle"
                         >
-                          <Switch
+                          <input
                             aria-label="Toggle notification start"
-                            className=""
+                            aria-labelledby={null}
+                            checked={false}
+                            className="pf-c-switch__input"
+                            disabled={false}
                             id="notification-9000-started-toggle"
-                            isChecked={false}
-                            isDisabled={false}
-                            label="Start"
-                            labelOff="Start"
                             onChange={[Function]}
-                            ouiaContext={
-                              Object {
-                                "isOuia": false,
-                                "ouiaId": null,
-                              }
-                            }
+                            type="checkbox"
+                          />
+                          <span
+                            className="pf-c-switch__toggle"
+                          />
+                          <span
+                            aria-hidden="true"
+                            className="pf-c-switch__label pf-m-on"
+                            id={null}
                           >
-                            <label
-                              className="pf-c-switch"
-                              htmlFor="notification-9000-started-toggle"
-                            >
-                              <input
-                                aria-label="Toggle notification start"
-                                aria-labelledby={null}
-                                checked={false}
-                                className="pf-c-switch__input"
-                                disabled={false}
-                                id="notification-9000-started-toggle"
-                                onChange={[Function]}
-                                type="checkbox"
-                              />
-                              <span
-                                className="pf-c-switch__toggle"
-                              />
-                              <span
-                                aria-hidden="true"
-                                className="pf-c-switch__label pf-m-on"
-                                id={null}
-                              >
-                                Start
-                              </span>
-                              <span
-                                aria-hidden="true"
-                                className="pf-c-switch__label pf-m-off"
-                                id={null}
-                              >
-                                Start
-                              </span>
-                            </label>
-                          </Switch>
-                        </ComponentWithOuia>
-                      </Component>
-                      <Component
+                            Start
+                          </span>
+                          <span
+                            aria-hidden="true"
+                            className="pf-c-switch__label pf-m-off"
+                            id={null}
+                          >
+                            Start
+                          </span>
+                        </label>
+                      </Switch>
+                    </ComponentWithOuia>
+                  </Component>
+                  <Component
+                    aria-label="Toggle notification success"
+                    id="notification-9000-success-toggle"
+                    isChecked={false}
+                    isDisabled={false}
+                    label="Success"
+                    labelOff="Success"
+                    onChange={[Function]}
+                  >
+                    <ComponentWithOuia
+                      component={[Function]}
+                      componentProps={
+                        Object {
+                          "aria-label": "Toggle notification success",
+                          "id": "notification-9000-success-toggle",
+                          "isChecked": false,
+                          "isDisabled": false,
+                          "label": "Success",
+                          "labelOff": "Success",
+                          "onChange": [Function],
+                        }
+                      }
+                      consumerContext={null}
+                    >
+                      <Switch
                         aria-label="Toggle notification success"
+                        className=""
                         id="notification-9000-success-toggle"
                         isChecked={false}
                         isDisabled={false}
                         label="Success"
                         labelOff="Success"
                         onChange={[Function]}
-                      >
-                        <ComponentWithOuia
-                          component={[Function]}
-                          componentProps={
-                            Object {
-                              "aria-label": "Toggle notification success",
-                              "id": "notification-9000-success-toggle",
-                              "isChecked": false,
-                              "isDisabled": false,
-                              "label": "Success",
-                              "labelOff": "Success",
-                              "onChange": [Function],
-                            }
+                        ouiaContext={
+                          Object {
+                            "isOuia": false,
+                            "ouiaId": null,
                           }
-                          consumerContext={null}
+                        }
+                      >
+                        <label
+                          className="pf-c-switch"
+                          htmlFor="notification-9000-success-toggle"
                         >
-                          <Switch
+                          <input
                             aria-label="Toggle notification success"
-                            className=""
+                            aria-labelledby={null}
+                            checked={false}
+                            className="pf-c-switch__input"
+                            disabled={false}
                             id="notification-9000-success-toggle"
-                            isChecked={false}
-                            isDisabled={false}
-                            label="Success"
-                            labelOff="Success"
                             onChange={[Function]}
-                            ouiaContext={
-                              Object {
-                                "isOuia": false,
-                                "ouiaId": null,
-                              }
-                            }
+                            type="checkbox"
+                          />
+                          <span
+                            className="pf-c-switch__toggle"
+                          />
+                          <span
+                            aria-hidden="true"
+                            className="pf-c-switch__label pf-m-on"
+                            id={null}
                           >
-                            <label
-                              className="pf-c-switch"
-                              htmlFor="notification-9000-success-toggle"
-                            >
-                              <input
-                                aria-label="Toggle notification success"
-                                aria-labelledby={null}
-                                checked={false}
-                                className="pf-c-switch__input"
-                                disabled={false}
-                                id="notification-9000-success-toggle"
-                                onChange={[Function]}
-                                type="checkbox"
-                              />
-                              <span
-                                className="pf-c-switch__toggle"
-                              />
-                              <span
-                                aria-hidden="true"
-                                className="pf-c-switch__label pf-m-on"
-                                id={null}
-                              >
-                                Success
-                              </span>
-                              <span
-                                aria-hidden="true"
-                                className="pf-c-switch__label pf-m-off"
-                                id={null}
-                              >
-                                Success
-                              </span>
-                            </label>
-                          </Switch>
-                        </ComponentWithOuia>
-                      </Component>
-                      <Component
+                            Success
+                          </span>
+                          <span
+                            aria-hidden="true"
+                            className="pf-c-switch__label pf-m-off"
+                            id={null}
+                          >
+                            Success
+                          </span>
+                        </label>
+                      </Switch>
+                    </ComponentWithOuia>
+                  </Component>
+                  <Component
+                    aria-label="Toggle notification failure"
+                    id="notification-9000-error-toggle"
+                    isChecked={false}
+                    isDisabled={false}
+                    label="Failure"
+                    labelOff="Failure"
+                    onChange={[Function]}
+                  >
+                    <ComponentWithOuia
+                      component={[Function]}
+                      componentProps={
+                        Object {
+                          "aria-label": "Toggle notification failure",
+                          "id": "notification-9000-error-toggle",
+                          "isChecked": false,
+                          "isDisabled": false,
+                          "label": "Failure",
+                          "labelOff": "Failure",
+                          "onChange": [Function],
+                        }
+                      }
+                      consumerContext={null}
+                    >
+                      <Switch
                         aria-label="Toggle notification failure"
+                        className=""
                         id="notification-9000-error-toggle"
                         isChecked={false}
                         isDisabled={false}
                         label="Failure"
                         labelOff="Failure"
                         onChange={[Function]}
-                      >
-                        <ComponentWithOuia
-                          component={[Function]}
-                          componentProps={
-                            Object {
-                              "aria-label": "Toggle notification failure",
-                              "id": "notification-9000-error-toggle",
-                              "isChecked": false,
-                              "isDisabled": false,
-                              "label": "Failure",
-                              "labelOff": "Failure",
-                              "onChange": [Function],
-                            }
+                        ouiaContext={
+                          Object {
+                            "isOuia": false,
+                            "ouiaId": null,
                           }
-                          consumerContext={null}
+                        }
+                      >
+                        <label
+                          className="pf-c-switch"
+                          htmlFor="notification-9000-error-toggle"
                         >
-                          <Switch
+                          <input
                             aria-label="Toggle notification failure"
-                            className=""
+                            aria-labelledby={null}
+                            checked={false}
+                            className="pf-c-switch__input"
+                            disabled={false}
                             id="notification-9000-error-toggle"
-                            isChecked={false}
-                            isDisabled={false}
-                            label="Failure"
-                            labelOff="Failure"
                             onChange={[Function]}
-                            ouiaContext={
-                              Object {
-                                "isOuia": false,
-                                "ouiaId": null,
-                              }
-                            }
+                            type="checkbox"
+                          />
+                          <span
+                            className="pf-c-switch__toggle"
+                          />
+                          <span
+                            aria-hidden="true"
+                            className="pf-c-switch__label pf-m-on"
+                            id={null}
                           >
-                            <label
-                              className="pf-c-switch"
-                              htmlFor="notification-9000-error-toggle"
-                            >
-                              <input
-                                aria-label="Toggle notification failure"
-                                aria-labelledby={null}
-                                checked={false}
-                                className="pf-c-switch__input"
-                                disabled={false}
-                                id="notification-9000-error-toggle"
-                                onChange={[Function]}
-                                type="checkbox"
-                              />
-                              <span
-                                className="pf-c-switch__toggle"
-                              />
-                              <span
-                                aria-hidden="true"
-                                className="pf-c-switch__label pf-m-on"
-                                id={null}
-                              >
-                                Failure
-                              </span>
-                              <span
-                                aria-hidden="true"
-                                className="pf-c-switch__label pf-m-off"
-                                id={null}
-                              >
-                                Failure
-                              </span>
-                            </label>
-                          </Switch>
-                        </ComponentWithOuia>
-                      </Component>
-                    </div>
-                  </DataListCell>
-                </StyledComponent>
-              </NotificationListItem__DataListCell>
-            </div>
-          </DataListItemCells>
+                            Failure
+                          </span>
+                          <span
+                            aria-hidden="true"
+                            className="pf-c-switch__label pf-m-off"
+                            id={null}
+                          >
+                            Failure
+                          </span>
+                        </label>
+                      </Switch>
+                    </ComponentWithOuia>
+                  </Component>
+                </div>
+              </DataListAction>
+            </StyledComponent>
+          </NotificationListItem__DataListAction>
         </div>
       </DataListItemRow>
     </li>
diff --git a/awx/ui_next/src/components/SelectedList/SelectedList.jsx b/awx/ui_next/src/components/SelectedList/SelectedList.jsx
index 60045a04b0..6fd0eb9da1 100644
--- a/awx/ui_next/src/components/SelectedList/SelectedList.jsx
+++ b/awx/ui_next/src/components/SelectedList/SelectedList.jsx
@@ -15,6 +15,7 @@ const Split = styled(PFSplit)`
 
 const SplitLabelItem = styled(SplitItem)`
   font-weight: bold;
+  margin-right: 32px;
   word-break: initial;
 `;
 
@@ -39,7 +40,7 @@ class SelectedList extends Component {
 
     return (
       <Split>
-        <SplitLabelItem css="margin-right: 32px">{label}</SplitLabelItem>
+        <SplitLabelItem>{label}</SplitLabelItem>
         <SplitItem>
           <ChipGroup numChips={5}>
             {selected.map(item =>
diff --git a/awx/ui_next/src/components/Sparkline/Sparkline.jsx b/awx/ui_next/src/components/Sparkline/Sparkline.jsx
index d9346758c3..d0aabceb95 100644
--- a/awx/ui_next/src/components/Sparkline/Sparkline.jsx
+++ b/awx/ui_next/src/components/Sparkline/Sparkline.jsx
@@ -13,6 +13,10 @@ import { JOB_TYPE_URL_SEGMENTS } from '@constants';
 const Link = styled(props => <_Link {...props} />)`
   margin-right: 5px;
 `;
+
+const Wrapper = styled.div`
+  display: inline-flex;
+`;
 /* eslint-enable react/jsx-pascal-case */
 
 const Sparkline = ({ i18n, jobs }) => {
@@ -32,13 +36,15 @@ const Sparkline = ({ i18n, jobs }) => {
     </Fragment>
   );
 
-  return jobs.map(job => (
+  const statusIcons = jobs.map(job => (
     <Tooltip position="top" content={generateTooltip(job)} key={job.id}>
       <Link to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}>
         <StatusIcon status={job.status} />
       </Link>
     </Tooltip>
   ));
+
+  return <Wrapper>{statusIcons}</Wrapper>;
 };
 
 Sparkline.propTypes = {
diff --git a/awx/ui_next/src/index.jsx b/awx/ui_next/src/index.jsx
index 06d5245d81..f2abdbc1ff 100644
--- a/awx/ui_next/src/index.jsx
+++ b/awx/ui_next/src/index.jsx
@@ -5,7 +5,6 @@ import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
 import '@patternfly/react-core/dist/styles/base.css';
-import './app.scss';
 
 import { isAuthenticated } from '@util/auth';
 import Background from '@components/Background';
diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
index ada903e709..40d7a65657 100644
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
@@ -125,9 +125,9 @@ function CredentialList({ i18n }) {
                   itemsToDelete={selected}
                   pluralizedItemName={i18n._(t`Credentials`)}
                 />,
-                canAdd && (
-                  <ToolbarAddButton key="add" linkTo="/credentials/add" />
-                ),
+                ...(canAdd
+                  ? [<ToolbarAddButton key="add" linkTo="/credentials/add" />]
+                  : []),
               ]}
             />
           )}
diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
index f5f6cff512..9b519bfcb1 100644
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
@@ -5,24 +5,18 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import {
   Button,
+  DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
   DataListItemRow,
-  DataListItemCells as _DataListItemCells,
+  DataListItemCells,
   Tooltip,
 } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
-import styled from 'styled-components';
 import { Credential } from '@types';
 
-const DataListItemCells = styled(_DataListItemCells)`
-  ${DataListCell}:first-child {
-    flex-grow: 2;
-  }
-`;
-
 function CredentialListItem({
   credential,
   detailUrl,
@@ -56,21 +50,25 @@ function CredentialListItem({
             <DataListCell key="type">
               {credential.summary_fields.credential_type.name}
             </DataListCell>,
-            <DataListCell key="edit" alignRight isFilled={false}>
-              {canEdit && (
-                <Tooltip content={i18n._(t`Edit Credential`)} position="top">
-                  <Button
-                    variant="plain"
-                    component={Link}
-                    to={`/credentials/${credential.id}/edit`}
-                  >
-                    <PencilAltIcon />
-                  </Button>
-                </Tooltip>
-              )}
-            </DataListCell>,
           ]}
         />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          {canEdit && (
+            <Tooltip content={i18n._(t`Edit Credential`)} position="top">
+              <Button
+                variant="plain"
+                component={Link}
+                to={`/credentials/${credential.id}/edit`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );
diff --git a/awx/ui_next/src/screens/Host/HostList/HostList.jsx b/awx/ui_next/src/screens/Host/HostList/HostList.jsx
index 5d1dbbdfbd..0edc224d30 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostList.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostList.jsx
@@ -224,9 +224,14 @@ class HostsList extends Component {
                     itemsToDelete={selected}
                     pluralizedItemName={i18n._(t`Hosts`)}
                   />,
-                  canAdd ? (
-                    <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-                  ) : null,
+                  ...(canAdd
+                    ? [
+                        <ToolbarAddButton
+                          key="add"
+                          linkTo={`${match.url}/add`}
+                        />,
+                      ]
+                    : []),
                 ]}
               />
             )}
diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
index 72baf5e8f9..72f4047229 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
@@ -4,6 +4,8 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListAction as _DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
   DataListItemRow,
@@ -14,9 +16,16 @@ import {
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
 import { Sparkline } from '@components/Sparkline';
 import { Host } from '@types';
+import styled from 'styled-components';
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 24px;
+  grid-template-columns: min-content 40px;
+`;
 
 class HostListItem extends React.Component {
   static propTypes = {
@@ -65,9 +74,7 @@ class HostListItem extends React.Component {
               <DataListCell key="inventory">
                 {host.summary_fields.inventory && (
                   <Fragment>
-                    <b style={{ marginRight: '20px' }}>
-                      {i18n._(t`Inventory`)}
-                    </b>
+                    <b css="margin-right: 24px">{i18n._(t`Inventory`)}</b>
                     <Link
                       to={`/inventories/${
                         host.summary_fields.inventory.kind === 'smart'
@@ -80,43 +87,44 @@ class HostListItem extends React.Component {
                   </Fragment>
                 )}
               </DataListCell>,
-              <DataListCell key="enable" alignRight isFilled={false}>
-                <Tooltip
-                  content={i18n._(
-                    t`Indicates if a host is available and should be included in running jobs.  For hosts that are part of an external inventory, this may be reset by the inventory sync process.`
-                  )}
-                  position="top"
-                >
-                  <Switch
-                    css="display: inline-flex;"
-                    id={`host-${host.id}-toggle`}
-                    label={i18n._(t`On`)}
-                    labelOff={i18n._(t`Off`)}
-                    isChecked={host.enabled}
-                    isDisabled={
-                      toggleLoading ||
-                      !host.summary_fields.user_capabilities.edit
-                    }
-                    onChange={() => onToggleHost(host)}
-                    aria-label={i18n._(t`Toggle host`)}
-                  />
-                </Tooltip>
-              </DataListCell>,
-              <DataListCell key="edit" alignRight isFilled={false}>
-                {host.summary_fields.user_capabilities.edit && (
-                  <Tooltip content={i18n._(t`Edit Host`)} position="top">
-                    <Button
-                      variant="plain"
-                      component={Link}
-                      to={`/hosts/${host.id}/edit`}
-                    >
-                      <PencilAltIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-              </DataListCell>,
             ]}
           />
+          <DataListAction
+            aria-label="actions"
+            aria-labelledby={labelId}
+            id={labelId}
+          >
+            <Tooltip
+              content={i18n._(
+                t`Indicates if a host is available and should be included in running jobs.  For hosts that are part of an external inventory, this may be reset by the inventory sync process.`
+              )}
+              position="top"
+            >
+              <Switch
+                css="display: inline-flex;"
+                id={`host-${host.id}-toggle`}
+                label={i18n._(t`On`)}
+                labelOff={i18n._(t`Off`)}
+                isChecked={host.enabled}
+                isDisabled={
+                  toggleLoading || !host.summary_fields.user_capabilities.edit
+                }
+                onChange={() => onToggleHost(host)}
+                aria-label={i18n._(t`Toggle host`)}
+              />
+            </Tooltip>
+            {host.summary_fields.user_capabilities.edit && (
+              <Tooltip content={i18n._(t`Edit Host`)} position="top">
+                <Button
+                  variant="plain"
+                  component={Link}
+                  to={`/hosts/${host.id}/edit`}
+                >
+                  <PencilAltIcon />
+                </Button>
+              </Tooltip>
+            )}
+          </DataListAction>
         </DataListItemRow>
       </DataListItem>
     );
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
index 55ef6ccdce..77f9ccab26 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
@@ -6,17 +6,17 @@ import { Group } from '@types';
 
 import {
   Button,
+  DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
   Tooltip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
-
 function InventoryGroupItem({
   i18n,
   group,
@@ -39,22 +39,26 @@ function InventoryGroupItem({
         />
         <DataListItemCells
           dataListCells={[
-            <DataListCell key="divider">
+            <DataListCell key="name">
               <Link to={`${detailUrl}`} id={labelId}>
                 <b>{group.name}</b>
               </Link>
             </DataListCell>,
-            <DataListCell key="edit" alignRight isFilled={false}>
-              {group.summary_fields.user_capabilities.edit && (
-                <Tooltip content={i18n._(t`Edit Group`)} position="top">
-                  <Button variant="plain" component={Link} to={editUrl}>
-                    <PencilAltIcon />
-                  </Button>
-                </Tooltip>
-              )}
-            </DataListCell>,
           ]}
         />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          {group.summary_fields.user_capabilities.edit && (
+            <Tooltip content={i18n._(t`Edit Group`)} position="top">
+              <Button variant="plain" component={Link} to={editUrl}>
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
index 96f9d64327..f511d83156 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
@@ -238,12 +238,14 @@ function InventoryGroupsList({ i18n, location, match }) {
                   </DeleteButton>
                 </div>
               </Tooltip>,
-              canAdd && (
-                <ToolbarAddButton
-                  key="add"
-                  linkTo={`/inventories/inventory/${inventoryId}/groups/add`}
-                />
-              ),
+              ...(canAdd
+                ? [
+                    <ToolbarAddButton
+                      key="add"
+                      linkTo={`/inventories/inventory/${inventoryId}/groups/add`}
+                    />,
+                  ]
+                : []),
             ]}
           />
         )}
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
index 89a19fec6f..12e1281cb4 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
@@ -4,19 +4,27 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListAction as _DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
   Switch,
   Tooltip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
-
-import DataListCell from '@components/DataListCell';
 import { Sparkline } from '@components/Sparkline';
 import { Host } from '@types';
+import styled from 'styled-components';
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 24px;
+  grid-template-columns: min-content 40px;
+`;
 
 function InventoryHostItem(props) {
   const {
@@ -56,41 +64,42 @@ function InventoryHostItem(props) {
             <DataListCell key="recentJobs">
               <Sparkline jobs={recentPlaybookJobs} />
             </DataListCell>,
-            <DataListCell key="enable" alignRight isFilled={false}>
-              <Tooltip
-                content={i18n._(
-                  t`Indicates if a host is available and should be included
-                  in running jobs.  For hosts that are part of an external
-                  inventory, this may be reset by the inventory sync process.`
-                )}
-                position="top"
-              >
-                <Switch
-                  css="display: inline-flex;"
-                  id={`host-${host.id}-toggle`}
-                  label={i18n._(t`On`)}
-                  labelOff={i18n._(t`Off`)}
-                  isChecked={host.enabled}
-                  isDisabled={
-                    toggleLoading ||
-                    !host.summary_fields.user_capabilities?.edit
-                  }
-                  onChange={() => toggleHost(host)}
-                  aria-label={i18n._(t`Toggle host`)}
-                />
-              </Tooltip>
-            </DataListCell>,
-            <DataListCell key="edit" alignRight isFilled={false}>
-              {host.summary_fields.user_capabilities?.edit && (
-                <Tooltip content={i18n._(t`Edit Host`)} position="top">
-                  <Button variant="plain" component={Link} to={`${editUrl}`}>
-                    <PencilAltIcon />
-                  </Button>
-                </Tooltip>
-              )}
-            </DataListCell>,
           ]}
         />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          <Tooltip
+            content={i18n._(
+              t`Indicates if a host is available and should be included
+              in running jobs.  For hosts that are part of an external
+              inventory, this may be reset by the inventory sync process.`
+            )}
+            position="top"
+          >
+            <Switch
+              css="display: inline-flex;"
+              id={`host-${host.id}-toggle`}
+              label={i18n._(t`On`)}
+              labelOff={i18n._(t`Off`)}
+              isChecked={host.enabled}
+              isDisabled={
+                toggleLoading || !host.summary_fields.user_capabilities?.edit
+              }
+              onChange={() => toggleHost(host)}
+              aria-label={i18n._(t`Toggle host`)}
+            />
+          </Tooltip>
+          {host.summary_fields.user_capabilities?.edit && (
+            <Tooltip content={i18n._(t`Edit Host`)} position="top">
+              <Button variant="plain" component={Link} to={`${editUrl}`}>
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
index 1a4a7e35a7..d59890040c 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
@@ -165,12 +165,14 @@ function InventoryHostList({ i18n, location, match }) {
                 itemsToDelete={selected}
                 pluralizedItemName={i18n._(t`Hosts`)}
               />,
-              canAdd && (
-                <ToolbarAddButton
-                  key="add"
-                  linkTo={`/inventories/inventory/${match.params.id}/hosts/add`}
-                />
-              ),
+              ...(canAdd
+                ? [
+                    <ToolbarAddButton
+                      key="add"
+                      linkTo={`/inventories/inventory/${match.params.id}/hosts/add`}
+                    />,
+                  ]
+                : []),
             ]}
           />
         )}
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
index ef7ec6ff1b..6884adf4f7 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
@@ -208,7 +208,7 @@ class InventoriesList extends Component {
                     itemsToDelete={selected}
                     pluralizedItemName="Inventories"
                   />,
-                  canAdd && addButton,
+                  ...(canAdd ? [addButton] : []),
                 ]}
               />
             )}
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
index 60092cc06c..ea5e445994 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
@@ -3,17 +3,18 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import {
   Button,
+  DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
   Tooltip,
 } from '@patternfly/react-core';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
 import { Inventory } from '@types';
 
 class InventoryListItem extends React.Component {
@@ -52,25 +53,27 @@ class InventoryListItem extends React.Component {
                   ? i18n._(t`Smart Inventory`)
                   : i18n._(t`Inventory`)}
               </DataListCell>,
-              <DataListCell key="edit" alignRight isFilled={false}>
-                {inventory.summary_fields.user_capabilities.edit && (
-                  <Tooltip content={i18n._(t`Edit Inventory`)} position="top">
-                    <Button
-                      variant="plain"
-                      component={Link}
-                      to={`/inventories/${
-                        inventory.kind === 'smart'
-                          ? 'smart_inventory'
-                          : 'inventory'
-                      }/${inventory.id}/edit`}
-                    >
-                      <PencilAltIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-              </DataListCell>,
             ]}
           />
+          <DataListAction
+            aria-label="actions"
+            aria-labelledby={labelId}
+            id={labelId}
+          >
+            {inventory.summary_fields.user_capabilities.edit && (
+              <Tooltip content={i18n._(t`Edit Inventory`)} position="top">
+                <Button
+                  variant="plain"
+                  component={Link}
+                  to={`/inventories/${
+                    inventory.kind === 'smart' ? 'smart_inventory' : 'inventory'
+                  }/${inventory.id}/edit`}
+                >
+                  <PencilAltIcon />
+                </Button>
+              </Tooltip>
+            )}
+          </DataListAction>
         </DataListItemRow>
       </DataListItem>
     );
diff --git a/awx/ui_next/src/screens/Job/JobList/JobList.test.jsx b/awx/ui_next/src/screens/Job/JobList/JobList.test.jsx
index 7379b4079a..75632f2f7b 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobList.test.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobList.test.jsx
@@ -23,6 +23,7 @@ const mockResults = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        start: true,
       },
     },
   },
@@ -34,6 +35,7 @@ const mockResults = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        start: true,
       },
     },
   },
@@ -45,6 +47,7 @@ const mockResults = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        start: true,
       },
     },
   },
@@ -56,6 +59,7 @@ const mockResults = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        start: true,
       },
     },
   },
@@ -67,6 +71,7 @@ const mockResults = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        edit: true,
       },
     },
   },
@@ -78,6 +83,7 @@ const mockResults = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        edit: true,
       },
     },
   },
diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
index fe93aa04e1..5620e446ad 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@@ -5,6 +5,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListAction,
   DataListCell,
   DataListCheck,
   DataListItem,
@@ -20,28 +21,26 @@ import { formatDateString } from '@util/dates';
 import { JOB_TYPE_URL_SEGMENTS } from '@constants';
 
 const PaddedIcon = styled(StatusIcon)`
-  margin-right: 20px;
+  margin: 6px 20px 0 0;
 `;
 
 class JobListItem extends Component {
   render() {
     const { i18n, job, isSelected, onSelect } = this.props;
+    const labelId = `check-action-${job.id}`;
 
     return (
-      <DataListItem aria-labelledby={`check-action-${job.id}`} id={`${job.id}`}>
+      <DataListItem aria-labelledby={labelId} id={`${job.id}`}>
         <DataListItemRow>
           <DataListCheck
             id={`select-job-${job.id}`}
             checked={isSelected}
             onChange={onSelect}
-            aria-labelledby={`check-action-${job.id}`}
+            aria-labelledby={labelId}
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell
-                key="name"
-                css="display: inline-flex; align-items: center;"
-              >
+              <DataListCell key="name" css="display: inline-flex;">
                 {job.status && <PaddedIcon status={job.status} />}
                 <span>
                   <Link
@@ -57,22 +56,26 @@ class JobListItem extends Component {
               <DataListCell key="finished">
                 {formatDateString(job.finished)}
               </DataListCell>,
-              <DataListCell isFilled={false} alignRight key="relaunch">
-                {job.type !== 'system_job' &&
-                  job.summary_fields.user_capabilities.start && (
-                    <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
-                      <LaunchButton resource={job}>
-                        {({ handleRelaunch }) => (
-                          <Button variant="plain" onClick={handleRelaunch}>
-                            <RocketIcon />
-                          </Button>
-                        )}
-                      </LaunchButton>
-                    </Tooltip>
-                  )}
-              </DataListCell>,
             ]}
           />
+          {job.type !== 'system_job' &&
+            job.summary_fields?.user_capabilities?.start && (
+              <DataListAction
+                aria-label="actions"
+                aria-labelledby={labelId}
+                id={labelId}
+              >
+                <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
+                  <LaunchButton resource={job}>
+                    {({ handleRelaunch }) => (
+                      <Button variant="plain" onClick={handleRelaunch}>
+                        <RocketIcon />
+                      </Button>
+                    )}
+                  </LaunchButton>
+                </Tooltip>
+              </DataListAction>
+            )}
         </DataListItemRow>
       </DataListItem>
     );
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
index 65564f5bd0..1b116e3096 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
@@ -146,9 +146,9 @@ function OrganizationsList({ i18n }) {
                     itemsToDelete={selected}
                     pluralizedItemName="Organizations"
                   />,
-                  canAdd ? (
-                    <ToolbarAddButton key="add" linkTo={addUrl} />
-                  ) : null,
+                  ...(canAdd
+                    ? [<ToolbarAddButton key="add" linkTo={addUrl} />]
+                    : []),
                 ]}
               />
             )}
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.test.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.test.jsx
index 5c7fb53966..8151033123 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.test.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.test.jsx
@@ -23,6 +23,7 @@ const mockOrganizations = {
           },
           user_capabilities: {
             delete: true,
+            edit: true,
           },
         },
       },
@@ -37,6 +38,7 @@ const mockOrganizations = {
           },
           user_capabilities: {
             delete: true,
+            edit: true,
           },
         },
       },
@@ -51,6 +53,7 @@ const mockOrganizations = {
           },
           user_capabilities: {
             delete: true,
+            edit: true,
           },
         },
       },
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
index fe99e91716..f2b1a4f8ee 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
@@ -5,36 +5,29 @@ import { t } from '@lingui/macro';
 import {
   Badge as PFBadge,
   Button,
+  DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
   Tooltip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
 import { Organization } from '@types';
 
 const Badge = styled(PFBadge)`
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  margin-left: 10px;
+  margin-left: 8px;
 `;
 
 const ListGroup = styled.span`
-  display: flex;
-  margin-left: 40px;
+  margin-left: 24px;
 
-  @media screen and (min-width: 768px) {
-    margin-left: 20px;
-
-    &:first-of-type {
-      margin-left: 0;
-    }
+  &:first-of-type {
+    margin-left: 0;
   }
 `;
 
@@ -82,21 +75,25 @@ function OrganizationListItem({
                 </Badge>
               </ListGroup>
             </DataListCell>,
-            <DataListCell key="edit" alignRight isFilled={false}>
-              {organization.summary_fields.user_capabilities.edit && (
-                <Tooltip content={i18n._(t`Edit Organization`)} position="top">
-                  <Button
-                    variant="plain"
-                    component={Link}
-                    to={`/organizations/${organization.id}/edit`}
-                  >
-                    <PencilAltIcon />
-                  </Button>
-                </Tooltip>
-              )}
-            </DataListCell>,
           ]}
         />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          {organization.summary_fields.user_capabilities.edit && (
+            <Tooltip content={i18n._(t`Edit Organization`)} position="top">
+              <Button
+                variant="plain"
+                component={Link}
+                to={`/organizations/${organization.id}/edit`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
index 1f65b7da5a..4311f17a61 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
@@ -206,9 +206,14 @@ class ProjectsList extends Component {
                       itemsToDelete={selected}
                       pluralizedItemName={i18n._(t`Projects`)}
                     />,
-                    canAdd ? (
-                      <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-                    ) : null,
+                    ...(canAdd
+                      ? [
+                          <ToolbarAddButton
+                            key="add"
+                            linkTo={`${match.url}/add`}
+                          />,
+                        ]
+                      : []),
                   ]}
                 />
               )}
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
index 993293785f..ae01789d57 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -3,6 +3,8 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import {
   Button,
+  DataListAction as _DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
   DataListItemRow,
@@ -12,14 +14,24 @@ import {
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
+import styled from 'styled-components';
 
 import ClipboardCopyButton from '@components/ClipboardCopyButton';
-import DataListCell from '@components/DataListCell';
 import ProjectSyncButton from '../shared/ProjectSyncButton';
 import { StatusIcon } from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
 import { Project } from '@types';
 
+const PaddedIcon = styled(StatusIcon)`
+  margin: 6px 20px 0 0;
+`;
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(2, 40px);
+`;
 class ProjectListItem extends React.Component {
   static propTypes = {
     project: Project.isRequired,
@@ -72,7 +84,7 @@ class ProjectListItem extends React.Component {
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell key="divider">
+              <DataListCell key="name" css="display: inline-flex">
                 {project.summary_fields.last_job && (
                   <Tooltip
                     position="top"
@@ -84,17 +96,13 @@ class ProjectListItem extends React.Component {
                     <Link
                       to={`/jobs/project/${project.summary_fields.last_job.id}`}
                     >
-                      <StatusIcon
+                      <PaddedIcon
                         status={project.summary_fields.last_job.status}
                       />
                     </Link>
                   </Tooltip>
                 )}
-                <Link
-                  id={labelId}
-                  to={`${detailUrl}`}
-                  css={{ marginLeft: '10px' }}
-                >
+                <Link id={labelId} to={`${detailUrl}`}>
                   <b>{project.name}</b>
                 </Link>
               </DataListCell>,
@@ -103,7 +111,7 @@ class ProjectListItem extends React.Component {
                   ? i18n._(t`Manual`)
                   : toTitleCase(project.scm_type)}
               </DataListCell>,
-              <DataListCell alignRight isFilled={false} key="revision">
+              <DataListCell key="revision">
                 {project.scm_revision.substring(0, 7)}
                 {project.scm_revision ? (
                   <ClipboardCopyButton
@@ -113,34 +121,41 @@ class ProjectListItem extends React.Component {
                   />
                 ) : null}
               </DataListCell>,
-              <DataListCell alignRight isFilled={false} key="sync">
-                {project.summary_fields.user_capabilities.start && (
-                  <Tooltip content={i18n._(t`Sync Project`)} position="top">
-                    <ProjectSyncButton projectId={project.id}>
-                      {handleSync => (
-                        <Button variant="plain" onClick={handleSync}>
-                          <SyncIcon />
-                        </Button>
-                      )}
-                    </ProjectSyncButton>
-                  </Tooltip>
-                )}
-              </DataListCell>,
-              <DataListCell key="edit" alignRight isFilled={false}>
-                {project.summary_fields.user_capabilities.edit && (
-                  <Tooltip content={i18n._(t`Edit Project`)} position="top">
-                    <Button
-                      variant="plain"
-                      component={Link}
-                      to={`/projects/${project.id}/edit`}
-                    >
-                      <PencilAltIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-              </DataListCell>,
             ]}
           />
+          <DataListAction
+            aria-label="actions"
+            aria-labelledby={labelId}
+            id={labelId}
+          >
+            {project.summary_fields.user_capabilities.start && (
+              <Tooltip content={i18n._(t`Sync Project`)} position="top">
+                <ProjectSyncButton projectId={project.id}>
+                  {handleSync => (
+                    <Button
+                      css="grid-column: 1"
+                      variant="plain"
+                      onClick={handleSync}
+                    >
+                      <SyncIcon />
+                    </Button>
+                  )}
+                </ProjectSyncButton>
+              </Tooltip>
+            )}
+            {project.summary_fields.user_capabilities.edit && (
+              <Tooltip content={i18n._(t`Edit Project`)} position="top">
+                <Button
+                  css="grid-column: 2"
+                  variant="plain"
+                  component={Link}
+                  to={`/projects/${project.id}/edit`}
+                >
+                  <PencilAltIcon />
+                </Button>
+              </Tooltip>
+            )}
+          </DataListAction>
         </DataListItemRow>
       </DataListItem>
     );
diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
index 91de161404..e3912890e6 100644
--- a/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
+++ b/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
@@ -193,9 +193,14 @@ class TeamsList extends Component {
                       itemsToDelete={selected}
                       pluralizedItemName={i18n._(t`Teams`)}
                     />,
-                    canAdd ? (
-                      <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-                    ) : null,
+                    ...(canAdd
+                      ? [
+                          <ToolbarAddButton
+                            key="add"
+                            linkTo={`${match.url}/add`}
+                          />,
+                        ]
+                      : []),
                   ]}
                 />
               )}
diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamList.test.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamList.test.jsx
index 2eb816a5f6..063b958a70 100644
--- a/awx/ui_next/src/screens/Team/TeamList/TeamList.test.jsx
+++ b/awx/ui_next/src/screens/Team/TeamList/TeamList.test.jsx
@@ -17,6 +17,7 @@ const mockAPITeamsList = {
         summary_fields: {
           user_capabilities: {
             delete: true,
+            edit: true,
           },
         },
       },
@@ -27,6 +28,7 @@ const mockAPITeamsList = {
         summary_fields: {
           user_capabilities: {
             delete: true,
+            edit: true,
           },
         },
       },
@@ -37,6 +39,7 @@ const mockAPITeamsList = {
         summary_fields: {
           user_capabilities: {
             delete: true,
+            edit: true,
           },
         },
       },
diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
index ff5da73316..0b1e66e9d3 100644
--- a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
+++ b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
@@ -4,16 +4,17 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
   Tooltip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
 import { Team } from '@types';
 
 class TeamListItem extends React.Component {
@@ -27,6 +28,7 @@ class TeamListItem extends React.Component {
   render() {
     const { team, isSelected, onSelect, detailUrl, i18n } = this.props;
     const labelId = `check-action-${team.id}`;
+
     return (
       <DataListItem key={team.id} aria-labelledby={labelId} id={`${team.id}`}>
         <DataListItemRow>
@@ -38,7 +40,7 @@ class TeamListItem extends React.Component {
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell key="divider">
+              <DataListCell key="name">
                 <Link id={labelId} to={`${detailUrl}`}>
                   <b>{team.name}</b>
                 </Link>
@@ -46,9 +48,7 @@ class TeamListItem extends React.Component {
               <DataListCell key="organization">
                 {team.summary_fields.organization && (
                   <Fragment>
-                    <b css={{ marginRight: '20px' }}>
-                      {i18n._(t`Organization`)}
-                    </b>
+                    <b css="margin-right: 24px">{i18n._(t`Organization`)}</b>
                     <Link
                       to={`/organizations/${team.summary_fields.organization.id}/details`}
                     >
@@ -57,21 +57,25 @@ class TeamListItem extends React.Component {
                   </Fragment>
                 )}
               </DataListCell>,
-              <DataListCell key="edit" alignRight isFilled={false}>
-                {team.summary_fields.user_capabilities.edit && (
-                  <Tooltip content={i18n._(t`Edit Team`)} position="top">
-                    <Button
-                      variant="plain"
-                      component={Link}
-                      to={`/teams/${team.id}/edit`}
-                    >
-                      <PencilAltIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-              </DataListCell>,
             ]}
           />
+          <DataListAction
+            aria-label="actions"
+            aria-labelledby={labelId}
+            id={labelId}
+          >
+            {team.summary_fields.user_capabilities.edit && (
+              <Tooltip content={i18n._(t`Edit Team`)} position="top">
+                <Button
+                  variant="plain"
+                  component={Link}
+                  to={`/teams/${team.id}/edit`}
+                >
+                  <PencilAltIcon />
+                </Button>
+              </Tooltip>
+            )}
+          </DataListAction>
         </DataListItemRow>
       </DataListItem>
     );
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index 2b2239d0fd..04f19229c2 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -121,21 +121,25 @@ function TemplateList({ i18n }) {
   const canAddWFJT =
     wfjtActions && Object.prototype.hasOwnProperty.call(wfjtActions, 'POST');
   const addButtonOptions = [];
+
   if (canAddJT) {
     addButtonOptions.push({
       label: i18n._(t`Template`),
       url: `/templates/job_template/add/`,
     });
   }
+
   if (canAddWFJT) {
     addButtonOptions.push({
       label: i18n._(t`Workflow Template`),
       url: `/templates/workflow_job_template/add/`,
     });
   }
+
   const addButton = (
     <AddDropDownButton key="add" dropdownItems={addButtonOptions} />
   );
+
   return (
     <>
       <Card>
@@ -215,7 +219,7 @@ function TemplateList({ i18n }) {
                   itemsToDelete={selected}
                   pluralizedItemName="Templates"
                 />,
-                (canAddJT || canAddWFJT) && addButton,
+                ...(canAddJT || canAddWFJT ? [addButton] : []),
               ]}
             />
           )}
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index b9c2debc50..05cc5c6439 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import {
   Button,
+  DataListAction as _DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
   DataListItemRow,
@@ -16,12 +18,20 @@ import {
   RocketIcon,
 } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
 import LaunchButton from '@components/LaunchButton';
 import { Sparkline } from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
+import styled from 'styled-components';
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(2, 40px);
+`;
 
 function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
+  const labelId = `check-action-${template.id}`;
   const canLaunch = template.summary_fields.user_capabilities.start;
 
   const missingResourceIcon =
@@ -31,16 +41,13 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
         !template.ask_inventory_on_launch));
 
   return (
-    <DataListItem
-      aria-labelledby={`check-action-${template.id}`}
-      id={`${template.id}`}
-    >
+    <DataListItem aria-labelledby={labelId} id={`${template.id}`}>
       <DataListItemRow>
         <DataListCheck
           id={`select-jobTemplate-${template.id}`}
           checked={isSelected}
           onChange={onSelect}
-          aria-labelledby={`check-action-${template.id}`}
+          aria-labelledby={labelId}
         />
         <DataListItemCells
           dataListCells={[
@@ -69,34 +76,41 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
             <DataListCell key="sparkline">
               <Sparkline jobs={template.summary_fields.recent_jobs} />
             </DataListCell>,
-            <DataListCell alignRight isFilled={false} key="launch">
-              {canLaunch && template.type === 'job_template' && (
-                <Tooltip content={i18n._(t`Launch Template`)} position="top">
-                  <LaunchButton resource={template}>
-                    {({ handleLaunch }) => (
-                      <Button variant="plain" onClick={handleLaunch}>
-                        <RocketIcon />
-                      </Button>
-                    )}
-                  </LaunchButton>
-                </Tooltip>
-              )}
-            </DataListCell>,
-            <DataListCell key="edit" alignRight isFilled={false}>
-              {template.summary_fields.user_capabilities.edit && (
-                <Tooltip content={i18n._(t`Edit Template`)} position="top">
-                  <Button
-                    variant="plain"
-                    component={Link}
-                    to={`/templates/${template.type}/${template.id}/edit`}
-                  >
-                    <PencilAltIcon />
-                  </Button>
-                </Tooltip>
-              )}
-            </DataListCell>,
           ]}
         />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          {canLaunch && template.type === 'job_template' && (
+            <Tooltip content={i18n._(t`Launch Template`)} position="top">
+              <LaunchButton resource={template}>
+                {({ handleLaunch }) => (
+                  <Button
+                    css="grid-column: 1"
+                    variant="plain"
+                    onClick={handleLaunch}
+                  >
+                    <RocketIcon />
+                  </Button>
+                )}
+              </LaunchButton>
+            </Tooltip>
+          )}
+          {template.summary_fields.user_capabilities.edit && (
+            <Tooltip content={i18n._(t`Edit Template`)} position="top">
+              <Button
+                css="grid-column: 2"
+                variant="plain"
+                component={Link}
+                to={`/templates/${template.type}/${template.id}/edit`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx
index 5cd9840b57..3b5d96b381 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx
@@ -109,7 +109,7 @@ describe('NodeModal', () => {
         wrapper.find('button#next-node-modal').simulate('click');
       });
       wrapper.update();
-      wrapper.find('DataListRadio').simulate('click');
+      wrapper.find('Radio').simulate('click');
       await act(async () => {
         wrapper.find('button#next-node-modal').simulate('click');
       });
@@ -136,7 +136,7 @@ describe('NodeModal', () => {
         wrapper.find('AnsibleSelect').prop('onChange')(null, 'project_sync');
       });
       wrapper.update();
-      wrapper.find('DataListRadio').simulate('click');
+      wrapper.find('Radio').simulate('click');
       await act(async () => {
         wrapper.find('button#next-node-modal').simulate('click');
       });
@@ -166,7 +166,7 @@ describe('NodeModal', () => {
         );
       });
       wrapper.update();
-      wrapper.find('DataListRadio').simulate('click');
+      wrapper.find('Radio').simulate('click');
       await act(async () => {
         wrapper.find('button#next-node-modal').simulate('click');
       });
@@ -193,7 +193,7 @@ describe('NodeModal', () => {
         );
       });
       wrapper.update();
-      wrapper.find('DataListRadio').simulate('click');
+      wrapper.find('Radio').simulate('click');
       await act(async () => {
         wrapper.find('button#next-node-modal').simulate('click');
       });
@@ -396,7 +396,7 @@ describe('NodeModal', () => {
         );
       });
       wrapper.update();
-      wrapper.find('DataListRadio').simulate('click');
+      wrapper.find('Radio').simulate('click');
       await act(async () => {
         wrapper.find('button#next-node-modal').simulate('click');
       });
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx
index a8a3f73fee..bd5d38f3cb 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx
@@ -7,7 +7,6 @@ import { Formik, Field } from 'formik';
 import { Form, FormGroup, TextInput } from '@patternfly/react-core';
 import FormRow from '@components/FormRow';
 import AnsibleSelect from '@components/AnsibleSelect';
-import VerticalSeperator from '@components/VerticalSeparator';
 import InventorySourcesList from './InventorySourcesList';
 import JobTemplatesList from './JobTemplatesList';
 import ProjectsList from './ProjectsList';
@@ -47,9 +46,8 @@ function NodeTypeStep({
 }) {
   return (
     <>
-      <div css=" display: flex; align-items: center; margin-bottom: 20px;">
-        <b>{i18n._(t`Node Type`)}</b>
-        <VerticalSeperator />
+      <div css="display: flex; align-items: center; margin-bottom: 20px;">
+        <b css="margin-right: 24px">{i18n._(t`Node Type`)}</b>
         <div>
           <AnsibleSelect
             id="nodeResource-select"
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.test.jsx
index c4a1306fb4..56e7f48690 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.test.jsx
@@ -94,7 +94,7 @@ describe('NodeTypeStep', () => {
     wrapper.update();
     expect(wrapper.find('AnsibleSelect').prop('value')).toBe('job_template');
     expect(wrapper.find('JobTemplatesList').length).toBe(1);
-    wrapper.find('DataListRadio').simulate('click');
+    wrapper.find('Radio').simulate('click');
     expect(onUpdateNodeResource).toHaveBeenCalledWith({
       id: 1,
       name: 'Test Job Template',
@@ -119,7 +119,7 @@ describe('NodeTypeStep', () => {
     wrapper.update();
     expect(wrapper.find('AnsibleSelect').prop('value')).toBe('project_sync');
     expect(wrapper.find('ProjectsList').length).toBe(1);
-    wrapper.find('DataListRadio').simulate('click');
+    wrapper.find('Radio').simulate('click');
     expect(onUpdateNodeResource).toHaveBeenCalledWith({
       id: 1,
       name: 'Test Project',
@@ -146,7 +146,7 @@ describe('NodeTypeStep', () => {
       'inventory_source_sync'
     );
     expect(wrapper.find('InventorySourcesList').length).toBe(1);
-    wrapper.find('DataListRadio').simulate('click');
+    wrapper.find('Radio').simulate('click');
     expect(onUpdateNodeResource).toHaveBeenCalledWith({
       id: 1,
       name: 'Test Inventory Source',
@@ -173,7 +173,7 @@ describe('NodeTypeStep', () => {
       'workflow_job_template'
     );
     expect(wrapper.find('WorkflowJobTemplatesList').length).toBe(1);
-    wrapper.find('DataListRadio').simulate('click');
+    wrapper.find('Radio').simulate('click');
     expect(onUpdateNodeResource).toHaveBeenCalledWith({
       id: 1,
       name: 'Test Workflow Job Template',
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx
index 4712c7b481..8785ba6979 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx
@@ -6,7 +6,12 @@ import {
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { func, shape } from 'prop-types';
-import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
+import {
+  Badge as PFBadge,
+  Button,
+  Title,
+  Tooltip,
+} from '@patternfly/react-core';
 import {
   BookIcon,
   CompassIcon,
@@ -15,7 +20,6 @@ import {
   TrashAltIcon,
   WrenchIcon,
 } from '@patternfly/react-icons';
-import VerticalSeparator from '@components/VerticalSeparator';
 import styled from 'styled-components';
 
 const Badge = styled(PFBadge)`
@@ -51,15 +55,12 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
   return (
     <div id="visualizer-toolbar">
       <div css="align-items: center; border-bottom: 1px solid grey; display: flex; height: 56px; padding: 0px 20px;">
-        <div css="display: flex;" id="visualizer-toolbar-template-name">
-          <b>{template.name}</b>
-        </div>
+        <Title size="xl">{template.name}</Title>
         <div css="align-items: center; display: flex; flex: 1; justify-content: flex-end">
           <div>{i18n._(t`Total Nodes`)}</div>
           <Badge id="visualizer-total-nodes-badge" isRead>
             {totalNodes}
           </Badge>
-          <VerticalSeparator />
           <Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
             <ActionButton
               id="visualizer-toggle-legend"
@@ -108,16 +109,15 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
               <TrashAltIcon />
             </ActionButton>
           </Tooltip>
-          <VerticalSeparator />
           <Button
             id="visualizer-save"
+            css="margin: 0 32px"
             aria-label={i18n._(t`Save`)}
             variant="primary"
             onClick={onSave}
           >
             {i18n._(t`Save`)}
           </Button>
-          <VerticalSeparator />
           <Button
             id="visualizer-close"
             aria-label={i18n._(t`Close`)}
diff --git a/awx/ui_next/src/screens/User/UserList/UserList.jsx b/awx/ui_next/src/screens/User/UserList/UserList.jsx
index de8801669c..3ef03c3816 100644
--- a/awx/ui_next/src/screens/User/UserList/UserList.jsx
+++ b/awx/ui_next/src/screens/User/UserList/UserList.jsx
@@ -197,9 +197,14 @@ class UsersList extends Component {
                       itemsToDelete={selected}
                       pluralizedItemName="Users"
                     />,
-                    canAdd ? (
-                      <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-                    ) : null,
+                    ...(canAdd
+                      ? [
+                          <ToolbarAddButton
+                            key="add"
+                            linkTo={`${match.url}/add`}
+                          />,
+                        ]
+                      : []),
                   ]}
                 />
               )}
diff --git a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
index 723b38bbe0..a3244895a6 100644
--- a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
@@ -4,16 +4,17 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
   Tooltip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
 import { User } from '@types';
 
 class UserListItem extends React.Component {
@@ -38,7 +39,7 @@ class UserListItem extends React.Component {
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell key="divider">
+              <DataListCell key="username">
                 <Link to={`${detailUrl}`} id={labelId}>
                   <b>{user.username}</b>
                 </Link>
@@ -46,7 +47,7 @@ class UserListItem extends React.Component {
               <DataListCell key="first-name">
                 {user.first_name && (
                   <Fragment>
-                    <b css={{ marginRight: '20px' }}>{i18n._(t`First Name`)}</b>
+                    <b css="margin-right: 24px">{i18n._(t`First Name`)}</b>
                     {user.first_name}
                   </Fragment>
                 )}
@@ -54,26 +55,30 @@ class UserListItem extends React.Component {
               <DataListCell key="last-name">
                 {user.last_name && (
                   <Fragment>
-                    <b css={{ marginRight: '20px' }}>{i18n._(t`Last Name`)}</b>
+                    <b css="margin-right: 24px">{i18n._(t`Last Name`)}</b>
                     {user.last_name}
                   </Fragment>
                 )}
               </DataListCell>,
-              <DataListCell key="edit" alignRight isFilled={false}>
-                {user.summary_fields.user_capabilities.edit && (
-                  <Tooltip content={i18n._(t`Edit User`)} position="top">
-                    <Button
-                      variant="plain"
-                      component={Link}
-                      to={`/users/${user.id}/edit`}
-                    >
-                      <PencilAltIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-              </DataListCell>,
             ]}
           />
+          <DataListAction
+            aria-label="actions"
+            aria-labelledby={labelId}
+            id={labelId}
+          >
+            {user.summary_fields.user_capabilities.edit && (
+              <Tooltip content={i18n._(t`Edit User`)} position="top">
+                <Button
+                  variant="plain"
+                  component={Link}
+                  to={`/users/${user.id}/edit`}
+                >
+                  <PencilAltIcon />
+                </Button>
+              </Tooltip>
+            )}
+          </DataListAction>
         </DataListItemRow>
       </DataListItem>
     );

From 9013dcfea7bd5f0619a8ddce620d6ca668dd58b6 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Thu, 20 Feb 2020 13:04:31 -0500
Subject: [PATCH 5/5] Move status icon into separate directory

* Remove ButtonGroup export
---
 .../CodeMirrorInput/VariablesInput.jsx          |  2 +-
 .../CodeMirrorInput/YamlJsonToggle.jsx          |  2 +-
 .../src/components/CodeMirrorInput/index.js     |  1 -
 .../PaginatedDataList/ToolbarDeleteButton.jsx   |  4 +---
 .../src/components/Sparkline/Sparkline.jsx      |  2 +-
 awx/ui_next/src/components/Sparkline/index.js   |  3 +--
 .../{Sparkline => StatusIcon}/StatusIcon.jsx    |  6 +++++-
 .../StatusIcon.test.jsx                         |  0
 awx/ui_next/src/components/StatusIcon/index.js  |  1 +
 .../Workflow/WorkflowActionTooltipItem.test.jsx |  2 +-
 .../src/screens/Host/HostDetail/HostDetail.jsx  |  3 +--
 .../src/screens/Host/HostList/HostListItem.jsx  |  2 +-
 .../InventoryHosts/InventoryHostItem.jsx        |  2 +-
 .../shared/InventoryGroupsDeleteModal.jsx       |  2 +-
 .../src/screens/Job/JobDetail/JobDetail.jsx     |  2 +-
 .../src/screens/Job/JobList/JobListItem.jsx     | 11 ++++-------
 .../screens/Job/JobOutput/HostEventModal.jsx    |  2 +-
 .../src/screens/Job/JobOutput/JobOutput.jsx     |  2 +-
 .../Job/WorkflowOutput/WorkflowOutputNode.jsx   |  2 +-
 .../WorkflowOutput/WorkflowOutputToolbar.jsx    |  2 +-
 .../Project/ProjectList/ProjectListItem.jsx     | 12 +++++-------
 .../Template/TemplateList/TemplateListItem.jsx  |  2 +-
 .../WorkflowJobTemplateDetail.jsx               | 17 ++++++++---------
 .../NodeModals/NodeTypeStep/NodeTypeStep.jsx    |  8 --------
 .../VisualizerGraph.jsx                         |  2 +-
 .../src/screens/User/shared/UserForm.jsx        |  6 +-----
 26 files changed, 41 insertions(+), 59 deletions(-)
 rename awx/ui_next/src/components/{Sparkline => StatusIcon}/StatusIcon.jsx (96%)
 rename awx/ui_next/src/components/{Sparkline => StatusIcon}/StatusIcon.test.jsx (100%)
 create mode 100644 awx/ui_next/src/components/StatusIcon/index.js

diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
index d9aae454c1..faddd2bc13 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
@@ -4,7 +4,7 @@ import { Button, Split, SplitItem } from '@patternfly/react-core';
 import styled from 'styled-components';
 import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
 import CodeMirrorInput from './CodeMirrorInput';
-import { ButtonGroup } from '.';
+import ButtonGroup from './ButtonGroup';
 import { JSON_MODE, YAML_MODE } from './constants';
 
 function formatJson(jsonString) {
diff --git a/awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx b/awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx
index 34d4d4a2ba..2cf1050085 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { oneOf, func } from 'prop-types';
 import styled from 'styled-components';
 import { Button } from '@patternfly/react-core';
-import { ButtonGroup } from '.';
+import ButtonGroup from './ButtonGroup';
 
 const SmallButton = styled(Button)`
   padding: 3px 8px;
diff --git a/awx/ui_next/src/components/CodeMirrorInput/index.js b/awx/ui_next/src/components/CodeMirrorInput/index.js
index 26ad542421..9cad016228 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/index.js
+++ b/awx/ui_next/src/components/CodeMirrorInput/index.js
@@ -4,4 +4,3 @@ export default CodeMirrorInput;
 export { default as VariablesDetail } from './VariablesDetail';
 export { default as VariablesInput } from './VariablesInput';
 export { default as VariablesField } from './VariablesField';
-export { default as ButtonGroup } from './ButtonGroup';
diff --git a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
index 4547c9df66..0bad51f112 100644
--- a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
@@ -184,9 +184,7 @@ class ToolbarDeleteButton extends React.Component {
               </Button>,
             ]}
           >
-            <div css="margin-bottom: 16px;">
-              {i18n._(t`This action will delete the following:`)}
-            </div>
+            <div>{i18n._(t`This action will delete the following:`)}</div>
             {itemsToDelete.map(item => (
               <span key={item.id}>
                 <strong>{item.name || item.username}</strong>
diff --git a/awx/ui_next/src/components/Sparkline/Sparkline.jsx b/awx/ui_next/src/components/Sparkline/Sparkline.jsx
index d0aabceb95..06ec23ae3a 100644
--- a/awx/ui_next/src/components/Sparkline/Sparkline.jsx
+++ b/awx/ui_next/src/components/Sparkline/Sparkline.jsx
@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import { arrayOf, object } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { Link as _Link } from 'react-router-dom';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import { Tooltip } from '@patternfly/react-core';
 import styled from 'styled-components';
 import { t } from '@lingui/macro';
diff --git a/awx/ui_next/src/components/Sparkline/index.js b/awx/ui_next/src/components/Sparkline/index.js
index f7b30c0d98..7477abfdcc 100644
--- a/awx/ui_next/src/components/Sparkline/index.js
+++ b/awx/ui_next/src/components/Sparkline/index.js
@@ -1,2 +1 @@
-export { default as Sparkline } from './Sparkline';
-export { default as StatusIcon } from './StatusIcon';
+export { default } from './Sparkline';
diff --git a/awx/ui_next/src/components/Sparkline/StatusIcon.jsx b/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
similarity index 96%
rename from awx/ui_next/src/components/Sparkline/StatusIcon.jsx
rename to awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
index d89d5592d4..e04a169121 100644
--- a/awx/ui_next/src/components/Sparkline/StatusIcon.jsx
+++ b/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
@@ -12,8 +12,12 @@ const Pulse = keyframes`
 `;
 
 const Wrapper = styled.div`
-  width: 14px;
+  align-items: center;
+  display: flex;
+  flex-flow: column nowrap;
   height: 14px;
+  margin: 5px 0;
+  width: 14px;
 `;
 
 const WhiteTop = styled.div`
diff --git a/awx/ui_next/src/components/Sparkline/StatusIcon.test.jsx b/awx/ui_next/src/components/StatusIcon/StatusIcon.test.jsx
similarity index 100%
rename from awx/ui_next/src/components/Sparkline/StatusIcon.test.jsx
rename to awx/ui_next/src/components/StatusIcon/StatusIcon.test.jsx
diff --git a/awx/ui_next/src/components/StatusIcon/index.js b/awx/ui_next/src/components/StatusIcon/index.js
new file mode 100644
index 0000000000..d026e41e3e
--- /dev/null
+++ b/awx/ui_next/src/components/StatusIcon/index.js
@@ -0,0 +1 @@
+export { default } from './StatusIcon';
diff --git a/awx/ui_next/src/components/Workflow/WorkflowActionTooltipItem.test.jsx b/awx/ui_next/src/components/Workflow/WorkflowActionTooltipItem.test.jsx
index ed6067a3c0..4f06a7f02f 100644
--- a/awx/ui_next/src/components/Workflow/WorkflowActionTooltipItem.test.jsx
+++ b/awx/ui_next/src/components/Workflow/WorkflowActionTooltipItem.test.jsx
@@ -4,7 +4,7 @@ import WorkflowActionTooltipItem from './WorkflowActionTooltipItem';
 
 describe('WorkflowActionTooltipItem', () => {
   test('successfully mounts', () => {
-    const wrapper = mount(<WorkflowActionTooltipItem />);
+    const wrapper = mount(<WorkflowActionTooltipItem id="node" />);
     expect(wrapper).toHaveLength(1);
   });
 });
diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
index 4682abaf26..c6c1814667 100644
--- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
+++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
@@ -9,7 +9,7 @@ import AlertModal from '@components/AlertModal';
 import ErrorDetail from '@components/ErrorDetail';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
 import { VariablesDetail } from '@components/CodeMirrorInput';
-import { Sparkline } from '@components/Sparkline';
+import Sparkline from '@components/Sparkline';
 import DeleteButton from '@components/DeleteButton';
 import { HostsAPI } from '@api';
 
@@ -107,7 +107,6 @@ function HostDetail({ host, i18n, onUpdateHost }) {
       <DetailList gutter="sm">
         <Detail label={i18n._(t`Name`)} value={name} />
         <Detail
-          css="display: flex; flex: 1;"
           value={<Sparkline jobs={recentPlaybookJobs} />}
           label={i18n._(t`Activity`)}
         />
diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
index 72f4047229..2dda211169 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
@@ -16,7 +16,7 @@ import {
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import { Sparkline } from '@components/Sparkline';
+import Sparkline from '@components/Sparkline';
 import { Host } from '@types';
 import styled from 'styled-components';
 
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
index 12e1281cb4..cf7678f0e3 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
@@ -15,7 +15,7 @@ import {
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
-import { Sparkline } from '@components/Sparkline';
+import Sparkline from '@components/Sparkline';
 import { Host } from '@types';
 import styled from 'styled-components';
 
diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx
index f17320bb1c..5ce7f635c4 100644
--- a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx
+++ b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx
@@ -60,7 +60,7 @@ const InventoryGroupsDeleteModal = ({
           return <ListItem key={group.id}>{group.name}</ListItem>;
         })}
       </div>
-      <div css="padding-left: 1px;">
+      <div>
         <Radio
           id="radio-delete"
           key="radio-delete"
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index 68907b4564..3634c73b89 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -13,7 +13,7 @@ import { VariablesInput as _VariablesInput } from '@components/CodeMirrorInput';
 import DeleteButton from '@components/DeleteButton';
 import ErrorDetail from '@components/ErrorDetail';
 import LaunchButton from '@components/LaunchButton';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import { toTitleCase } from '@util/strings';
 import { formatDateString } from '@util/dates';
 import { Job } from '@types';
diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
index 5620e446ad..30cdd1feaa 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
@@ -15,15 +14,11 @@ import {
 } from '@patternfly/react-core';
 import { RocketIcon } from '@patternfly/react-icons';
 import LaunchButton from '@components/LaunchButton';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import { toTitleCase } from '@util/strings';
 import { formatDateString } from '@util/dates';
 import { JOB_TYPE_URL_SEGMENTS } from '@constants';
 
-const PaddedIcon = styled(StatusIcon)`
-  margin: 6px 20px 0 0;
-`;
-
 class JobListItem extends Component {
   render() {
     const { i18n, job, isSelected, onSelect } = this.props;
@@ -40,8 +35,10 @@ class JobListItem extends Component {
           />
           <DataListItemCells
             dataListCells={[
+              <DataListCell key="status" isFilled={false}>
+                {job.status && <StatusIcon status={job.status} />}
+              </DataListCell>,
               <DataListCell key="name" css="display: inline-flex;">
-                {job.status && <PaddedIcon status={job.status} />}
                 <span>
                   <Link
                     to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}
diff --git a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx
index 989270325d..7ae3f50b62 100644
--- a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx
+++ b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx
@@ -4,7 +4,7 @@ import CodeMirrorInput from '@components/CodeMirrorInput';
 import ContentEmpty from '@components/ContentEmpty';
 import PropTypes from 'prop-types';
 import { DetailList, Detail } from '@components/DetailList';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
diff --git a/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx b/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
index 76aed50c36..da850b6878 100644
--- a/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
+++ b/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
@@ -16,7 +16,7 @@ import { CardBody } from '@components/Card';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
 import ErrorDetail from '@components/ErrorDetail';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 
 import JobEvent from './JobEvent';
 import JobEventSkeleton from './JobEventSkeleton';
diff --git a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx
index 8b2f841a62..a0d8fd361a 100644
--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx
@@ -5,7 +5,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import { func, shape } from 'prop-types';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import { WorkflowNodeTypeLetter } from '@components/Workflow';
 import { secondsToHHMMSS } from '@util/dates';
 import { constants as wfConstants } from '@components/Workflow/WorkflowUtils';
diff --git a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
index d5b810b64d..a2127fd800 100644
--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
@@ -8,7 +8,7 @@ import { t } from '@lingui/macro';
 import { shape } from 'prop-types';
 import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
 import { CompassIcon, WrenchIcon } from '@patternfly/react-icons';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import styled from 'styled-components';
 
 const Toolbar = styled.div`
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
index ae01789d57..b540be821a 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -18,14 +18,10 @@ import styled from 'styled-components';
 
 import ClipboardCopyButton from '@components/ClipboardCopyButton';
 import ProjectSyncButton from '../shared/ProjectSyncButton';
-import { StatusIcon } from '@components/Sparkline';
+import StatusIcon from '@components/StatusIcon';
 import { toTitleCase } from '@util/strings';
 import { Project } from '@types';
 
-const PaddedIcon = styled(StatusIcon)`
-  margin: 6px 20px 0 0;
-`;
-
 const DataListAction = styled(_DataListAction)`
   align-items: center;
   display: grid;
@@ -84,7 +80,7 @@ class ProjectListItem extends React.Component {
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell key="name" css="display: inline-flex">
+              <DataListCell key="status" isFilled={false}>
                 {project.summary_fields.last_job && (
                   <Tooltip
                     position="top"
@@ -96,12 +92,14 @@ class ProjectListItem extends React.Component {
                     <Link
                       to={`/jobs/project/${project.summary_fields.last_job.id}`}
                     >
-                      <PaddedIcon
+                      <StatusIcon
                         status={project.summary_fields.last_job.status}
                       />
                     </Link>
                   </Tooltip>
                 )}
+              </DataListCell>,
+              <DataListCell key="name">
                 <Link id={labelId} to={`${detailUrl}`}>
                   <b>{project.name}</b>
                 </Link>
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index 05cc5c6439..b13eb92298 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -19,7 +19,7 @@ import {
 } from '@patternfly/react-icons';
 
 import LaunchButton from '@components/LaunchButton';
-import { Sparkline } from '@components/Sparkline';
+import Sparkline from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
 import styled from 'styled-components';
 
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
index e68dbb3e17..f97ed439fe 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import { WorkflowJobTemplatesAPI } from '@api';
 import {
   Chip,
   ChipGroup,
@@ -13,17 +14,16 @@ import {
   Label,
 } from '@patternfly/react-core';
 
-import { CardBody, CardActionsRow } from '@components/Card';
-import ContentLoading from '@components/ContentLoading';
-import { WorkflowJobTemplatesAPI } from '@api';
 import AlertModal from '@components/AlertModal';
-import ErrorDetail from '@components/ErrorDetail';
-import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
+import { CardBody, CardActionsRow } from '@components/Card';
 import { VariablesDetail } from '@components/CodeMirrorInput';
-import LaunchButton from '@components/LaunchButton';
+import ContentLoading from '@components/ContentLoading';
 import DeleteButton from '@components/DeleteButton';
+import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
+import ErrorDetail from '@components/ErrorDetail';
+import LaunchButton from '@components/LaunchButton';
+import Sparkline from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
-import { Sparkline } from '@components/Sparkline';
 
 function WorkflowJobTemplateDetail({ template, i18n, webHookKey }) {
   const {
@@ -104,7 +104,6 @@ function WorkflowJobTemplateDetail({ template, i18n, webHookKey }) {
         <Detail label={i18n._(t`Description`)} value={description} />
         {summary_fields.recent_jobs?.length > 0 && (
           <Detail
-            css="display: flex; flex: 1;"
             value={<Sparkline jobs={recentPlaybookJobs} />}
             label={i18n._(t`Activity`)}
           />
@@ -223,7 +222,7 @@ function WorkflowJobTemplateDetail({ template, i18n, webHookKey }) {
       {deletionError && (
         <AlertModal
           isOpen={deletionError}
-          variant="danger"
+          variant="error"
           title={i18n._(t`Error!`)}
           onClose={() => setDeletionError(null)}
         >
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx
index bd5d38f3cb..706207d046 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx
@@ -12,13 +12,6 @@ import JobTemplatesList from './JobTemplatesList';
 import ProjectsList from './ProjectsList';
 import WorkflowJobTemplatesList from './WorkflowJobTemplatesList';
 
-const Divider = styled.div`
-  height: 1px;
-  background-color: var(--pf-global--Color--light-300);
-  border: 0;
-  flex-shrink: 0;
-`;
-
 const TimeoutInput = styled(TextInput)`
   width: 200px;
   :not(:first-of-type) {
@@ -91,7 +84,6 @@ function NodeTypeStep({
           />
         </div>
       </div>
-      <Divider component="div" />
       {nodeType === 'job_template' && (
         <JobTemplatesList
           nodeResource={nodeResource}
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerGraph.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerGraph.jsx
index 0a8238455b..bf65330702 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerGraph.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerGraph.jsx
@@ -234,7 +234,7 @@ function VisualizerGraph({ i18n, readOnly }) {
           {linkHelp && <WorkflowLinkHelp link={linkHelp} />}
         </WorkflowHelp>
       )}
-      <WorkflowSVG id="workflow-svg" ref={svgRef} css="">
+      <WorkflowSVG id="workflow-svg" ref={svgRef}>
         <defs>
           <marker
             className="WorkflowChart-noPointerEvents"
diff --git a/awx/ui_next/src/screens/User/shared/UserForm.jsx b/awx/ui_next/src/screens/User/shared/UserForm.jsx
index 9c1f2d7138..d74b31b583 100644
--- a/awx/ui_next/src/screens/User/shared/UserForm.jsx
+++ b/awx/ui_next/src/screens/User/shared/UserForm.jsx
@@ -80,11 +80,7 @@ function UserForm({ user, handleCancel, handleSubmit, submitError, i18n }) {
       onSubmit={handleValidateAndSubmit}
     >
       {formik => (
-        <Form
-          autoComplete="off"
-          onSubmit={formik.handleSubmit}
-          css="padding: 0 24px"
-        >
+        <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormRow>
             <FormField
               id="user-username"