IS-11345 Display configured logo in the Login Web App#204
Merged
aleixsuau merged 7 commits intoMay 27, 2026
Conversation
- Render theme.logo.path as <img className="haapi-stepper-logo">, positioned before or inside <Well> based on theme.logo.isInsideWell. - Add .haapi-stepper-logo CSS reusing --login-logo-* theme tokens (200px max-width, 40px max-height, object-fit: contain) and mirror legacy spacing (1.5rem mobile, 5rem >=576px outside the well, 0 inside). - Decorative alt="" + role="presentation".
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds support for displaying a configured theme logo in the Login Web App (LWA) based on bootstrap configuration, with styling aligned to existing --login-logo-* theme tokens.
Changes:
- Add
.haapi-stepper-logostyling (size constraints, centering, responsive spacing) and an inside-well spacing override. - Render
theme.logo.pathas a logo<img>inLayout, positioned inside/outside the well depending ontheme.logo.isInsideWell. - Extend the LWA bootstrap configuration TypeScript interface with
theme.logofields.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
src/login-web-app/src/shared/util/css/styles.css |
Adds .haapi-stepper-logo styles and responsive spacing rules. |
src/login-web-app/src/shared/ui/Layout.tsx |
Renders the configured logo and changes layout structure to include a Well wrapper. |
src/login-web-app/src/haapi-stepper/data-access/bootstrap-configuration.ts |
Extends the bootstrap configuration interface with required theme.logo fields. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+245
to
+253
| @media (min-width: 576px) { | ||
| .haapi-stepper-logo { | ||
| margin-top: 5rem; | ||
| } | ||
| } | ||
|
|
||
| .haapi-stepper-well > .haapi-stepper-logo { | ||
| margin-block: 0 var(--space-2); | ||
| } |
Collaborator
There was a problem hiding this comment.
I'll do some adjustments here so the margin top derives a css token instead of this old 5 rem value
vahag-curity
approved these changes
May 27, 2026
luisgoncalves
approved these changes
May 27, 2026
urre
approved these changes
May 27, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Jira: https://curity.atlassian.net/browse/IS-11345
Summary
theme.logo.path), positioned before or inside theWellbased ontheme.logo.isInsideWell..haapi-stepper-logoCSS reuses the shared--login-logo-*theme tokens, mirroring the legacy.login-logo(200×40px max,object-fit: contain, centered, 1.5rem→5rem top margin).alt=""+role="presentation".Apply the patch file to mock BE logo data:
IS-11345-lwa-logo-placeholder.patch