feat: make scroll to top button attractive with hover effects #3605

zalabhavy · 2025-01-24T06:34:53Z

Fixed #3604

I have successfully solved this issue !

Here is image after my added tailwind css style

Summary by CodeRabbit

Style
- Enhanced ScrollButton hover effects with improved visual transitions and scaling
- Adjusted CSS class order in CaseStudyCard for better styling organization

coderabbitai · 2025-01-24T06:35:00Z

Walkthrough

The pull request focuses on enhancing the ScrollButton component by adding hover effects using Tailwind CSS classes. The modification introduces a more interactive and visually appealing button style, specifically adding hover background color, scale transformation, and smooth transition effects. The CaseStudyCard component also received updates to the order of its CSS classes without altering its functionality. The core functionality of both components remains unchanged, with only the visual presentation being updated.

Changes

File	Change Summary
`components/buttons/ScrollButton.tsx`	Updated button classes to include hover effects: `hover:bg-[#8851FB] hover:scale-110 transition-all duration-300 ease-in-out`
`components/CaseStudyCard.tsx`	Reordered class names in the outer and inner `<div>` elements without changing functionality.

Assessment against linked issues

Objective	Addressed	Explanation
Add hover effects to Scroll to Top Button [#3604]	✅
Improve user experience with button styling	✅

Possibly related PRs

fix: #3544 Misalignment of Height and Spacing in Case Study Block on Desktop and Mobile Views. #3561: This PR modifies the CaseStudyCard component, similar to the main PR, by updating the layout and styling of the case study cards, specifically addressing height and spacing issues.

Suggested labels

ready-to-merge, bounty

Suggested reviewers

derberg
akshatnema
magicmatatjahu
Mayaleeeee
devilkiller-ag
sambhavgupta0705
anshgoyalevil

Poem

🐰 A button that dances with grace,
Hover and scale at a playful pace,
Purple background, a magical sight,
Scroll to top with pure delight!
Rabbit's design, smooth and bright! 🚀

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ae17c97 and db4872a.

📒 Files selected for processing (2)

components/CaseStudyCard.tsx (1 hunks)
components/buttons/ScrollButton.tsx (1 hunks)

✅ Files skipped from review due to trivial changes (1)

components/CaseStudyCard.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

components/buttons/ScrollButton.tsx

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

github-actions

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide 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.

netlify · 2025-01-24T06:35:26Z

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`29e9056`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/679b34531843e900083877c7
😎 Deploy Preview	https://deploy-preview-3605--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

asyncapi-bot · 2025-01-24T06:38:41Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	41
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-3605--asyncapi-website.netlify.app/

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1b23c89 and ae17c97.

📒 Files selected for processing (1)

components/buttons/ScrollButton.tsx (1 hunks)

🧰 Additional context used

🪛 eslint

components/buttons/ScrollButton.tsx

[error] 31-31: Replace ·className='rounded-full·bg-white·shadow-md·hover:bg-[#8851FB]·hover:scale-110·transition-all·duration-300·ease-in-out'·onClick={scrollUp} with ⏎··········className='rounded-full·bg-white·shadow-md·hover:bg-[#8851FB]·hover:scale-110·transition-all·duration-300·ease-in-out'⏎··········onClick={scrollUp}⏎········

(prettier/prettier)

🪛 GitHub Actions: PR testing - if Node project

components/buttons/ScrollButton.tsx

[error] 31-31: Formatting error: Incorrect formatting of className and onClick props. Props should be on separate lines

[warning] 31-31: Invalid Tailwind CSS classnames order

coderabbitai · 2025-01-24T06:39:51Z

components/buttons/ScrollButton.tsx

@@ -28,7 +28,7 @@ function ScrollButton() {
  return (
    <div className='fixed bottom-14 right-4 z-40 h-16 w-12'>
      {backToTopButton && (
-        <button className='rounded-full bg-white shadow-md ' onClick={scrollUp}>
+        <button className='rounded-full bg-white shadow-md hover:bg-[#8851FB] hover:scale-110 transition-all duration-300 ease-in-out' onClick={scrollUp}>


🛠️ Refactor suggestion

Resolve Pipeline Failures by Fixing Tailwind Class Order and Multi-line Formatting

Currently, the pipeline fails due to formatting errors and a Tailwind CSS class ordering warning. You can move the onClick prop to a new line and reorder classes to address both issues.

Apply this diff to fix the pipeline failures:

- <button className='rounded-full bg-white shadow-md hover:bg-[#8851FB] hover:scale-110 transition-all duration-300 ease-in-out' onClick={scrollUp}> + <button + className="bg-white rounded-full shadow-md transition-all duration-300 ease-in-out hover:bg-[#8851FB] hover:scale-110" + onClick={scrollUp} + >

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

<button className='rounded-full bg-white shadow-md hover:bg-[#8851FB] hover:scale-110 transition-all duration-300 ease-in-out' onClick={scrollUp}>

<button

className="bg-white rounded-full shadow-md transition-all duration-300 ease-in-out hover:bg-[#8851FB] hover:scale-110"

onClick={scrollUp}

>

🧰 Tools

🪛 eslint

[error] 31-31: Replace ·className='rounded-full·bg-white·shadow-md·hover:bg-[#8851FB]·hover:scale-110·transition-all·duration-300·ease-in-out'·onClick={scrollUp} with ⏎··········className='rounded-full·bg-white·shadow-md·hover:bg-[#8851FB]·hover:scale-110·transition-all·duration-300·ease-in-out'⏎··········onClick={scrollUp}⏎········

(prettier/prettier)

🪛 GitHub Actions: PR testing - if Node project

[error] 31-31: Formatting error: Incorrect formatting of className and onClick props. Props should be on separate lines

[warning] 31-31: Invalid Tailwind CSS classnames order

codecov · 2025-01-24T06:49:19Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (7d9abc2) to head (29e9056).
Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #3605   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           20        20           
  Lines          732       732           
=========================================
  Hits           732       732

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

TRohit20

Hi @zalabhavy , Thank you so much for the contribution! :)

CC @akshatnema Do we need this change ? I don't see any maintainers giving a go-ahead in the issue linked😅

zalabhavy · 2025-01-27T11:56:01Z

@akshatnema @anshgoyalevil Please review this PR.

Thank You !

anshgoyalevil · 2025-01-29T12:46:24Z

@zalabhavy Do we really need this change? I don't think it would add any value in terms of UI/UX

zalabhavy · 2025-01-29T13:14:46Z

@anshgoyalevil Since the 'Scroll to Top' button is initially white and our website's buttons follow a purple theme, I think keeping it white at first is fine. However, when the user hovers over it, it should expand smoothly with a purple color transition to maintain consistency with the theme and enhance the user experience.

zalabhavy · 2025-01-29T13:30:51Z

If you don't prefer this change, you can close this PR. It's not an issue. I will find other issues and try to solve them 😊.

anshgoyalevil · 2025-01-30T08:16:27Z

Merging this PR, but please be mindful that all issues require a triage before proceeding with a PR. Read the contributing guidelines explaining the flow.

anshgoyalevil · 2025-01-30T08:16:54Z

/rtm

zalabhavy · 2025-01-30T09:23:36Z

@anshgoyalevil Okay , Thank You !

Make Scroll to top button attractive with Hover effects

ae17c97

zalabhavy requested review from derberg, akshatnema, magicmatatjahu, anshgoyalevil, Mayaleeeee and asyncapi-bot-eve as code owners January 24, 2025 06:34

github-actions bot reviewed Jan 24, 2025

View reviewed changes

asyncapi-bot requested review from devilkiller-ag and sambhavgupta0705 January 24, 2025 06:35

coderabbitai bot reviewed Jan 24, 2025

View reviewed changes

Fix linting issues

db4872a

zalabhavy changed the title ~~Make Scroll to top button attractive with Hover effects~~ feat: make scroll to top button attractive with hover effects Jan 24, 2025

zalabhavy added 3 commits January 24, 2025 22:46

Merge branch 'master' into scroll-btn

c85eee5

Merge branch 'master' into scroll-btn

d462f7d

Merge branch 'master' into scroll-btn

57b96c8

TRohit20 reviewed Jan 26, 2025

View reviewed changes

zalabhavy added 2 commits January 27, 2025 07:29

Merge branch 'master' into scroll-btn

d60aa1f

Merge branch 'master' into scroll-btn

7938cc2

Merge branch 'master' into scroll-btn

579803d

Merge branch 'master' into scroll-btn

a5e8835

Merge branch 'master' into scroll-btn

29e9056

anshgoyalevil approved these changes Jan 30, 2025

View reviewed changes

asyncapi-bot added the ready-to-merge label Jan 30, 2025

asyncapi-bot merged commit 59209f2 into asyncapi:master Jan 30, 2025
19 checks passed

coderabbitai bot mentioned this pull request Feb 2, 2025

fix: improving scroll to top button elegent and clean design #3637

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: make scroll to top button attractive with hover effects #3605

feat: make scroll to top button attractive with hover effects #3605

zalabhavy commented Jan 24, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 24, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

github-actions bot left a comment

netlify bot commented Jan 24, 2025 •

edited

Loading

asyncapi-bot commented Jan 24, 2025 •

edited

Loading

coderabbitai bot left a comment

coderabbitai bot Jan 24, 2025

codecov bot commented Jan 24, 2025 •

edited

Loading

TRohit20 left a comment

zalabhavy commented Jan 27, 2025

anshgoyalevil commented Jan 29, 2025

zalabhavy commented Jan 29, 2025 •

edited

Loading

zalabhavy commented Jan 29, 2025

anshgoyalevil commented Jan 30, 2025

anshgoyalevil commented Jan 30, 2025

zalabhavy commented Jan 30, 2025

feat: make scroll to top button attractive with hover effects #3605

feat: make scroll to top button attractive with hover effects #3605

Conversation

zalabhavy commented Jan 24, 2025 • edited by coderabbitai bot Loading

Summary by CodeRabbit

coderabbitai bot commented Jan 24, 2025 • edited Loading

Walkthrough

Changes

Assessment against linked issues

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

github-actions bot left a comment

Choose a reason for hiding this comment

netlify bot commented Jan 24, 2025 • edited Loading

✅ Deploy Preview for asyncapi-website ready!

asyncapi-bot commented Jan 24, 2025 • edited Loading

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot Jan 24, 2025

Choose a reason for hiding this comment

codecov bot commented Jan 24, 2025 • edited Loading

Codecov Report

TRohit20 left a comment

Choose a reason for hiding this comment

zalabhavy commented Jan 27, 2025

anshgoyalevil commented Jan 29, 2025

zalabhavy commented Jan 29, 2025 • edited Loading

zalabhavy commented Jan 29, 2025

anshgoyalevil commented Jan 30, 2025

anshgoyalevil commented Jan 30, 2025

zalabhavy commented Jan 30, 2025

zalabhavy commented Jan 24, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 24, 2025 •

edited

Loading

netlify bot commented Jan 24, 2025 •

edited

Loading

asyncapi-bot commented Jan 24, 2025 •

edited

Loading

codecov bot commented Jan 24, 2025 •

edited

Loading

zalabhavy commented Jan 29, 2025 •

edited

Loading