Repository navigation
UI foundation: design kit, header/footer, home and campaign page (give + back) - #97
Conversation
…it (#95) Replaces the rose brand with the Design-Principles palette (green primary, light orange accent, low radius, 44px targets), loads Be Vietnam Pro through next/font, and adds the first kit pieces (Button, Badge, Money, ProgressBar, EmptyState, SectionHeader, icons), the search-centric header with account and mobile menus, the sitemap footer, and a home page whose hero shows the featured campaign's public statement as a receipt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the
 |
Campaign page for give and back: hero media, organizer and beneficiary with the verification badge, a funding panel (headline, progress, pledge figures as receipt rows, the primary action, share), page tabs (story, statement, backers), reward tier cards and the transparency receipt. Discovery and the statement page use the same tabs and filters. Primary buttons and text links use the darker green so text meets 4.5:1. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
![dos[bot]](https://avatars.githubusercontent.com/in/4711427?s=60&v=4){kind=small}
…older matches what search covers (#95) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Respect display_options on the home receipt and drop the people count from the page tabs, so a hidden backers count stays hidden. - One colour class per money amount and card percentage (warning amber and the 100% green were overridden by Tailwind's class order). - Phone order on the campaign page: media, funding card, story, then tiers and totals; two columns from lg. - Menus close on a link, a search or focus leaving them; inset focus rings on tabs and the whole-card link; white focus ring on the dark band; stronger input focus ring. - Trust and explainer copy says what the product does (statements are reconciled, unexplained spending is flagged); 'Sắp đạt mục tiêu' instead of 'Đang được quan tâm'; 'Dự án sáng tạo' on the type badge. - Report link to the statement's evidence reports (PO, until a campaign report flow exists); Facebook share uses the site origin when known. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
⏸️ DOS Review: Automatic Review Limit ReachedDOS Code Review already reviewed 3 commits of this pull request automatically, the limit for one pull request, so this commit was not reviewed automatically and nothing was charged. Please step back before pushing another fix: a pull request that needs this many review rounds usually needs a rethink of its approach or a smaller scope, not one more patch. When you are ready, a maintainer can comment /review to review the current commit. |
Cover, funding card, story, then tiers and totals in the DOM, placed in two columns from lg with explicit grid rows, so keyboard and screen-reader order follows what phones show. Money labels may wrap when wider than the card; the home receipt drops its stats line when every stat is hidden. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
PO acceptance: merge at 4d42141. Lint + Build green; 918 tests and build locally; Lighthouse accessibility 100 on home, give, back, discovery, statement; design/a11y review 2 rounds; no data-flow change. Accepted: primary buttons #047857 for AA contrast; Be Vietnam Pro kept pending the owner's font call (a one-line token change if Roboto is chosen). DOS Code Review hit its auto-review cap after 3 CLEAN_PASS runs. |
Refs #95
What
The first design pass: tokens and a small component kit in
apps/web, the header (search-centric, account menu, phone menu), the sitemap footer, the home page, and the campaign page for give and back, followingdocs/Design-Principles.md. Discovery and the statement page share the campaign page's tabs and filters./me, admin, and the donate, pledge and payment flows are #96.globals.css): green primary, light orange accent, neutral ink/body/muted, 4px radius for buttons, badges and images, 6px for cards and inputs. No pills. 44px touch targets. Body text 16px; 14px only for badges and captions under figures.components/ui):Button/ButtonLink/buttonClass,Badge,Money/MoneyRow(receipt rows with dotted leaders),ProgressBar,TabNav/FilterNav(link tabs witharia-current),EmptyState,Field,Card,SectionHeader,CoverPlaceholder, inline icons. The existingbtn-*,fieldandcardutilities are re-tokened, so pages not restyled yet already use the new colours.lib/home.ts, tested); the limit goes from 6 to 10.lgit is two columns.Behaviour
No data call, server action, form field, route or
data-figure/data-noticehook changed. Money formulas are unchanged. Small visible changes:type=.NEXT_PUBLIC_SITE_URLwhen set.text-brand-600links elsewhere moved tobrand-700for contrast.For the PO / owner
next/font) instead of the doc's Roboto, for Vietnamese diacritics: side by side.Screenshots (seeded local stack: DOS.Me dev migrations, 3 give + 3 back campaigns, flat placeholder covers)
(The images live on the
assets/pr-97-screenshotsbranch, which holds no code.)Checks
pnpm format:check,lint,typecheck: pass.pnpm test: 918 passed, including the newlib/home.test.ts.pnpm build: pass.rounded-lg/rounded-fullare in/meand admin, which are UI pass: donate and pledge flows, payment pages, /me and admin on the new design kit #96.🤖 Generated with Claude Code