Style Chrome browser dialog with the Brave themed dialog component

[karenkliu]

Description

Currently, our browser dialogs follow the default Chrome theme. We need to style them with our Brave themed dialog component and de-Chromify our browser.

[rebron]

cc: @yrliou and @simonhong just a heads up. Trying to make it all look consistent.
@karenkliu Can we get dark theme mocked-up and specified as well.

[karenkliu]

@rebron The dialogue should default to light/dark theme depending on what the user has specified at the OS level. @rossmoody Do you know if I need to explicitly create a dark theme dialog for this to happen?

[rossmoody]

This is a good initiative but we should prob sit down with @petemill who has the most experience from Settings restyling and talk about our approach. I think updating the styling of the modals will have to touch more than just the modals themselves and we should be sure to account for all the use cases when we update the components. For instance: I imagine updating the modal components here would bleed into this screen: https://d.pr/i/4BqbZf but if we don't update those elements at the same time for both light and dark theme then we'll have blue and orange wack-a-mole.

We also started some component updates on this front already that need fine tuned and should match any additional updates: https://d.pr/i/MBzRCY

TLDR: should get our ducks in a row and do a sweeping update. this is pretty foundational design system definitions so i'll assign it to myself and start up a spec

[petemill]

Hey I wasn’t aware a designer was explicitly working on this. I’ve started a look at it mainly just to make the buttons brave-style and typography use the correct fonts. Doesn’t seem that’s different to the intention here anyway. But the buttons in these mockups seem a little different to the versions of the design system button I’ve been working from in brave-ui. In lieu of the “official standard” can we confirm the hover colors and sizes here are what we want.
One more point: looks like we’ve gone for the ‘accent’ (orange) version for every single button. Whereas in the Settings screen, we’re using the Default version (Black in light mode) in almost all places. Should that be the case? Do we have a guideline on when to use which?

[rossmoody]

The definitions here and in Brave UI will need updated. I'll put together a spec we can go over that includes final sizing, color and spacing and pattern usage.

[petemill]

This is stale and not very specific with regard to what the 'Brave themed dialog component' is. Happy to keep it as an umbrella item but there's nothing specifically actionable.

[rebron]

@karenkliu Do you want to close this one out? Not specific on which dialogs we want fixed and what we need to change them to.

[rebron]

Closing as stale. Let's file new ones for this issue that are specifically actionable.