VPN panel (logged into Brave Premium)

[bsclifton]

Description

Clicking on the button (see #17235) should create a bubble / popup that shows some basic VPN settings:

• Toggle on/off
• Server selection

Note: the button itself is behind the VPN feature flag.

Gradient toggle changes color like iOS/Android Shields toggle:

Challenges

• The user would only be shown this if they are logged into Brave Premium already
• If the user is not logged in yet, we'll need to show a different panel (see VPN panel (not logged into Brave Premium) #17249)
• Issue TBD with details about how to detect if logged in or not logged in

Assets

Figma: https://www.figma.com/file/qtMYwoj3JWJO5xzwLt6j2f/?node-id=0%3A1

[bsclifton]

Regions shown can be retrieved here:
https://github.com/brave/brave-core/blob/9cc43e2c1b4b5cc84a61baba2fe948ef18d5276c/components/brave_vpn/brave_vpn_service.cc#L93-L99

We'd need to store a profile preference for the person's current location. We can look at iOS for logic around setting a default location (how is this done?)

[nullhook]

We need to change the current UX. The dropdown for country selection will be clipped when it's rendered in a panel. Perhaps a list that can be navigated back and forth? The settings dropdown will also be clipped within the panel so this needs a diff UX as well.

I know the settings option is just a placeholder. However, we'll need options to show more information on a separate page brave://vpn if the user wanted to see for ex, logs, history, connection details, stats, etc. (future usecase)

cc @karenkliu