Project Log
Keep this page updated after each major request so it remains a usable handover record.
A running internal record of what has been migrated, refined, and shipped across the Wetpaint Brand Hub.
This page captures the work completed in the current migration chat so the project has a built-in handover reference inside the portal itself. It can keep growing as more pages, assets, and refinements are added.
Recent Updates
Production Deployment - Completed the release pre-flight, created the second admin account for Petra Mc Cardle with admin and enterprise access, and prepared the current BrandHub platform updates for production deployment.
Step 08 - Added an admin-only demo package toggle across the portal with shared page/tool access rules, a persistent demo banner, gated sidebar navigation, locked tool states in `Corporate Stationary`, imagery search-and-filter gating, and a subscription page update reflecting the revised Custom Build and tier feature matrix.
Step 05 - Built the `/subscription` page with four tier cards, current-plan highlighting, a collapsible feature comparison table, add-ons and roadmap sections, a quote-request modal wired to `/api/contact`, and an admin-only upgrade modal that switches the active user package through `/api/admin/users`.
Step 07.3 - Added a `Document Library` tool to `Corporate Stationary` using the shared fullscreen popup pattern. It reads approved repo-backed documents from the migration uploads source and supports browsing, search, filtering, sorting, opening, and downloading through restricted server routes.
Step 07.2 - Added a real `DPI Checker` tool to `Corporate Stationary` using the shared fullscreen popup pattern. It checks uploaded image resolution against intended output sizes and returns a simple print-readiness rating with practical recommendations, while handling PDFs gracefully as a limited MVP.
Fixed the fullscreen tool shell scrolling so embedded modals can scroll through tall utility interfaces like the new Image Optimiser instead of clipping the lower controls and download area.
Replaced the `Image Optimiser` placeholder with a working in-browser MVP that supports single-image upload, resize and crop modes, format conversion, compression, SEO filename editing, manual alt text and description fields, live preview updates, and direct download from the fullscreen tool modal.
Expanded `Corporate Stationary` into a more scalable tool hub with a controlled responsive grid, three new placeholder tools, and one shared `PortalToolModal` component replacing the duplicated fullscreen modal logic.
Added a dedicated `Support` link to the primary BrandHub navigation on both desktop and mobile so the new `Need Help` page is reachable directly from the portal shell.
Completed Step 06 for the portal support flow by rebuilding `Need Help` into a clean branded support page with direct contact details, a lightweight request form, inline success messaging, and a simple `/api/support` handler ready to extend later.
Completed a restrained visual polish pass that softened hover effects, reduced heavy card lift and image zoom behaviors, calmed shared panel surfaces, and tightened sidebar/mobile-nav typography so newer UI feels more native to the Wetpaint Brand Hub.
Completed a full portal design audit and normalized the main page shells, headers, subtitles, typography, CTA styles, warning banners, and download-card treatments against the `Brand Hub Web Pages REV1.pdf` reference.
Implemented Step 01 of the backend foundation: login flow, middleware protection, admin route group, user management API, and role-aware sidebar actions.
Moved the long-form project log into the admin area and removed it from the main portal navigation for standard users.
Built a new `Letterhead Builder` tool with a fullscreen modal trigger from `Corporate Stationary`, live multi-page A4 preview, and PDF/Word/email export actions using the supplied 2026 letterhead assets.
Made the `Letter Mark` images in the `Appearance` and `Positioning` sections open the full asset in a new browser tab when clicked.
Updated the `Letter Mark` page so the `Appearance` and `Positioning` image panels use a fuller, cleaner image treatment aligned more closely with the `Logo` page reference.
Fixed a broken local Next.js dev build by stopping the stuck dev server, clearing the generated `.next` output, and restarting the app so CSS and JS bundles regenerate correctly again.
Added a shared motion system with reduced-motion support, smoother sidebar interactions, subtle CTA/card hover states, and fade-in image handling across the main gallery surfaces.
Completed a mobile, accessibility, and SEO pass across the portal shell, including per-page metadata, canonical URLs, skip-link support, and a branded 404 route.
Normalized CTA buttons and responsive spacing further across `Logo`, `Letter Mark`, `Colours`, `Brand Collateral`, `Corporate Stationary`, `UI & Components`, and the signature builder flow.
Updated `next.config.mjs` so production builds can target an alternate output folder when a local dev server is already using `.next`.
Built out the `UI & Components` page from the supplied desktop source set, including the approved buttons, iconography, navigation controls, content cards, and image-led component tiles.
Rebuilt the `Brand Collateral` page again from the supplied desktop asset folder and expanded the billboard and print sections so each collateral example now has its own download action.
Exported the standalone `signature-tool.html` file to `migration/Mics` so the approved Wetpaint signature generator can be reused on the legacy site without the Next.js app shell.
Added per-asset action buttons to the `Corporate Stationary` page so each approved stationery item now has a clear request/download path.
Connected the `Email Signatures` button to a popup signature-builder tool inside the portal.
Rebuilt the embedded signature tool with the migration logo asset, fixed the copy/download actions, and changed the job title placeholder to `Full Stack Developer`.
Added a reusable Wetpaint CI stylesheet file so the same brand system can be carried into another project quickly.
Added a reusable sidebar nav demo with placeholder items to the brand kit.
Pushed the current BrandHub migration work to GitHub and published the production Vercel deployment successfully.
Added the red Wetpaint `W` mark as the app favicon so the live site now uses the branded tab icon.
Project Setup And Audit
Confirmed `C:\Github\brandhubnext-1` as the active migration workspace.
Reviewed the `migration` folder and identified available source content, builder exports, and assets.
Checked the portal routes to understand which pages were already built and which were still placeholders.
Portal Buildout
Built out the missing portal pages so the scaffolded routes had real branded content instead of placeholders.
Reworked `Typography` from the migration material using the local brand fonts and the existing CI structure.
Adjusted existing pages like `Brand Overview`, `Brand Tone`, and `Letter Mark` to better match the original design direction.
Navigation And CI Consistency
Fixed the sidebar logo so the expanded state uses the actual Wetpaint wordmark and the collapsed state centers the `W` properly.
Added shared CI tokens for typography and color usage so the portal pages can follow a more consistent visual system.
Normalized key portal pages and nav styling to use the Wetpaint red, grey, heading, and type scale variables more consistently.
Logo Page Improvements
Reworked the `Logo` page CTA and download panel to better match the CI, including the rounded red button and grey hover state.
Added a sticky in-page section menu with smooth scrolling and an active underline state.
Enlarged imagery in `Rules of Integrity`, `Logo Usage`, and `Incorrect Usage` and removed the over-framed card treatment where it felt off-design.
Imagery Migration
Rebuilt the `Imagery` page from the supplied Oxygen JSON structure rather than keeping the earlier placeholder layout.
Copied the imagery assets from `migration\Imagery` into `public\images\imagery` so they can render directly in Next.js.
Implemented the gallery grids, per-image download buttons, fullscreen viewer, and centered image-bank download CTA.
Responsive Portal Shell
Added a dedicated mobile and tablet navigation pattern with a sticky top bar and slide-out drawer menu.
Updated the portal layout so smaller screens no longer reserve desktop sidebar space.
Prepared the portal for page-by-page responsive refinement instead of relying only on the desktop shell.
Lightbox Rollback On Logo And Lettermark
Tried aligning the `Logo` and `Letter Mark` pages to the same fullscreen viewer pattern used on `Imagery`.
After viewer issues on those pages, removed the lightbox behavior from both and reverted them to stable static images.
Left the `Imagery` page using the fullscreen gallery viewer.
Signature Builder Route
Replaced the embedded iframe-based signature tool with a dedicated top-level `/signature-builder` page.
Added the migration logo asset to `public/images/signature/logo.webp` for the builder preview.
Rebuilt the copy action to write rich HTML signature content and replaced the PNG export with a browser-native canvas render that does not rely on a CDN script.
Reusable Brand Kit
Created a standalone `brand-kit/wetpaint-ci.css` file for reuse in other projects.
Packaged Wetpaint color tokens, typography tokens, panel styles, and CI button styles into one drop-in stylesheet.
Included reusable helper classes for page titles, section titles, lead text, panels, cards, primary/secondary/outline buttons, and a sidebar nav shell with dummy data.
Brand Collateral Rebuild
Rebuilt the `Brand Collateral` page from the migration JSON and screenshot reference rather than the earlier placeholder summary cards.
Copied the supplied collateral PNG assets into `public/images/brand-collateral` so the page can render and download them directly.
Matched the original structure with the intro, grey two-column download band, and the `Brand Application` billboard and magazine ad galleries.
Synced the remaining `WP-json.txt` reference file into the public collateral mirror so the source set is complete.
Step 01 - Auth System + Admin Backend
Date: 2026-04-13 - Status: Complete.
Built the Supabase auth foundation in code: login flow, server/client auth helpers, middleware protection, and a local SQL handoff file at `supabase/step-01-auth.sql` for the `profiles` and `download_logs` schema.
Added a branded login route for approved accounts only, with email/password sign-in, reset email support, and redirect back into the protected portal.
Built a separate admin area at `/admin` with its own layout, dashboard, user management screen, and the moved project log.
Added the admin users API so admins can create users, edit role/package/status, and manage profile records through the service-role client on the server.
Updated the main portal nav so the `Admin` entry appears only for admin profiles, while logout is available to all authenticated users on both desktop and mobile.
Used `@supabase/ssr` with `@supabase/supabase-js` for the auth/client split, and confirmed the local auth/admin implementation passes `npx tsc --noEmit`.
Design Audit And Consistency Correction
Date: 2026-04-13 - Status: Complete.
Corrected portal page titles to the shared grey DM Sans treatment and applied the red subtitle pattern consistently across the portal route set.
Standardised body copy, section headings, dividers, numbered content styles, warning banners, download cards, and red CTA buttons to align more closely with the `Brand Hub Web Pages REV1.pdf` reference.
Normalized page shell spacing and card surfaces across key portal routes including `Brand Overview`, `Brand Tone`, `Logo`, `Letter Mark`, `Colours`, `Typography`, `Imagery`, `Corporate Stationary`, `Brand Collateral`, `UI & Components`, `Templates`, the portal landing page, and `Need Help`.
Kept all existing page functionality intact while tightening the shared visual system and removing leftover Arimo-based portal UI treatments.
Current Status
The portal now contains real content across the major route set instead of only placeholders.
The visual system is much closer to the WordPress source, especially for `Logo`, `Letter Mark`, `Colours`, `Typography`, `Imagery`, and the broader portal page shell.
Tablet and mobile now have a dedicated responsive navigation shell instead of relying on the desktop hover sidebar.
The route metadata, canonical tags, skip link, and branded 404 page are now in place for the core portal routes.
The fullscreen lightbox is currently being used on `Imagery`, while `Logo` and `Letter Mark` have been reverted to static image rendering.
The Brand Hub now has a full auth foundation with protected admin routes and user management wired to Supabase-backed profiles.
Suggested Next Steps
Run a browser-side visual QA pass page by page and tune spacing against the original WordPress design where screenshots still reveal small differences.
Run the provided Supabase SQL in the live project so the `profiles` and `download_logs` tables, trigger, and RLS policies exist before admin features are used in production.
Replace placeholder download links with final asset URLs where needed.
Continue tightening CI consistency by moving more inline styles into reusable page-level or shared styles.
Keep this page updated after each major request so it acts as an internal change log.
Note: this admin log should be updated continuously after major requests so it remains the single source of truth for project history, backend work, and handover context.