Little indication of IPFS tab selected in settings

[0x1a8510f2]

Description

All settings tabs have icons which change when the tab is selected, except for IPFS which stays grey regardless of selection status.

Steps to Reproduce

1. Open settings
2. Select any tab other than IPFS
3. Notice that the icon turns orange
4. Select IPFS tab
5. Notice that the icon does not turn orange

Actual result:

IPFS icon shows no indication of selected tab

Expected result:

IPFS icon changes colour to indicate selected tab

Reproduces how often:

Always

Brave version (brave://version info)

Brave	1.25.68 Chromium: 91.0.4472.77 (Official Build) (64-bit)
Revision	1cecd5c8a856bc2a5adda436e7b84d8d21b339b6-refs/branch-heads/4472@{#1246}
OS	Linux

Version/Channel Information:

• Can you reproduce this issue with the current release? YES
• Can you reproduce this issue with the beta channel? UNTESTED
• Can you reproduce this issue with the nightly channel? UNTESTED

Other Additional Information:

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

Screenshots:

Wallet	Extension	Getting started	IPFS

On a somewhat-related note, I believe the hightlighted Wallet tab icon could be improved - it's much less highlighted than the others which makes it stick out IMO.

[rebron]

@karenkliu Do we have the right states for IPFS mocked up for selection?

[rebron]

cc: @spylogsster

[karenkliu]

@rebron I'm waiting for the settings including side nav states to be fixed here: #13688

It's supposed to look like this:

IPFS should have the gradient color and indicator when it's selected.

[bbondy]

@karenkliu can you point to the figma asset to use that fixes this?

[karenkliu]

@bbondy https://www.figma.com/file/tLXWGCpNoiJxDZDdpfordj/Desktop-Settings?node-id=491%3A13498

[stephendonner]

Verified PASSED using

Brave	1.28.54 Chromium: 92.0.4515.81 (Official Build) nightly (x86_64)
Revision	dba3af0a9a48954c8b188bc641e651580b7cb7b5-refs/branch-heads/4515@{#1162}
OS	macOS Version 11.4 (Build 20F71)

selected	selected	hover	hover

[karenkliu]

@stephendonner Dark theme hover seems to be using the incorrect color, and therefore not passing accessibility standards. It should be this:

737ADE

Also, looks like the icon in the sidebar is missing the selected and hover color, as well as the selected accent line: