Skip to content

feat(design): redesign Team, Media, FAQ, Contact, Tools, Ideas and Endorsements - #613

Merged
mohanadft merged 9 commits into
mainfrom
feat/redesign-team-media-faq-contact
Nov 5, 2026
Merged

feat(design): redesign Team, Media, FAQ, Contact, Tools, Ideas and Endorsements#613
mohanadft merged 9 commits into
mainfrom
feat/redesign-team-media-faq-contact

Conversation

@mohanadft

@mohanadft mohanadft commented Nov 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Summary

Brings /team, /media, /faq, /contact, /tools, /ideas and /endorsements onto the live design system (DESIGN.md, /membership canonical, /about as the reference). Each page gets the same structure: a Paper hero, First Light bands with Grove Deep overlines, and one Nightfall closing block. The old gray, green-800, blue, gradient, heavy-shadow and side-stripe styling is removed.

Pages

  • Team: board members get large portraits with their full bios; staff are a denser grid of faces, names and roles. All 12 people, bios, photos and crops are kept. The main button is now "Become a member", with /volunteer and /contact as the secondary links.
  • Media: the press release is no longer a modal. It's an inline section with a "Read the full release" expander. #member-driven-press-release deep links still open it, and the Plausible "Press Release Opened" event still fires. Press coverage is a dated list, newest first. Each logo download is now a visible, keyboard-reachable link instead of a hover-only overlay. PressReleaseDialog.astro is replaced by PressRelease.astro.
  • FAQ: MUI is removed; each question is a native <details>. Adds loading (skeleton), error (with retry) and empty states. #faq-... deep links now open and scroll to the question, which didn't work before. The API call, ?showAll=yes and client:only are unchanged.
  • Tools: Thaura gets a featured panel, and Newscord, Boycat and Find A Protest sit under the intro as "Start here". The other 11 tools are grouped into three new categories, shown as list rows (ToolRow.astro) where the whole row is clickable. All 15 tools, links and logos are kept. Adds an SEO description.
  • Ideas: the tabs become filter pills (aria-pressed) with counts. Ideas stay a card grid like the original, restyled on the system. A card opens the full brief in a native <dialog> (Esc, focus trap, backdrop click to close), and each card has its own apply link. Adds loading, error, nothing-published and empty-filter states. "Start from a target" becomes a numbered band. One typed toIdea() helper replaces three copy-pasted any blocks. The Notion fetch and the ProjectHub apply link are unchanged.
  • Endorsements: the hero now has a "What a T4P endorsement means" panel. The criteria become a numbered band, replacing the coloured card grid, and the review FAQ is static <details>. The form drops MUI for inputs that follow DESIGN.md: green focus ring, visible labels, aria-invalid/aria-describedby, and sending, success and error states. It sends the same 10 fields and the same JSON to /api/endorsement-request. Client checks reuse the server's validate.ts and have tests.
  • Contact: the general email sits next to the headline, followed by a list that sends press, endorsement, incubator and volunteer requests to the right page. The email now has a readable fallback when JS is off.

Email fallback

  • src/components/MailtoFallback.astro: clicking any email on /contact or /media copies the address and opens the mail app as usual. If nothing takes focus within ~1.2s (no mail app or webmail tab opened), an "Email address copied" tooltip appears above the link. Without clipboard access, the address is selected and the tooltip shows a Ctrl+C / Cmd+C hint. The outcome is announced to screen readers.

Shared pieces

  • src/utils/designClasses.ts: one module for the container, type scale, band, buttons, links and focus rings. /about and the four pages import it instead of copying it.

  • src/components/TerminalCta.astro: the single Nightfall closing block.

  • RichTextRenderer:

    • defaults now use the Grove and Stone tokens
    • Notion annotations are Tailwind classes instead of a style prop, so it stays CSP-safe if server-rendered
    • off-system Notion colours (orange, blue and so on) now inherit the surrounding text colour

    /ideas and /community-call pass their own link, gray, red and code classes, so those are unchanged there; text marked with other Notion colours on those pages will now inherit.

  • DESIGN.md now points to both shared pieces.

Needs a human check

  • Tools copy: The Wall ("more than Israel related" became "Israel-related"), UpScrolled ("Simply social, without limits."), and five tools still use the T4P mark as a placeholder logo
  • Ideas apply link: ProjectHub /apply vs the /project-application-form link that /incubator uses
  • New headline and closing-block copy on all four pages
  • Team: Afzal's and Omar's photos are landscape and now cropped to portrait from the centre
  • Media: the "Incarabia" article links to muslimtechwire.com (this was already the case); the interview dates are relative ("11 months ago") and out of date; five images in public/images/press/ are unused

Test plan

  • pnpm lint (0 errors), pnpm check (0 errors), pnpm test (420 passed)
  • Check all four pages in the Cloudflare preview at mobile and desktop widths
  • /media#member-driven-press-release expands the release; the Plausible event fires on expand
  • /faq#faq-... opens the right question; test loading and error states (throttle or block /api/faq)
  • /contact with JS disabled shows the fallback email text
  • On a machine with no mail app, clicking an email shows "Email address copied" and the clipboard holds the address; with a mail app, no tooltip appears
  • /tools: every row opens the right site in a new tab, and keyboard focus outlines the whole row
  • /ideas: filters switch lists and counts, cards open the brief dialog (Esc and backdrop click close it), apply links open ProjectHub; the error state shows if the Notion fetch fails
  • /endorsements: submit valid and invalid requests; check inline errors, the success screen, and that the server-error message keeps what was typed
  • Spot-check /ideas and /community-call rich text: bold, italic and links still render
  • Check the CSP in the preview: no blocked inline styles or scripts in the console

