Polish Prompt Cards with Rounded Corners & Copy Feedback

[klprakhar]

What does this change?

Improves the visual consistency and feedback of prompt cards and the prompt detail page.

• Rounded the corners of prompt images across the feed and related views to reduce visual noise caused by sharp/pointed edges.
• Added clear green visual feedback when a prompt is successfully copied.

Why?

• Rounded image corners create a cleaner, softer, and more consistent visual appearance across the UI.
• Green copy feedback provides an immediate visual confirmation that the prompt was successfully copied.

How was it tested?

• Manually verified rounded image corners across:
  • Main feed
  • "More like this"
  • Profile
  • Saved prompts
  • Liked prompts
  • Prompt detail page
• Manually verified that the copy button changes to green for 2 seconds after copying.
• Verified that the green copy state remains consistent when hovering over the button.

Checklist

• npm run lint passes
• npm run typecheck passes
• npm test passes
• npm run build passes
• Any new root-relative asset (/foo.png) is in public/, not src/assets/
• No credentials, keys, or .env files are included

[aashu2006]

thanks for this @klprakhar ! The copy feedback idea is good, but a couple of things need sorting first

Contrast: bg-green-500 with text-white is 2.28:1. WCAG AA needs 4.5:1 for text this size, so this is a regression against the bg-gold text-gold-foreground it replaces, which passes comfortably. green-700 would get you to 5.02:1 if we stay with green.

Design tokens: there are currently zero raw palette colors in src/. Everything goes through the semantic tokens in index.css, which have separate light and dark values. bg-green-500 is a fixed hex, so it will look right in light mode and wrong in dark. If we want a success color, please add --success and --success-foreground to index.css with both theme values and use bg-success

Rounded corners: rounded-sm is used 44 times and is the card language here. rounded-xl appears 6 times, all on static content pages, never on a gallery card. Rounding only the card container and the detail image puts a rounded-xl frame directly around rounded-sm badges and buttons, which reads as less consistent rather than more. Either we do this as a systematic radius change across the card surfaces, or we leave it.

Small one: the : "" branch is unnecessary, cn() drops falsy values already.