style: Update badge and button styles with neutral colors

[ComputelessComputer]

No description provided.

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

Updates UI styling across multiple header and product pages, replacing stone and gray gradients with neutral gradients and adding subtle shadows. Additionally, blog article titles now fallback to meta_title when display_title is missing.

Changes

Cohort / File(s)	Summary
Badge styling - neutral gradient theme apps/web/src/components/header.tsx, apps/web/src/routes/_view/index.tsx, apps/web/src/routes/_view/product/ai-notetaking.tsx	Replaced badge backgrounds from gray/stone gradients to neutral gradient (bg-linear-to-t from-neutral-200 to-neutral-100), updated text color to text-neutral-900, and added shadow-sm. Changes applied to "Coming Soon" badges and related UI elements across header, view index, and product pages.
Button styling - disabled state updates apps/web/src/routes/_view/product/api.tsx, apps/web/src/routes/_view/product/extensions.tsx	Updated disabled button styling from stone gradient with opacity-50 to neutral gradient with shadow-sm, changed text color to text-neutral-900, and retained rounded-full.
Blog rendering logic apps/web/src/routes/_view/index.tsx	Added fallback logic for blog article titles: now renders as article.display_title || article.meta_title to handle missing display_title.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Verify consistency of neutral gradient styling across all affected components (header, index, ai-notetaking, api, extensions)
• Confirm blog title fallback logic in BlogSection handles both present and missing display_title values correctly
• Check that shadow and color changes render properly in both light and dark modes

Possibly related PRs

• fastrepl/hyprnote#1894: Modifies the same ai-notetaking.tsx file with overlapping FloatingPanelHeader badge styling changes.
• fastrepl/hyprnote#1827: Updates TranscriptionSection and SharingSection in the same product component with related UI changes.
• fastrepl/hyprnote#1598: Modifies web app UI and header-related styling in overlapping files with theme adjustments.

Suggested reviewers

• yujonglee

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch update-badge-button-styles

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 938c857 and 7bd3d20.

📒 Files selected for processing (5)

• apps/web/src/components/header.tsx (4 hunks)
• apps/web/src/routes/_view/index.tsx (5 hunks)
• apps/web/src/routes/_view/product/ai-notetaking.tsx (4 hunks)
• apps/web/src/routes/_view/product/api.tsx (1 hunks)
• apps/web/src/routes/_view/product/extensions.tsx (1 hunks)

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netlify]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	7bd3d20
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/6927d5a1d82c7b00082fc0a7
😎 Deploy Preview	https://deploy-preview-1941--hyprnote.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	7bd3d20
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/6927d5a1d82c7b00082fc0ab
😎 Deploy Preview	https://deploy-preview-1941--hyprnote-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
web (Inspect)	⚠️ Changes detected (Review)	3 changed	Nov 27, 2025, 4:41 AM