feat: update UI themes and improve tab navigation

[evan-taylor]

• Changed userInterfaceStyle to 'light' in app.json for consistent appearance.
• Refactored theme handling in _layout.tsx to use a custom navigation theme.
• Updated tab navigation styles in (tabs)/_layout.tsx to utilize nativeChrome for better visual consistency.
• Enhanced search and inbox screens to align with new theme settings.
• Added nativeChrome configuration for improved UI elements across the app.

This commit aims to standardize the UI and enhance user experience across different screens.

Linked Issues

Closes #
Linear: (e.g., POLY-123)

Summary

Briefly explain the change and why.

How to Test

Steps to verify locally:

• npm run lint
• npm run typecheck
• npm test
• Manual flow:
  1. npm run dev:backend (in terminal A)
  2. npm run dev (in terminal B)
  3. Verify the change: <describe expected behavior/screens>

Checklist

• Tests added/updated (if applicable)
• Lint/tests pass locally (npm run lint)
• Docs updated (README/ADR/changelog if needed)
• Follows conventional commit format
• No merge conflicts with dev

Screenshots / Demos

(if UI or visible behavior - attach images, videos, or GIFs)

Summary by CodeRabbit

• New Features

  • Added animated save button feedback on listing cards

• Style

  • Updated app to use light theme consistently
  • Refreshed tab bar colors and styling
  • Enhanced search bar appearance
  • Improved listing card visual presentation

• Bug Fixes

  • Optimized responsive layout spacing for mobile and tablet devices

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
poly-buys	Ready	Preview, Comment	Apr 16, 2026 7:47pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR transitions the frontend from automatic/dynamic theme switching to a fixed light-mode theme strategy. It introduces a new native Chrome theme module defining light-only UI constants, removes dark theme imports, and updates tab bar, search, listing card, and layout components to use theme-driven styling values instead of hardcoded configurations.

Changes

Cohort / File(s)	Summary
App Configuration & Core Theme frontend/app.json, frontend/app/_layout.tsx, frontend/theme/nativeChrome.ts	Updated app to force light mode instead of automatic theme detection. Removed dark theme imports and dynamic useColorScheme logic, replacing theme selection with a single navigationTheme derived from DefaultTheme. Introduced new nativeChrome.ts module exporting light-only UI constants for blur tints, tab bar styling (colors, blur effect, shadows), and a searchFieldChrome() helper function for search UI theming.
Tab Bar & Navigation Styling frontend/app/(tabs)/_layout.tsx	Refactored native tab configuration to use theme-driven values from nativeChrome: replaced tint color, updated label styling for default/selected states, added bar background/blur/shadow settings, and included per-state icon coloring and content styling.
Search Feature Theming frontend/app/(tabs)/search/index.tsx	Replaced useColorScheme logic with memoized searchChrome object. Updated search bar UI (BlurView tint, TextInput colors, keyboard appearance) and result list styling to use theme values; removed hardcoded background/border colors and refactored state container layout conditionals.
Layout & Spacing Adjustments frontend/app/(tabs)/inbox.tsx, frontend/app/(tabs)/index.tsx	Updated inbox search bar BlurView tint to use nativeChrome.blurTint. Adjusted mobile/tablet content padding (xs/sm instead of md/lg) and added conditional columnWrapperCompact style for FlatList when in compact layout.
Listing Card Component frontend/components/ListingCard.tsx	Removed description preview generation and rendering; added animated save button interaction with scale-up/down transitions. Updated title layout to fixed single line, refactored styling to use nativeChrome.blurTint, adjusted save button styling (opacity, hitSlop, color), and added titleRow container with flex adjustments.

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly Related PRs

• Feat/poly 76 listing card polish #81 — Directly modifies ListingCard.tsx with overlapping concerns around description handling and save button logic that this PR also refactors.
• feat: transition to Convex Cloud and update environment configurations #53 — Modifies frontend/app/_layout.tsx and frontend/app/(tabs)/_layout.tsx with changes to NativeTabs rendering and theme behavior.
• feat: fixed a ton of stuff, standardize UI #86 — Updates the same frontend UI/theme files (app.json, _layout, tabs, search, ListingCard) introducing or refactoring native Chrome theming.

Suggested Reviewers

• jaydonkc
• SamanSP1386

---

🐰 Light mode locks in tight,
No more dark shadows in sight,
Theme chrome shines so bright,
Search bars dressed just right,
Bunny hops approve the light! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description outlines key changes but lacks critical details: linked issues are unfilled placeholders, the How to Test section is unfinished, and no screenshots are provided for UI changes.	Fill in the linked issue numbers, complete the How to Test section with specific screens/behaviors to verify, and add screenshots showing the light theme UI changes.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly relates to the main changes: updating UI themes and improving tab navigation through nativeChrome, light mode configuration, and refactored theme handling.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch evan/misc-improvements

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (2)

frontend/app/(tabs)/_layout.tsx (1)

115-132: LGTM on the rest of the native tab chrome wiring.

