Pool Landing Page: Tile Design

[0x4Graham]

Part of the pool overview redesign, we will be moving from a table view to a Tile view. See here: https://www.figma.com/design/ng7qdNcSCXSDA6ZUdWIs6u/Pool-Overview%2F-Pool-Detail?node-id=2173-41892&t=u2xXc1gxUlRpZoiy-0

Consideration

• Please ensure you create any new components in the storybook and update any existing ones.
• Please select a tile technology that will allow some form of sorting in the future. As more pools are added, we will add a sorting option to sort by: TVL, APY, Investor Type, Min Investments, Pool Status.
• The fields for Short Description, Investor Type and Target APY per tranche do not exist today, tickets will be created for each
• Clicking on anywhere on the tile leads you to the Pools Overview page.
• Remove Dark mode
• For mobile version, show TVL on top and 1 tile per row with scroll down functionality
• Please ensure you review the difference between single tranche and multiple tranche's in the design.

Single Tranche For single tranche pools, there should no grey block and only show the APY & Investment

Multi Tranche Pools For multi tranche pools, only a maximum of two tranches will be displayed within the grey block. If there are more than two tranches, display link to view more tranches that navigates to the Pool Detail view.

Storybook

• Make sure components used for the changes load in Storybook and fix if not

[0x4Graham]

@kattylucy Can we try bring the size of the tiles a bit smaller please? They look a bit big.

Any suggestions @BrianCarter-Design

[BrianCarter-Design]

The tiles/cards look the same on my (1440) screen as they do on Figma so I don't have an issue, but I think they may have responsively stretched on your screen? Can you share a screenshot please. The width that the cards are currently in the design should be the maximum width so they don't don't responsively stretch bigger. On bigger screens another card could be added in the row (if there is space for 4).

[kattylucy]

@BrianCarter-Design I added the exact width as the figma for medium screens showing 3 cards, it looks good but for 4 cards is not looking good, I had to reduce the width on those cards to fit it without causing overflow. Is that ok? or should we find a different solution?

we could also set a max width so the body does not expand for large screens, keeping max 3 cards per column

The screenshot is for 15inch screen with 4 cards per column and reduced width