Fleet UI: Live query icons bugs (#8568)

changes/issue-8449-clean-icons-selecting-targets-page

@@ -0,0 +1 @@
+* Select targets pages implements cleaner icons

frontend/components/LiveQuery/SelectTargets.tsx

@@ -29,8 +29,7 @@ import TargetsInput from "components/LiveQuery/TargetsInput";
 import Button from "components/buttons/Button";
 import Spinner from "components/Spinner";
 import TooltipWrapper from "components/TooltipWrapper";
-import PlusIcon from "../../../assets/images/icon-plus-purple-32x32@2x.png";
-import CheckIcon from "../../../assets/images/icon-check-purple-32x32@2x.png";
+import Icon from "components/Icon";
 
 interface ITargetPillSelectorProps {
   entity: ISelectLabel | ISelectTeam;
@@ -108,11 +107,7 @@ const TargetPillSelector = ({
       data-selected={isSelected}
       onClick={(e) => onClick(entity)(e)}
     >
-      <img
-        className={isSelected ? "check-icon" : "plus-icon"}
-        alt=""
-        src={isSelected ? CheckIcon : PlusIcon}
-      />
+      <Icon name={isSelected ? "check" : "plus"} />
       <span className="selector-name">{displayText()}</span>
       {/* <span className="selector-count">{entity.count}</span> */}
     </button>

frontend/components/forms/fields/InputFieldWithIcon/_styles.scss

@@ -39,7 +39,8 @@
       color: $core-fleet-blue;
     }
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       border: 1px solid $core-vibrant-blue;
     }
 
@@ -105,4 +106,24 @@
       font-weight: 700;
     }
   }
+
+  /* removes the 'X' from IE input type=search */
+  input[type="search"]::-ms-clear {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+  input[type="search"]::-ms-reveal {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  /* removes the 'X' from Chrome input type=search */
+  input[type="search"]::-webkit-search-decoration,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-results-button,
+  input[type="search"]::-webkit-search-results-decoration {
+    display: none;
+  }
 }

frontend/components/icons/Check.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface ICheckProps {
+  color?: string;
+}
+
+const Check = ({ color = "#6a67fe" }: ICheckProps) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <g clipPath="url(#a)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.917 8.684c-.02 0-.042 0-.083.02a1.035 1.035 0 0 1-.23-.083c.063-.041.167-.021.313.063Zm10.56-5.603c-.543-.292-1.147.27-1.5.604-.812.791-1.5 1.708-2.27 2.54-.855.917-1.646 1.834-2.52 2.73-.5.5-1.042 1.04-1.375 1.666-.75-.73-1.396-1.52-2.228-2.166C2.98 7.996 1.98 7.663 2 8.767c.042 1.437 1.313 2.978 2.25 3.957.395.417.916.854 1.52.874.73.042 1.479-.833 1.916-1.312.77-.832 1.396-1.77 2.104-2.623.916-1.125 1.854-2.23 2.748-3.374.563-.709 2.333-2.458.938-3.208Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h16v16H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default Check;

frontend/components/icons/Plus.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IPlusProps {
+  color?: string;
+}
+
+const Plus = ({ color = "#6a67fe" }: IPlusProps) => {
+  return (
+    <svg
+      width="16"
+      height="12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.01 2.722a1.01 1.01 0 0 0-2.02 0v3.924H3.064a1.01 1.01 0 1 0 0 2.021H6.99v3.925a1.01 1.01 0 0 0 2.022 0V8.667h3.924a1.01 1.01 0 0 0 0-2.02H9.01V2.721Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default Plus;

frontend/components/icons/index.ts

@@ -9,11 +9,15 @@ import ApplePurple from "./ApplePurple";
 import LinuxGreen from "./LinuxGreen";
 import WindowsBlue from "./WindowsBlue";
 import ExternalLink from "./ExternalLink";
+import Check from "./Check";
+import Plus from "./Plus";
 
 // a mapping of the usable names of icons to the icon source.
 export const ICON_MAP = {
   "calendar-check": CalendarCheck,
   chevron: Chevron,
+  check: Check,
+  plus: Plus,
   darwin: Apple,
   macOS: Apple,
   windows: Windows,