mirror of
https://github.com/fleetdm/fleet
synced 2026-04-21 13:37:30 +00:00
Finishing touches
This commit is contained in:
Luke Heath
parent
bbb6bc9f3b
commit
b405727fa2
10 changed files with 72 additions and 47 deletions
|
|
@ -160,7 +160,7 @@ export const generateCustomDropdownStyles = (
|
|||
const buttonVariantContainer = {
|
||||
borderRadius: "6px",
|
||||
"&:active": {
|
||||
backgroundColor: "rgba(25, 33, 71, 0.05)",
|
||||
backgroundColor: COLORS["ui-fleet-black-5"],
|
||||
},
|
||||
height: "38px",
|
||||
};
|
||||
|
|
@ -190,7 +190,7 @@ export const generateCustomDropdownStyles = (
|
|||
stroke: COLORS["ui-fleet-black-75"],
|
||||
},
|
||||
"&:hover": {
|
||||
backgroundColor: "rgba(25, 33, 71, 0.05)",
|
||||
backgroundColor: COLORS["ui-fleet-black-5"],
|
||||
boxShadow: "none",
|
||||
".dropdown-wrapper__placeholder": {
|
||||
color: COLORS["ui-fleet-black-75-over"],
|
||||
|
|
@ -200,7 +200,7 @@ export const generateCustomDropdownStyles = (
|
|||
},
|
||||
},
|
||||
".react-select__control--is-focused": {
|
||||
backgroundColor: "rgba(25, 33, 71, 0.05)",
|
||||
backgroundColor: COLORS["ui-fleet-black-5"],
|
||||
boxShadow: "none",
|
||||
".dropdown-wrapper__placeholder": {
|
||||
color: COLORS["ui-fleet-black-75-down"],
|
||||
|
|
@ -209,18 +209,14 @@ export const generateCustomDropdownStyles = (
|
|||
stroke: COLORS["ui-fleet-black-75-down"],
|
||||
},
|
||||
},
|
||||
...(state.isFocused && {
|
||||
backgroundColor: "rgba(25, 33, 71, 0.05)",
|
||||
...(state.menuIsOpen && {
|
||||
backgroundColor: COLORS["ui-fleet-black-5"],
|
||||
".dropdown-wrapper__placeholder": {
|
||||
color: COLORS["ui-fleet-black-75-down"],
|
||||
},
|
||||
".dropdown-wrapper__indicator path": {
|
||||
stroke: COLORS["ui-fleet-black-75-down"],
|
||||
},
|
||||
}),
|
||||
// TODO: Figure out a way to apply separate &:focus-visible styling
|
||||
// Currently only relying on &:focus styling for tabbing through app
|
||||
...(state.menuIsOpen && {
|
||||
".dropdown-wrapper__indicator svg": {
|
||||
transform: "rotate(180deg)",
|
||||
transition: "transform 0.25s ease",
|
||||
|
|
|
|||
|
|
@ -1,26 +1,37 @@
|
|||
import React from "react";
|
||||
|
||||
const LowDiskSpaceHosts = () => {
|
||||
import { COLORS, Colors } from "styles/var/colors";
|
||||
|
||||
interface ILowDiskSpaceHostsProps {
|
||||
color?: Colors;
|
||||
}
|
||||
|
||||
const LowDiskSpaceHosts = ({
|
||||
color = "ui-fleet-black-75",
|
||||
}: ILowDiskSpaceHostsProps) => {
|
||||
const c = COLORS[color];
|
||||
const bg = COLORS["core-fleet-white"];
|
||||
|
||||
return (
|
||||
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M19 10.5H4a3 3 0 0 0-3 3v5a3 3 0 0 0 3 3h8m-6.964-7v3m3-3v3"
|
||||
stroke="#515774"
|
||||
stroke={c}
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="m10.267 21.477 8.553-14.97c.768-1.343 2.705-1.343 3.473 0l8.554 14.97c.762 1.333-.201 2.992-1.737 2.992H12.003c-1.536 0-2.498-1.66-1.736-2.992Z"
|
||||
fill="#515774"
|
||||
fill={c}
|
||||
/>
|
||||
<path
|
||||
d="M20.5 12.5v4"
|
||||
stroke="#fff"
|
||||
stroke={bg}
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path d="M20.5 20.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill="#fff" />
|
||||
<path d="M20.5 20.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill={bg} />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,28 +1,37 @@
|
|||
import React from "react";
|
||||
|
||||
const MissingHosts = () => {
|
||||
import { COLORS, Colors } from "styles/var/colors";
|
||||
|
||||
interface IMissingHostsProps {
|
||||
color?: Colors;
|
||||
}
|
||||
|
||||
const MissingHosts = ({ color = "ui-fleet-black-75" }: IMissingHostsProps) => {
|
||||
const c = COLORS[color];
|
||||
const bg = COLORS["core-fleet-white"];
|
||||
|
||||
return (
|
||||
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M19.5 13c0 1.215-.385 2.715-1.05 4.328-.658 1.599-1.563 3.242-2.536 4.726-.974 1.485-1.998 2.782-2.883 3.695-.443.458-.832.799-1.143 1.017-.214.15-.34.204-.388.224a1.946 1.946 0 0 1-.388-.224c-.311-.218-.7-.559-1.144-1.017-.884-.913-1.908-2.21-2.882-3.695-.973-1.484-1.878-3.127-2.536-4.726C3.885 15.715 3.5 14.215 3.5 13c0-2.553.904-4.533 2.315-5.878C7.233 5.77 9.226 5 11.5 5c2.274 0 4.267.77 5.685 2.122C18.595 8.467 19.5 10.447 19.5 13Z"
|
||||
fill="#515774"
|
||||
stroke="#515774"
|
||||
fill={c}
|
||||
stroke={c}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path d="M11.5 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" fill="#fff" />
|
||||
<path d="M11.5 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" fill={bg} />
|
||||
<path
|
||||
d="M22.498 26.857a6.857 6.857 0 1 0 0-13.714 6.857 6.857 0 0 0 0 13.714Z"
|
||||
fill="#fff"
|
||||
stroke="#515774"
|
||||
fill={bg}
|
||||
stroke={c}
|
||||
strokeWidth="2.286"
|
||||
/>
|
||||
<path
|
||||
d="M25.395 18.39a.857.857 0 0 0-1.212-1.213l-4.445 4.445a.857.857 0 1 0 1.212 1.212l4.445-4.445Z"
|
||||
fill="#515774"
|
||||
fill={c}
|
||||
/>
|
||||
<path
|
||||
d="M20.888 17.108a.857.857 0 1 0-1.212 1.212l4.445 4.445a.857.857 0 1 0 1.212-1.212l-4.445-4.445Z"
|
||||
fill="#515774"
|
||||
fill={c}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,12 +10,10 @@ class OrgLogoIcon extends Component {
|
|||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
src: PropTypes.string.isRequired,
|
||||
invertDark: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
src: fleetAvatar,
|
||||
invertDark: false,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
|
|
@ -70,16 +68,14 @@ class OrgLogoIcon extends Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
const { className, invertDark } = this.props;
|
||||
const { className } = this.props;
|
||||
const { imageSrc } = this.state;
|
||||
const { onError } = this;
|
||||
|
||||
const classNames =
|
||||
imageSrc === fleetAvatar
|
||||
? classnames(baseClass, className, "default-fleet-logo")
|
||||
: classnames(baseClass, className, {
|
||||
[`${baseClass}--invert-dark`]: invertDark,
|
||||
});
|
||||
: classnames(baseClass, className);
|
||||
|
||||
return (
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -10,7 +10,3 @@
|
|||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
body.dark-mode .default-fleet-logo,
|
||||
body.dark-mode .org-logo-icon--invert-dark {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,25 +2,33 @@ import React from "react";
|
|||
|
||||
import { uniqueId } from "lodash";
|
||||
|
||||
const TotalHosts = () => {
|
||||
import { COLORS, Colors } from "styles/var/colors";
|
||||
|
||||
interface ITotalHostsProps {
|
||||
color?: Colors;
|
||||
}
|
||||
|
||||
const TotalHosts = ({ color = "ui-fleet-black-75" }: ITotalHostsProps) => {
|
||||
const clipPathId = uniqueId("clip-path-");
|
||||
const maskId = uniqueId("mask-");
|
||||
const c = COLORS[color];
|
||||
const bg = COLORS["core-fleet-white"];
|
||||
|
||||
return (
|
||||
<svg width="33" height="33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath={`url(#${clipPathId})`}>
|
||||
<path
|
||||
d="m2.921 10.73 8.412-4.59 8.413 4.59-8.413 4.59-8.412-4.59Z"
|
||||
stroke="#515774"
|
||||
stroke={c}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="m7.249 13.374-6.416 3.5 10.5 5.73 10.5-5.73-6.415-3.5-4.085 2.23-4.084-2.23Z"
|
||||
fill="#515774"
|
||||
fill={c}
|
||||
/>
|
||||
<mask id={maskId} fill="#fff">
|
||||
<mask id={maskId} fill={bg}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
|
|
@ -29,22 +37,22 @@ const TotalHosts = () => {
|
|||
</mask>
|
||||
<path
|
||||
d="m.833 22.729-.958-1.756-3.217 1.756 3.217 1.756.958-1.756Zm8.422-4.595 1.033-1.713-.983-.593-1.008.55.958 1.756Zm2.078 10.324-.958 1.756.958.523.958-.523-.958-1.756Zm10.5-5.729.958 1.756 3.218-1.756-3.218-1.756-.958 1.756Zm-9.821-5.359.958-1.756-1.008-.55-.983.594 1.033 1.712ZM10 18.583l-1.033 1.713 1.033.623 1.033-.623L10 18.583Zm-8.209 5.902 8.422-4.595-1.916-3.512-8.422 4.595 1.916 3.512Zm10.5 2.218-10.5-5.73-1.916 3.512 10.5 5.729 1.916-3.511Zm8.584-5.73-10.5 5.73 1.916 3.51 10.5-5.728-1.916-3.512Zm-9.821-1.847 9.821 5.359 1.916-3.512-9.821-5.358-1.916 3.51Zm-.075-3.469-2.012 1.214 2.066 3.425 2.012-1.213-2.066-3.425Zm.054 1.214-.745-.45-2.066 3.426.745.449 2.066-3.425Z"
|
||||
fill="#515774"
|
||||
fill={c}
|
||||
mask={`url(#${maskId})`}
|
||||
/>
|
||||
<path
|
||||
d="M24.833 27.357a6.857 6.857 0 1 0 0-13.714 6.857 6.857 0 0 0 0 13.714Z"
|
||||
fill="#fff"
|
||||
fill={bg}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M24.833 14.786a5.714 5.714 0 1 0 0 11.428 5.714 5.714 0 0 0 0-11.428Zm-8 5.714a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"
|
||||
fill="#515774"
|
||||
fill={c}
|
||||
/>
|
||||
<path
|
||||
d="m27.957 18.822-3.535 3.535-2.122-2.121"
|
||||
stroke="#515774"
|
||||
stroke={c}
|
||||
strokeWidth="1.71"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -175,7 +175,6 @@ const SiteTopNav = ({
|
|||
<OrgLogoIcon
|
||||
className="logo"
|
||||
src={orgLogoURL}
|
||||
invertDark={!hasDarkLogo}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -38,9 +38,6 @@
|
|||
}
|
||||
|
||||
&__card-icon {
|
||||
body.dark-mode & {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
&__count {
|
||||
|
|
|
|||
|
|
@ -294,6 +294,19 @@ body.dark-mode .checkbox-unchecked-state {
|
|||
stroke: $ui-fleet-black-25;
|
||||
}
|
||||
|
||||
// react-select v2 (DropdownWrapper) uses inline styles via COLORS proxy,
|
||||
// so !important is needed to override them in dark mode.
|
||||
body.dark-mode .react-select__control {
|
||||
background-color: $ui-fleet-black-5 !important;
|
||||
}
|
||||
|
||||
// Legacy react-select v1 (Dropdown) uses SCSS-applied backgrounds.
|
||||
body.dark-mode .Select .Select-control,
|
||||
body.dark-mode .Select .Select-control .Select-value,
|
||||
body.dark-mode .Select .Select-value {
|
||||
background-color: $ui-fleet-black-5;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: $pad-xlarge;
|
||||
margin-bottom: $pad-xlarge;
|
||||
|
|
|
|||
|
|
@ -105,10 +105,10 @@ body.dark-mode {
|
|||
--core-fleet-black: #e2e4ea;
|
||||
--core-fleet-green: #00C28B;
|
||||
--core-fleet-white: #1a1c21;
|
||||
--ui-fleet-black-75: #b3b6c1;
|
||||
--ui-fleet-black-50: #8b8fa2;
|
||||
--ui-fleet-black-75: #BEBEBF;
|
||||
--ui-fleet-black-50: #87888B;
|
||||
--ui-fleet-black-33: #636777;
|
||||
--ui-fleet-black-25: #42464f;
|
||||
--ui-fleet-black-25: ;
|
||||
--ui-fleet-black-10: #474c58;
|
||||
--ui-fleet-black-5: #25272D;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue