clean up element styling

[jkup]

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Ran git rebase -i to squash commits (if needed).

Auditors: @bsclifton @bradleyrichter

Fix #5095 #5094

Testing:

1. Check all Preferences pages to make sure no form styles are broken. The input and select fields should look identical to master.
2. Go to about:styles and make sure the documentation and UI is acceptable for shipping.

[jkup]

@bsclifton my fault! I think I wasn't clear, I just wanted to put up a WiP to get your opinion on whether the adding of the class should be done manually or hidden away in a separate type component?

[bsclifton]

Deleted my above comments from when this was a WIP 😄

Preferences still look great. When going to about:styles, it seems like the text and select inputs both are smaller than on the preferences page (wasn't sure if this was expected).

One consideration (curious what both you and @bradleyrichter think) would be changing styles on focus. One usability problem in Brave is that using keyboard navigation is near impossible in certain scenarios (like the preferences page). It would be great to have a visual indicator of where the tab focus currently is

[bsclifton]

From comparing to other parts of the app, it looks like the White app button is missing it's hover style; if you go to Preferences > Payments, you can see a demo there which I believe is @buttonColor and then #000 on hover

[bsclifton]

Another consideration too might be to put:
cursor: default and -webkit-user-select: none on some of the elements, like the h1, h2, etc. Since we'd want to make it more app-like.

[bsclifton]

Looks great! 😄 (comments left above)

[jkup]

Comments sound good:

1. They do look a bit smaller. I'll figure out where that size or padding is coming from and fix it.
2. I would very much like to add focus styles on our form elements. It's nice for all users but a huge accessibility win as well.
3. I see the white button as having the right colors: Implement history and Ctrl +Y to bring it up #444 regularly and #000 on hover.
4. Happy to add cursors to the headers! Let me know what we should do!

[jkup]

@bsclifton I fixed the sizing thing! Should we merge this for now and sync with @bradleyrichter later about cursors and focus state?

[bradleyrichter]

Does this include the dream (mine) of having all buttons now connected so I can refine the styles across the entire app? Or is this just the first step to that dream?

[bsclifton]

@bradleyrichter this should be that dream! 😄 What do do you think about the app cursor comments I had above?

[bsclifton]

Merging 😄 If we need any changes, let's create a new issue