Redesign feedback: Post Launch

[kattylucy]

Feel free to add all the feedback for the app redesign here. The work here is low priority and would be done POST launch (launch date is Oct 16)

[kattylucy]

• Archive pools have a target word (should not)
• Tooltip for available networks have a weird number next to the network name (on hover)
• If non-apy should we remove from the pool performance graph?
• Give mobile some love

[sonam-jo]

Saw that you already have mobile on the list above, but two pages in particular

• Overview: where box with reports should stack under the issue details
• Liquidity: there is some messiness in the charts (low prio if it is challenging to fix)

[sonam-jo]

Can we add the rating for LTF on the Landing page too please? See design below

[hieronx]

@kattylucy a few minor UI comments:

• On the landing page, the margin between the cards now is 12px, compared to 24px in Figma. This is noticeable mainly because the border shadow of the cards on the hover state is actually cut off by the other cards.
• The hover state of most buttons is now an inset border. Looking at the Figma, it should be an outset border instead.
• The border color of cards (on all pages) is now rgb(246, 246, 246) which is really hard to see. The Figma designs specify rgba(207, 207, 207, 50).
• There is a stroking underline in the rating cards that should be removed:

[kattylucy]

I spend some time today playing with the button - is this a MUST fix? Unfortunately the way we built our button system is causing the issue, we have the styling inside visualButton (which is a span element) and this component is inside a button element which is why we see the border going inwards.

It's a bit time consuming to fix since we use button as for anchor tags and non-interactive elements and the reason on wny we have "visual button". I will have to rewrite visual button and have to change the use across the app.

@hieronx

[hieronx]

@kattylucy I see the issue.. Definitely not a clean fix, but wdyt about doing this for now:

button {
    border: 3px solid rgba(255, 226, 153, 0);
    border-radius: 3px;
    background-color: rgb(255, 192, 18);

    :hover {
        border-color: rgba(255, 226, 153, 100);
     }

     span {
         border: none;
     }
}

It effectively shows up as an outset border from what I can check, because the button component has an invisible border at all times that just changes color on hover.

If it doesn't work, I do think changing this border behaviour is quite important since it is visible across the app, but it is not critical today, can wait a few weeks.

[kattylucy]

This doesn't work. I will create a ticket so I can spend more time fixing it and testing it across the app since this same button is what we use for anchor tags and other non-interactive buttons so we can't hard code the values. While I finish up assets redesign I can look into this!

[kattylucy]

I just synced with Onno and he helped me out so all good! @hieronx

[hieronx]

@kattylucy looking really good now!

Something is off with the y axis of the token price now, it is a straight line while it should be going up (min value of the y axis should be ~1.0, like it is on the live version on https://app.centrifuge.io/#/pools/4139607887)

A few more minor comments, consider all of these nice to haves:

• The clickable + hover area on this View all button is only the text while it should be the full button

• The Connect button on the top right has no hover state.

• The Rating row is slightly higher than the other rows

[hieronx]

One more thing I noticed: when you click on a pool card from the landing page, or when you click on any other item in the side bar, the full page temporarily is white with a loading spinner in it. I don't think this is new behaviour, but because of the dark side bar it is now much more noticeable.

Do you think it would be possible to change it such that the loading spinner for the new page load is contained within the main content, and the sidebar stays as is?

I fear this might be somewhat complex, but it would make the page transitions significantly smoother, so I think it's worth exploring to at least estimate what the effort for this would be.

Video of how it looks (loaded quite fast this time so it only flickers, but shows up much longer depending on page load time):
https://github.com/user-attachments/assets/9a7e0c54-e135-4018-bb55-da48616b3b89

[kattylucy]

We discussed yesterday during the sync to release the post launch fixes by latest tomorrow since there's two important bug fixes ( bug on pool performance chart, reports in the data tab not scrolling all the way down) - Sonam is meeting with Brian since they want to do some UI fixes for the landing page (based on feedback she got in NY) - Do you mind if we push this fix to this new ticket they will create? so we don't delay the deployment of the bug fixes @hieronx

[hieronx]

@kattylucy 100%, this is not that urgent, makes sense to me!

[kattylucy]

Great, Im going to create the ticket so I make sure the work is completed. Thank you!