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