fix: enchanced the look of the clickable logos from non clickable in the home page#5320
Open
vaidik-bajpai wants to merge 2 commits into
Open
fix: enchanced the look of the clickable logos from non clickable in the home page#5320vaidik-bajpai wants to merge 2 commits into
vaidik-bajpai wants to merge 2 commits into
Conversation
…ing border and shadows
vaidik-bajpai
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughThis pull request aligns interaction affordance between non-clickable adopted brand logos and clickable sponsor logos. Sponsor links now receive hover effects (scale and brightness), while adopted brand logos have their hover color transitions removed to reflect their non-interactive nature. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #5320 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 830 830
Branches 159 159
=========================================
Hits 830 830 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5320--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
pages/community/board.tsx (1)
11-11: Optional: extract repeated card classes into a shared constant.Line 11, Line 30, and Line 49 repeat the same
className, which makes future style tweaks a little noisier.Refactor sketch
export default function Board() { + const cardClassName = 'rounded-md border border-gray-200 p-4 text-center shadow-md'; return ( <CommunityLayout membership={Membership.BOARD}> <div className='mx-auto my-0 grid max-w-xl lg:max-w-screen-xl lg:grid-cols-3 lg:gap-8' data-testid='GB-content'> - <div className='rounded-md border border-gray-200 p-4 text-center shadow-md'> + <div className={cardClassName}> ... - <div className='rounded-md border border-gray-200 p-4 text-center shadow-md'> + <div className={cardClassName}> ... - <div className='rounded-md border border-gray-200 p-4 text-center shadow-md'> + <div className={cardClassName}>Also applies to: 30-30, 49-49
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/community/board.tsx` at line 11, Three repeated card container className strings should be extracted to a shared constant to avoid duplication; create a const like CARD_CLASS or cardClassName near the top of the module and replace the repeated literal className values in the three card divs (the elements that currently use 'rounded-md border border-gray-200 p-4 text-center shadow-md') with that constant to centralize styling changes; ensure any JSX uses the constant (e.g., className={CARD_CLASS}) so future tweaks are a single edit.components/SupportUs/SupportUs.tsx (1)
31-33: Consider extracting repeated hover class strings to a constant.The same anchor/image class patterns are repeated across all three sections; centralizing them would reduce drift risk in future styling updates.
Also applies to: 46-48, 61-63
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/SupportUs/SupportUs.tsx` around lines 31 - 33, The repeated class strings for the anchor and img hover styles in the SupportUs component should be extracted to constants to avoid duplication; create two constants (e.g., containerClass and imageHoverClass) near the top of the SupportUs component file and replace the inline className values currently used on the anchor element (the className that includes "group relative block w-2/3 ..." in the JSX) and the img element (the template string with `${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`) with those constants so all three sections reference the same values.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/logos/SAP.tsx`:
- Around line 9-12: Update the SVG opening tag in the SAP component so it
matches Prettier's expected formatting: put the entire <svg ...> start tag and
its attributes (className, fill, viewBox, etc.) on a single line or each prop on
its own line consistently (e.g., <svg className={className || 'inline-block'}
fill="currentColor" viewBox="0 0 1024 522">), replacing the current broken
multi-line prop layout in the SAP.tsx component.
In `@components/sponsors/SponsorImage.tsx`:
- Line 16: The single-line <img> element in SponsorImage.tsx violates Prettier;
reformat the JSX to a multiline element so attributes are each on their own
lines. Locate the img element inside the SponsorImage component (the line using
twMerge('...', className) with src and alt props) and break it into multiple
lines: put the opening tag on its own line, place src={src}, alt={alt},
className={twMerge(..., className)} each on separate lines, then close the tag
on its own line; keep the same props/order and no code changes beyond
formatting.
In `@components/SupportUs/SupportUs.tsx`:
- Line 33: In SupportUs component update the single-line <img> elements (the
ones using template string className like `${item.imgClass} group-hover:...`
with src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle}) to multiline
JSX: put the opening tag on its own line, place each prop (className, src,
title, alt) on its own indented line, and close the tag on a new line (/>);
apply the same multiline formatting to all three occurrences of the <img> in
this component to satisfy Prettier and unblock CI.
---
Nitpick comments:
In `@components/SupportUs/SupportUs.tsx`:
- Around line 31-33: The repeated class strings for the anchor and img hover
styles in the SupportUs component should be extracted to constants to avoid
duplication; create two constants (e.g., containerClass and imageHoverClass)
near the top of the SupportUs component file and replace the inline className
values currently used on the anchor element (the className that includes "group
relative block w-2/3 ..." in the JSX) and the img element (the template string
with `${item.imgClass} group-hover:scale-105 group-hover:brightness-110
transition-all duration-300`) with those constants so all three sections
reference the same values.
In `@pages/community/board.tsx`:
- Line 11: Three repeated card container className strings should be extracted
to a shared constant to avoid duplication; create a const like CARD_CLASS or
cardClassName near the top of the module and replace the repeated literal
className values in the three card divs (the elements that currently use
'rounded-md border border-gray-200 p-4 text-center shadow-md') with that
constant to centralize styling changes; ensure any JSX uses the constant (e.g.,
className={CARD_CLASS}) so future tweaks are a single edit.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: fb74f7bd-d061-497f-ab24-c115dfd7601b
📒 Files selected for processing (11)
components/SupportUs/SupportUs.tsxcomponents/logos/Axway.tsxcomponents/logos/SAP.tsxcomponents/logos/Salesforce.tsxcomponents/logos/Slack.tsxcomponents/sponsors/GoldSponsors.tsxcomponents/sponsors/PlatinumSponsors.tsxcomponents/sponsors/SilverSponsors.tsxcomponents/sponsors/SponsorImage.tsxpages/[lang]/index.tsxpages/community/board.tsx
Comment on lines
9
to
12
| <svg | ||
| className={className || 'inline-block'} | ||
| fill='currentColor' | ||
| viewBox='0 0 1024 522' |
Contributor
There was a problem hiding this comment.
Fix Prettier formatting to unblock CI.
The pipeline is failing due to multi-line prop formatting. Reformat the SVG opening tag to satisfy Prettier.
🔧 Suggested fix
- <svg
- className={className || 'inline-block'}
- fill='currentColor'
- viewBox='0 0 1024 522'
- >
+ <svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 1024 522'>📝 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
| <svg | |
| className={className || 'inline-block'} | |
| fill='currentColor' | |
| viewBox='0 0 1024 522' | |
| <svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 1024 522'> |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 9-9: ESLint (prettier/prettier): Prettier formatting error. Replace multi-line className/fill/viewBox props with the suggested single-line formatting.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/logos/SAP.tsx` around lines 9 - 12, Update the SVG opening tag in
the SAP component so it matches Prettier's expected formatting: put the entire
<svg ...> start tag and its attributes (className, fill, viewBox, etc.) on a
single line or each prop on its own line consistently (e.g., <svg
className={className || 'inline-block'} fill="currentColor" viewBox="0 0 1024
522">), replacing the current broken multi-line prop layout in the SAP.tsx
component.
| return ( | ||
| <div className='flex size-full items-center justify-center'> | ||
| <img src={src} alt={alt} className={twMerge('max-h-9 sm:max-h-12 w-auto object-contain', className)} /> | ||
| <img src={src} alt={alt} className={twMerge('max-h-9 sm:max-h-12 w-auto object-contain group-hover:scale-110 group-hover:brightness-110 transition-all duration-300', className)} /> |
Contributor
There was a problem hiding this comment.
Resolve the Prettier failure on the <img> JSX.
Line 16 is failing lint formatting in CI; reformat this element to multiline JSX.
💡 Suggested formatting patch
- <img src={src} alt={alt} className={twMerge('max-h-9 sm:max-h-12 w-auto object-contain group-hover:scale-110 group-hover:brightness-110 transition-all duration-300', className)} />
+ <img
+ src={src}
+ alt={alt}
+ className={twMerge(
+ 'max-h-9 sm:max-h-12 w-auto object-contain group-hover:scale-110 group-hover:brightness-110 transition-all duration-300',
+ className
+ )}
+ />📝 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
| <img src={src} alt={alt} className={twMerge('max-h-9 sm:max-h-12 w-auto object-contain group-hover:scale-110 group-hover:brightness-110 transition-all duration-300', className)} /> | |
| <img | |
| src={src} | |
| alt={alt} | |
| className={twMerge( | |
| 'max-h-9 sm:max-h-12 w-auto object-contain group-hover:scale-110 group-hover:brightness-110 transition-all duration-300', | |
| className | |
| )} | |
| /> |
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 16-16: ESLint (prettier/prettier): Prettier formatting error. Replace the inline JSX src/alt/className (twMerge) expression with the suggested multi-line twMerge(...) formatting.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/sponsors/SponsorImage.tsx` at line 16, The single-line <img>
element in SponsorImage.tsx violates Prettier; reformat the JSX to a multiline
element so attributes are each on their own lines. Locate the img element inside
the SponsorImage component (the line using twMerge('...', className) with src
and alt props) and break it into multiple lines: put the opening tag on its own
line, place src={src}, alt={alt}, className={twMerge(..., className)} each on
separate lines, then close the tag on its own line; keep the same props/order
and no code changes beyond formatting.
| className='group relative block w-2/3 p-4 text-center sm:w-1/3 sm:p-0 md:w-1/3 lg:w-1/5' | ||
| > | ||
| <img className={item.imgClass} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} /> | ||
| <img className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} /> |
Contributor
There was a problem hiding this comment.
Fix Prettier-blocking JSX formatting on image tags.
The pipeline is failing at Line 33, Line 48, and Line 63 due to inline <img> formatting. Please apply multiline JSX formatting to unblock CI.
💡 Suggested formatting patch
- <img className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} />
+ <img
+ className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`}
+ src={item.imgSrc}
+ title={item.imgTitle}
+ alt={item.imgTitle}
+ />
@@
- <img className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} />
+ <img
+ className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`}
+ src={item.imgSrc}
+ title={item.imgTitle}
+ alt={item.imgTitle}
+ />
@@
- <img className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`} src={item.imgSrc} title={item.imgTitle} alt={item.imgTitle} />
+ <img
+ className={`${item.imgClass} group-hover:scale-105 group-hover:brightness-110 transition-all duration-300`}
+ src={item.imgSrc}
+ title={item.imgTitle}
+ alt={item.imgTitle}
+ />Also applies to: 48-48, 63-63
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[error] 33-33: ESLint (prettier/prettier): Prettier formatting error. Replace the single-line JSX className/src/title/alt with the suggested multi-line formatting.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/SupportUs/SupportUs.tsx` at line 33, In SupportUs component update
the single-line <img> elements (the ones using template string className like
`${item.imgClass} group-hover:...` with src={item.imgSrc} title={item.imgTitle}
alt={item.imgTitle}) to multiline JSX: put the opening tag on its own line,
place each prop (className, src, title, alt) on its own indented line, and close
the tag on a new line (/>); apply the same multiline formatting to all three
occurrences of the <img> in this component to satisfy Prettier and unblock CI.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Screencast.From.2026-04-06.02-29-35.mp4
Related issue(s)
Resolves #5197
Summary by CodeRabbit