Convert toolbar button components to styled-components.

src/components/PaginatedDataList/ToolbarAddButton.jsx

@@ -1,10 +1,24 @@
 import React from 'react';
 import { string, func } from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Button } from '@patternfly/react-core';
+import { Button as PFButton } from '@patternfly/react-core';
 import { PlusIcon } from '@patternfly/react-icons';
 import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import styled from 'styled-components';
+
+const Button = styled(PFButton)`
+  &&& { /* higher specificity order */
+    background-color: #5cb85c;
+    min-width: 0;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    margin-right: 20px;
+  }
+`;
 
 function ToolbarAddButton ({ linkTo, onClick }) {
   if (!linkTo && !onClick) {
@@ -15,7 +29,7 @@ function ToolbarAddButton ({ linkTo, onClick }) {
     return (
       <I18n>
         {({ i18n }) => (
-          <Link to={linkTo} className="pf-c-button pf-m-primary">
+          <Link to={linkTo}>
             <Button
               variant="primary"
               aria-label={i18n._(t`Add`)}

src/components/PaginatedDataList/ToolbarDeleteButton.jsx

@@ -1,12 +1,41 @@
 import React, { Fragment } from 'react';
 import { func, bool, number, string, arrayOf, shape } from 'prop-types';
-import { Button, Tooltip } from '@patternfly/react-core';
+import { Button as PFButton, Tooltip } from '@patternfly/react-core';
 import { TrashAltIcon } from '@patternfly/react-icons';
 import { I18n, i18nMark } from '@lingui/react';
 import { Trans, t } from '@lingui/macro';
+import styled from 'styled-components';
 import AlertModal from '../AlertModal';
 import { pluralize } from '../../util/strings';
 
+const Button = styled(PFButton)`
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  margin-right: 20px;
+  border-radius: 3px;
+
+
+  &:disabled {
+    cursor: not-allowed;
+    &:hover {
+      background-color: white;
+
+      > svg {
+        color: #d2d2d2;
+      }
+    }
+  }
+
+  &:hover {
+    background-color:#d9534f;
+    > svg {
+      color: white;
+    }
+  }
+`;
+
 const ItemToDelete = shape({
   id: number.isRequired,
   name: string.isRequired,
@@ -102,13 +131,12 @@ class ToolbarDeleteButton extends React.Component {
               position="left"
             >
               <Button
-                className="awx-ToolBarBtn"
                 variant="plain"
                 aria-label={i18n._(t`Delete`)}
                 onClick={this.handleConfirmDelete}
                 isDisabled={isDisabled}
               >
-                <TrashAltIcon className="awx-ToolBarTrashCanIcon" />
+                <TrashAltIcon />
               </Button>
             </Tooltip>
             { isModalOpen && (