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

Abierto
  • ¿Algo no está bien?
#105 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
22/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
nextjs, react, typescript
Área
design, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
1
Forks
1
Merge medio
8 h 58 min
PR fusionados (30 d)
37

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de procoderji-com/procoderji

Todos los issues de procoderji-com/procoderji

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.