Custom Invoice Branding with Logo Upload

[Kingsman-99]

Description

StellarSplit invoices currently carry only generic platform branding, which makes them unsuitable for professional client-facing use. This issue adds a branding settings screen at /settings/branding where creators can upload a company logo, set a primary accent color, and write a short tagline that is rendered on the invoice view and PDF export. All brand assets must be stored securely and served via a CDN-friendly URL. Branding is scoped per user account and applies to all invoices created by that account.

Technical Context

Create app/settings/branding/page.tsx with a BrandingForm component using react-hook-form and zod validation. Logo upload should POST to app/api/settings/branding/logo/route.ts, which streams the file to an S3-compatible store (or Vercel Blob) and returns a CDN URL. Validate MIME type (image/png, image/jpeg, image/webp) and enforce a 2 MB size cap on the server. Store brand metadata (logoUrl, accentColor, tagline) in the user's settings record via app/api/settings/branding/route.ts. Extend components/invoice/InvoiceView.tsx and the PDF export pipeline to pull brand settings and inject them. The color picker must allow hex input and reject values with insufficient contrast against white (WCAG AA).

Acceptance Criteria

• Logo upload accepts PNG/JPEG/WebP up to 2 MB; files exceeding the size limit or with unsupported MIME types are rejected with a specific error message before the server is called
• Uploaded logo appears on the live invoice view at /invoice/[id] and in the PDF export without pixelation at standard print resolution (300 dpi equivalent)
• Accent color changes are previewed in real time on the branding settings form; colors failing WCAG AA contrast against white are flagged with an inline warning
• Branding settings persist across page reloads and are applied to all invoices belonging to the authenticated user
• Removing branding (clearing logo/color/tagline) reverts the invoice view to platform-default styling
• All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

---

[felladaniel36-hash]

@felladaniel36-hash has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I'd like to claim this issue. I have reviewed the details and can begin working on a fix right away. Please assign it to me if it's still available. Thanks!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @felladaniel36-hash to this issue.

[naninu123]

@naninu123 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi — applying for #403 (Custom Invoice Branding with Logo Upload).

Fit: Next.js/TS product UI. Scope = logo upload + brand fields on invoice create/edit, persist + render on invoice view/PDF if present. No payment-flow rewrite.

Plan:

1. Branch feat/403-invoice-branding from default
2. Map invoice form + display components
3. Add logo upload (size/type limits) + brand fields; store with invoice; show on view
4. Validation + empty fallback; lint/build green
5. PR + Closes #403

Can ship same-day after assignment.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @naninu123 to this issue.

[drips-wave]

Congratulations, @felladaniel36-hash! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @felladaniel36-hash: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox!

@felladaniel36-hash's PR #551 was approved and merged by @Kingsman-99.

🏆 @felladaniel36-hash: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (942 total points). Track your full progress on GrantFox.

👏 Great work, @felladaniel36-hash! Keep contributing to Stellar-split.

[drips-wave]

This issue has been completed by @felladaniel36-hash as part of the Stellar Wave Program's 7th Wave 🥳

😎 @felladaniel36-hash: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.