Update VPN Toolbar button style

[simonhong]

F/u issue for #30410

Internal only design link - https://www.figma.com/file/qtMYwoj3JWJO5xzwLt6j2f/Desktop-VPN?type=design&node-id=1822-19229&t=vH3fd5mYS94U7WlK-0

[stephendonner]

Verification PASSED using

Brave | 1.54.85 Chromium: 115.0.5790.56 (Official Build) beta (x86_64)
-- | --
Revision | ebcfb87c1393f36955cfa2f6451a1767e3dc3ee5-refs/branch-heads/5790@{#1193}
OS | macOS Version 11.7.8 (Build 20G1351)

Shared Steps:

1. installed 1.54.85
2. launched Brave
3. loaded account.bravesoftware.com
4. purchased, configured, and connected to Brave VPN

Default State

.	VPN Off	VPN On	Error
Green
Red
Light
Dark

Hover/Active state

.	VPN Off	VPN On	Error
Green
Red
Light
Dark

[stephendonner]

For the record (since this will also be verified on Windows), the Figma link (https://www.figma.com/file/qtMYwoj3JWJO5xzwLt6j2f/Desktop-VPN?type=design&node-id=1822-19229&t=vH3fd5mYS94U7WlK-0) shows toolbar-mockup treatments for both Private Window and Private Window with Tor

But the VPN button doesn't appear in those window types.

cc @aguscruiz

[aguscruiz]

Shouldn't it appear anyways? Curious as to why

[stephendonner]

Shouldn't it appear anyways? Curious as to why

From @bsclifton in https://bravesoftware.slack.com/archives/CC5SA8CCB/p1677299268356949, "SKU SDK calls won't work in a private context"

[MadhaviSeelam]

Verification PASSED using

Brave | 1.57.33 Chromium: 115.0.5790.114 (Official Build) beta (64-bit)
-- | --
Revision | 86b4ea1d70ce73c4468d84cc8277f1f9de14b8bc
OS | Windows 11 Version 22H2 (Build 22621.1992)

Shared Steps:

1. installed 1.57.33
2. launched Brave
3. loaded account.bravesoftware.com
4. purchased, configured, and connected to Brave VPN

Default State

.	VPN Off	VPN On	Error
Green
Red
Light
Dark

Hover/Active state

.	VPN Off	VPN On	Error
Green
Red
Light
Dark

Note: As noted by @stephendonner, VPN is not available via Private window & Tor Window (thus, Figma designs doesn't match to these two windows)