Brand restyle: raafetchoukri.com (light/dark, theme toggle, mobile nav) - #17
Merged
Conversation
… mobile nav) Ports the design handoff brand language into the React/TS suite: - Tokens: design-exact light + dark palette in src/index.css (hex mapped to the repo's HSL-triplet vars so every Tailwind color rebrands at once); derived p10/p20/a10/a20 tints, capability badge colors, no drop shadows (depth via borders + hover tints per the brand rule). Inter + JetBrains Mono. - Dark mode: pre-paint shell script applies the OS color-scheme before first paint; header sun/moon toggle flips it for the session. Not persisted, to keep the visible "No localStorage or cookies" privacy claim true. - SuiteHeader: RC avatar, "/ Modules" wordmark, LinkedIn glyph, theme toggle, and a responsive 900px mobile hamburger drawer (auto-closes on navigate and on resize back to desktop). SuiteFooter aligned to the card surface. - Copy: removed every em dash from visible copy (142 -> 0 across src + public sample manifests), uniformly replaced with the brand's middle-dot separator so generated strings and their test assertions stay in lockstep. - Sample data: default Scrubber + new featured Storyteller pacs.008 now reflect the canonical Okonkwo Logistics -> Meridian Trading payment (EUR 18,720.00, TX-20260612-7741 / INV-7741-2026). IBAN/BIC examples already matched. - Routing, gated-connector behavior, and the privacy posture are unchanged. Verified locally: lint, format:check, typecheck, test (263), audit:privacy, build all pass. The data:*:check steps require external SWIFT reference files not present locally; CI runs them (the BIC generator + committed snapshot were updated together so byte-equality holds). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…cy boundary The CDN <link>/preconnect tags made cross-origin requests, failing the e2e privacy-boundary specs (smoke, ssi, workbench) which assert zero external requests. Inter + JetBrains Mono are already first in the Tailwind font stack with system fallbacks, matching the repo's request-free pattern. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Raafet57
added a commit
that referenced
this pull request
Jun 30, 2026
Brand restyle: raafetchoukri.com (light/dark, theme toggle, mobile nav)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ports the
design_handoff_payment_intelligence_brand/restyle into the React/TS suite. The HTML*.dc.htmlfiles are committed as design references only (not shipped as production code).What changed
Tokens & theme system (
src/index.css,tailwind.config.ts)--p10/--p20/--a10/--a20), capability badge colors (light/dark), andcard-hover/card-borderTailwind colors.practice-card/ button helpers updated; 8px button radius.Dark mode + toggle (
index.html,src/lib/useTheme.ts,SuiteHeader.tsx)window.__theme.Header / footer (
SuiteHeader.tsx,SuiteFooter.tsx)›affordance; active-route highlight). Footer aligned to the card surface.Copy: em dashes removed (visible copy: 142 -> 0)
src/+public/sample manifests. Replaced uniformly with the brand's middle-dot·separator (already used in the footer + README), so generated strings and their test assertions stay in lockstep. The BIC snapshot generator and its committed artifact were updated together.Sample data unified to the canonical payment
TX-20260612-7741/INV-7741-2026, remittance "Invoice 7741 freight services May 2026". IBAN (DE89…) and BIC (DEUTDEFF) examples already matched. Other Scenarios/Storyteller archetypes intentionally left as distinct samples.Routing, gated-connector behavior, and the privacy posture are unchanged.
Decisions to review
index.htmlshell and soften that copy line.https://www.linkedin.com/in/raafetchoukri, constantBRAND_LINKEDIN_URLinSuiteHeader.tsx) — the design left the href blank. Confirm/replace.Verification
Locally green:
lint,format:check,typecheck,test(263 passing),audit:privacy,build. Visually checked light + dark, theme toggle, and mobile drawer.data:iban:check/data:bic:check/data:cbpr:checkcould not run locally — they regenerate from SWIFT reference files not on this machine. CI runs the fullpnpm verify. The BIC generator and its committed snapshot were edited together so byte-equality holds.Not in this PR
Per-page layout is rebranded via the token system rather than bespoke pixel-by-pixel reconstruction of each
*.dc.html. Deeper per-page layout polish (e.g. exact two-column workspace specs on individual tool pages) can follow up.