iconColor={{default, selected}}, backgroundColor, blurEffect, shadowColor, and disableTransparentOnScrollEdge are valid NativeTabs props. Redundantly setting disableTransparentOnScrollEdge on both the container and every Trigger is allowed (Trigger takes precedence) but unnecessary — consider removing the per-Trigger duplicates for brevity.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/app/`(tabs)/_layout.tsx around lines 115 - 132, The NativeTabs
component is being passed disableTransparentOnScrollEdge both at the container
level and again on each Trigger; remove the redundant per-Trigger prop to reduce
duplication and rely on Trigger's precedence when necessary—update the code
where Trigger components are rendered (look for Trigger instances related to
NativeTabs) to delete the disableTransparentOnScrollEdge prop on each Trigger,
leaving the single prop on the NativeTabs container (or keep it only on Triggers
if specific overrides are required).

frontend/theme/nativeChrome.ts (1)

34-46: Consider exporting searchFieldChrome as a constant instead of a function.

Since this returns the same static values on every call, making it a const (typed as SearchFieldChrome) removes the need for callers like search/index.tsx to wrap it in useMemo.

♻️ Proposed refactor

-export function searchFieldChrome(): SearchFieldChrome {
-  return {
-    keyboardAppearance: nativeChrome.keyboardAppearance,
-    blurTint: nativeChrome.blurTint,
-    barTintColor: nativeChrome.tabBarBackgroundColor,
-    textColor: colors.textDark,
-    hintTextColor: colors.muted,
-    iconColor: colors.textDark,
-    searchBarWrapBackground: 'rgba(255, 255, 255, 0.45)',
-    searchBarWrapBorder: 'rgba(255, 255, 255, 0.6)',
-    clearButtonBackground: 'rgba(0, 0, 0, 0.15)',
-  };
-}
+export const searchFieldChrome: SearchFieldChrome = {
+  keyboardAppearance: nativeChrome.keyboardAppearance,
+  blurTint: nativeChrome.blurTint,
+  barTintColor: nativeChrome.tabBarBackgroundColor,
+  textColor: colors.textDark,
+  hintTextColor: colors.muted,
+  iconColor: colors.textDark,
+  searchBarWrapBackground: 'rgba(255, 255, 255, 0.45)',
+  searchBarWrapBorder: 'rgba(255, 255, 255, 0.6)',
+  clearButtonBackground: 'rgba(0, 0, 0, 0.15)',
+};

Note: this would require a call-site update in frontend/app/(tabs)/search/index.tsx (drop the () invocation and the enclosing useMemo).

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/theme/nativeChrome.ts` around lines 34 - 46, Replace the exported
function searchFieldChrome() with a exported constant of type SearchFieldChrome
containing the same object literal (export const searchFieldChrome:
SearchFieldChrome = { ... }) so callers don't have to memoize; update call-sites
(notably frontend/app/(tabs)/search/index.tsx) to stop invoking it (drop the
trailing ()) and remove the enclosing useMemo. Ensure the exported symbol name
remains searchFieldChrome and the object properties (keyboardAppearance,
blurTint, barTintColor, textColor, hintTextColor, iconColor,
searchBarWrapBackground, searchBarWrapBorder, clearButtonBackground) are
preserved exactly.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/app/`(tabs)/_layout.tsx:
- Around line 115-132: The NativeTabs component is being passed
disableTransparentOnScrollEdge both at the container level and again on each
Trigger; remove the redundant per-Trigger prop to reduce duplication and rely on
Trigger's precedence when necessary—update the code where Trigger components are
rendered (look for Trigger instances related to NativeTabs) to delete the
disableTransparentOnScrollEdge prop on each Trigger, leaving the single prop on
the NativeTabs container (or keep it only on Triggers if specific overrides are
required).

In `@frontend/theme/nativeChrome.ts`:
- Around line 34-46: Replace the exported function searchFieldChrome() with a
exported constant of type SearchFieldChrome containing the same object literal
(export const searchFieldChrome: SearchFieldChrome = { ... }) so callers don't
have to memoize; update call-sites (notably
frontend/app/(tabs)/search/index.tsx) to stop invoking it (drop the trailing ())
and remove the enclosing useMemo. Ensure the exported symbol name remains
searchFieldChrome and the object properties (keyboardAppearance, blurTint,
barTintColor, textColor, hintTextColor, iconColor, searchBarWrapBackground,
searchBarWrapBorder, clearButtonBackground) are preserved exactly.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b87f1d24-da71-4de6-a0d8-fec5be5863c2

📥 Commits

Reviewing files that changed from the base of the PR and between 1d309f7 and d354b2d.

📒 Files selected for processing (8)

• frontend/app.json
• frontend/app/(tabs)/_layout.tsx
• frontend/app/(tabs)/inbox.tsx
• frontend/app/(tabs)/index.tsx
• frontend/app/(tabs)/search/index.tsx
• frontend/app/_layout.tsx
• frontend/components/ListingCard.tsx
• frontend/theme/nativeChrome.ts