[Desktop] Use Smaller Icons and More Translucent Appearance for Top Sites

[hennrynusasatria]

Description

Use Smaller Icons and More Translucent Appearance for Top Sites

Steps to Reproduce

1. Open new tab on Brave Browser, look at Top Sites.
2. Open new tab on Microsoft Edge Chromium, look at Top Sites (Quick Links).
3. See the differences.

Actual result:

Expected result:

The icon and frame on Brave Browser Top Sites are too big, it also does not have more translucent background around the icons, thus covering the background picture. Please try to adopt the similar style like the ones from Microsoft Edge Chromium.

Reproduces how often:

Easily Reproduced

Brave version (brave://version info)

Brave: 1.12.114 Chromium: 84.0.4147.135 (Official Build) (32-bit) OS: Windows 10 OS Version 1909 (Build 18363.1016) JavaScript: V8 8.4.371.23

Version/Channel Information:

• Can you reproduce this issue with the current release? Yes.
• Can you reproduce this issue with the beta channel? I do not use Beta Channel.
• Can you reproduce this issue with the nightly channel? I do not use Nightly Channel.

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? It is not related to Brave Shields.
• Does the issue resolve itself when disabling Brave Rewards? It is not related to Brave Rewards.
• Is the issue reproducible on the latest version of Chrome? It is not related to Google Chrome.

[bsclifton]

We will be looking at the top sites tiles soon with https://github.com/brave/brave-browser/issues/7493 and @karenkliu did have some changes we'd be making (currently in Figma; not sure if it's attached to issue yet). We won't be making the icons smaller or changing the opacity (at least not for now)