enhc: enchanced the look of Governance Board overview sections by adding borders and shadows#5319
enhc: enchanced the look of Governance Board overview sections by adding borders and shadows#5319vaidik-bajpai wants to merge 1 commit 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. |
![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.
|
We require all PRs to follow Conventional Commits specification. |
📝 WalkthroughWalkthroughThe change applies consistent card styling to three informational sections on the Governance Board overview page by adding Tailwind CSS classes for rounded corners, borders, padding, text alignment, and shadow effects. Changes
Estimated Code Review Effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 #5319 +/- ##
=========================================
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:
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5319--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
pages/community/board.tsx (1)
11-49:⚠️ Potential issue | 🟠 MajorUse the shared Card layout/component here, not duplicated utility classes.
The three overview blocks match the style visually, but they don’t satisfy the issue objective of reusing the shared card pattern/component. This duplicates presentation logic and can drift from the “Current Board members” cards over time.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/community/board.tsx` around lines 11 - 49, The three duplicated card blocks using the div with classes 'rounded-md border border-gray-200 p-4 text-center shadow-md' should be replaced with the shared Card layout/component used for the "Current Board members" cards to avoid duplicating presentation logic; locate the repeated blocks (including the h3/title and p/body that currently include an anchor and the TextLink component) and render the shared Card component instead, passing the title string and the paragraph content (preserving the external anchor link and TextLink usage/props like href, target and rel) as children or via the Card's title/body props so styling and structure are driven by the single shared component.
🧹 Nitpick comments (1)
pages/community/board.tsx (1)
10-49: Add base spacing between stacked cards on mobile.At Line 10, spacing is only defined for
lg(lg:gap-8). On smaller viewports, these card sections stack without vertical gap. Add a base gap (for examplegap-4) and keep the larger breakpoint gap.Suggested tweak
- <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='mx-auto my-0 grid max-w-xl gap-4 lg:max-w-screen-xl lg:grid-cols-3 lg:gap-8' data-testid='GB-content'>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@pages/community/board.tsx` around lines 10 - 49, The grid container with data-testid='GB-content' only defines lg:gap-8 so stacked cards on mobile lack vertical spacing; update the className on that div (the one with 'mx-auto my-0 grid max-w-xl lg:max-w-screen-xl lg:grid-cols-3 lg:gap-8') to include a base gap (e.g., add 'gap-4') while retaining 'lg:gap-8' so small viewports get vertical spacing and large screens keep the larger gap.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@pages/community/board.tsx`:
- Around line 11-49: The three duplicated card blocks using the div with classes
'rounded-md border border-gray-200 p-4 text-center shadow-md' should be replaced
with the shared Card layout/component used for the "Current Board members" cards
to avoid duplicating presentation logic; locate the repeated blocks (including
the h3/title and p/body that currently include an anchor and the TextLink
component) and render the shared Card component instead, passing the title
string and the paragraph content (preserving the external anchor link and
TextLink usage/props like href, target and rel) as children or via the Card's
title/body props so styling and structure are driven by the single shared
component.
---
Nitpick comments:
In `@pages/community/board.tsx`:
- Around line 10-49: The grid container with data-testid='GB-content' only
defines lg:gap-8 so stacked cards on mobile lack vertical spacing; update the
className on that div (the one with 'mx-auto my-0 grid max-w-xl
lg:max-w-screen-xl lg:grid-cols-3 lg:gap-8') to include a base gap (e.g., add
'gap-4') while retaining 'lg:gap-8' so small viewports get vertical spacing and
large screens keep the larger gap.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9b4ab81b-eac6-4039-913a-c9f41ad4d23e
📒 Files selected for processing (1)
pages/community/board.tsx
2 participants
Description
Related issue(s)
Resolves #5135
Summary by CodeRabbit