Left line hint is not displayed next to the icon in active state in brave://settings sidebar

[MadhaviSeelam]

Description

Steps to Reproduce

1. Install 1.44.86
2. launch Brave
3. open brave://settings
4. click on Appearance in the sidebar

Actual result:

Left line hint is not displayed next to the icon in the active state

Expected result:

Left line should be displayed for the Appearance icon in the active state

Reproduces how often:

100%

Brave version (brave://version info)

Brave	1.44.86 Chromium: 105.0.5195.127 (Official Build) beta (64-bit)
Revision	912488396852bf658ab32465980c0b93a3c27a83-refs/branch-heads/5195@{#1109}
OS	Windows 11 Version 21H2 (Build 22000.978)

Version/Channel Information:

• Can you reproduce this issue with the current release? No
• Can you reproduce this issue with the beta channel? Yes
• Can you reproduce this issue with the nightly channel? N/A

Other Additional Information:

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

Miscellaneous Information:

@fallaciousreasoning @aguscruiz @rebron cc: @stephendonner

[wolbek]

I would like to contribute to this issue.

[fallaciousreasoning]

Go for it @wolbek! This file brave/browser/resources/settings/brave_overrides/settings_menu.js is probably a good starting point :smile:

[prasoonmhwr]

If this issue is still open , may I work on this I am new to open source and this will be my good first issue

[prasoonmhwr]

Go for it @wolbek! This file brave/browser/resources/settings/brave_overrides/settings_menu.js is probably a good starting point 😄

@fallaciousreasoning Is this the correct path? not able to find it

[sonithch]

@prasoonmhwr check it here

https://github.com/brave/brave-core/blob/master/browser/resources/settings/brave_overrides/settings_menu.js

[fallaciousreasoning]

Yeah go for it!

The spec for the line from our designers is:

width: 4px;
height: 32px;

background: linear-gradient(96.98deg, #E51D00 0%, #E5007B 78.13%);
border-radius: 0px 2px 2px 0px;

[prasoonmhwr]

@fallaciousreasoning I have created the pull request , whom should i assign for review?

[wolbek]

Go for it @wolbek! This file brave/browser/resources/settings/brave_overrides/settings_menu.js is probably a good starting point 😄

@fallaciousreasoning Thank you. I have made a pull request according to the specs given.

[fallaciousreasoning]

I'm really sorry guys, I just realised there are two of you looking at this. @prasoonmhwr I'm going to look at @wolbek's PR, just because he asked if he could work on the issue first.

Really sorry about that everyone.

[GeetaSarvadnya]

Verification PASSED on

Brave | 1.46.80 Chromium: 107.0.5304.68 (Official Build) beta (64-bit)
-- | --
Revision | a4e93e89d3b3df1be22214603fba846ad0183ca5-refs/branch-heads/5304@{#991}
OS | Windows 10 Version 21H2 (Build 19044.2130)

Ensured that hint is displayed next to each icon setings in brave://settings page

Example	Example	Example	Example	Example