From 0ea4a4dedd169a812136c54a0aadd716d17f9afc Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Fri, 10 May 2019 12:27:19 -0400
Subject: [PATCH] Convert toolbar button components to styled-components.

---
 .../DataListToolbar/DataListToolbar.jsx       |  2 +-
 src/components/DataListToolbar/styles.scss    | 74 +++++++++----------
 .../PaginatedDataList/ToolbarAddButton.jsx    | 18 ++++-
 .../PaginatedDataList/ToolbarDeleteButton.jsx | 34 ++++++++-
 4 files changed, 85 insertions(+), 43 deletions(-)

diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx
index 4616370f76..74f57e1fd6 100644
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/src/components/DataListToolbar/DataListToolbar.jsx
@@ -96,7 +96,7 @@ class DataListToolbar extends React.Component {
                   )}
                 </Toolbar>
               </LevelItem>
-              <LevelItem>
+              <LevelItem css="display: flex;">
                 {additionalControls}
               </LevelItem>
             </Level>
diff --git a/src/components/DataListToolbar/styles.scss b/src/components/DataListToolbar/styles.scss
index 8909439caa..721855f930 100644
--- a/src/components/DataListToolbar/styles.scss
+++ b/src/components/DataListToolbar/styles.scss
@@ -66,49 +66,49 @@
   margin-left: 20px;
 }
 
-.awx-toolbar .pf-c-button.pf-m-primary {
-  background-color: #5cb85c;
-  min-width: 0px;
-  width: 30px;
-  height: 30px;
-  text-align: center;
-  padding: 0px;
-  margin: 0px;
-  margin-right: 20px;
-}
+// .awx-toolbar .pf-c-button.pf-m-primary {
+//   background-color: #5cb85c;
+//   min-width: 0px;
+//   width: 30px;
+//   height: 30px;
+//   text-align: center;
+//   padding: 0px;
+//   margin: 0px;
+//   margin-right: 20px;
+// }
 
 .awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {
   font-size: 18px;
 }
 
-.awx-ToolBarBtn {
-  width: 30px;
-  display: flex;
-  justify-content: center;
-  margin-right: 20px;
-  border-radius: 3px;
+// .awx-ToolBarBtn {
+//   width: 30px;
+//   display: flex;
+//   justify-content: center;
+//   margin-right: 20px;
+//   border-radius: 3px;
 
-  &[disabled] {
-    cursor: not-allowed;
-  }
-}
+//   &[disabled] {
+//     cursor: not-allowed;
+//   }
+// }
 
-.awx-ToolBarBtn:hover {
-  .awx-ToolBarTrashCanIcon {
-    color: white;
-  }
-  background-color:#d9534f;
-}
+// .awx-ToolBarBtn:hover {
+//   .awx-ToolBarTrashCanIcon {
+//     color: white;
+//   }
+//   background-color:#d9534f;
+// }
 
-.awx-ToolBarBtn[disabled]:hover {
-  .awx-ToolBarTrashCanIcon {
-    color: #d2d2d2;
-  }
-  background-color: white;
-}
+// .awx-ToolBarBtn[disabled]:hover {
+//   .awx-ToolBarTrashCanIcon {
+//     color: #d2d2d2;
+//   }
+//   background-color: white;
+// }
 
-.pf-l-toolbar > div {
-  &:last-child{
-    display:none;
-  }
-}
+// .pf-l-toolbar > div {
+//   &:last-child{
+//     display:none;
+//   }
+// }
diff --git a/src/components/PaginatedDataList/ToolbarAddButton.jsx b/src/components/PaginatedDataList/ToolbarAddButton.jsx
index 72c5ba1398..ae6b7e0c74 100644
--- a/src/components/PaginatedDataList/ToolbarAddButton.jsx
+++ b/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`)}
diff --git a/src/components/PaginatedDataList/ToolbarDeleteButton.jsx b/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
index 7c54057f70..49600c19e9 100644
--- a/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
+++ b/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 && (