enhancement: add brand-yellow headers and readable layouts for legal pages

Ouverte
  • Quelque chose ne va pas ?
#105 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
22/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Active
Stack technique
nextjs, react, typescript
Domaine
design, frontend

Piste de recherche

This is a design brief, not an implementation request, so start by agreeing the direction with the maintainer. Read the shared shell in src/components/legal/legal-layout.tsx, then src/components/site-header.tsx, src/app/layout.tsx and src/lib/legal.ts to see how the legal pages are built. Done means the brief's acceptance criteria are met and checked at 360px, 768px and 1440px.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

area:frontend enhancement

Problem

The current legal pages place long policy text over the site's yellow grid/gradient background while the navbar is white. The owner wants a coherent, professional reading layout that still clearly matches the ProCoderJii YouTube channel and logo.

The earlier all-neutral mockup was exploratory. The design brief below is the requested direction for future implementation.

Design brief

Brand-yellow top band
  • Use a full-width brand-yellow page header band, matching the yellow in the YouTube banner and ProCoderJii logo. Verify the brand colour against those assets rather than introducing a new palette.
  • An optional subtle grid or faint math/code doodles may appear inside this band only.
  • Include the page title in the existing bold display font.
  • Include the requested date line: "Last updated: 13 November 2026".
  • Include an "In short" summary box: a white card with a dark border. Each summary must accurately reflect that page's existing content.
Comfortable policy reading area
  • Below the band, use plain white or a very light neutral background for long policy text.
  • Keep the decorative yellow grid/pattern out from behind long paragraphs.
  • Use a readable article width, clear heading hierarchy and comfortable paragraph/section spacing.
  • Include an "On this page" table of contents, with the active item highlighted in yellow.
  • Use yellow link underlines and a short yellow bar before each h2.
Palette and consistency
  • Palette: channel brand yellow, near-black (#111), and white. No beige and no green.
  • Preserve the existing logo, fonts and shared navigation. Make the shared navbar and page-header band visually coherent without adding separate per-page navbars.
  • Keep this scoped to the legal/informational page shell, rather than a broad application redesign.

Scope and code pointers

Start with Privacy Policy (/privacy), Terms of Use (/terms), Disclaimer (/disclaimer), and Copyright & Takedown (/copyright). About (/about) also uses LegalLayout and should retain a consistent visual treatment.

Relevant shared code: src/components/legal/legal-layout.tsx, src/components/site-header.tsx, src/app/layout.tsx and src/lib/legal.ts.

Acceptance criteria

  • Shared legal-page layout implements the yellow title/date/summary band and a plain reading area below it.
  • "In short" content is reviewed against each page's policy text; the visual change does not silently rewrite policy clauses.
  • The requested last-updated label is distinct from existing policy effective dates, which retain their meaning.
  • TOC anchors work, the active item is indicated, and anchored headings remain visible below the header.
  • Yellow TOC/link/h2 accents follow the brand palette and remain legible with keyboard focus states.
  • At 360px, 768px and 1440px, reading and navigation work without horizontal overflow; the TOC adapts to mobile.
  • Capture desktop/mobile screenshots and run relevant lint, build and browser checks when implemented.

Planning

Backlog/design issue only. No implementation or pull request is requested now. Start future work from this issue and link the resulting PR.

Related navbar reports: #101 (Home first-visit transparency), #102 (signed-in name), #104 (Notes header alignment). Those reports remain separate.

Langage dominant
TypeScript
Étoiles
1
Forks
1
Merge moyen
8 h 58 min
PR mergées (30 j)
37

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de procoderji-com/procoderji

Toutes les issues de procoderji-com/procoderji

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.