EDM-3515: Make Red Hat logo readable in light theme

[celdrake]

The Red Hat logo needs a new variant with Dark letters, given that the Masthead in Patternfly 6 now adapts to the dark/light theme. See https://v5-archive.patternfly.org/components/masthead with a light theme, it's always Dark.

• Reduced the size of the existing Dark logo from 14K to 10,3K.
• Added the Light logo.
• Display the correct logo depending on theme and brand in the Masthead and in the "Select auth provider" screen.

Summary by CodeRabbit

• Refactor
  • Consolidated logo selection and rendering logic into a unified, reusable approach across the application, improving code maintainability and ensuring consistent logo handling throughout the interface.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 178cbf74-5ad7-4c20-a423-a7f4f30a77e0

📥 Commits

Reviewing files that changed from the base of the PR and between 0155317 and 785cddb.

⛔ Files ignored due to path filters (2)

• apps/standalone/src/assets/bgimages/RHEM-logo-light.svg is excluded by !**/*.svg
• apps/standalone/src/assets/bgimages/RHEM-logo.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• apps/standalone/src/app/components/AppLayout/AppLayout.tsx
• apps/standalone/src/app/components/Login/LoginPageLayout.tsx
• apps/standalone/src/app/hooks/useBrandLogo.ts

---

Walkthrough

Introduces a new useBrandLogo hook that centralizes logo selection logic based on app settings and user theme preferences. Updates AppLayout and LoginPageLayout components to use the hook instead of direct conditional rendering. Removes duplicate logo asset imports and conditional logic from both components.

Changes

Cohort / File(s)	Summary
New Brand Logo Hook apps/standalone/src/app/hooks/useBrandLogo.ts	New hook that encapsulates logo selection logic. Returns appropriate logo (RHEM or Flight Control) and alt text based on settings.isRHEM flag. For RHEM, selects dark/light variant based on user theme preference from UserPreferencesContext.
Component Updates apps/standalone/src/app/components/AppLayout/AppLayout.tsx, apps/standalone/src/app/components/Login/LoginPageLayout.tsx	Replace conditional logo rendering with useBrandLogo hook calls. Remove direct SVG asset imports (logo, rhemLogo, fcLogo). Update Brand/img elements to use hook-provided logo and altText values.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title references the specific objective of making the Red Hat logo readable in light theme, which aligns with the PR's main purpose of adding theme-aware logo variants and updating UI locations to display correct logos based on theme.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can validate your CodeRabbit configuration file in your editor.

If your editor has YAML language server, you can enable auto-completion and validation by adding # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json at the top of your CodeRabbit configuration file.