Resolved Overlapping of Chatbot and Scroll to Top Button

[Tejashri-Taral]

Hi @surajvast1 ,
closes #397

considering the current positioning where the chatbot is in the rightmost bottom of the page and the scroll-to-top button is just above it, I adjusted the scroll-to-top button and chatbot by interchanging their position to avoid overlap.

Video/Screenshots (mandatory)

Here as you can see :

[vercel]

@Tejashri-Taral is attempting to deploy a commit to the pranavbarthwal's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your pull request! We'll review it as soon as possible. For further communication, you can contact the mentors for this project.

[surajvast1]

@PranavBarthwal LGTM

[Tejashri-Taral]

@PranavBarthwal , @surajvast1
Please take a look and review it.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
cosmo-xplore	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 18, 2024 10:31am

[PranavBarthwal]

please fix the overlapping of chatbot button and chatbot window

[Tejashri-Taral]

@PranavBarthwal , Is it okay if I shift the bot on the top of the webpage?
You have mentioned that it is overlapping but it's working if you are asking anything to bot

[surajvast1]

@Tejashri-Taral No dont move it on the top slide the chatbot a litlte above the chatbot icon

[Tejashri-Taral]

Hey @surajvast1 ,
closes #400
is it okay?

Screenshot

Please take a look and review it.

[PranavBarthwal]

The position of the chatbot button was fine, I was saying if chatbaot window is open then the chatbot button should not be visible

[AnkitLuhar]

@PranavBarthwal assign this issue to me, i can fix that the overlapping problem + when the chatbot is opened then the chatbot icon won't be visible and when user clicked outside the chatbot the chatbot become close and again the chatbot icon will be visible and assign this issue under the gssoc24 , excited to contribute in this awesome project.

[surajvast1]

here you go @AnkitLuhar

[AnkitLuhar]

hey @surajvast1 , @PranavBarthwal look at this if it seems good then, I will commit the changes soon. There is a problem with your scroll-to-top button: when it's clicked, it works, but when I scroll the webpage again, the button becomes entirely white, making the icon invisible in the container. To solve this problem, I made some CSS styling changes to the button. You can look at the attached video to see all the functionalities which i added ,

here is the list all-the functionalites i added :

1.scroll-to-top button only visible when the user scroll some amount(pixelscroll>350) of the webpage,its enhance the user-experience,
2.there is no overlapping of the chatbot and the scroll-to-top button,
3. the chatbot icon not visible when the chatbot-pop-up-container is open and vice-versa,
4. chatbot-pop-up-container can close by clicking on the close button or whether click outside of the chatbot container.
5. solved the issue of the entirely white of the scroll-to-top button,which make the icon invisible and make the website experience poor.

here is the screenRecording:

screen-capture.7.webm

here is the ScreenShots:

[AnkitLuhar]

@surajvast1 , @PranavBarthwal kindly please review my work.

[surajvast1]

Apologies for reviewing it late
your work looks commendable
LGTM @PranavBarthwal
merge this

[AnkitLuhar]

@surajvast1, thank you for the appreciation. Today is the last day for merging PRs, and any points from the PR will not be counted afterward. Could you please merge the PR as soon as possible!

[AnkitLuhar]

@PranavBarthwal , @surajvast1 kindly please merge the PR, time is running out !

[AnkitLuhar]

@PranavBarthwal, @surajvast1, kindly merge the PR. I have made all the changes as committed. If any further changes are required, please let me know and here is my PR: #460