🤖 Generated with Claude Code

mohanadft and others added 2 commits November 5, 2026 14:08
@mohanadft @claude
feat(design): redesign Team, Media, FAQ and Contact on the live desig…
1105607 
…n system

- Team: editorial board rows with full bios, dense staff directory, membership CTA
- Media: press release inline with progressive disclosure (replaces modal,
  keeps hash deep link and Plausible event), dated coverage list, accessible
  logo downloads
- FAQ: native details accordion, MUI removed, loading/error/empty states,
  deep links now open the targeted question
- Contact: routing list to the right channel per need, no-JS email fallback
- All four: First Light bands, one Nightfall terminal CTA, Grove tokens,
  gray/green-800/blue/gradient drift removed

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mohanadft @claude
refactor(design): share design-system classes, terminal CTA and rich …
ca95417 
…text tokens

- src/utils/designClasses.ts: one source for container, type scale, band,
  buttons, links and focus rings; about, team, media, faq, contact and the
  FAQ/press release components import it instead of redefining it
- src/components/TerminalCta.astro: the single Nightfall block, used by
  team, media, faq and contact
- RichTextRenderer: defaults move to Grove/Stone tokens, annotations become
  Tailwind classes instead of a style prop (CSP-safe if server-rendered),
  off-system Notion colours inherit instead of adding accents
- DESIGN.md: point to the shared module and component

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Nov 5, 2026 •
edited
Loading

Copy link
Copy Markdown

Deploying website with  Cloudflare Pages  Cloudflare Pages

Latest commit: e583374
Status: ✅  Deploy successful!
Preview URL: https://6e439bb8.website-aun.pages.dev
Branch Preview URL: https://feat-redesign-team-media-faq.website-aun.pages.dev

View logs

mohanadft and others added 5 commits November 5, 2026 14:34
@mohanadft @claude
feat(design): add copy buttons beside every displayed email address
36f0248 
mailto links do nothing for visitors without a configured mail client, so
each address on /contact and /media (including the press release contact
and the terminal CTA) now has a Copy button. It uses the Clipboard API,
falls back to selecting the address with a Ctrl+C/Cmd+C prompt, announces
the result to screen readers, and stays hidden when JS is off.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mohanadft @claude
feat(design): icon-only copy button beside emails; brand grounds for …
d03c83a 
…logo tiles

- CopyEmailButton is now a borderless icon button (tooltip + aria-label,
  check icon on success) sitting right next to each address
- Press kit logo previews use First Light and Grove Green Deep instead of
  stone and the off-brand ink ground

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mohanadft @claude
feat(design): show a "Copied" tooltip on click; widen press release s…
c0ac2b9 
…idebar

- CopyEmailButton shows a small bubble above the icon after a click
  ("Copied", or the Ctrl+C/Cmd+C hint on fallback), clears the native title
  meanwhile, and restarts its timer on repeat clicks
- Press release label column grows from 12rem to 18rem so the contact
  email fits on one line beside its copy icon

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mohanadft @claude
feat(design): replace copy buttons with a mailto fallback tooltip
6c4bbbd 
Clicking an email now copies the address and opens the mail app as usual.
If the window has not blurred or been hidden ~1.2s later (no mail app or
webmail tab took over), an "Email address copied" tooltip appears above the
link; without clipboard access the address is selected with a Ctrl+C/Cmd+C
hint. Removes CopyEmailButton and the extra wrappers it needed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mohanadft @claude
feat(design): redesign Tools and Ideas on the live design system
30c0034 
- Tools: Thaura featured, "Start here" trio, remaining tools grouped into
  three categories as whole-row-clickable list rows (ToolRow), terminal CTA
  to membership and the incubator; adds an SEO description
- Ideas: aria-pressed filter pills with counts, expandable <details> rows
  with an apply link beside each (replaces card grid and modal), loading,
  error, nothing-published and empty-filter states, numbered "start from a
  target" band, terminal CTA; one typed toIdea() mapper replaces three
  copy-pasted `any` blocks

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mohanadft mohanadft changed the title feat(design): redesign Team, Media, FAQ and Contact on the live design system feat(design): redesign Team, Media, FAQ, Contact, Tools and Ideas on the live design system Nov 5, 2026
mohanadft and others added 2 commits November 5, 2026 15:50
@mohanadft @claude
feat(design): return Ideas to a card grid with a dialog for the full …
7ccda98 
…brief

Cards as on the original page, restyled on the system: title, excerpt,
apply link and a "Read more" label above a hairline. The whole card opens
the brief in a native <dialog> (Esc, focus trap, backdrop click, focus
return). Replaces the expandable rows; the loading skeleton matches.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mohanadft @claude
feat(design): redesign Endorsements and its request form
e583374 
- Page: hero with "what an endorsement means" panel, numbered criteria
  band (replaces the coloured card grid), review FAQ as static <details>,
  form band, terminal CTA to the incubator and membership
- Form: MUI removed; react-hook-form with DESIGN.md inputs (Grove focus),
  fieldsets, visible labels, aria-invalid/describedby, char count, and
  sending, success and server-error states
- Same 10 fields and JSON body to /api/endorsement-request; client rules
  reuse the server's validate.ts (stricter email than before), with tests

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mohanadft mohanadft changed the title feat(design): redesign Team, Media, FAQ, Contact, Tools and Ideas on the live design system feat(design): redesign Team, Media, FAQ, Contact, Tools, Ideas and Endorsements Nov 5, 2026
@mohanadft
mohanadft merged commit 8d4448c into main Nov 5, 2026
5 checks passed
@mohanadft
mohanadft deleted the feat/redesign-team-media-faq-contact branch November 5, 2026 14:09
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

@mohanadft