diff --git a/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx b/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx index 6ce0b3192f..87068dec19 100644 --- a/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx +++ b/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx @@ -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", diff --git a/frontend/components/icons/LowDiskSpaceHosts.tsx b/frontend/components/icons/LowDiskSpaceHosts.tsx index 59787f2636..159433fb98 100644 --- a/frontend/components/icons/LowDiskSpaceHosts.tsx +++ b/frontend/components/icons/LowDiskSpaceHosts.tsx @@ -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 ( - + ); }; diff --git a/frontend/components/icons/MissingHosts.tsx b/frontend/components/icons/MissingHosts.tsx index 1be0be1641..08286cf34e 100644 --- a/frontend/components/icons/MissingHosts.tsx +++ b/frontend/components/icons/MissingHosts.tsx @@ -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 ( - + ); diff --git a/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx b/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx index 6ba6daa8cd..063d808108 100644 --- a/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx +++ b/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx @@ -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 ( { +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 ( - + { diff --git a/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx b/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx index fcb22931c6..2801334e44 100644 --- a/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx +++ b/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx @@ -175,7 +175,6 @@ const SiteTopNav = ({ diff --git a/frontend/pages/DashboardPage/cards/HostCountCard/_styles.scss b/frontend/pages/DashboardPage/cards/HostCountCard/_styles.scss index 87e71e65b6..5dfe0afa81 100644 --- a/frontend/pages/DashboardPage/cards/HostCountCard/_styles.scss +++ b/frontend/pages/DashboardPage/cards/HostCountCard/_styles.scss @@ -38,9 +38,6 @@ } &__card-icon { - body.dark-mode & { - opacity: 0.75; - } } &__count { diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss index 3a8fe4de97..80361d75de 100644 --- a/frontend/styles/global/_global.scss +++ b/frontend/styles/global/_global.scss @@ -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; diff --git a/frontend/styles/var/colors.scss b/frontend/styles/var/colors.scss index 004652fed3..fda79eea71 100644 --- a/frontend/styles/var/colors.scss +++ b/frontend/styles/var/colors.scss @@ -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;