Fix: Light mode logo gets applied in dark mode when the dark one is default + Logo backgrounds should be the same color as the navbar background (#45569)
<!-- Add the related story/sub-task/bug number, like Resolves #123, or remove if NA --> **Related issue:** Resolves #45554, Resolves #45555, Resolves #45557 ## Testing - [x] QA'd all new/changed functionality manually #### Before - Uploaded logo is used as a default even though it was uploaded for the other mode. - Logo preview cards do not match navbar's background. <img width="1207" height="825" alt="dark-mode" src="https://github.com/user-attachments/assets/0526aa33-9f43-4e7b-9c19-e490991b085a" /> #### After - Uploaded logo is used only for the mode it was uploaded for. - Logo preview card backgrounds are static: they always match the navbar's background. (See [Figma](https://www.figma.com/design/3oQUXGnjMCqX4U2B9nQ9X8/-39016-Ability-to-upload-a-custom-logo-served-from-my-Fleet-ins?node-id=5305-2589&t=YAckLtIgJCzLuHg1-0) wireframes.) <img width="1213" height="827" alt="Screenshot 2026-05-15 at 9 26 27 AM" src="https://github.com/user-attachments/assets/c16d3919-d98b-4c53-9797-4b820d4c6c4c" /> <img width="1215" height="821" alt="Screenshot 2026-05-15 at 9 26 43 AM" src="https://github.com/user-attachments/assets/f6ff83dc-127c-417b-a6ad-a1c6ce3e488e" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Improved logo display consistency across light and dark modes. * Updated background colors for logo preview sections to enhance visual appearance in both themes. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/fleetdm/fleet/pull/45569) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -174,8 +174,7 @@ const SiteTopNav = ({
|
||||
const lightLogoURL =
|
||||
config.org_info.org_logo_url_light_mode ||
|
||||
config.org_info.org_logo_url_light_background;
|
||||
const hasDarkLogo = darkLogoURL && darkLogoURL !== lightLogoURL;
|
||||
const orgLogoURL = darkMode && hasDarkLogo ? darkLogoURL : lightLogoURL;
|
||||
const orgLogoURL = darkMode ? darkLogoURL : lightLogoURL;
|
||||
const active = navItem.location.regex.test(currentPath);
|
||||
|
||||
const navItemBaseClass = "site-nav-item";
|
||||
|
||||
@@ -50,10 +50,10 @@
|
||||
}
|
||||
|
||||
&__dark-background {
|
||||
background-color: $ui-fleet-black-75;
|
||||
background-color: $logo-preview-dark;
|
||||
}
|
||||
|
||||
&__light-background {
|
||||
background-color: $ui-light-grey;
|
||||
background-color: $logo-preview-light;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -309,6 +309,8 @@ $static-black: #192147;
|
||||
$dark-mode-table-header: #282c33;
|
||||
$dark-mode-table-row: #1f2229;
|
||||
$dark-mode-nav-hover: #1f2228;
|
||||
$logo-preview-light: #ffffff;
|
||||
$logo-preview-dark: #1a1c21;
|
||||
|
||||
// Opaque colors for table shadows — compile-time SCSS math, not themed.
|
||||
// These are subtle edge effects; dark-mode polish can refine them later.
|
||||
|
||||
Reference in New Issue
Block a user