From 4527d52eadb741df11a05cf4b1e73dcfcdf9771c Mon Sep 17 00:00:00 2001 From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com> Date: Mon, 7 Aug 2023 09:21:02 -0700 Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20add=20grey=20dashboard=20icons?= =?UTF-8?q?=20(#13015)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changes/12887-update-dashboard-icons | 1 + frontend/components/icons/AppleCircled.tsx | 40 +++++++++++++++ frontend/components/icons/ApplePurple.tsx | 17 ------- frontend/components/icons/ChromeCircled.tsx | 35 +++++++++++++ frontend/components/icons/LinuxCircled.tsx | 51 +++++++++++++++++++ frontend/components/icons/LinuxGreen.tsx | 20 -------- .../components/icons/RedEncircledChrome.tsx | 37 -------------- frontend/components/icons/WindowsBlue.tsx | 16 ------ frontend/components/icons/WindowsCircled.tsx | 51 +++++++++++++++++++ frontend/components/icons/index.ts | 16 +++--- .../pages/DashboardPage/DashboardPage.tsx | 11 ++-- .../cards/HostsSummary/HostsSummary.tsx | 8 +-- .../SummaryTile/SummaryTile.tests.tsx | 12 ++--- .../HostsSummary/SummaryTile/SummaryTile.tsx | 9 +++- .../components/InfoCard/InfoCard.tsx | 10 ++-- .../components/InfoCard/_styles.scss | 14 +---- 16 files changed, 215 insertions(+), 133 deletions(-) create mode 100644 changes/12887-update-dashboard-icons create mode 100644 frontend/components/icons/AppleCircled.tsx delete mode 100644 frontend/components/icons/ApplePurple.tsx create mode 100644 frontend/components/icons/ChromeCircled.tsx create mode 100644 frontend/components/icons/LinuxCircled.tsx delete mode 100644 frontend/components/icons/LinuxGreen.tsx delete mode 100644 frontend/components/icons/RedEncircledChrome.tsx delete mode 100644 frontend/components/icons/WindowsBlue.tsx create mode 100644 frontend/components/icons/WindowsCircled.tsx diff --git a/changes/12887-update-dashboard-icons b/changes/12887-update-dashboard-icons new file mode 100644 index 0000000000..c67608361f --- /dev/null +++ b/changes/12887-update-dashboard-icons @@ -0,0 +1 @@ +- Updated the icons on the dashboard to new grey designs. diff --git a/frontend/components/icons/AppleCircled.tsx b/frontend/components/icons/AppleCircled.tsx new file mode 100644 index 0000000000..7214e63f68 --- /dev/null +++ b/frontend/components/icons/AppleCircled.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import { COLORS, Colors } from "styles/var/colors"; +import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; + +interface IAppleCircledProps { + size?: IconSizes; + iconColor?: Colors; + bgColor?: Colors; +} +const AppleCircled = ({ + size = "extra-large", + iconColor = "ui-fleet-black-75", // default grey + bgColor = "ui-blue-10", // default light blue +}: IAppleCircledProps) => { + return ( + + + + + + ); +}; + +export default AppleCircled; diff --git a/frontend/components/icons/ApplePurple.tsx b/frontend/components/icons/ApplePurple.tsx deleted file mode 100644 index 827fa8db2f..0000000000 --- a/frontend/components/icons/ApplePurple.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; - -const ApplePurple = () => { - return ( - - - - - ); -}; - -export default ApplePurple; diff --git a/frontend/components/icons/ChromeCircled.tsx b/frontend/components/icons/ChromeCircled.tsx new file mode 100644 index 0000000000..f4aa747794 --- /dev/null +++ b/frontend/components/icons/ChromeCircled.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { COLORS, Colors } from "styles/var/colors"; +import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; + +interface IChromeCircledProps { + size: IconSizes; + iconColor?: Colors; + bgColor?: Colors; +} + +const ChromeCircled = ({ + size = "extra-large", + iconColor = "ui-fleet-black-75", // default grey + bgColor = "ui-blue-10", // default light blue +}: IChromeCircledProps) => { + return ( + + + + + + + ); +}; + +export default ChromeCircled; diff --git a/frontend/components/icons/LinuxCircled.tsx b/frontend/components/icons/LinuxCircled.tsx new file mode 100644 index 0000000000..b6560321d2 --- /dev/null +++ b/frontend/components/icons/LinuxCircled.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import { COLORS, Colors } from "styles/var/colors"; +import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; + +interface ILinuxCircledProps { + size?: IconSizes; + iconColor?: Colors; + bgColor?: Colors; +} + +const LinuxCircled = ({ + size = "extra-large", + iconColor = "ui-fleet-black-75", // default grey + bgColor = "ui-blue-10", // default light blue +}: ILinuxCircledProps) => { + return ( + + + + + + + + + ); +}; + +export default LinuxCircled; diff --git a/frontend/components/icons/LinuxGreen.tsx b/frontend/components/icons/LinuxGreen.tsx deleted file mode 100644 index 22a390c889..0000000000 --- a/frontend/components/icons/LinuxGreen.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; - -const LinuxGreen = () => { - return ( - - - - - - - ); -}; - -export default LinuxGreen; diff --git a/frontend/components/icons/RedEncircledChrome.tsx b/frontend/components/icons/RedEncircledChrome.tsx deleted file mode 100644 index c92e82d6a9..0000000000 --- a/frontend/components/icons/RedEncircledChrome.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; -import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; - -interface IRedEncircledChrome { - size: IconSizes; -} - -const RedEncircledChrome = ({ size = "extra-large" }: IRedEncircledChrome) => { - return ( - - - - - - - - - - - - ); -}; -export default RedEncircledChrome; diff --git a/frontend/components/icons/WindowsBlue.tsx b/frontend/components/icons/WindowsBlue.tsx deleted file mode 100644 index 34e1fd70f9..0000000000 --- a/frontend/components/icons/WindowsBlue.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; - -const WindowsBlue = () => { - return ( - - - - - - ); -}; - -export default WindowsBlue; diff --git a/frontend/components/icons/WindowsCircled.tsx b/frontend/components/icons/WindowsCircled.tsx new file mode 100644 index 0000000000..08b2804b47 --- /dev/null +++ b/frontend/components/icons/WindowsCircled.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import { Colors, COLORS } from "styles/var/colors"; +import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes"; + +interface IWindowsCircledProps { + size: IconSizes; + iconColor?: Colors; + bgColor?: Colors; +} + +const WindowsCircled = ({ + size = "extra-large", + iconColor = "ui-fleet-black-75", // default grey + bgColor = "ui-blue-10", // default light blue +}: IWindowsCircledProps) => { + return ( + + + + + + + + + ); +}; + +export default WindowsCircled; diff --git a/frontend/components/icons/index.ts b/frontend/components/icons/index.ts index 4ef124e404..8e03fcabb4 100644 --- a/frontend/components/icons/index.ts +++ b/frontend/components/icons/index.ts @@ -40,10 +40,10 @@ import Ubuntu from "./Ubuntu"; import Chrome from "./Chrome"; // Encircled -import ApplePurple from "./ApplePurple"; -import LinuxGreen from "./LinuxGreen"; -import WindowsBlue from "./WindowsBlue"; -import RedEncircledChrome from "./RedEncircledChrome"; +import AppleCircled from "./AppleCircled"; +import LinuxCircled from "./LinuxCircled"; +import WindowsCircled from "./WindowsCircled"; +import ChromeCircled from "./ChromeCircled"; // Status Icons import Success from "./Success"; @@ -128,10 +128,10 @@ export const ICON_MAP = { chrome: Chrome, ChromeOS: Chrome, "premium-feature": PremiumFeature, - "darwin-purple": ApplePurple, - "windows-blue": WindowsBlue, - "linux-green": LinuxGreen, - "chrome-red": RedEncircledChrome, + "apple-circled": AppleCircled, + "windows-circled": WindowsCircled, + "linux-circled": LinuxCircled, + "chrome-circled": ChromeCircled, profile: Profile, download: Download, files: Files, diff --git a/frontend/pages/DashboardPage/DashboardPage.tsx b/frontend/pages/DashboardPage/DashboardPage.tsx index ec4659c4a5..72bd71254e 100644 --- a/frontend/pages/DashboardPage/DashboardPage.tsx +++ b/frontend/pages/DashboardPage/DashboardPage.tsx @@ -434,13 +434,10 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => { } : undefined, actionUrl: selectedPlatform === "all" ? MANAGE_HOSTS : undefined, - total_host_count: (() => { - if (!isHostSummaryFetching && !errorHosts) { - return `${hostSummaryData?.totals_hosts_count}` || undefined; - } - - return undefined; - })(), + total_host_count: + !isHostSummaryFetching && !errorHosts + ? hostSummaryData?.totals_hosts_count + : undefined, showTitle: true, children: ( ( ( ( { isLoading={false} showUI={false} // tested title={"Windows hosts"} - iconName={"windows-blue"} + iconName={"windows-circled"} tooltip={"Hosts on any Windows device"} path={paths.MANAGE_HOSTS_LABEL(10)} /> @@ -33,7 +33,7 @@ describe("SummaryTile - component", () => { isLoading // tested showUI title={"Windows hosts"} - iconName={"windows-blue"} + iconName={"windows-circled"} tooltip={"Hosts on any Windows device"} path={paths.MANAGE_HOSTS_LABEL(10)} /> @@ -52,7 +52,7 @@ describe("SummaryTile - component", () => { isLoading={false} showUI title={"Windows hosts"} // tested - iconName={"windows-blue"} // tested + iconName={"windows-circled"} // tested tooltip={"Hosts on any Windows device"} path={paths.MANAGE_HOSTS_LABEL(10)} /> @@ -74,7 +74,7 @@ describe("SummaryTile - component", () => { isLoading={false} showUI title={"Windows hosts"} - iconName={"windows-blue"} + iconName={"windows-circled"} path={paths.MANAGE_HOSTS_LABEL(10)} /> ); @@ -91,7 +91,7 @@ describe("SummaryTile - component", () => { isLoading={false} showUI title={"Windows hosts"} - iconName={"windows-blue"} + iconName={"windows-circled"} tooltip={"Hosts on any Windows device"} // tested path={paths.MANAGE_HOSTS_LABEL(10)} /> @@ -109,7 +109,7 @@ describe("SummaryTile - component", () => { isLoading={false} showUI title={"Windows hosts"} - iconName={"windows-blue"} + iconName={"windows-circled"} tooltip={"Hosts on any Windows device"} // tested path={paths.MANAGE_HOSTS_LABEL(10)} /> diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tsx b/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tsx index 1b64f27a50..45be138362 100644 --- a/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tsx +++ b/frontend/pages/DashboardPage/cards/HostsSummary/SummaryTile/SummaryTile.tsx @@ -8,6 +8,7 @@ import Icon from "components/Icon"; import { IconNames } from "components/icons"; import PremiumFeatureIconWithTooltip from "components/PremiumFeatureIconWithTooltip"; import classnames from "classnames"; +import { Colors } from "styles/var/colors"; interface ISummaryTileProps { count: number; @@ -15,6 +16,7 @@ interface ISummaryTileProps { showUI: boolean; title: string; iconName: IconNames; + iconColor?: Colors; path: string; tooltip?: string; isSandboxMode?: boolean; @@ -30,6 +32,7 @@ const SummaryTile = ({ showUI, // false on first load only title, iconName, + iconColor, path, tooltip, isSandboxMode = false, @@ -61,7 +64,11 @@ const SummaryTile = ({ disabled={notSupported} > <> - +
{notSupported ? (
diff --git a/frontend/pages/DashboardPage/components/InfoCard/InfoCard.tsx b/frontend/pages/DashboardPage/components/InfoCard/InfoCard.tsx index 6adacf8390..c578757524 100644 --- a/frontend/pages/DashboardPage/components/InfoCard/InfoCard.tsx +++ b/frontend/pages/DashboardPage/components/InfoCard/InfoCard.tsx @@ -21,7 +21,7 @@ interface IInfoCardProps { text: string; onClick?: () => void; }; - total_host_count?: string | (() => string | undefined); + total_host_count?: number; showTitle?: boolean; } @@ -109,9 +109,11 @@ const useInfoCard = ({

{title}

{total_host_count && {total_host_count}}
-
- {titleDetail} -
+ {titleDetail && ( +
+ {titleDetail} +
+ )}
{renderAction()} diff --git a/frontend/pages/DashboardPage/components/InfoCard/_styles.scss b/frontend/pages/DashboardPage/components/InfoCard/_styles.scss index 1574107381..e91195fa78 100644 --- a/frontend/pages/DashboardPage/components/InfoCard/_styles.scss +++ b/frontend/pages/DashboardPage/components/InfoCard/_styles.scss @@ -15,19 +15,9 @@ } } - &__section-title-group { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - } - &__section-title { display: flex; - flex-direction: row; - align-items: center; - padding-right: 12px; - + gap: $pad-xsmall; span { background-color: $core-vibrant-blue; color: $core-white; @@ -35,9 +25,7 @@ font-weight: $bold; padding: 2px 4px; border-radius: 4px; - margin-left: $pad-small; position: relative; - top: -2px; } }