refactor: misalignment in the filter field of tools section #3645
Conversation
refactoring the filter field ( commercial $ ) which is misaligned in the tools section.
Bharath-dev05
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe pull request updates the Changes
Assessment against linked issues
Suggested labels
Suggested reviewers
Poem
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
|
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
components/tools/Filters.tsx (2)
142-143: Enhanced Margin Classes for "Open Source" FilterThe updated margin classes (
mt-2.5for the text andmt-3for the image) should help correct the misalignment of the "Open Source" option. Please verify that the Tailwind CSS class order meets your project’s conventions, as static analysis hints suggest a potential reordering.🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[warning] 142-142: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 143-143: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
145-150: Improved Alignment & Formatting for "Commercial" FilterThe "Commercial" filter changes introduce a
mt-4margin for the label and adjust the image’s margin classes topr-6 md:pr-5 lg:pr-8 mt-2 ml-1 mb-1to fix the misalignment issue. However, static analysis and pipeline logs indicate a few formatting issues:
- Prettier Formatting:
- A newline should be inserted after the opening tag (line 145).
- The image element (line 149) should be reformatted into a multi-line structure to conform with prettier standards.
- Any extraneous spaces (line 150) should be removed.
- Tailwind CSS Class Order:
Review the order of the class names if your project's linting rules require a specific order.Consider applying the following diff to address these issues:
-<div className={`flex cursor-pointer gap-1 rounded-md border bg-gray-200 px-4 py-2 hover:border-secondary-500 hover:bg-secondary-100 ${checkPaid === 'paid' ? 'border-secondary-500 bg-secondary-100' : ''}`} - onClick={() => (checkPaid === 'paid' ? setCheckPaid('all') : setCheckPaid('paid'))} -> - <div className='text-sm mt-4'>Commercial</div> - <img className='pr-6 md:pr-5 lg:pr-8 mt-2 ml-1 mb-1' src='/img/illustrations/icons/PaidIcon.svg' alt='Paid' /> - </div> +<div + className={`flex cursor-pointer gap-1 rounded-md border bg-gray-200 px-4 py-2 hover:border-secondary-500 hover:bg-secondary-100 ${ + checkPaid === 'paid' ? 'border-secondary-500 bg-secondary-100' : '' + }`} + onClick={() => (checkPaid === 'paid' ? setCheckPaid('all') : setCheckPaid('paid'))} +> + <div className="mt-4 text-sm">Commercial</div> + <img + className="pr-6 md:pr-5 lg:pr-8 mt-2 ml-1 mb-1" + src="/img/illustrations/icons/PaidIcon.svg" + alt="Paid" + /> +</div>This updated diff reformats the div structure and the image element to satisfy prettier and Tailwind CSS linting requirements while preserving the intended visual improvement.
🧰 Tools
🪛 ESLint
[error] 145-145: Insert
⏎·············(prettier/prettier)
[error] 149-149: Replace
<img·className='pr-6·md:pr-5·lg:pr-8·mt-2·ml-1·mb-1'·src='/img/illustrations/icons/PaidIcon.svg'·alt='Paid'with··<img⏎················className='pr-6·md:pr-5·lg:pr-8·mt-2·ml-1·mb-1'⏎················src='/img/illustrations/icons/PaidIcon.svg'⏎················alt='Paid'⏎·············(prettier/prettier)
[error] 150-150: Delete
··(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[error] 145-145: Insert
⏎·············prettier/prettier
[warning] 148-148: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 149-149: Replace
<img·className='pr-6·md:pr-5·lg:pr-8·mt-2·ml-1·mb-1'·src='/img/illustrations/icons/PaidIcon.svg'·alt='Paid'with··<img⏎················className='pr-6·md:pr-5·lg:pr-8·mt-2·ml-1·mb-1'⏎················src='/img/illustrations/icons/PaidIcon.svg'⏎················alt='Paid'⏎·············prettier/prettier
[warning] 149-149: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 150-150: Delete
··prettier/prettier
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/tools/Filters.tsx(1 hunks)
🧰 Additional context used
🪛 ESLint
components/tools/Filters.tsx
[error] 145-145: Insert ⏎·············
(prettier/prettier)
[error] 149-149: Replace <img·className='pr-6·md:pr-5·lg:pr-8·mt-2·ml-1·mb-1'·src='/img/illustrations/icons/PaidIcon.svg'·alt='Paid' with ··<img⏎················className='pr-6·md:pr-5·lg:pr-8·mt-2·ml-1·mb-1'⏎················src='/img/illustrations/icons/PaidIcon.svg'⏎················alt='Paid'⏎·············
(prettier/prettier)
[error] 150-150: Delete ··
(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
components/tools/Filters.tsx
[warning] 142-142: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 143-143: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 145-145: Insert ⏎············· prettier/prettier
[warning] 148-148: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 149-149: Replace <img·className='pr-6·md:pr-5·lg:pr-8·mt-2·ml-1·mb-1'·src='/img/illustrations/icons/PaidIcon.svg'·alt='Paid' with ··<img⏎················className='pr-6·md:pr-5·lg:pr-8·mt-2·ml-1·mb-1'⏎················src='/img/illustrations/icons/PaidIcon.svg'⏎················alt='Paid'⏎············· prettier/prettier
[warning] 149-149: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 150-150: Delete ·· prettier/prettier
⏰ Context from checks skipped due to timeout of 180000ms (1)
- GitHub Check: Lighthouse CI
|
Not relevant. Closing. |
Description
refactoring the filter field (commercial $) which is misaligned in the tools section.
Before
After fixing.
Related issue(s)
fixes #3644
Summary by CodeRabbit