UI/UX: Replace the placeholder 'R' logo across header, wallet dropdown, and favicon

[Baskarayelu]

Description

Per RemitWise Branding.txt, the current placeholder logo is a circular red mark with a white "R", and a new official logo is needed across the product surfaces: header, favicon, landing page, and wallet dropdown. We need a design pass to define the logo lockups (full, compact, icon-only), specify usage rules on dark and light backgrounds, and ensure the mark is scalable and crisp at small sizes (favicon, nav). The existing public/logo.svg and its usage in components/Header.tsx, components/Nav/Logo.tsx, and components/WalletDropdown.tsx should be updated accordingly.

Requirements and context

• UI/UX scope only.
• Reference public/logo.svg, components/Header.tsx, components/Nav/Logo.tsx, components/WalletDropdown.tsx.
• Define full, compact, and icon-only lockups with clear-space and minimum-size rules.
• Provide dark- and light-background variants that meet contrast guidance.
• Specify favicon sizing and the header/nav placements.

Suggested execution

• Branch: uiux/brand-logo-rollout
• Deliver the SVG logo variants and a short usage guide in docs/.
• Document placements across header, nav, wallet dropdown, and favicon.
• Provide clear-space and min-size redlines.

Test and commit

• Visual QA at 375px and 1280px.
• npm run build
• npm run lint
• a11y: logo alt/aria-label, contrast on both themes.

Example commit message

feat(uiux): roll out official remitwise logo across product surfaces

Guidelines

• Document logo usage rules clearly.
• Ensure consistency across all placements.
• Timeframe: 96 hours