feat: revamp Contact Page UI and persist theme experience#743
Open
ThePrabhu wants to merge 2 commits into
Open
feat: revamp Contact Page UI and persist theme experience#743ThePrabhu wants to merge 2 commits into
ThePrabhu wants to merge 2 commits into
Conversation
…same theme and ui consistency
|
@ThePrabhu is attempting to deploy a commit to the magic-peach1's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
✅ PR Format Check Passed — @ThePrabhuBasic format checks passed. A maintainer will review your code changes. This does not mean the PR is approved — it just means the format is correct. |
github-actions
Bot
added
level:advanced
Contributor
👋 Thanks for your PR, @ThePrabhu!Welcome to Reframe — a browser-based video editor built for everyone 🎬
What happens next
Quick checklist
Useful links
Happy coding! 🎉 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the Contact page to match the app’s token-based theming (light/dark/high-contrast) and introduces a new repository-level .hintrc configuration file.
Changes:
- Restyled
src/app/contact/page.tsxwith a card-based layout, improved typography, and CSS variable theme tokens. - Added
.hintrcwith (currently global) overrides for accessibility and inline-style hinting rules.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
src/app/contact/page.tsx |
Replaces hard-coded dark styling with token-based themed UI and a new card-style layout for contact links. |
.hintrc |
Adds hinting configuration, including globally disabling some axe accessibility checks. |
Comments suppressed due to low confidence (1)
src/app/contact/page.tsx:32
- The "?" badge appears purely decorative; without
aria-hidden, some screen readers may announce it as literal “question mark”. Mark the decorative icon/character asaria-hidden="true"(or replace with an SVG that’s hidden) to avoid noisy output.
<div className="mb-6 h-16 w-16 rounded-2xl border border-[var(--border)] bg-[var(--surface)] flex items-center justify-center shadow-sm">
<span className="text-2xl font-bold text-[var(--accent)]">?</span>
</div>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+12
to
+24
| <svg | ||
| className="h-3.5 w-3.5" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke="currentColor" | ||
| strokeWidth={2} | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M10 19l-7-7m0 0l7-7m-7 7h18" | ||
| /> | ||
| </svg> |
| </div> | ||
|
|
||
| <div className="mt-8 rounded-2xl border border-[var(--border)] bg-[var(--surface)] px-6 py-5 text-sm text-[var(--muted)]"> | ||
| This page follows the shared theme tokens from globals.css, so the design updates automatically in light, dark, and high-contrast modes. |
Comment on lines
+5
to
+6
| <main className="min-h-screen bg-[var(--bg)] text-[var(--text)] pt-24 pb-20"> | ||
| <div className="max-w-4xl mx-auto px-6"> |
Comment on lines
+1
to
+20
| { | ||
| "extends": [ | ||
| "development" | ||
| ], | ||
| "hints": { | ||
| "axe/name-role-value": [ | ||
| "default", | ||
| { | ||
| "button-name": "off" | ||
| } | ||
| ], | ||
| "axe/aria": [ | ||
| "default", | ||
| { | ||
| "aria-valid-attr-value": "off" | ||
| } | ||
| ], | ||
| "no-inline-styles": "off" | ||
| } | ||
| } No newline at end of file |
6 tasks
ThePrabhu
changed the title
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
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
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.
Related Issue
Closes #742
Description
This PR focuses on improving the overall frontend experience by redesigning the Contact page UI and ensuring consistent dark/light theme behavior across the application.
The previous Contact page lacked proper styling, spacing, typography hierarchy, and visual consistency with the rest of the application. Additionally, theme behavior was not fully persistent or visually aligned across all sections.
This PR introduces a cleaner, more modern, and responsive interface while preserving the existing application structure and functionality.
Changes Implemented
Contact Page UI Revamp
Theme Persistence & Consistency
UI/UX Enhancements
Code Quality
Type of PR
Screenshots
Before
After
Checklist
Additional Context
This PR mainly focuses on frontend consistency, accessibility, and theme experience improvements. The goal was to modernize the Contact page while maintaining the existing application architecture and ensuring a seamless dark/light mode experience throughout the project.
Implemented with responsiveness and maintainability in mind under GSSoC’26.