Add smooth animation when displaying icon details and improve mobile responsive

[gabrielogregorio]

Description

I was using the react icons and noticed some things that I believe could be better.

This is my first attempt at contributing with react icons, forgive me if I have violated any rules

Changes Made

1 - A hook was added that allows a smooth opening and closing animation of the modal.

How does the hook work?

Basically the hook listens for changes in isOpen, which is the main controller for saying whether the modal is open or closed.

When isOpen is true, the hook also sets AnimationIsOpen to true, to update the right from -600px to 0px, this opens the modal.

When a closing event happens, then the closing animation is started, and after 250ms, which is the animation time, then onClose is effectively called to close the modal.

Such adjustments give the impression of opening and closing the modal.

Video, before and now

https://github.com/react-icons/react-icons/assets/48621655/0aff7d7d-b395-455f-b802-27ecf2ce61d7

2 - Fixed alignment between the close icon and the text before

now

3 - Improved mobile experience, now the modal size is 100% instead of 50%

before

now

3 - Expanded close button clickable area

before

now

[kamijin-fanta]

I think the end of a transition should be caught by the transitionend event, not a timer.

[gabrielogregorio]

I agree, I didn't know about transitionend and I intend to use it in my future projects, as it makes a lot more sense

In my recent commit 5a0fd9caa7018122da387b10261500c7fbbd83d8, I removed the timeout and replaced it with a transitionend listener. I've kept [animationIsOpen, onClose] as dependencies to ensure the listener is reset properly.

I'm open to suggestions

[gabrielogregorio]

In commit https://github.com/react-icons/react-icons/commit/3b153aa68b8cca712bca928d73bcebeff57462e8, the bug that covered the close button on mobile when the icon name was too long was fixed.

Before

Now