ui-components icon indicating copy to clipboard operation
ui-components copied to clipboard

Standardise hover behaviour

Open bia opened this issue 7 years ago • 2 comments

Throughout Weave Cloud, buttons often hover like hoverBackground: darken(0.05, colors.somecolor) and text links generally lighten.

Outside of that, there are quite a few random opacity changes happening throughout.

Now that button backgrounds are generally becoming darker for AA compliance with white text, we might want to consider lightening on hover instead.

Anyways, we should do a pass of noting all of these different behaviours and grouping them, just as the colors. It would be a fairly easy win.

bia avatar Apr 16 '18 10:04 bia

Here's an overview of the 7 different hover styles existing in our app :

Style Before After Change
chrome-capture Background purple25 purple100 darken
Text purple800 purple900 darken
chrome-capture 8 Background purple25 white lighten
Text black blue700 lighten
chrome-capture 3 Background purple50 - none
Text purple400 purple900 darken
chrome-capture 4 Background purple25 purple100 darken
Text purple900 - none
chrome-capture 5 Background white gray50 darken
Text purple900 - none
chrome-capture 6 Background purple25 - none
Text gray600 80% opacity lighten
chrome-capture 7 Background purple700 purple400 lighten
Text white - none
chrome-capture 10 Background purple25, close dropshadow purple25, far dropshadow none
Text blue700 - none

To summarise the color changes on hover,

lighten darken none
Background 2 3 3
Text 2 2 4

bia avatar Feb 04 '19 18:02 bia

Apart from existing hover behaviours, the expansion triangle of deployment images and the top Resources/History tabs are in need of hover behaviour to make them more discoverable and to match the style of the existing app. They could look like

Existing On hover
screenshot 2019-02-13 at 21 21 59 screenshot 2019-02-13 at 21 21 59 copy
screenshot 2019-02-13 at 21 22 29 screenshot 2019-02-13 at 21 22 29 copy

bia avatar Feb 14 '19 00:02 bia