[Explorer] Reduces the size of the copy icon that is used with IDs

[apburnie]

• Reflecting the scarcity of copy icons in the new Figma designs, the default for the Longtext component is now no copy button.
• Two copy buttons are taken from the Figma designs: 16 x 16 and 24 x 24 pixels.
• The copy icons used for the IDs in headers are swapped for the 24 x 24 version.
• The copy icons used for IDs elsewhere are swapped for the 16 x 16 version. This shrinks most copy icons.
• When examining the website on a smart phone, the 16 x 16 icons disappear.

Here's a video showing how these changes play out across the website:

firefox_Kngum7HkWh.mp4

The above description has been updated as of 8 September 2022

[Jibz1]

@Andrew47 the ✔️success seems off

[mystie711]

Figma reference,
https://www.figma.com/file/kSD0qXCIDZA4KQVNepA5hR/02-Explorer?node-id=158%3A35722

The proportions seem off within the badge.
These kind of misalignments usually happen because of the icon shape is chosen when exporting assets vs the icon container. One good way to always ensure you are exporting the correct asset is to look for a perfect square proportion on export.

[mystie711]

@Andrew47 just a few more pixel pushes and this should be ready to go.

[apburnie]

@mystie711 --> Does this work?

[mystie711]

@Andrew47 the text alignment looks better. But now the check icon looks off center vertically by a pixel. May need to handle their placements individually?

Let's ship this for now. I might need to do some adjustments to the icon itself in future.

[stella3d]

code looks good!
only thing i noticed in the video is that we get overlapping text when the UI is very narrow, as shown here

If that's caused by this PR, we should fix it before merge ideally - if not, we can fix in another PR.

Agreement to ship given