style: Apply input padding and color tweaks

[414owen]

This adds some padding to inputs, giving them a bit of a sense of space.

• input background: light grey
• text input background: light purple

The only difference between light and dark themes is that the border is removed in dark mode.

I opted for colours that work well in light and dark mode, to keep things simple.

I think the padding makes the inputs considerably less cramped, but style is subjective, so any input is welcome.

Are there any other pages with inputs that might have changed? If so, let me know and I'll screenshot the differences.

Before

Firefox - dark theme

Chromium - light theme

After

Firefox - dark theme

Chromium - light theme

[peterbecich]

Looks good to me, thanks! But I am not a reviewer

[ysangkok]

Thanks for taking the time to improve Hackage.

I'd prefer to not change the form input background color in the light theme. Seeing the pink hue, I'd interpret as meaning something, while it seems like it actually means nothing. White input elements are common around the web, red hues are usually used when validation failed. I'd be curious to hear others on this too.

I don't like the white input elements on the dark theme though, there is too much contrast. I'd prefer if we just started out fixing that issue first. (I'd suggest making them just slightly brighter than the background)

I don't mind the padding, though.

[peterbecich]

good point @ysangkok about the pink hue, I hadn't thought of that.

@414owen , would you remove the color changes or split into a different PR and keep the other improvements in this PR?

[414owen]

@peterbecich Sure thing, I've removed the purple tinge from the text inputs :)

[peterbecich]

@ysangkok please review