feat: enhance modals with improved styling and layout for better user…

[msteiner96]

… experience

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
phoenix-frontend-core	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 9, 2025 11:43am

[Copilot]

Pull Request Overview

The PR enhances the styling and layout of the Unbond, ClaimAll, and Bond modals for a more polished and consistent user experience.

• Centers each modal using flexbox and constrains height with overflow handling
• Introduces a subtle gradient overlay and premium header styling across all modals
• Replaces custom close button Boxes with MUI IconButton + Framer Motion for consistent interactivity

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/ui/src/Earn/Modals/UnbondModal.tsx	Updated modal container centering, maxHeight/overflow, gradient overlay, header styling, IconButton close
packages/ui/src/Earn/Modals/ClaimAllModal.tsx	Same modal container and header enhancements; added content padding area and IconButton close
packages/ui/src/Earn/Modals/BondModal.tsx	Applied unified container/header styling, removed container padding in favor of inner padding, IconButton close

Comments suppressed due to low confidence (4)

packages/ui/src/Earn/Modals/UnbondModal.tsx:119

• The modal container styling is repeated across multiple modals; consider extracting common sx settings into a shared constant or wrapper component to reduce duplication.

sx={{ display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1300 }}

packages/ui/src/Earn/Modals/UnbondModal.tsx:141

• Multiple heavy CSS filters (backdropFilter: blur) and layered shadows may degrade rendering performance on lower-end devices; consider reducing blur radius or using will-change for smoother repaint.

<Box sx={{ position: "absolute", ..., background: "linear-gradient(...)" }} />

packages/ui/src/Earn/Modals/BondModal.tsx:292

• Layout and padding changes for responsive behavior aren’t covered by existing tests; consider adding snapshot or layout tests to verify these UI updates.

-          padding: { xs: spacing.lg, md: "2rem" },

packages/ui/src/Earn/Modals/ClaimAllModal.tsx:399

• [nitpick] Styling is mixed between MUI’s sx prop and inline style on motion.div; standardize on one approach (e.g., use sx or styled components) for consistent code structure.

<motion.div style={{ position: "relative", zIndex: 1, padding: ... }}>