Redesign: Match homepage to Figma design and apply theme site-wide#68
Open
Redesign: Match homepage to Figma design and apply theme site-wide#68
Conversation
- Update brand color from green to teal (#2ca4ab) with full light/dark palette - Add Inter font via Google Fonts for clean modern typography - Redesign homepage hero: light gray background, centered title/subtitle, 3 buttons - Replace SVG feature cards with 3 API cards (Content, OAuth2/OIDC, User-related) - Clean up navbar: shorter title, remove emoji prefixes, teal pill Request Access btn - Streamline footer to 3 columns matching Figma (API Docs, Community, More) - Apply new design tokens across request-access, request-scopes, and modal pages - Add reusable CSS variables for surfaces, borders, shadows, and radii - No functionality changes styling and presentation only
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5d810875c9
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Deploying qf-api-docs with
|
| Latest commit: |
2f699fe
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://446829f2.qf-api-docs.pages.dev |
| Branch Preview URL: | https://feature-website-redesign.qf-api-docs.pages.dev |
Removes the media query that hid the navbar Request Access button on mobile homepage. The old inline fallback button was removed in the redesign, so this rule left mobile users with no path to /request-access.
Collaborator
Author
|
@codex review |
Layout no longer passes title=siteConfig.title on the homepage, so Docusaurus shows just the site title instead of repeating it twice.
|
Codex Review: Didn't find any major issues. 🚀 ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
…utlined On mobile homepage: Request Access appears as the primary teal button at the top of the hero, Quick Start Guide swaps to outlined style, and Request Access is hidden from the hamburger menu to avoid duplication.
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive visual redesign of the Quran Foundation API documentation portal to match a provided Figma design. The changes establish a cohesive design system with teal branding (#2ca4ab), Inter typography, and custom CSS tokens while maintaining all existing functionality.
Changes:
- Implemented teal brand color palette replacing previous green theme, with full light/dark mode support
- Added Inter font family via Google Fonts and established design tokens for surfaces, borders, shadows, and text colors
- Redesigned homepage hero with new layout, button hierarchy, and responsive mobile-first approach
- Replaced feature SVG illustrations with three API category cards (Content, OAuth2/OIDC, User-related) linking to documentation
- Updated navbar and footer styling to match design system, simplified footer structure to 3 columns
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 14 comments.
Show a summary per file
| File | Description |
|---|---|
| src/css/custom.css | Establishes core design system with teal palette, Inter font, CSS custom properties for surfaces/borders/shadows, and styles for navbar, footer, forms, and OpenAPI panels |
| src/pages/index.tsx | Restructures homepage hero removing old modal rendering code, updating button layout and labels, removing siteConfig.title from Layout |
| src/pages/index.module.css | Implements hero banner styling with responsive button patterns, mobile-specific Request Access button behavior, and theme-aware hover states |
| src/components/HomepageFeatures/index.tsx | Replaces SVG feature cards with API category cards containing icons, descriptions, and documentation links |
| src/components/HomepageFeatures/styles.module.css | Defines responsive card grid layout (3→2→1 columns) with hover effects and section header styling |
| docusaurus.config.js | Updates site title, removes emoji prefixes from navbar items, reorganizes footer links, removes Legal section |
| src/pages/request-access.module.css | Updates button styles to use new design tokens for surfaces, borders, shadows, and text colors |
| src/pages/request-scopes.module.css | Migrates scope card styling to use new design tokens with teal accent colors |
| src/components/DeveloperModals/DeveloperModal.module.css | Updates modal styling to use design tokens with backdrop blur effect |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Dark mode navbar: use var(--qf-surface-page) and var(--qf-border-card) instead of hardcoded colors - Hover backgrounds: use var(--ifm-color-emphasis-100) for theme-aware hover states - Border-radius: use var(--ifm-global-radius) instead of hardcoded 8px - Footer links: add leading / to OAuth2 and User-related API paths
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
1 participant
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.
Summary
Redesigns the website to match the provided Figma design, establishing a consistent design system across all pages. Styling/presentation changes only no functionality modifications.
Changes
Design System (custom.css)
Homepage Hero (index.tsx, index.module.css)
API Cards (HomepageFeatures/index.tsx, styles.module.css)
Navbar & Footer (docusaurus.config.js)
Cross-site Theme
equest-access.module.css\ new tokens
equest-scopes.module.css\ teal accent colors
Screenshot Reference
The Figma design used as reference for this redesign: