feat(branding): integrate official logo and resolve auth/home layout scrolling issues (!35) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(branding): integrate official logo and resolve auth/home layout scrolling issues

Overview

This PR integrates the official 3D claymorphic FinWise logo across the entire application, configures multi-environment browser favicons, and resolves critical flexbox overflow/scrolling issues on authentication and home pages.

Key Changes

1. Brand Identity & Logo Integration

src/static/logo.png: Added the high-resolution 3D claymorphic FinWise logo asset.
src/components/logo.tsx: Replaced template placeholder SVG with a reusable, typed React <Logo /> component supporting flexible dimensions and styling.
public/ & index.html: Created public directory containing favicon.ico, favicon.png, and logo.png. Updated HTML meta links for browsers and webviews.
src/components/shared/DocumentTitle.tsx: Injected dynamic DOM favicon resolution to ensure browser tab icons update instantly across dev server, ZMP simulators, and production builds.
src/pages/style-guide.tsx: Added a brand logo showcase section presenting small (40px), medium (56px), and large (72px) sizes.
README.md: Fixed broken logo badge image path.

2. Layout & Scrolling Fixes (Auth Screens)

src/pages/auth/register.tsx, forgot-password.tsx, reset-password.tsx:
- Replaced justify-center py-12 with justify-start overflow-y-auto pt-2.
- Fixed flexbox negative coordinate overflow that caused the top half of the logo to be clipped behind the fixed <Header>.
- Restored natural touch/mouse vertical scrolling throughout the entire form.
src/pages/auth/login.tsx: Replaced temporary WalletIcon with the official <Logo /> and enabled overflow-y-auto.
src/components/shared/AuthGuard.tsx: Upgraded initialization splash screen with a gentle pulsating FinWise logo.

3. Home & Profile Page Cleanup

src/pages/index.tsx:
- Completely removed the obsolete status card (authTitle / authDescription).
- Replaced justify-between and flex-1 with justify-start overflow-y-auto, resolving vertical element collision between the user account text and the "AI Assistant" button on smaller viewports and web browsers.
src/pages/profile/index.tsx:
- Removed redundant mini logo and app version footer (v1.0.0) from the bottom of the profile screen.

## Overview
This PR integrates the official 3D claymorphic FinWise logo across the entire application, configures multi-environment browser favicons, and resolves critical flexbox overflow/scrolling issues on authentication and home pages.

---

## Key Changes

### 1. Brand Identity & Logo Integration
- **`src/static/logo.png`**: Added the high-resolution 3D claymorphic FinWise logo asset.
- **`src/components/logo.tsx`**: Replaced template placeholder SVG with a reusable, typed React `<Logo />` component supporting flexible dimensions and styling.
- **`public/` & `index.html`**: Created public directory containing `favicon.ico`, `favicon.png`, and `logo.png`. Updated HTML meta links for browsers and webviews.
- **`src/components/shared/DocumentTitle.tsx`**: Injected dynamic DOM favicon resolution to ensure browser tab icons update instantly across dev server, ZMP simulators, and production builds.
- **`src/pages/style-guide.tsx`**: Added a brand logo showcase section presenting small (40px), medium (56px), and large (72px) sizes.
- **`README.md`**: Fixed broken logo badge image path.

### 2. Layout & Scrolling Fixes (Auth Screens)
- **`src/pages/auth/register.tsx`, `forgot-password.tsx`, `reset-password.tsx`**:
  - Replaced `justify-center py-12` with `justify-start overflow-y-auto pt-2`.
  - Fixed flexbox negative coordinate overflow that caused the top half of the logo to be clipped behind the fixed `<Header>`.
  - Restored natural touch/mouse vertical scrolling throughout the entire form.
- **`src/pages/auth/login.tsx`**: Replaced temporary `WalletIcon` with the official `<Logo />` and enabled `overflow-y-auto`.
- **`src/components/shared/AuthGuard.tsx`**: Upgraded initialization splash screen with a gentle pulsating FinWise logo.

### 3. Home & Profile Page Cleanup
- **`src/pages/index.tsx`**:
  - Completely removed the obsolete status card (`authTitle` / `authDescription`).
  - Replaced `justify-between` and `flex-1` with `justify-start overflow-y-auto`, resolving vertical element collision between the user account text and the "AI Assistant" button on smaller viewports and web browsers.
- **`src/pages/profile/index.tsx`**:
  - Removed redundant mini logo and app version footer (`v1.0.0`) from the bottom of the profile screen.