Skip to content

Update branding assets and replace legacy logo with new WSO2 SVG#286

Open
Sachindu-Nethmin wants to merge 1 commit intowso2:mainfrom
Sachindu-Nethmin:update-branding
Open

Update branding assets and replace legacy logo with new WSO2 SVG#286
Sachindu-Nethmin wants to merge 1 commit intowso2:mainfrom
Sachindu-Nethmin:update-branding

Conversation

@Sachindu-Nethmin
Copy link
Copy Markdown
Contributor

@Sachindu-Nethmin Sachindu-Nethmin commented Apr 7, 2026

Purpose

The purpose of this PR is to modernize the WSO2 Integrator BI documentation branding by replacing legacy logo assets with new, cropped SVG variants. This update also includes refining the site header layout to ensure the new icons are correctly sized and positioned.

Goals

  • Replace legacy logo.svg, logo-for-light.svg, and favicon.png with high-quality SVG icons.
  • Update mkdocs.yml to correctly map black and white icon variants to light and dark themes.
  • Update the "Need Support" icon in the footer to the new orange WSO2 logo.
  • Fine-tune the header CSS for optimal logo alignment and spacing.

Approach

  • SVG Cropping: All three new SVG logos (WSO2-logo-black.svg, WSO2-logo-orange.svg, WSO2-logo-white.svg) were cropped to their bounding boxes (viewBox="131.09 131.22 262.94 262.94") to remove excess whitespace.
  • Configuration Updates:
    • Modified mkdocs.yml to point logo to the black variant and logo_light to the white variant.
    • Set WSO2-logo-orange.svg as the site favicon.
  • UI/Partial Updates: Revised footer.html to update the icon for the "Need support?" section.
  • CSS Refinement:
    • Adjusted _header.css to set the logo height to 1.6rem.
    • Added 1.5rem margin to both the left and right sides of the logo for balanced positioning.
    • Maintained site name alignment with the new logo spacing.

User stories

N/A

Release note

Updated WSO2 Integrator BI documentation branding with new SVG logos and refined header layout.

Documentation

N/A - This is a branding/UI update.

Training

N/A

Certification

N/A

Marketing

N/A

Automation tests

  • Unit tests
    N/A
  • Integration tests
    Manual verification performed on local development server (mkdocs serve).

Security checks

Samples

N/A

Related PRs

N/A

Migrations (if applicable)

N/A

Test environment

  • OS: Linux
  • Browser: Tested on Chrome/Firefox via local MkDocs server.

Learning

Researched Material for MkDocs header layout and logo customization to ensure proper alignment of square SVG icons.

Summary by CodeRabbit

  • Style
    • Updated documentation branding with WSO2-specific logos
    • Adjusted header logo sizing and spacing
    • Updated Enterprise Support icon in footer

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 7, 2026

Walkthrough

WSO2 branding assets are updated across configuration and theme files, including logo paths in mkdocs.yml, icon references in footer.html, and logo sizing adjustments in header CSS styling.

Changes

Cohort / File(s) Summary
Branding Assets Update
en/mkdocs.yml, en/theme/material/partials/footer.html
Replaced generic logo/favicon paths with WSO2-specific assets (WSO2-logo-black.svg, WSO2-logo-white.svg, WSO2-logo-orange.svg); updated Enterprise Support icon from favicon to WSO2 orange logo.
Header Logo Styling
en/theme/material/assets/css/partials/_header.css
Increased logo height from 1.4rem to 1.6rem, adjusted padding from .1rem 0 to 0, added explicit left/right margins (1.0rem and 0.5rem); reformatted media query selectors for button variants.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~9 minutes

Poem

🐰 Hoppy branding news hops in,
WSO2 logos now shine bright and bold,
Orange, black, and white they spin,
A fresh new look, fresh as a carrot from the fold! 🥕

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately and concisely summarizes the main change: updating branding assets and replacing legacy logos with new WSO2 SVG variants.
Description check ✅ Passed The PR description comprehensively addresses all required template sections including Purpose, Goals, Approach, Release notes, Security checks, and Test environment with sufficient detail.
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

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

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@en/theme/material/assets/css/partials/_header.css`:
- Around line 123-126: The CSS for the header logo (.md-header__button.md-logo)
currently sets margin-left: 1.0rem and margin-right: 0.5rem which conflicts with
the PR objective of 1.5rem; update the selector (.md-header__button.md-logo) so
both margin-left and margin-right are 1.5rem (or if the PR objective is wrong,
update the PR text to reflect the values you intend to use).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: da3f8975-2d11-4805-8d4a-6ab660b87a91

📥 Commits

Reviewing files that changed from the base of the PR and between f0b5ede and 65850fb.

⛔ Files ignored due to path filters (6)
  • en/docs/assets/img/WSO2-logo-black.svg is excluded by !**/*.svg
  • en/docs/assets/img/WSO2-logo-orange.svg is excluded by !**/*.svg
  • en/docs/assets/img/WSO2-logo-white.svg is excluded by !**/*.svg
  • en/docs/assets/img/favicon.png is excluded by !**/*.png
  • en/docs/assets/img/logo-for-light.svg is excluded by !**/*.svg
  • en/docs/assets/img/logo.svg is excluded by !**/*.svg
📒 Files selected for processing (3)
  • en/mkdocs.yml
  • en/theme/material/assets/css/partials/_header.css
  • en/theme/material/partials/footer.html

Comment on lines +123 to +126
.md-header__button.md-logo {
margin-left: 1.0rem;
margin-right: 0.5rem;
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Header logo margins don’t match the stated PR objective.

PR notes say left/right logo margins should be 1.5rem, but this sets 1.0rem (left) and 0.5rem (right). Please align implementation or update the objective text to avoid design drift.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@en/theme/material/assets/css/partials/_header.css` around lines 123 - 126,
The CSS for the header logo (.md-header__button.md-logo) currently sets
margin-left: 1.0rem and margin-right: 0.5rem which conflicts with the PR
objective of 1.5rem; update the selector (.md-header__button.md-logo) so both
margin-left and margin-right are 1.5rem (or if the PR objective is wrong, update
the PR text to reflect the values you intend to use).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant