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

Đang mở
  • Có gì không ổn?
#105 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
22/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
nextjs, react, typescript
Lĩnh vực
design, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
1
Fork
1
Merge trung bình
8 giờ 58 phút
Pull request đã merge (30 ngày)
37

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của procoderji-com/procoderji

Tất cả issue của procoderji-com/procoderji

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.