Some design fixes

[Lionqueen94]

Fixes (from #101):

• Add hover state in navigation menu on /1/input/33/... (see Figma)

• Check colors of icons (current page, empty input) in the nav menu. Have been updated in Figma, they were a subtly different color then the texts, is now consistent with text

• font-weights: het is ok om de 500 en 600 te vervangen door 700 (gebeurt op een aantal buttons al, daar wordt een bold over de 500 weight gezet, waardoor die 500 al niks meer doet). Nb: alleen voor de DM Sans teksten. De 500 op Space Grotesk (de badges) moet zo blijven

and removes the right padding on the polling station choice form as requested on Figma

[jorisleker]

Te snel op approve gedrukt:

Er gaat nog iets 'mis' met de hover state. Het label is namelijk groter dan de a. Het lijkt alsof het hele label klikbaar is (en idealiter is dat ook zo), terwijl alleen de a nu klikbaar is. Zie screenshot hieronder. Ik heb de a voor het gemak even een background gegeven.

Je merkt het het snelst/makkelijkst als je op het stukje probeert te klikken waar het pijltje staat, maar ook de padding rondom de a is niet klikbaar (terwijl cursor daar wel een pointer is)

[Lionqueen94]

@jorisleker Please review again, I fixed the issue you commented

[jorisleker]

Sorry, I should have been a bit more clear.

the clickable area should be just as big as the area we change in the hover state. You now 'fixed' it by removing the pointer cursor. The fix I meant to request was to extend the clickable area to be as big as the area affected by the hover state. Bigger click-targets is better. I know this is probably more work because you need to change both html and css instead of just css.

[Lionqueen94]

Sorry, I should have been a bit more clear.

the clickable area should be just as big as the area we change in the hover state. You now 'fixed' it by removing the pointer cursor. The fix I meant to request was to extend the clickable area to be as big as the area affected by the hover state. Bigger click-targets is better. I know this is probably more work because you need to change both html and css instead of just css.

This is what you desire I think, I did make sure the icon has a z-index of 1 so that when you hover it you can see the alt text. The whole hover state section is now clickable, except for the icon.

[praseodym]

It looks like this breaks the icon in the navigation column in Safari:

main branch:

This branch: