feat: add hexagon avatars for nft avatars

[andriishupta]

What does this PR do?

This PR updates all places where we show Avatar, and if it is NFT - we show a hexagon border.

It is done in the same way as on Twitter:

• add HexagonClipConfig
• clip our divs and images with it

All "default" ways are not usable cause CSS's polygon() cannot give as rounded corners and ::before cannot be applied to img - this is the most straightforward and simple solution to achieve what we want.

❗️Explanation for borders and backgrounds: Added 3 commits: 1rst is the main code, and 2 others after testing have seen some room for improvement.

• to do the details like it was("ring"), I increased the background div and applied background color to replace the ring - it is a border and it is not working on a hexagon
• after testing noticed that it is better to remove the border and background cause hexagon shape were interacting with some areas where we had 2 background colors
• Twitter also has no borders, and I think for the same reasons - to achieve border, we need to add wrapper and all logic, and for future, IMHO, it would be easy just to add .hexagon class in other places
• looks cool

❗️❗️❗️ If a border is crucial - we can discuss it in Discord But they were barely visibly and only valid for totally white image We didn't have back borders/backgrounds in all places - CSS currentBackground suits ideally

Fixes #50

Screenshots

Type of change

• [ ] New feature (non-breaking change which adds functionality)

How should this be tested?

• [ ] Manual check for all changed places in the Light and the Dark theme s

Checklist

[vercel[bot]]

@andriishupta is attempting to deploy a commit to the Lenster Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
lenster	✅ Ready (Inspect)	Visit Preview	Aug 18, 2022 at 2:35PM (UTC)

[andriishupta]

@bigint suggestion means that I need to change or not? cause I left a message that I intentionally removed, and to add borders to the hexagon requires wrapper

Just clarify for me what you want:

• should I return borders to just regular(like It was) OR both?
• HexagonConfig is supposed to be present like an invisible config.

Other Hexagon options will be:

• add different with different ids - duplicate on the same page up to 4 times: comments, topbar, suggestion, post owner
• Near each Nft avatar dynamically get DOM, check if we have HexagonConfig already, in case we have - append

[andriishupta]

@bigint

This is the best variant that I can propose now without different workarounds and keeping a small hex config in the HTML body - in other cases, there would be custom and more complicated logic that doesn't cost effort, IMHO

if you have another vision or know a better way - feel free to update PR as you with or give it to someone who knows the easier and more efficient way

[andriishupta]

@bigint how to authorize build again? seems not work, but in the morning I could do it

[bigint]

Closing this for being stale for more than 15 days 🙏🏼

Feel free to create/reopen again 🚀