Skip to content

feat: redesign the UI with a brand theme and guided reward flow - #184

Merged
zaibon merged 6 commits into
mainfrom
feat/ui-redesign
Oct 4, 2026
Merged

feat: redesign the UI with a brand theme and guided reward flow#184
zaibon merged 6 commits into
mainfrom
feat/ui-redesign

Conversation

@zaibon

@zaibon zaibon commented Oct 4, 2026

Copy link
Copy Markdown
Owner

What

  • Brand theme: a custom Skeleton theme based on the logo (blue, mint, navy) replaces the stock legacy theme. Inter and JetBrains Mono are bundled with the app, and a soft brand-colored glow sits behind the page.
  • Header and footer: logo, navigation (Reward / Advanced / Badge), wallet button, €/$ switch and light/dark switch. The floating "Expert mode" / "Simple mode" buttons are removed. The footer links to Peanut Protocol, the license and GitHub. Each page now has a <title>, a meta description and Open Graph tags.
  • Home page: a short intro, then four steps: Repository → Contributors → Reward → Send.
    • Repository: a card with avatar, description, stars and forks.
    • Contributors: a Top 3 / 5 / 10 / custom picker, and rows with rank and commit count.
    • Reward: a summary (count × amount = total, network, ≈ fiat value) and a warning when the balance is too low.
    • Send: a reward links table with per-link and "Copy all" buttons.
  • Advanced page: a summary panel that stays visible while scrolling (mode switch, avatars of selected contributors, total per token with fiat values), filter and sort controls, and compact contributor cards.
  • Badge page: a live preview on light and dark README backgrounds, previews of each badge style, color pickers, and defaults so a badge appears right away.
  • Polish: placeholder content while loading instead of loading toasts, labelled inputs, visible keyboard focus, prefers-reduced-motion support, no sideways scrolling on narrow screens.
  • Fiat values (feat: show approximate EUR/USD value next to reward amounts #183): the amount field shows "≈ 1.85 €" on the left and "Balance: 120 USDC (≈ 111.11 €)" on the right, on one line. The reward totals show approximate EUR/USD values too.

Behavior changes and fixes

  • Links are protected: on the home page, the form locks once reward links are created. Before, editing the repository silently erased the links even though the funds were already deposited. "Start a new reward" asks for confirmation first.
  • Max splits the balance: "Max" now divides the balance between the selected contributors. Before, it filled in the whole balance as the per-person amount, so the total came to several times what the wallet held.
  • Private-email warning: step 4 flags contributors with a @users.noreply.github.com address, since the reward email won't reach them.
  • Badge snippet: it no longer shows src="undefined" before a repository is entered.
  • Page background: data-theme moved from <body> to <html>. Skeleton paints the background on <html>, which never received the theme's colors.
  • New endpoint: /api/github/repo returns repository information for the card.
  • Prefill links: /dashboard and /badges accept ?repository=owner/name, and pasting a full GitHub URL works everywhere.
  • SvelteKit 3: the page snapshots use the snapshot helper from $app/navigation, since export const snapshot is deprecated.

Why

The UI was the stock Skeleton look with bare forms. A first-time visitor couldn't tell what CommitKudos does, the badge page wasn't linked from anywhere, and some flows could lose money-related state. This PR gives the app an identity that matches the logo, and makes the reward flow explain itself step by step.

Design decisions

  • Fonts are bundled, not loaded from Google Fonts, so the app makes no third-party font request (simpler GDPR-wise).
  • Icons come from @lucide/svelte, imported one per file so only the icons used are bundled.
  • The contributor count re-slices the loaded list instead of fetching again. Only the latest repository search can update the page, so out-of-order responses are dropped.
  • The fiat total on the Advanced page only appears when every token in the reward has a price, so the sum is never partial.
  • "Expert mode" is renamed "Advanced": both modes reward several people at once. What sets the dashboard apart is choosing an amount per person.

Testing

  • pnpm check, pnpm lint and pnpm build pass.

  • Checked every page with headless Chrome screenshots: dark and light mode, 1280–1440px wide and 500px (the narrowest headless Chrome renders).

  • I checked the step 4 layout and the fiat values with injected test data, which is not part of this PR.

  • Not tested:

    • Anything that needs a connected wallet: link creation, emails, per-contributor amounts, real price loading.
    • Clicks and keyboard use.
    • True 390px phone width.

    A click-through with a test wallet on Sepolia before merging would cover these.

🤖 Generated with Claude Code

zaibon and others added 6 commits October 4, 2026 16:36
@zaibon @claude
Add CommitKudos brand theme, header navigation and footer
ec13c1d 
- custom Skeleton theme derived from the logo colors (blue, mint, navy)
- self-hosted Inter and JetBrains Mono fonts
- header with logo mark, Reward / Advanced / Badge navigation, wallet
  button and light switch; replaces the floating mode buttons
- footer with Peanut Protocol, license and GitHub links
- page titles, meta description and Open Graph tags
- move data-theme to <html> so the root background uses the theme

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@zaibon @claude
Redesign the home page as a guided 4-step reward flow
0906863 
- hero with a stable-width animated heading and a short explanation
- Repository / Contributors / Reward / Send stepper with progress
- repository card (avatar, description, stars, forks) from a new
  /api/github/repo endpoint, with inline "not found" / error states;
  pasted GitHub URLs are normalized to owner/name
- top 3 / 5 / 10 / custom presets that re-slice the loaded contributors
  instead of fetching them again
- contributor rows with rank, avatar, activity bar and commit count;
  placeholder rows while loading and an empty state
- reward summary (count x amount = total, network) with an insufficient
  balance warning; "Max" now splits the balance between the recipients
- reward links table with per-link and "copy all" buttons, a warning for
  contributors with a private GitHub email, and a confirmed "start over"
- the form locks once the links are created so they can't be lost by
  editing the repository
- use the snapshot helper from $app/navigation (export is deprecated)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@zaibon @claude
Redesign the advanced rewards page
24cedb3 
- sticky summary panel: repository card, "same amount / per contributor"
  mode switch, selected contributors avatar stack, total per token,
  insufficient balance and missing amount warnings, single action button
- filter by name / login / email, sort by commits or name, select all
- compact contributor cards with rank, commit count and a clear selected
  state; placeholder cards while loading and empty states
- /dashboard?repository=owner/name prefills the page
- use the snapshot helper from $app/navigation (export is deprecated)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@zaibon @claude
Redesign the README badge generator
e14ec2d 
- sticky live preview on a light and a dark README background
- default settings (label, logo, brand color) so a preview shows at once
- visual style picker rendering each badge style
- color fields with a swatch and a native color picker
- labelled fields grouped in Content / Style / Colors sections
- code tabs (Markdown first) only once a repository is entered: fixes the
  snippet showing src="undefined"
- /badges?repository=owner/name prefills the repository
- badge URL helpers moved to #lib/badge.ts, shared clipboard helper

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@zaibon @claude
Polish responsive layout and accessibility
d291667 
- fix horizontal overflow on narrow screens: grid columns use
  minmax(0, 1fr) so long emails truncate instead of widening the page
- step headers wrap on phones, "Select none" no longer breaks
- visible keyboard focus ring on links, buttons, radios and checkboxes
- honor prefers-reduced-motion for CSS transitions and animations
- the amount field has an accessible name when used without a <label>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@zaibon @claude
Show approximate EUR/USD values in the reward totals
0a6fba4 
- home: the reward summary shows "Total 10 USDC ≈ 9.26 €"
- advanced: each token total shows its fiat value, plus an overall fiat
  total when several tokens are sent and all of them are priced
- the amount field merges the fiat line with the token balance:
  "≈ 1.85 €" on the left, "Balance: 120 USDC (≈ 111.11 €)" on the right
- the €/$ switch matches the other header icon buttons

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Oct 4, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
commitkudos Ready Ready Preview Oct 4, 2026 3:43pm UTC

@zaibon
zaibon merged commit 88f590a into main Oct 4, 2026
6 checks passed
@zaibon
zaibon deleted the feat/ui-redesign branch October 4, 2026 15:49

This branch was successfully deployed

1 active deployment
Preview — 0a6fba43 Deployed Oct 4, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@zaibon