Fleet UI: Update icons (x in flash message and selected targets dropdown) (#12992)

frontend/components/FlashMessage/FlashMessage.tsx

@@ -6,9 +6,6 @@ import { INotification } from "interfaces/notification";
 import Icon from "components/Icon/Icon";
 import Button from "components/buttons/Button";
 
-import CloseIcon from "../../../assets/images/icon-close-white-16x16@2x.png";
-import CloseIconBlack from "../../../assets/images/icon-close-fleet-black-16x16@2x.png";
-
 const baseClass = "flash-message";
 
 export interface IFlashMessage {
@@ -91,9 +88,13 @@ const FlashMessage = ({
             className={`${baseClass}__remove ${baseClass}__remove--${alertType} button--unstyled`}
             onClick={onRemoveFlash}
           >
-            <img
-              src={alertType === "warning-filled" ? CloseIconBlack : CloseIcon}
-              alt="close icon"
+            <Icon
+              name="ex"
+              color={
+                alertType === "warning-filled"
+                  ? "core-fleet-black"
+                  : "core-fleet-white"
+              }
             />
           </button>
         </div>

frontend/components/FlashMessage/_styles.scss

@@ -28,23 +28,14 @@
 
   &--success {
     background-color: $ui-success;
-    .fleeticon {
-      color: $core-white;
-    }
   }
 
   &--error {
     background-color: $ui-error;
-    .fleeticon {
-      color: $core-white;
-    }
   }
 
   &--warning-filled {
     background-color: $ui-warning;
-    .fleeticon {
-      color: $core-fleet-black;
-    }
 
     span {
       margin-left: 15px;
@@ -106,11 +97,6 @@
     button {
       display: flex;
       align-items: center;
-
-      img {
-        height: 16px;
-        width: 16px;
-      }
     }
   }
 }

frontend/components/LiveQuery/TargetsInput/TargetsInputHostsTableConfig.tsx

@@ -9,7 +9,7 @@ import { IHost } from "interfaces/host";
 import TextCell from "components/TableContainer/DataTable/TextCell";
 import LiveQueryIssueCell from "components/TableContainer/DataTable/LiveQueryIssueCell/LiveQueryIssueCell";
 import StatusIndicator from "components/StatusIndicator";
-import RemoveIcon from "../../../../assets/images/icon-action-remove-20x20@2x.png";
+import Icon from "components/Icon/Icon";
 
 interface ICellProps {
   cell: {
@@ -32,7 +32,7 @@ export const generateTableHeaders = (
           Header: "",
           Cell: (cellProps: { row: Row }): JSX.Element => (
             <div onClick={() => handleRowRemove(cellProps.row)}>
-              <img alt="Remove" src={RemoveIcon} />
+              <Icon name="ex-circled" />
             </div>
           ),
           disableHidden: true,

frontend/components/icons/ExCircled.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";
+
+interface IExCircledProps {
+  color?: Colors;
+  size?: IconSizes;
+}
+
+const ExCircled = ({
+  size = "medium",
+  color = "core-fleet-blue",
+}: IExCircledProps) => {
+  return (
+    <svg
+      width={ICON_SIZES[size]}
+      height={ICON_SIZES[size]}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        xmlns="http://www.w3.org/2000/svg"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646Z"
+        fill={COLORS[color]}
+      />
+    </svg>
+  );
+};
+
+export default ExCircled;

frontend/components/icons/index.ts

@@ -9,6 +9,7 @@ import CriticalPolicy from "./CriticalPolicy";
 import Disable from "./Disable";
 import DownCaret from "./DownCaret";
 import Ex from "./Ex";
+import ExCircled from "./ExCircled";
 import EmptyHosts from "./EmptyHosts";
 import EmptyIntegrations from "./EmptyIntegrations";
 import EmptyMembers from "./EmptyMembers";
@@ -83,6 +84,7 @@ export const ICON_MAP = {
   disable: Disable,
   "down-caret": DownCaret,
   ex: Ex,
+  "ex-circled": ExCircled,
   "empty-hosts": EmptyHosts,
   "empty-integrations": EmptyIntegrations,
   "empty-members": EmptyMembers,