Added hover animations for nav icons

[rohan9024]

For context, refer this PR--> #10811

These were the changes requested-

1. Icon sizes should go back to original
2. The gap between icons increased, this should be the same as before
3. Add the .env.example file back
4. The highlight of the language icon and text should be in sync

Changes done by me-

1. Icon sizes changed to original
2. Fixed gap between icons
3. Added back the .env.example
4. When hovered over text the language icon, transition applies on icon.

Here is the working,

Home._.ethereum.org.-.Brave.2023-09-05.22-07-35.mp4

[gatsby-cloud]

✅ ethereum-org-website-dev deploy preview ready

• Deploy preview
• Build logs · 1h build time

[TylerAPfledderer]

Hey @rohan9024! I have some suggestions below for now.

[TylerAPfledderer]

This is excessive. The Chakra Button which ButtonLink uses has the props leftIcon and rightIcon which handle alignment of an icon against text. The spacing of token 2 is already the default.

<ButtonLink
  // -- Other props -- //
  leftIcon={
    <Icon {...iconProps} />
  }
>
  Languages {i18n.language.toUpperCase()}
</ButtonLink>

[TylerAPfledderer]

@rohan9024 this suggested change is still outstanding :)

[rohan9024]

@TylerAPfledderer done✌

[pettinarip]

Hey @rohan9024 I don't see that this was implemented. I think this change is important to simplify the overall code and to use the already provided Chakra api.

Marking it as unresolved for now.

[TylerAPfledderer]

There are a couple of pretty cool things to do here. Both transition and transform are style props, so they should not be under the style prop.

Secondly, we can put transform under the hover pseudo and not waste energy on useState. This is a two step process.

1. Add data-group to ButtonLink
2. In the Icon use the _groupHover prop which will target data-group with a descendant selector. so when hovering ButtonLink the styles under this prop will trigger. Then no need for this ternary!

So in short...

<ButtonLink
  // -- Other props -- //
  data-group
  leftIcon={
    <Icon
      as={MdLanguage}
      transition="transform 0.3s ease-in-out, color 0.2s"
      // _groupHover renders "[data-group]:hover &"
      _groupHover={{
        transform: "rotate(30deg)"
      }}
    />
  }
/>

[pettinarip]

@rohan9024 marking this as unresolved.

Currently we have the _groupHover but not the data-group set in the parent ButtonLink.

[TylerAPfledderer]

I missed one! :D

[rohan9024]

@TylerAPfledderer Thanks for providing your valuable suggestions😊. I have made the changes you've requested. Incase if I have missed out on something please guide me✌

[pettinarip]

Hey @rohan9024 I've noticed that the PR is failing to build.

The error is that the ButtonLink doesn't have an href prop which is a required prop.

So, I ran this PR locally and fixed that to see the result and this is how I see the button now:

You can see that the icon is displayed as a button and that is a bit vertically misaligned.

As I said in the comment below, I think that by removing the nested ButtonLink, that should fix these visual issues.

[pettinarip]

Not sure if I follow what we are trying to do here but currently, you have a nested ButtonLink inside another ButtonLink, resulting in a nested a tag.

I guess that what we would like to do here is to render just the icon, right? and add the data-group tag on the parent ButtonLink.

====
Note aside, the build is failing because this ButtonLink is missing the href prop.

[TylerAPfledderer]

Yea, the example I gave was not suggesting nested, but a simplified version of what the component should look like with that data-* prop and the leftIcon prop.

It was only meant as a simplified example; not to actually simplify it that much! 😅

[rohan9024]

Hey @rohan9024 I've noticed that the PR is failing to build.

The error is that the ButtonLink doesn't have an href prop which is a required prop.

So, I ran this PR locally and fixed that to see the result and this is how I see the button now:

You can see that the icon is displayed as a button and that is a bit vertically misaligned.

As I said in the comment below, I think that by removing the nested ButtonLink, that should fix these visual issues.

@pettinarip Alright got it! Updating the code.....

[pettinarip]

@rohan9024 I've added a few comments to make this cleaner. There are also 2 change requests added by Tyler that should be tackled as well.

Thanks for the time you have put in this. Let me know if you need help doing any of these changes or if I wasn't clear enough.

[corwintines]

Thanks @rohan9024

I committed a few changes to get this over the finish line:

• Took text out of a span, and added the translated template string back here (just reverted your change really around this)
• Added the leftIcon back in for the ButtonLink and removed the Icon you had added (reverted to how to use the ButtonLink component)
• Added animation to the icon for languages, which you can check out in the hover styles if interested.
• Removed unused useState code

[gitpoap-bot]

Congrats, your important contribution to this open-source project has earned you a GitPOAP!

Be sure to join the Ethereum.org discord if you are interested in contributing further to the project or have any questions for the team.

GitPOAP: 2023 Ethereum.org Contributor:

Head to gitpoap.io & connect your GitHub account to mint!

Learn more about GitPOAPs here.