diff --git a/assets/images/icon-action-disable-red-16x16@2x.png b/assets/images/icon-action-disable-red-16x16@2x.png deleted file mode 100644 index b04f85540e..0000000000 Binary files a/assets/images/icon-action-disable-red-16x16@2x.png and /dev/null differ diff --git a/assets/images/icon-action-fail-16x16@2x.png b/assets/images/icon-action-fail-16x16@2x.png deleted file mode 100644 index ce903197b6..0000000000 Binary files a/assets/images/icon-action-fail-16x16@2x.png and /dev/null differ diff --git a/assets/images/icon-check-circle-green-16x16@2x.png b/assets/images/icon-check-circle-green-16x16@2x.png deleted file mode 100644 index e9ce962427..0000000000 Binary files a/assets/images/icon-check-circle-green-16x16@2x.png and /dev/null differ diff --git a/assets/images/icon-error-16x16@2x.png b/assets/images/icon-error-16x16@2x.png deleted file mode 100644 index 5928b20805..0000000000 Binary files a/assets/images/icon-error-16x16@2x.png and /dev/null differ diff --git a/assets/images/icon-error-white-16x16@2x.png b/assets/images/icon-error-white-16x16@2x.png deleted file mode 100644 index ee72f44bf0..0000000000 Binary files a/assets/images/icon-error-white-16x16@2x.png and /dev/null differ diff --git a/assets/images/icon-exclamation-circle-red-16x16@2x.png b/assets/images/icon-exclamation-circle-red-16x16@2x.png deleted file mode 100644 index 65bdfdd886..0000000000 Binary files a/assets/images/icon-exclamation-circle-red-16x16@2x.png and /dev/null differ diff --git a/assets/images/icon-hosts-2-20x20@2x.png b/assets/images/icon-hosts-2-20x20@2x.png deleted file mode 100644 index 03e26a7160..0000000000 Binary files a/assets/images/icon-hosts-2-20x20@2x.png and /dev/null differ diff --git a/assets/images/icon-hosts-3-20x20@2x.png b/assets/images/icon-hosts-3-20x20@2x.png deleted file mode 100644 index c58c855b36..0000000000 Binary files a/assets/images/icon-hosts-3-20x20@2x.png and /dev/null differ diff --git a/assets/images/icon-mia-20x20@2x.png b/assets/images/icon-mia-20x20@2x.png deleted file mode 100644 index 422840908d..0000000000 Binary files a/assets/images/icon-mia-20x20@2x.png and /dev/null differ diff --git a/assets/images/icon-refetch-12x12@2x.png b/assets/images/icon-refetch-12x12@2x.png deleted file mode 100644 index 960ea80732..0000000000 Binary files a/assets/images/icon-refetch-12x12@2x.png and /dev/null differ diff --git a/assets/images/icon-refetch-36x36@2x.png b/assets/images/icon-refetch-36x36@2x.png deleted file mode 100644 index 185a15aa21..0000000000 Binary files a/assets/images/icon-refetch-36x36@2x.png and /dev/null differ diff --git a/assets/images/icon-refetch-white-12x12@2x.png b/assets/images/icon-refetch-white-12x12@2x.png deleted file mode 100644 index b777f9e49c..0000000000 Binary files a/assets/images/icon-refetch-white-12x12@2x.png and /dev/null differ diff --git a/changes/8962-update-icons b/changes/8962-update-icons new file mode 100644 index 0000000000..509061c962 --- /dev/null +++ b/changes/8962-update-icons @@ -0,0 +1 @@ +- Cleaner icons diff --git a/frontend/components/DeviceUserError/DeviceUserError.tsx b/frontend/components/DeviceUserError/DeviceUserError.tsx index a204d2b7d7..a3c9d0fe09 100644 --- a/frontend/components/DeviceUserError/DeviceUserError.tsx +++ b/frontend/components/DeviceUserError/DeviceUserError.tsx @@ -1,6 +1,6 @@ import React from "react"; -import ErrorIcon from "../../../assets/images/icon-error-16x16@2x.png"; +import Icon from "components/Icon/Icon"; const baseClass = "device-user-error"; @@ -10,7 +10,7 @@ const DeviceUserError = (): JSX.Element => {
- error icon + This URL is invalid or expired. diff --git a/frontend/components/DeviceUserError/_styles.scss b/frontend/components/DeviceUserError/_styles.scss index a8ddefafd3..2cd30a1901 100644 --- a/frontend/components/DeviceUserError/_styles.scss +++ b/frontend/components/DeviceUserError/_styles.scss @@ -3,13 +3,6 @@ flex-direction: column; align-items: center; - #error-icon { - height: 12px; - width: 12px; - margin-right: 8px; - margin-bottom: -1px; - } - &__inner { display: flex; flex-direction: row; @@ -23,6 +16,13 @@ font-weight: $bold; font-size: $x-small; text-align: center; + + .icon { + vertical-align: sub; + margin-right: $pad-small; + position: relative; + bottom: 1px; + } } &__data { display: block; diff --git a/frontend/components/FlashMessage/FlashMessage.tsx b/frontend/components/FlashMessage/FlashMessage.tsx index a81a3603e4..85ee9f6ee2 100644 --- a/frontend/components/FlashMessage/FlashMessage.tsx +++ b/frontend/components/FlashMessage/FlashMessage.tsx @@ -3,12 +3,11 @@ import classnames from "classnames"; import { INotification } from "interfaces/notification"; // @ts-ignore -import FleetIcon from "components/icons/FleetIcon"; +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"; -import ErrorIcon from "../../../assets/images/icon-error-white-16x16@2x.png"; const baseClass = "flash-message"; @@ -71,11 +70,10 @@ const FlashMessage = ({ return (
- {alertType === "success" ? ( - - ) : ( - error icon - )} + {message} {onUndoActionClick && undoAction && ( diff --git a/frontend/components/icons/Arrow.tsx b/frontend/components/icons/Arrow.tsx new file mode 100644 index 0000000000..b456dc69c7 --- /dev/null +++ b/frontend/components/icons/Arrow.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { COLORS, Colors } from "styles/var/colors"; + +interface IArrowProps { + color?: Colors; +} + +const Arrow = ({ color = "core-fleet-blue" }: IArrowProps) => { + return ( + + + + ); +}; + +export default Arrow; diff --git a/frontend/components/icons/ArrowInternalLink.tsx b/frontend/components/icons/ArrowInternalLink.tsx new file mode 100644 index 0000000000..fa993fa497 --- /dev/null +++ b/frontend/components/icons/ArrowInternalLink.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +const ArrowInternalLink = () => { + return ( + + + + + ); +}; + +export default ArrowInternalLink; diff --git a/frontend/components/icons/Chevron.tsx b/frontend/components/icons/Chevron.tsx index b769138da7..d5e17a7a8e 100644 --- a/frontend/components/icons/Chevron.tsx +++ b/frontend/components/icons/Chevron.tsx @@ -8,14 +8,10 @@ interface IChevronProps { } const SVG_PATH = { - up: - "M7.749 5.109 3.605 9.406a.385.385 0 0 0 0 .528l.927.957c.14.145.363.145.502 0L8 7.811l2.966 3.08c.14.145.363.145.502 0l.927-.957a.385.385 0 0 0 0-.528L8.251 5.11a.345.345 0 0 0-.502 0Z", - down: - "m8.751 10.891 4.144-4.297a.385.385 0 0 0 0-.528l-.927-.957a.345.345 0 0 0-.502 0L8.5 8.189l-2.966-3.08a.345.345 0 0 0-.502 0l-.927.957a.385.385 0 0 0 0 .528l4.144 4.297c.14.145.363.145.502 0Z", - left: - "m5.109 8.251 4.297 4.144c.145.14.383.14.528 0l.957-.927a.345.345 0 0 0 0-.502L7.811 8l3.08-2.966a.345.345 0 0 0 0-.502l-.957-.927a.385.385 0 0 0-.528 0L5.11 7.749a.345.345 0 0 0 0 .502Z", - right: - "M10.891 7.749 6.594 3.605a.385.385 0 0 0-.528 0l-.957.927a.345.345 0 0 0 0 .502L8.189 8l-3.08 2.966a.345.345 0 0 0 0 .502l.957.927c.145.14.383.14.528 0l4.297-4.144a.345.345 0 0 0 0-.502Z", + up: "M4 10L8 6L12 10", + down: "m4 6 4 4 4-4", + left: "M10 12L6 8L10 4", + right: "M6 4L10 8L6 12", }; const Chevron = ({ @@ -26,15 +22,16 @@ const Chevron = ({ ); diff --git a/frontend/components/icons/Error.tsx b/frontend/components/icons/Error.tsx index f7d4b756cd..bb926dbc23 100644 --- a/frontend/components/icons/Error.tsx +++ b/frontend/components/icons/Error.tsx @@ -11,14 +11,14 @@ const Error = ({ color = "status-error" }: IErrorProps) => { diff --git a/frontend/components/icons/ErrorOutline.tsx b/frontend/components/icons/ErrorOutline.tsx new file mode 100644 index 0000000000..31f50be0ca --- /dev/null +++ b/frontend/components/icons/ErrorOutline.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +import { COLORS, Colors } from "styles/var/colors"; + +interface IErrorOutlineProps { + color?: Colors; +} + +const ErrorOutline = ({ color = "status-error" }: IErrorOutlineProps) => { + return ( + + + + ); +}; + +export default ErrorOutline; diff --git a/frontend/components/icons/Refresh.tsx b/frontend/components/icons/Refresh.tsx index b402beb0b4..be2af646bb 100644 --- a/frontend/components/icons/Refresh.tsx +++ b/frontend/components/icons/Refresh.tsx @@ -1,13 +1,28 @@ import React from "react"; +import { COLORS, Colors } from "styles/var/colors"; +import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; -const Refresh = () => { +interface IRefresh { + color?: Colors; + size?: IconSizes; +} +const Refresh = ({ + color = "ui-fleet-black-75", + size = "medium", +}: IRefresh) => { return ( - + ); diff --git a/frontend/components/icons/index.ts b/frontend/components/icons/index.ts index 32f539bd7a..2bee8711c7 100644 --- a/frontend/components/icons/index.ts +++ b/frontend/components/icons/index.ts @@ -1,4 +1,6 @@ import Alert from "./Alert"; +import Arrow from "./Arrow"; +import ArrowInternalLink from "./ArrowInternalLink"; import CalendarCheck from "./CalendarCheck"; import Check from "./Check"; import Chevron from "./Chevron"; @@ -44,6 +46,7 @@ import Success from "./Success"; import SuccessPartial from "./SuccessPartial"; import Pending from "./Pending"; import PendingPartial from "./PendingPartial"; +import ErrorOutline from "./ErrorOutline"; import Error from "./Error"; import Copy from "./Copy"; @@ -65,6 +68,8 @@ import FilePdf from "./FilePdf"; // a mapping of the usable names of icons to the icon source. export const ICON_MAP = { alert: Alert, + arrow: Arrow, + "arrow-internal-link": ArrowInternalLink, "calendar-check": CalendarCheck, chevron: Chevron, check: Check, @@ -100,6 +105,7 @@ export const ICON_MAP = { pending: Pending, "pending-partial": PendingPartial, error: Error, + "error-outline": ErrorOutline, darwin: Apple, macOS: Apple, windows: Windows, diff --git a/frontend/interfaces/policy.ts b/frontend/interfaces/policy.ts index 2e715bedfc..e01fc8e746 100644 --- a/frontend/interfaces/policy.ts +++ b/frontend/interfaces/policy.ts @@ -61,9 +61,11 @@ export interface IPolicyWebhookPreviewPayload { critical?: boolean; } +export type PolicyStatusResponse = "pass" | "fail" | ""; + // Used on the host details page and other places where the status of individual hosts are displayed export interface IHostPolicy extends IPolicy { - response: string; + response: PolicyStatusResponse; } export interface ILoadAllPoliciesResponse { diff --git a/frontend/pages/DashboardPage/cards/LearnFleet/LearnFleet.tsx b/frontend/pages/DashboardPage/cards/LearnFleet/LearnFleet.tsx index fd0339f07b..cf4a1566d1 100644 --- a/frontend/pages/DashboardPage/cards/LearnFleet/LearnFleet.tsx +++ b/frontend/pages/DashboardPage/cards/LearnFleet/LearnFleet.tsx @@ -1,6 +1,6 @@ import React from "react"; -import LinkArrow from "../../../../../assets/images/icon-arrow-right-vibrant-blue-10x18@2x.png"; +import Icon from "components/Icon/Icon"; const baseClass = "learn-fleet"; @@ -18,7 +18,7 @@ const LearnFleet = (): JSX.Element => { rel="noopener noreferrer" > Learn how to use Fleet  - link arrow +
); diff --git a/frontend/pages/DashboardPage/cards/LearnFleet/_styles.scss b/frontend/pages/DashboardPage/cards/LearnFleet/_styles.scss index 847a94efbc..ee604b3dc7 100644 --- a/frontend/pages/DashboardPage/cards/LearnFleet/_styles.scss +++ b/frontend/pages/DashboardPage/cards/LearnFleet/_styles.scss @@ -2,4 +2,8 @@ p { font-size: $x-small; } + .icon { + margin-left: $pad-xsmall; + vertical-align: sub; + } } diff --git a/frontend/pages/DashboardPage/cards/WelcomeHost/WelcomeHost.tsx b/frontend/pages/DashboardPage/cards/WelcomeHost/WelcomeHost.tsx index 28c9210e21..ca51875742 100644 --- a/frontend/pages/DashboardPage/cards/WelcomeHost/WelcomeHost.tsx +++ b/frontend/pages/DashboardPage/cards/WelcomeHost/WelcomeHost.tsx @@ -12,11 +12,8 @@ import hostAPI from "services/entities/hosts"; import Spinner from "components/Spinner"; import Button from "components/buttons/Button"; import Modal from "components/Modal"; +import Icon from "components/Icon/Icon"; import LaptopMac from "../../../../../assets/images/laptop-mac.png"; -import LinkArrow from "../../../../../assets/images/icon-arrow-right-vibrant-blue-10x18@2x.png"; -import IconDisabled from "../../../../../assets/images/icon-action-disable-red-16x16@2x.png"; -import IconPassed from "../../../../../assets/images/icon-check-circle-green-16x16@2x.png"; -import IconError from "../../../../../assets/images/icon-exclamation-circle-red-16x16@2x.png"; import SlackButton from "../../../../../assets/images/slack-button-get-help.png"; interface IWelcomeHostCardProps { @@ -163,12 +160,8 @@ const WelcomeHost = ({ return (
-

- Disabled icon +

+ Your device is not communicating with Fleet.

Join the #fleet Slack channel for help troubleshooting.

@@ -193,11 +186,7 @@ const WelcomeHost = ({

- Disabled icon + No policies apply to your device.

Join the #fleet Slack channel for help troubleshooting.

@@ -225,7 +214,7 @@ const WelcomeHost = ({
{host.display_name} - +

Your host is successfully connected to Fleet.

@@ -245,11 +234,18 @@ const WelcomeHost = ({ onClick={() => handlePolicyModal(p.id)} >
- {p.response} {p.name} +
); @@ -258,9 +254,9 @@ const WelcomeHost = ({ return null; })} {host.policies?.length > 3 && ( - + Go to Host details to see all policies - + )}
@@ -276,7 +272,7 @@ const WelcomeHost = ({ onClick={onRefetchHost} disabled={showRefetchLoadingSpinner} > - Refetch + Refetch Last updated{" "} diff --git a/frontend/pages/DashboardPage/cards/WelcomeHost/_styles.scss b/frontend/pages/DashboardPage/cards/WelcomeHost/_styles.scss index 58bc29f4be..6972187838 100644 --- a/frontend/pages/DashboardPage/cards/WelcomeHost/_styles.scss +++ b/frontend/pages/DashboardPage/cards/WelcomeHost/_styles.scss @@ -9,30 +9,31 @@ margin-top: 4px; } - .icon-disabled { - width: 16px; - margin-right: 8px; - position: relative; - top: 3px; - } - p.error-message { font-weight: $bold; margin: 1.5rem 0; } + p.error-message, + .policy-block { + .icon { + vertical-align: sub; + margin-right: $pad-small; + } + } + .external-link { display: flex; - align-items: center; font-size: $x-small; color: $core-vibrant-blue; font-weight: $bold; text-decoration: none !important; - img { - height: 12px; - width: 12px; + .icon { + margin-left: $pad-small; + vertical-align: sub; } + &:last-of-type { margin-top: $pad-large; } @@ -66,11 +67,6 @@ button { height: auto; width: 100%; - img { - transform: scale(0.58) rotate(-90deg); - position: relative; - top: 1px; - } } .children-wrapper { @@ -79,6 +75,7 @@ .policy-block { min-width: 100%; + height: 36px; border: 1px solid $ui-fleet-black-25; border-radius: 6px; display: flex; @@ -86,13 +83,6 @@ align-items: center; font-weight: $regular; - img { - margin: 0 $pad-small; - transform: scale(0.5); - position: relative; - top: -1px; - } - .info { line-height: 1; white-space: nowrap; @@ -102,11 +92,8 @@ text-align: left; } - &::after { - content: url("../assets/images/icon-chevron-purple-9x6@2x.png"); - transform: scale(0.5) rotate(-90deg); - border-radius: 0px; - margin: 0 $pad-xsmall; + .icon { + padding-left: $pad-medium; } } } @@ -127,26 +114,23 @@ font-size: $x-small; height: 38px; - &::before { - display: inline-block; - position: relative; - padding: 5px 0 0 0; // centers spin - display: inline-block; - content: url(../assets/images/icon-refetch-white-12x12@2x.png); - transform: scale(0.5); + .icon { + margin-right: 6px; } - &.spin::before { - animation: spin 2s linear infinite; + &.spin { + .icon { + animation: spin 2s linear infinite; + } } @keyframes spin { 0% { - transform: scale(0.5) rotate(0deg); + transform: rotate(0deg); transform-origin: center center; } 100% { - transform: scale(0.5) rotate(360deg); + transform: rotate(360deg); transform-origin: center center; } } diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss index 4045d822dc..c10de13b62 100644 --- a/frontend/pages/hosts/ManageHostsPage/_styles.scss +++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss @@ -207,9 +207,6 @@ .issues__cell { display: flex; align-items: center; - .host-issue { - height: 16px; - } } .device_mapping__cell, diff --git a/frontend/pages/hosts/details/_styles.scss b/frontend/pages/hosts/details/_styles.scss index 2f51005169..8c9b486b7d 100644 --- a/frontend/pages/hosts/details/_styles.scss +++ b/frontend/pages/hosts/details/_styles.scss @@ -173,16 +173,7 @@ .refetch-btn { font-size: $x-small; height: 38px; - margin-right: $pad-small; - - &::before { - display: inline-block; - position: relative; - padding: 5px 0 0 0; // centers spin - content: url(../assets/images/icon-refetch-12x12@2x.png); - transform: scale(0.5); - height: 28px; - } + margin-left: $pad-small; } .refetch-offline { @@ -196,24 +187,19 @@ height: 38px; opacity: 50%; filter: saturate(100%); + margin-left: $pad-small; - &::before { - display: inline-block; - position: relative; - padding: 5px 0 0 0; // centers spin - display: inline-block; - content: url(../assets/images/icon-refetch-12x12@2x.png); - transform: scale(0.5); + .icon { animation: spin 2s linear infinite; } @keyframes spin { 0% { - transform: scale(0.5) rotate(0deg); + transform: rotate(0deg); transform-origin: center center; } 100% { - transform: scale(0.5) rotate(360deg); + transform: rotate(360deg); transform-origin: center center; } } diff --git a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx index 3bbda7a66a..64a804a799 100644 --- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx +++ b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx @@ -1,16 +1,17 @@ import React from "react"; import ReactTooltip from "react-tooltip"; -import TooltipWrapper from "components/TooltipWrapper"; - -import Button from "components/buttons/Button"; -import DiskSpaceGraph from "components/DiskSpaceGraph"; -import HumanTimeDiffWithDateTip from "components/HumanTimeDiffWithDateTip"; import { humanHostMemory, wrapFleetHelper } from "utilities/helpers"; import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants"; -import StatusIndicator from "components/StatusIndicator"; import { IHostMacMdmProfile, BootstrapPackageStatus } from "interfaces/mdm"; import getHostStatusTooltipText from "pages/hosts/helpers"; + +import TooltipWrapper from "components/TooltipWrapper"; +import Button from "components/buttons/Button"; +import Icon from "components/Icon/Icon"; +import DiskSpaceGraph from "components/DiskSpaceGraph"; +import HumanTimeDiffWithDateTip from "components/HumanTimeDiffWithDateTip"; +import StatusIndicator from "components/StatusIndicator"; import PremiumFeatureIconWithTooltip from "components/PremiumFeatureIconWithTooltip"; import IssueIcon from "../../../../../../assets/images/icon-issue-fleet-black-50-16x16@2x.png"; import MacSettingsIndicator from "./MacSettingsIndicator"; @@ -87,6 +88,7 @@ const HostSummary = ({ onClick={onRefetchHost} variant="text-icon" > + {showRefetchSpinner ? "Fetching fresh vitals...this may take a moment" : "Refetch"} diff --git a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx index 6f5cc139f8..f998865a8c 100644 --- a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx +++ b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx @@ -1,9 +1,10 @@ import React from "react"; -import StatusIndicator from "components/StatusIndicator"; +import StatusIndicatorWithIcon from "components/StatusIndicatorWithIcon"; import Button from "components/buttons/Button"; import { IHostPolicy } from "interfaces/policy"; import { PolicyResponse, DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants"; import ViewAllHostsLink from "components/ViewAllHostsLink"; +import { IndicatorStatus } from "components/StatusIndicatorWithIcon/StatusIndicatorWithIcon"; interface IHeaderProps { column: { @@ -11,6 +12,14 @@ interface IHeaderProps { isSortedDesc: boolean; }; } + +type PolicyStatus = "pass" | "fail"; + +interface IStatusCellValue { + displayName: string; + statusName: IndicatorStatus; + value: PolicyStatus; +} interface ICellProps { cell: { value: string; @@ -30,20 +39,24 @@ interface IDataColumn { sortType?: string; } -const getPolicyStatus = (policy: IHostPolicy): string => { - if (policy.response === "pass") { - return "Yes"; - } else if (policy.response === "fail") { - return "No"; - } - return DEFAULT_EMPTY_CELL_VALUE; -}; - // NOTE: cellProps come from react-table // more info here https://react-table.tanstack.com/docs/api/useTable#cell-properties const generatePolicyTableHeaders = ( togglePolicyDetails: (policy: IHostPolicy, teamId?: number) => void ): IDataColumn[] => { + const STATUS_CELL_VALUES: Record = { + pass: { + displayName: "Yes", + statusName: "success", + value: "pass", + }, + fail: { + displayName: "No", + statusName: "error", + value: "fail", + }, + }; + return [ { title: "Name", @@ -71,8 +84,17 @@ const generatePolicyTableHeaders = ( accessor: "response", disableSortBy: true, Cell: (cellProps) => { + if (cellProps.row.original.response === "") { + return <>{DEFAULT_EMPTY_CELL_VALUE}; + } + + const responseValue = + STATUS_CELL_VALUES[cellProps.row.original.response]; return ( - + ); }, }, diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTableConfig.tsx b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTableConfig.tsx index 96baf96d4f..4af0539954 100644 --- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTableConfig.tsx +++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTableConfig.tsx @@ -6,13 +6,12 @@ import { memoize } from "lodash"; import { ColumnInstance } from "react-table"; +import Icon from "components/Icon/Icon"; import TextCell from "components/TableContainer/DataTable/TextCell/TextCell"; import HeaderCell from "components/TableContainer/DataTable/HeaderCell/HeaderCell"; import { IHostPolicyQuery } from "interfaces/host"; import sortUtils from "utilities/sort"; -import PassIcon from "../../../../../../assets/images/icon-check-circle-green-16x16@2x.png"; -import FailIcon from "../../../../../../assets/images/icon-action-fail-16x16@2x.png"; interface IHeaderProps { column: ColumnInstance & IDataColumn; @@ -70,12 +69,12 @@ const generateTableHeaders = (): IDataColumn[] => { <> {cellProps.cell.value.length ? ( <> - host passing + Yes ) : ( <> - host passing + No )}