mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
UI – add grey dashboard icons (#13015)
This commit is contained in:
Jacob Shandling
GitHub
parent
0a499402e9
commit
4527d52ead
16 changed files with 215 additions and 133 deletions
1
changes/12887-update-dashboard-icons
Normal file
1
changes/12887-update-dashboard-icons
Normal file
|
|
@ -0,0 +1 @@
|
|||
- Updated the icons on the dashboard to new grey designs.
|
||||
40
frontend/components/icons/AppleCircled.tsx
Normal file
40
frontend/components/icons/AppleCircled.tsx
Normal file
|
|
@ -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 (
|
||||
<svg
|
||||
width={ICON_SIZES[size]}
|
||||
height={ICON_SIZES[size]}
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="24" cy="24" r="24" fill={COLORS[bgColor]} />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M27.8083 15.8143C28.711 14.8039 29.3881 13.4146 29.2188 12C27.8647 12.0505 26.2566 12.8083 25.2975 13.8188C24.4229 14.7029 23.6894 16.1427 23.8869 17.5068C25.3539 17.6078 26.8773 16.85 27.8083 15.8143Z"
|
||||
fill={COLORS[iconColor]}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M31.7296 26.9038H13.2796H31.7296V26.8785C31.3065 26.1207 31.109 24.9335 31.2783 23.9736V23.9483C31.4475 22.6853 32.3503 21.397 33.0838 20.917C33.0838 20.917 33.112 20.917 33.112 20.8918C33.2812 20.7402 33.7326 20.4118 34.0429 20.2097C32.8863 18.6941 31.0244 17.8858 29.106 17.8605C27.1877 17.709 25.1847 18.9467 24.1126 18.9215C23.0688 18.9467 21.489 17.8353 19.8246 17.911H19.7964C19.7681 17.911 19.4578 17.9363 19.4578 17.9363C17.2574 17.9868 15.3108 19.1488 14.1823 20.917C13.731 21.5486 13.2232 23.0389 13.1385 23.9736V24.0241C13.0257 24.6303 13.1385 26.1965 13.2514 26.9543C13.2514 26.9796 13.2514 26.9796 13.2514 27.0048C13.336 27.7626 13.7874 29.2277 14.0977 29.9603C14.408 30.7434 15.2826 32.2337 15.8186 32.9915C16.947 34.4314 18.273 36.0733 20.022 35.9975C21.7147 35.947 22.3353 34.9871 24.3665 35.0124C26.3977 34.9871 26.962 35.947 28.7675 35.9723C30.6012 35.8965 31.7296 34.4566 32.8581 32.9915C33.4223 32.2337 34.2686 30.7939 34.579 29.935C34.6072 29.834 34.6636 29.7077 34.6918 29.6066C33.5634 29.253 32.2092 27.8384 31.7296 26.9038Z"
|
||||
fill={COLORS[iconColor]}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppleCircled;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
const ApplePurple = () => {
|
||||
return (
|
||||
<svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="24" cy="24" r="24" fill="#AE6DDF" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M28.309 15.814c.903-1.01 1.58-2.4 1.41-3.814-1.354.05-2.962.808-3.92 1.819-.875.884-1.609 2.324-1.412 3.688 1.468.1 2.99-.657 3.922-1.693ZM32.23 26.904H13.78h18.45v-.026c-.423-.758-.62-1.945-.451-2.905v-.025c.169-1.263 1.072-2.551 1.805-3.031 0 0 .028 0 .028-.025.17-.152.621-.48.931-.682-1.156-1.516-3.018-2.324-4.936-2.35-1.919-.151-3.922 1.087-4.994 1.061-1.044.026-2.623-1.086-4.288-1.01h-.028c-.028 0-.339.025-.339.025a6.429 6.429 0 0 0-5.275 2.98c-.451.632-.96 2.123-1.044 3.057v.05c-.113.607 0 2.173.113 2.931v.05c.084.758.536 2.224.846 2.956.31.783 1.185 2.274 1.721 3.031 1.129 1.44 2.454 3.082 4.204 3.006 1.692-.05 2.313-1.01 4.344-.985 2.031-.025 2.595.935 4.401.96 1.834-.076 2.962-1.516 4.09-2.98.565-.758 1.411-2.198 1.721-3.057.029-.101.085-.227.113-.328-1.128-.354-2.482-1.769-2.962-2.703Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApplePurple;
|
||||
35
frontend/components/icons/ChromeCircled.tsx
Normal file
35
frontend/components/icons/ChromeCircled.tsx
Normal file
|
|
@ -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 (
|
||||
<svg
|
||||
width={ICON_SIZES[size]}
|
||||
height={ICON_SIZES[size]}
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="24" cy="24" r="24" fill={COLORS[bgColor]} />
|
||||
<g clipPath="url(#clip0_15434_198874)">
|
||||
<path
|
||||
d="M12 24C12 21.8156 12.5845 19.7625 13.6064 17.9578L18.7547 26.9203C19.7813 28.7578 21.7453 30 24 30C24.6703 30 25.2703 29.8922 25.9125 29.6906L22.3359 35.8875C16.4953 35.0766 12 30.0609 12 24ZM29.1141 27.075C29.6906 26.175 30 25.0828 30 24C30 22.2094 29.2125 20.6016 27.9703 19.5H35.1281C35.6906 20.8875 36 22.4109 36 24C36 30.6281 30.6281 35.9578 24 36L29.1141 27.075ZM34.3969 18H24C21.0516 18 18.6703 20.0672 18.1172 22.8141L14.5402 16.6158C16.7344 13.8061 20.1562 12 24 12C28.4438 12 32.3203 14.4131 34.3969 18ZM19.875 24C19.875 21.7219 21.7219 19.875 24 19.875C26.2781 19.875 28.125 21.7219 28.125 24C28.125 26.2781 26.2781 28.125 24 28.125C21.7219 28.125 19.875 26.2781 19.875 24Z"
|
||||
fill={COLORS[iconColor]}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChromeCircled;
|
||||
51
frontend/components/icons/LinuxCircled.tsx
Normal file
51
frontend/components/icons/LinuxCircled.tsx
Normal file
|
|
@ -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 (
|
||||
<svg
|
||||
width={ICON_SIZES[size]}
|
||||
height={ICON_SIZES[size]}
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="24" cy="24" r="24" fill={COLORS[bgColor]} />
|
||||
<rect
|
||||
width="24"
|
||||
height="24"
|
||||
transform="translate(12.5 12)"
|
||||
fill="#F1F0FF"
|
||||
/>
|
||||
<path
|
||||
d="M36.4875 28.44C35.4131 24.19 33.1513 21.99 31.8847 21.05C31.8169 20.96 31.749 20.87 31.6812 20.78C31.8847 20.16 31.9978 19.5 31.9978 18.82C31.9978 15.05 28.6391 12 24.4887 12C20.3384 12 16.9683 15.06 16.9683 18.82C16.9683 19.5 17.0814 20.16 17.285 20.78C17.1945 20.89 17.1153 21 17.0362 21.11C15.7583 22.08 13.5757 24.28 12.5126 28.44C12.4674 28.62 12.5465 28.82 12.7049 28.94C12.8745 29.06 13.1007 29.08 13.2929 29.01C13.881 28.77 14.6613 28.41 15.3851 27.91C15.7696 30.22 17.0362 32.23 18.8456 33.6H17.4885C16.7421 33.6 16.1315 34.14 16.1315 34.8C16.1315 35.46 16.7421 36 17.4885 36H31.4211C32.1675 36 32.7781 35.46 32.7781 34.8C32.7781 34.14 32.1675 33.6 31.4211 33.6H30.1092C31.9187 32.23 33.1966 30.2 33.5698 27.88C34.3048 28.39 35.0965 28.76 35.6958 29C35.8881 29.08 36.1143 29.05 36.2839 28.93C36.4535 28.82 36.5327 28.63 36.4875 28.44ZM24.4774 32.73C20.9377 32.73 18.0653 29.91 18.0653 26.44C18.0653 24.66 18.823 22.41 20.033 20.65C19.3997 20.16 19.0039 19.44 19.0039 18.65C19.0039 17.17 20.361 15.98 22.0234 15.98C23.0299 15.98 23.912 16.41 24.4661 17.08C25.0202 16.41 25.9023 15.98 26.9088 15.98C28.5825 15.98 29.9283 17.18 29.9283 18.65C29.9283 19.45 29.5325 20.16 28.8992 20.65C30.1092 22.41 30.8669 24.65 30.8669 26.44C30.8896 29.92 28.0171 32.73 24.4774 32.73Z"
|
||||
fill={COLORS[iconColor]}
|
||||
/>
|
||||
<path
|
||||
d="M26.2415 19.78L24.5565 19.32C24.5113 19.31 24.4547 19.31 24.3982 19.32L22.7132 19.78C22.634 19.8 22.5662 19.86 22.5435 19.93C22.5209 20 22.5322 20.08 22.5775 20.14L24.2625 22.15C24.3077 22.21 24.3869 22.24 24.466 22.24C24.5452 22.24 24.6244 22.21 24.6696 22.15L26.3546 20.14C26.3999 20.08 26.4225 20 26.3886 19.93C26.3886 19.86 26.3207 19.81 26.2415 19.78Z"
|
||||
fill={COLORS[iconColor]}
|
||||
/>
|
||||
<path
|
||||
d="M23.4938 18.6898C23.4938 19.0398 23.1771 19.3198 22.7813 19.3198C22.3855 19.3198 22.0688 19.0398 22.0688 18.6898C22.0688 18.3398 22.3855 18.0598 22.7813 18.0598C23.1771 18.0498 23.4938 18.3398 23.4938 18.6898Z"
|
||||
fill={COLORS[iconColor]}
|
||||
/>
|
||||
<path
|
||||
d="M26.8976 18.6898C26.8976 19.0398 26.5809 19.3198 26.1851 19.3198C25.7893 19.3198 25.4727 19.0398 25.4727 18.6898C25.4727 18.3398 25.7893 18.0598 26.1851 18.0598C26.5696 18.0498 26.8976 18.3398 26.8976 18.6898Z"
|
||||
fill={COLORS[iconColor]}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default LinuxCircled;
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
const LinuxGreen = () => {
|
||||
return (
|
||||
<svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="24" cy="24" r="24" fill="#63C740" />
|
||||
<path fill="#63C740" d="M12.5 12h24v24h-24z" />
|
||||
<path
|
||||
d="M36.487 28.44c-1.074-4.25-3.336-6.45-4.602-7.39l-.204-.27c.204-.62.317-1.28.317-1.96 0-3.77-3.359-6.82-7.51-6.82-4.15 0-7.52 3.06-7.52 6.82 0 .68.113 1.34.317 1.96-.09.11-.17.22-.249.33-1.278.97-3.46 3.17-4.523 7.33-.046.18.034.38.192.5.17.12.396.14.588.07.588-.24 1.368-.6 2.092-1.1a8.986 8.986 0 0 0 3.46 5.69h-1.357c-.746 0-1.357.54-1.357 1.2 0 .66.611 1.2 1.357 1.2h13.933c.746 0 1.357-.54 1.357-1.2 0-.66-.61-1.2-1.357-1.2H30.11a8.98 8.98 0 0 0 3.46-5.72c.736.51 1.527.88 2.127 1.12.192.08.418.05.588-.07.17-.11.249-.3.203-.49Zm-12.01 4.29c-3.54 0-6.412-2.82-6.412-6.29 0-1.78.758-4.03 1.968-5.79-.633-.49-1.03-1.21-1.03-2 0-1.48 1.358-2.67 3.02-2.67 1.007 0 1.889.43 2.443 1.1.554-.67 1.436-1.1 2.443-1.1 1.674 0 3.02 1.2 3.02 2.67 0 .8-.396 1.51-1.03 2 1.21 1.76 1.968 4 1.968 5.79.023 3.48-2.85 6.29-6.39 6.29Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
d="m26.241 19.78-1.685-.46a.42.42 0 0 0-.158 0l-1.685.46a.242.242 0 0 0-.17.15.233.233 0 0 0 .034.21l1.685 2.01c.046.06.125.09.204.09.08 0 .158-.03.203-.09l1.686-2.01c.045-.06.067-.14.033-.21 0-.07-.067-.12-.147-.15ZM23.494 18.69c0 .35-.317.63-.713.63-.396 0-.712-.28-.712-.63s.316-.63.712-.63c.396-.01.713.28.713.63ZM26.898 18.69c0 .35-.317.63-.713.63-.396 0-.712-.28-.712-.63s.316-.63.712-.63c.385-.01.713.28.713.63Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default LinuxGreen;
|
||||
|
|
@ -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 (
|
||||
<svg
|
||||
width={ICON_SIZES[size]}
|
||||
height={ICON_SIZES[size]}
|
||||
viewBox="0 0 49 49"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="24.5" cy="24.5" r="24" fill="#FF5C83" />
|
||||
<g clipPath="url(#clip0_17779_222153)">
|
||||
<path
|
||||
d="M12.5 24.5C12.5 22.3156 13.0845 20.2625 14.1064 18.4578L19.2547 27.4203C20.2813 29.2578 22.2453 30.5 24.5 30.5C25.1703 30.5 25.7703 30.3922 26.4125 30.1906L22.8359 36.3875C16.9953 35.5766 12.5 30.5609 12.5 24.5ZM29.6141 27.575C30.1906 26.675 30.5 25.5828 30.5 24.5C30.5 22.7094 29.7125 21.1016 28.4703 20H35.6281C36.1906 21.3875 36.5 22.9109 36.5 24.5C36.5 31.1281 31.1281 36.4578 24.5 36.5L29.6141 27.575ZM34.8969 18.5H24.5C21.5516 18.5 19.1703 20.5672 18.6172 23.3141L15.0402 17.1158C17.2344 14.3061 20.6562 12.5 24.5 12.5C28.9438 12.5 32.8203 14.9131 34.8969 18.5ZM20.375 24.5C20.375 22.2219 22.2219 20.375 24.5 20.375C26.7781 20.375 28.625 22.2219 28.625 24.5C28.625 26.7781 26.7781 28.625 24.5 28.625C22.2219 28.625 20.375 26.7781 20.375 24.5Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_17779_222153">
|
||||
<rect
|
||||
width="24"
|
||||
height="24"
|
||||
fill="white"
|
||||
transform="translate(12.5 12.5)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
export default RedEncircledChrome;
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
const WindowsBlue = () => {
|
||||
return (
|
||||
<svg width="49" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="24.5" cy="24" r="24" fill="#6A67FE" />
|
||||
<path fill="#6A67FE" d="M12.5 12h24v24h-24z" />
|
||||
<path
|
||||
d="m13.592 31.712 7.788 1.557v-8.79h-7.788v7.233ZM13.592 23.497h7.788v-8.742l-7.788 1.556v7.186ZM22.618 23.497h12.574V12l-12.574 2.515v8.982ZM22.618 33.509 35.192 36V24.479H22.618v9.03Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default WindowsBlue;
|
||||
51
frontend/components/icons/WindowsCircled.tsx
Normal file
51
frontend/components/icons/WindowsCircled.tsx
Normal file
|
|
@ -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 (
|
||||
<svg
|
||||
width={ICON_SIZES[size]}
|
||||
height={ICON_SIZES[size]}
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="24" cy="24" r="24" fill={COLORS[bgColor]} />
|
||||
<rect
|
||||
width="24"
|
||||
height="24"
|
||||
transform="translate(12 12)"
|
||||
fill={COLORS[bgColor]}
|
||||
/>
|
||||
<path
|
||||
d="M13.0918 31.7125L20.8792 33.2694V24.479H13.0918V31.7125Z"
|
||||
fill={COLORS[iconColor]}
|
||||
/>
|
||||
<path
|
||||
d="M13.0918 23.4969H20.8792V14.7544L13.0918 16.3113V23.4969Z"
|
||||
fill={COLORS[iconColor]}
|
||||
/>
|
||||
<path
|
||||
d="M22.1172 23.497H34.6914V12L22.1172 14.515V23.497Z"
|
||||
fill={COLORS[iconColor]}
|
||||
/>
|
||||
<path
|
||||
d="M22.1172 33.5089L34.6914 36V24.479H22.1172V33.5089Z"
|
||||
fill={COLORS[iconColor]}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default WindowsCircled;
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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: (
|
||||
<HostsSummary
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const HostsSummary = ({
|
|||
|
||||
const renderMacCount = (teamId?: number) => (
|
||||
<SummaryTile
|
||||
iconName="darwin-purple"
|
||||
iconName="apple-circled"
|
||||
count={macCount}
|
||||
isLoading={isLoadingHostsSummary}
|
||||
showUI={showHostsUI}
|
||||
|
|
@ -63,7 +63,7 @@ const HostsSummary = ({
|
|||
|
||||
const renderWindowsCount = (teamId?: number) => (
|
||||
<SummaryTile
|
||||
iconName="windows-blue"
|
||||
iconName="windows-circled"
|
||||
count={windowsCount}
|
||||
isLoading={isLoadingHostsSummary}
|
||||
showUI={showHostsUI}
|
||||
|
|
@ -76,7 +76,7 @@ const HostsSummary = ({
|
|||
|
||||
const renderLinuxCount = (teamId?: number) => (
|
||||
<SummaryTile
|
||||
iconName="linux-green"
|
||||
iconName="linux-circled"
|
||||
count={linuxCount}
|
||||
isLoading={isLoadingHostsSummary}
|
||||
showUI={showHostsUI}
|
||||
|
|
@ -94,7 +94,7 @@ const HostsSummary = ({
|
|||
|
||||
return (
|
||||
<SummaryTile
|
||||
iconName="chrome-red"
|
||||
iconName="chrome-circled"
|
||||
count={chromeCount}
|
||||
isLoading={isLoadingHostsSummary}
|
||||
showUI={showHostsUI}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ describe("SummaryTile - component", () => {
|
|||
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)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
>
|
||||
<>
|
||||
<Icon name={iconName} className={`${baseClass}__tile-icon`} />
|
||||
<Icon
|
||||
name={iconName}
|
||||
color={iconColor}
|
||||
className={`${baseClass}__tile-icon`}
|
||||
/>
|
||||
<div>
|
||||
{notSupported ? (
|
||||
<div className={`${baseClass}__not-supported-text`}>
|
||||
|
|
|
|||
|
|
@ -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 = ({
|
|||
<h2>{title}</h2>
|
||||
{total_host_count && <span>{total_host_count}</span>}
|
||||
</div>
|
||||
<div className={`${baseClass}__section-title-detail`}>
|
||||
{titleDetail}
|
||||
</div>
|
||||
{titleDetail && (
|
||||
<div className={`${baseClass}__section-title-detail`}>
|
||||
{titleDetail}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{renderAction()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue