[FEATURE] Improving scroll to top button elegent and clean design

[Hashir-Akbar]

Why do we need this improvement?

Currently, the scroll to top button is too ugly and its icon is not well organized also the spacing and the distance from the sides are not appealing, Moreover, In the codebase <img> tag is being used to show the icon, which is inefficient if we are using Next Js we should utilize builtin <Image/> component to enhance the performance which will be done by next js automatically during build time. There is no visual of what is width or height of the icon only a shadow is shown that does not appearing to be elegant and clean.

Solution, first changed the <img> tag with <Image/> component, afterwards improved the design and fix the spacing issues. Made it more elegant and appealing. Also change the Svg which is royalty free svg taken from https://www.svgrepo.com/svg/195821/up-arrow?edit=true
moreover, fix the issue regarding the extra spacing showing in the parent div of the button, which is due to fixed property, made parent div flex too fixing the issue regarding layout spacing causing un-needed space and the button element is more stable. The spacing from the left and bottom is also fixed.

Currently:	Solution:

How will this change help?

Elegant & clean design

Screenshots

No response

How could it be implemented/designed?

I used some tailwind CSS and changed the icon because the previous icon stroke was too much which isn't needed

🚧 Breaking changes

No

👀 Have you checked for similar open issues?

• I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue?

Yes I am willing to submit a PR!

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[harikrishna-au]

Hey, @Hashir-Akbar could you please assign me the issue? I’d be glad to fix it right away.

[Hashir-Akbar]

@harikrishna-au I have fixed the issue already, I am just waiting for maintainers to assign me so, I can open the pull request.

[devilkiller-ag]

Thanks @Hashir-Akbar for opening the issue. @Mayaleeeee can you please review the design of the button before we proceed?

[sambhavgupta0705]

@devilkiller-ag I think we can proceed with this design

[devilkiller-ag]

@Hashir-Akbar you can proceed with the design and open a PR

[Hashir-Akbar]

@devilkiller-ag Okay got it