Mobile search form styling

[kentcdodds]

Improves the mobile layout of the search bar and message composer based on user feedback.

Test Plan

1. Navigate to a recipient's page on a mobile device or using browser dev tools.
2. Verify the search bar:
   • Search input and button are on the same line.
   • Date pickers have labels and placeholder text.
   • Date pickers are on the same line and not excessively wide.
3. Verify the message composer:
   • The input's white box styling is softened.
   • There is more space between the input and the footer.

Checklist

• Tests updated
• Docs updated

Screenshots

Mobile search filters and composer spacing.

---

 

---

Note

Low Risk
Pure UI/styling changes (layout, labels, and button variants) with no changes to auth, data access, or server behavior; main risk is minor visual regressions across breakpoints/themes.

Overview
Improves mobile UX for message search and composition by keeping the search input + submit button on one row, tightening responsive spacing, and laying out date filters as a two-column grid with visible Start date/End date labels.

Adds new shared button variants/sizes in button.tsx (e.g. brand, brand-soft, warm, ghost-inverse, icon-lg) and migrates multiple pages (auth flows, marketing CTA, recipients pages, profile settings) from ad-hoc palette classes to these standardized variants; also tweaks the recipient message composer styling (softer border/shadow, slightly taller textarea, more bottom padding) and updates inverse ghost buttons used on dark message cards.

^{Written by Cursor Bugbot for commit 2e21059. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[kentcdodds]

@cursor, I would really rather use a variant prop for all uses of Button and StatusButton. I don't want a ton of variations of this. Let's go throughout the codebase and have just a handful of sensible variants and use those rather than having a bunch of bespoke implementations.

[cursor]

Walkthrough

Recipient mobile search + composer with updated button variants.

Summary

• Added shared button variants (brand, brand-soft, warm, ghost-inverse) to centralize styling choices.【F:app/components/ui/button.tsx†L8-L38】
• Swapped bespoke button styles across auth, recipients, and marketing/mobile menu to use variants, including the composer Add button and message action icons.【F:app/routes/_app+/_auth+/login.tsx†L154-L162】【F:app/routes/_app+/recipients+/$recipientId.index.tsx†L665-L801】【F:app/routes/_app+/_marketing+/index.tsx†L66-L77】【F:app/routes/_app+/_layout.tsx†L289-L299】

Testing

• ✅ Manual mobile QA in browser (refreshed recipient page in mobile viewport and verified search/date layout + composer styling because this is a UI change; no automated tests run).

 

[cursor]

Bugbot Autofix prepared fixes for 1 of the 1 bugs found in the latest run.

• ✅ Fixed: Placeholder attribute does not work on date inputs
  • Removed unsupported placeholder attributes from the date inputs to avoid misleading, nonfunctional UI text.

[cursor]

Bugbot Autofix prepared fixes for 2 of the 2 bugs found in the latest run.

• ✅ Fixed: StatusButton uses bespoke sizing overriding variant prop
  • Added an icon-lg size variant and switched the search button to use it without overriding size classes.
• ✅ Fixed: StatusButton uses bespoke color classes instead of variant
  • Introduced a success variant for the green styling and applied it to the add message StatusButton, removing bespoke color classes.

[cursor]

Bugbot Autofix prepared fixes for 2 of the 2 bugs found in the latest run.

• ✅ Fixed: Success variant colors differ from original button styling
  • Updated the success variant to use the original green-500/cream/green-700 color scheme.
• ✅ Fixed: Bespoke padding override instead of proper variant
  • Removed the bespoke px-6 override to keep the standard pill padding.

[cursor]

StatusButton icon-lg size may overflow during pending state

Medium Severity

The search button uses StatusButton with size="icon-lg" (48x48px, no padding) but doesn't include gap-0 to override the component's internal gap-4 spacing. During the pending state, when the spinner icon appears alongside the magnifying glass icon, the combined content with 16px gap may overflow the fixed button dimensions. The existing StatusButton with size="icon" elsewhere in the codebase includes gap-0 in its className to prevent this exact issue.

 

[cursor]

Cursor Bugbot has reviewed your changes and found 4 potential issues.

[cursor]

Warm variant uses wrong base color for mobile menu

Medium Severity

The mobile menu "Start 14-day FREE Trial" button originally used --palette-orange as its base color with --palette-chestnut on hover. The new warm variant uses --palette-chestnut as the base with --palette-hot-fire-red on hover. This changes the button's appearance from orange to a darker brown/chestnut color, which is a visual regression from the intended design.

Additional Locations (1)

• app/components/ui/button.tsx#L18-L20

 

[cursor]

ButtonLink background states reversed after removing overrides

Low Severity

Removing bg-muted hover:bg-card from the "Add recipient" ButtonLink reverses its visual states. The button originally had a muted (darker) background that became card-colored (lighter) on hover. Now it uses the outline variant's default bg-card hover:bg-muted, making it lighter by default and darker on hover—the opposite interaction feedback.

 

[cursor]

Brand-soft variant uses wrong base color for Add button

Medium Severity

The message composer "Add" button originally used --palette-green-500 base with cream text and --palette-green-700 on hover. The brand-soft variant uses --palette-green-300 (lighter) with dark-navy text, changing to green-500 with cream text on hover. This makes the button noticeably lighter and changes the text color from light cream to dark navy.

 

[cursor]

Destructive variant may not match original palette colors

Low Severity

The "Recover password" button originally used specific palette colors (--palette-hot-fire-red base, --palette-fire-red hover), but now uses variant="destructive" which relies on the --destructive CSS variable. Unless --destructive is mapped to the same hot-fire-red color, this changes the button's appearance from the intentionally chosen brand palette colors.