fix: improving scroll to top button elegent and clean design #3637
Conversation
Hashir-Akbar
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThis pull request updates the Changes
Assessment against linked issues
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 180000ms (1)
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
Documentation and Community
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
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.
❌ Deploy Preview for asyncapi-website failed.Built without sensitive environment variables
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
components/buttons/ScrollButton.tsx (1)
33-33: Reorder Tailwind classes and consider hover state.The border and shadow additions create a more elegant design. Consider adding a hover state for better interactivity.
- className='rounded-full bg-white shadow-darkGunMetal border border-black/25' + className='rounded-full border border-black/25 bg-white shadow-darkGunMetal hover:shadow-lg'🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[warning] 33-33: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/img/loaders/scroll.svgis excluded by!**/*.svg
📒 Files selected for processing (1)
components/buttons/ScrollButton.tsx(2 hunks)
🧰 Additional context used
🪛 ESLint
components/buttons/ScrollButton.tsx
[error] 1-2: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 2-2: Replace "next/image" with 'next/image'
(prettier/prettier)
[error] 2-2: Strings must use singlequote.
(quotes)
[error] 32-34: Replace ⏎··········className='rounded-full·bg-white·shadow-darkGunMetal·border·border-black/25'⏎··········onClick={scrollUp} with ·className='rounded-full·bg-white·shadow-darkGunMetal·border·border-black/25'·onClick={scrollUp}>
(prettier/prettier)
[error] 35-36: Replace ·>⏎·········<Image·src={scrollImage}· with ···<Image·src={scrollImage}
(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
components/buttons/ScrollButton.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[error] 2-2: Replace "next/image" with 'next/image' prettier/prettier
[error] 2-2: Strings must use singlequote. quotes
[warning] 30-30: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 32-32: Replace ⏎··········className='rounded-full·bg-white·shadow-darkGunMetal·border·border-black/25'⏎··········onClick={scrollUp} with ·className='rounded-full·bg-white·shadow-darkGunMetal·border·border-black/25'·onClick={scrollUp}> prettier/prettier
[warning] 33-33: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 35-35: Replace ·>⏎·········<Image·src={scrollImage}· with ···<Image·src={scrollImage} prettier/prettier
⏰ Context from checks skipped due to timeout of 180000ms (1)
- GitHub Check: Lighthouse CI
components/buttons/ScrollButton.tsx
Outdated
| import React, { useEffect, useState } from 'react'; | ||
| import Image from "next/image"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
LGTM! Fix formatting issues.
Good choice using Next.js's Image component for improved performance. However, there are some formatting issues to address:
-import React, { useEffect, useState } from 'react';
-import Image from "next/image";
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';📝 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.
| import React, { useEffect, useState } from 'react'; | |
| import Image from "next/image"; | |
| import Image from 'next/image'; | |
| import React, { useEffect, useState } from 'react'; |
🧰 Tools
🪛 ESLint
[error] 1-2: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 2-2: Replace "next/image" with 'next/image'
(prettier/prettier)
[error] 2-2: Strings must use singlequote.
(quotes)
🪛 GitHub Actions: PR testing - if Node project
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[error] 2-2: Replace "next/image" with 'next/image' prettier/prettier
[error] 2-2: Strings must use singlequote. quotes
|
@Hashir-Akbar run "npm run lint:fix" to fix lint errors |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/buttons/ScrollButton.tsx(2 hunks)pages/community/index.tsx(1 hunks)
🧰 Additional context used
🪛 ESLint
components/buttons/ScrollButton.tsx
[error] 25-25: Delete ,
(prettier/prettier)
[error] 25-25: Unexpected trailing comma.
(comma-dangle)
[error] 30-30: Replace "fixed·z-40·flex·w-12·bottom-6·right-6·m-0" with 'fixed·z-40·flex·w-12·bottom-6·right-6·m-0'
(prettier/prettier)
[error] 30-30: Unexpected usage of doublequote.
(jsx-quotes)
[error] 32-35: Replace ⏎··········className="rounded-full·border·border-black/25·bg-white·shadow-darkGunMetal"⏎··········onClick={scrollUp}⏎········ with ·className='rounded-full·border·border-black/25·bg-white·shadow-darkGunMetal'·onClick={scrollUp}
(prettier/prettier)
[error] 33-33: Unexpected usage of doublequote.
(jsx-quotes)
[error] 36-41: Replace ⏎············src={scrollImage}⏎············alt="scroll·to·top"⏎············width={120}⏎············height={120}⏎········· with ·src={scrollImage}·alt='scroll·to·top'·width={120}·height={120}
(prettier/prettier)
[error] 38-38: Unexpected usage of doublequote.
(jsx-quotes)
🪛 GitHub Actions: PR testing - if Node project
components/buttons/ScrollButton.tsx
[error] 25-25: Delete ,
[error] 25-25: Unexpected trailing comma.
[warning] 30-30: Invalid Tailwind CSS classnames order
[error] 30-30: Replace "fixed·z-40·flex·w-12·bottom-6·right-6·m-0" with 'fixed·z-40·flex·w-12·bottom-6·right-6·m-0'
[error] 30-30: Unexpected usage of doublequote.
[error] 32-32: Replace ⏎··········className="rounded-full·border·border-black/25·bg-white·shadow-darkGunMetal"⏎··········onClick={scrollUp}⏎········ with ·className='rounded-full·border·border-black/25·bg-white·shadow-darkGunMetal'·onClick={scrollUp}
[error] 33-33: Unexpected usage of doublequote.
[error] 36-36: Replace ⏎············src={scrollImage}⏎············alt="scroll·to·top"⏎············width={120}⏎············height={120}⏎········· with ·src={scrollImage}·alt='scroll·to·top'·width={120}·height={120}
[error] 38-38: Unexpected usage of doublequote.
⏰ Context from checks skipped due to timeout of 180000ms (1)
- GitHub Check: Lighthouse CI
🔇 Additional comments (4)
components/buttons/ScrollButton.tsx (3)
1-1: LGTM! Good choice using Next.js's Image component.The addition of the Image component from next/image is a good choice for improved performance and image optimization.
36-41: Adjust image dimensions to match container size.The image dimensions (120x120) are larger than the container width (w-12 = 48px), which could cause unnecessary scaling and affect performance.
- <Image - src={scrollImage} - alt="scroll to top" - width={120} - height={120} - /> + <Image + src={scrollImage} + alt='scroll to top' + width={48} + height={48} + />🧰 Tools
🪛 ESLint
[error] 36-41: Replace
⏎············src={scrollImage}⏎············alt="scroll·to·top"⏎············width={120}⏎············height={120}⏎·········with·src={scrollImage}·alt='scroll·to·top'·width={120}·height={120}(prettier/prettier)
[error] 38-38: Unexpected usage of doublequote.
(jsx-quotes)
🪛 GitHub Actions: PR testing - if Node project
[error] 36-36: Replace
⏎············src={scrollImage}⏎············alt="scroll·to·top"⏎············width={120}⏎············height={120}⏎·········with·src={scrollImage}·alt='scroll·to·top'·width={120}·height={120}
[error] 38-38: Unexpected usage of doublequote.
30-30:⚠️ Potential issueFix formatting issues.
The className needs formatting fixes:
- Reorder Tailwind classes according to project conventions
- Use single quotes instead of double quotes
- <div className="fixed z-40 flex w-12 bottom-6 right-6 m-0"> + <div className='fixed bottom-6 right-6 z-40 flex w-12 m-0'>Likely invalid or redundant comment.
🧰 Tools
🪛 ESLint
[error] 30-30: Replace
"fixed·z-40·flex·w-12·bottom-6·right-6·m-0"with'fixed·z-40·flex·w-12·bottom-6·right-6·m-0'(prettier/prettier)
[error] 30-30: Unexpected usage of doublequote.
(jsx-quotes)
🪛 GitHub Actions: PR testing - if Node project
[warning] 30-30: Invalid Tailwind CSS classnames order
[error] 30-30: Replace "fixed·z-40·flex·w-12·bottom-6·right-6·m-0" with 'fixed·z-40·flex·w-12·bottom-6·right-6·m-0'
[error] 30-30: Unexpected usage of doublequote.
pages/community/index.tsx (1)
184-184: LGTM! Improved class name organization.The reordering of Tailwind classes improves code consistency and readability.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3637 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 20 20
Lines 732 732
=========================================
Hits 732 732 ☔ View full report in Codecov by Sentry. |
Hashir-Akbar
changed the title
Hashir-Akbar
changed the title
Description
<img/>to<Image/>component for performanceRelated issue(s)
Fixes #3614
Summary by CodeRabbit
Cardcomponent from the Community Index Page.