Redesign feedback: Post Launch

kattylucy commented 1 month ago

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 commented 1 month ago

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 commented 4 weeks ago

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 commented 4 weeks ago

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

hieronx commented 3 weeks ago

@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 commented 3 weeks ago

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 commented 3 weeks ago

@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 commented 3 weeks ago

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 commented 3 weeks ago

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

hieronx commented 2 weeks ago

@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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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

kattylucy commented 2 weeks ago

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

centrifuge / apps

Redesign feedback: Post Launch #2505