From cf0baa7ab042d3ad094ca314c3115a656a454d56 Mon Sep 17 00:00:00 2001
From: gillespi314 <73313222+gillespi314@users.noreply.github.com>
Date: Wed, 27 Oct 2021 12:15:13 -0500
Subject: [PATCH] Restyle button for policy filter & software filter (#2679)

---
 changes/issue-2638-restyle-button             |  2 +
 .../hosts/ManageHostsPage/ManageHostsPage.tsx | 89 +++++++++----------
 .../pages/hosts/ManageHostsPage/_styles.scss  | 52 +++++++----
 3 files changed, 83 insertions(+), 60 deletions(-)
 create mode 100644 changes/issue-2638-restyle-button

diff --git a/changes/issue-2638-restyle-button b/changes/issue-2638-restyle-button
new file mode 100644
index 0000000000..f2193364c2
--- /dev/null
+++ b/changes/issue-2638-restyle-button
@@ -0,0 +1,2 @@
+* Restyle UI for filter-by-software and filter-by-policy buttons on manage hosts page to localize
+clear filter click to "x" icon
\ No newline at end of file
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
index 111154eadb..63d1795e85 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
@@ -77,7 +77,7 @@ import AddHostModal from "./components/AddHostModal";
 import EditColumnsIcon from "../../../../assets/images/icon-edit-columns-16x16@2x.png";
 import PencilIcon from "../../../../assets/images/icon-pencil-14x14@2x.png";
 import TrashIcon from "../../../../assets/images/icon-trash-14x14@2x.png";
-import CloseIcon from "../../../../assets/images/icon-action-close-16x15@2x.png";
+import CloseIcon from "../../../../assets/images/icon-close-vibrant-blue-16x16@2x.png";
 import PolicyIcon from "../../../../assets/images/icon-policy-fleet-black-12x12@2x.png";
 
 interface IManageHostsProps {
@@ -902,27 +902,24 @@ const ManageHostsPage = ({
   );
 
   const renderPoliciesFilterBlock = () => {
-    const buttonText = (
-      <>
-        <img src={PolicyIcon} alt="Policy" />
-        {policy?.query_name}
-        <img src={CloseIcon} alt="Remove policy filter" />
-      </>
-    );
     return (
       <div className={`${baseClass}__policies-filter-block`}>
         <PoliciesFilter
           policyResponse={policyResponse}
           onChange={handleChangePoliciesFilter}
         />
-        <Button
-          className={`${baseClass}__clear-policies-filter`}
-          onClick={handleClearPoliciesFilter}
-          variant={"small-text-icon"}
-          title={policy?.query_name}
-        >
-          {buttonText}
-        </Button>
+        <div className={`${baseClass}__policies-filter-name-card`}>
+          <img src={PolicyIcon} alt="Policy" />
+          {policy?.query_name}
+          <Button
+            className={`${baseClass}__clear-policies-filter`}
+            onClick={handleClearPoliciesFilter}
+            variant={"small-text-icon"}
+            title={policy?.query_name}
+          >
+            <img src={CloseIcon} alt="Remove policy filter" />
+          </Button>
+        </div>
       </div>
     );
   };
@@ -933,37 +930,39 @@ const ManageHostsPage = ({
       const buttonText = name && version ? `${name} ${version}` : "";
       return (
         <div className={`${baseClass}__software-filter-block`}>
-          <Button
-            className={`${baseClass}__clear-software-filter`}
-            onClick={handleClearSoftwareFilter}
-            variant={"small-text-icon"}
-            title={name}
-          >
-            <span className="software-filter-button">
-              <span
-                className="software-filter-tooltip"
-                data-tip
-                data-for="software-filter-tooltip"
-                data-tip-disable={!name || !version}
-              >
+          <div>
+            <span
+              className="software-filter-tooltip"
+              data-tip
+              data-for="software-filter-tooltip"
+              data-tip-disable={!name || !version}
+            >
+              <div className={`${baseClass}__software-filter-name-card`}>
                 {buttonText}
-                <img src={CloseIcon} alt="Remove software filter" />
-              </span>
-              <ReactTooltip
-                place="bottom"
-                type="dark"
-                effect="solid"
-                backgroundColor="#3e4771"
-                id="software-filter-tooltip"
-                data-html
-              >
-                <span className={`tooltip__tooltip-text`}>
-                  {`Hosts with ${name}`},<br />
-                  {`${version} installed`}
-                </span>
-              </ReactTooltip>
+                <Button
+                  className={`${baseClass}__clear-policies-filter`}
+                  onClick={handleClearSoftwareFilter}
+                  variant={"small-text-icon"}
+                  title={buttonText}
+                >
+                  <img src={CloseIcon} alt="Remove policy filter" />
+                </Button>
+              </div>
             </span>
-          </Button>
+            <ReactTooltip
+              place="bottom"
+              type="dark"
+              effect="solid"
+              backgroundColor="#3e4771"
+              id="software-filter-tooltip"
+              data-html
+            >
+              <span className={`tooltip__tooltip-text`}>
+                {`Hosts with ${name}`},<br />
+                {`${version} installed`}
+              </span>
+            </ReactTooltip>
+          </div>
         </div>
       );
     }
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index 6ed942bec8..35c0822ad7 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@@ -172,26 +172,48 @@
     }
   }
 
+  &__policies-filter-name-card,
+  &__software-filter-name-card {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px;
+    border: 1px solid $ui-fleet-black-25;
+    border-radius: 4px;
+    box-shadow: none;
+    margin-left: $pad-medium;
+    color: $core-fleet-black;
+    font-size: $xx-small;
+    font-weight: $bold;
+    cursor: default;
+
+    img {
+      width: 12px;
+      height: 12px;
+      margin-right: 6px;
+    }
+
+    button {
+      height: auto;
+      padding: 0px;
+      border: none;
+      margin-left: $pad-small;
+
+      img {
+        padding: 0px;
+        margin: 0px;
+      }
+    }
+  }
+
+  &__software-filter-name-card {
+    margin-left: 0px;
+  }
+
   &__enroll-hosts {
     padding: $pad-small;
     margin-right: $pad-small;
   }
 
-  &__software-filter-block {
-    .button--small-text-icon {
-      margin-left: 0;
-      padding-left: 12px;
-    }
-    .software-filter-button {
-      display: inline-flex;
-      align-items: center;
-    }
-    .software-filter-tooltip {
-      display: inline-flex;
-      align-items: center;
-    }
-  }
-
   .issues__header,
   .host-issue {
     img {