Brave Action Item sizing

[petemill]

Icons change from 16px to 18px

Notification bubble not cover lion eye

Spec forthcoming in comment below...

Test plan

• Shields and Rewards icons look pixel perfect at new 18px size on 1x, 2x and 3x screens
• Badge position is as indicated below, always anchored 12px from right edge of hover background on button. Same with 1, 2 or 3 character length strings.
• Badge colors are as indicated below.
• With 3 character length string in badge, badge extends right past edge of hover background of button

[rossmoody]

[davidtemkin]

Let's bump the priority of this issue, make it a requirement for 1.0 at the latest @rebron @bradleyrichter

[petemill]

@rossmoody please can we add some detail as to what the horizontal anchor point of the notification bubbles should be for both shields and rewards items? Then we'll know how they both expand / contract with different width text.

[rossmoody]

@petemill if i am missing anything here or you see a consideration I missed please holler

[petemill]

@rossmoody this is useful but what I'm looking for is where in the bounding box that bubble is positioned when it changes width. i.e. is it fixed to the right position (which for shields is about -2px to the right)? And for Rewards.

[petemill]

The answer is that the shields notification bubble is left-aligned to the blue dashed line below, which is Xpx from the left of the image.

@rossmoody are we going with the shields icon displaying '0' for no blocked items? If so, please can we create a separate issue as that needs to be done within the shields extension.

[rossmoody]

Thanks for following up here, forgot to circle back and elaborate.

Filed an issue for the updated shields number behavior: #2793

[petemill]

FYI @rossmoody this other issue is stopping me achieving the above spec perfectly #2807
For now I could remove the 2px gap between the buttons? Since multiple buttons won't have the hover affect at the same time.

[srirambv]

@petemill @rossmoody On Linux with 100% DPI setting the icons look a little pixelated/blurry and the lion icon looks a little soft edged.

at 100% DPI

at 200% DPI

Device display setting is as follows

Verified on Windows 10 x64: 0.60.44

• With 100 % DPI, Resolution 1920x1080 - Shield icon looks blurry
  

• With 125 % DPI, Resolution 1920x1080 - Shield icon looks blurry
  

• With 150 % DPI, Resolution 1920x1080
  

• With 175 % DPI, Resolution 1920x1080
  

[btlechowski]

Verification passed on

Brave	0.60.44 Chromium: 72.0.3626.109 (Official Build) (64-bit)
Revision	fae8db7ab9280fa6704a59980263c804f809ebd5-refs/branch-heads/3626@{#857}
OS	Windows 7

Used test plan from the description and the comments.

Logged #3434

[kjozwiak]

@srirambv will file a new issue regarding the icons still appearing blurry while using 100% DPI under linux as outlined #2295 (comment).

@srirambv once created, mention the new issue in this issue 👍