rebrand#366
Conversation
|
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Claude finished @gianpaj's task in 4m 35s —— View job Claude Code Review
SummarySolid rebrand direction (consolidated tokens, type/spacing scales, motion vars, brand gradient utility). However there's one critical bug that will break visible UI in production, plus a few inconsistencies and design regressions worth a second look. 🔴 Critical — color tokens migrated, call sites missed
Fix: drop the 🟠 Inconsistencies
🟡 Design / a11y
🟢 Nits
Inline comments left on the most actionable issues. |
![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: b3ee5fc443
ℹ️ 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".
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request migrates the project to Tailwind v4, introducing a new theme configuration with centralized CSS variables for colors, typography, spacing, and motion. It also implements seasonal theme overrides and updates various components to utilize these new tokens. The review feedback highlights a potential issue with hardcoded colors in the 'phosphor' effect that may conflict with seasonal themes, a CSS specificity conflict in the AudioPreviewCard component, a redundant class in the LandingPage, and concerns regarding the design of the opinionated 'ic' utility class.
There was a problem hiding this comment.
Pull request overview
This PR updates the SexyVoice.ai web UI styling to match a new “rebrand” design by revising global theme tokens and applying the new visual language to landing-page elements and key components.
Changes:
- Revamps
globals.csstheme tokens (colors, typography, motion) and adds new utility-style classes (e.g., gradient text, phosphor glow, icon container, play button styling). - Updates landing page hero gradient text, CTA styling, and feature card decorators to use the new global styles.
- Makes small component-level color/style adjustments in pricing cards, footer headings, and the audio preview play button.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/web/components/pricing-cards.tsx | Updates the monthly toggle bonus badge styling to match new promo color usage. |
| apps/web/components/footer.tsx | Adjusts footer column heading colors for the rebrand palette. |
| apps/web/components/audio-preview-card.tsx | Adds sample-play class and tweaks play/pause icon styling. |
| apps/web/app/globals.css | Major rework of global design tokens and base styles; adds new branded gradient/animation classes. |
| apps/web/app/[lang]/page.tsx | Switches hero gradient text and CTA/decorators to new global branded classes/tokens. |
| apps/web/app/[lang]/layout.tsx | Configures Inter font CSS variable usage and refactors metadata description logic. |
| apps/docs/src/app/layout.tsx | Fixes Metadata import to be type-only. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
| {!(isGeminiVoice || isGrokVoice) && ( | ||
| <p> | ||
| <span> | ||
| Model: Orpheus-TTS (text-to-speech AI model) - Commercial | ||
| use ✔️ | ||
| </p> | ||
| </span> |
| } | ||
|
|
||
| .phosphor { | ||
| filter: drop-shadow(0 0 12px color-mix(in srgb, var(--brand-purple))) drop-shadow(0 0 28px color-mix(in srgb, var(--brand-red))); |
|
|
||
| 0%, | ||
| 100% { | ||
| filter: drop-shadow(0 0 12px color-mix(in srgb, var(--brand-purple))) drop-shadow(0 0 28px color-mix(in srgb, var(--brand-red))); |
Resolve conflicts in landing page CardDecorator and credits section: - Keep rebrand gradient styling with main's grid layout for feature cards - Preserve main's test attributes and layout fixes in credits section
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
using Claude Design