Update Brave VPN toolbar icon for on/off and error states

[rebron]

Description

Update the Brave VPN button icons to improve off, on, and error state indication for VPN subscribers.

Design:

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

Brave version (brave://version info)

tbd

Version/Channel Information:

• Can you reproduce this issue with the current release? n/a
• Can you reproduce this issue with the beta channel? n/a
• Can you reproduce this issue with the nightly channel? n/a

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? n/a
• Does the issue resolve itself when disabling Brave Rewards? n/a
• Is the issue reproducible on the latest version of Chrome? n/a

Miscellaneous Information:

cc: @aguscruiz @stephendonner

[stephendonner]

cc @MadhaviSeelam too

[thypon]

Nit the red off state might be excessive. Red means:

• something is broken
• stop here
• immediate attention is required

This is ~kinda worldwide universal for anybody who got a driving license.

While urgency may be good, suggesting something is broken in the default state, may be detrimental to the message.

[stephendonner]

Note for @brave/qa-team: parts of the design mockups here (particularly around VPN off states) are slightly outmoded, and are supplanted by the updated ones in #30930 👍 (Leaving QA/Yes for now.)

[stephendonner]

Marking as QA/No in favor of #30930 (comment) which is where we're verifying these.