Remove card border #291
Remove card border #291
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThe PR updates styling and visual appearance across multiple components. It replaces rounded Card corners with square corners and ring-based styling, changes card hover states from border-based to ring-based transitions, adjusts shadow utilities, updates dark mode variants, modifies tooltip animation timing, and downgrades a configuration schema version. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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 |
|
Linting and formatting issues were automatically fixed. Please review the changes. |
There was a problem hiding this comment.
Pull request overview
This PR updates the UI styling system by replacing border-based designs with a ring-based approach across card components, dropdowns, and tooltips. The changes aim to create a more cohesive visual design by standardizing on ring utilities and adjusting shadow intensities.
Key Changes
- Removed borders from the base Card component and replaced with ring utilities (
ring ring-stone-200) and adjusted shadows fromshadow-lgtoshadow-md - Updated all Card hover states across ServerCard and ServerCardInline components to use ring color changes instead of border color changes
- Applied consistent ring-based styling to dropdown menus (ThemeSwitcher, LanguageSwitcher) and tooltips with dark mode variants
Reviewed changes
Copilot reviewed 12 out of 13 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| styles/globals.css | Reduced tooltip animation blur from 10px to 5px and duration from 0.2s to 0.1s for snappier animations |
| components/ui/card.tsx | Replaced border with ring utility and adjusted shadow from shadow-lg to shadow-md with stone color palette |
| components/ThemeSwitcher.tsx | Added ring-based styling to dropdown menu with border-none and stone-colored rings for light/dark modes |
| components/SignIn.tsx | Updated button shadow color to stone palette and added cursor-pointer class |
| components/ServerCardInline.tsx | Replaced border hover states with ring-based hover effects and added transition-all |
| components/ServerCard.tsx | Replaced border hover states with ring-based hover effects and added transition-all |
| components/LanguageSwitcher.tsx | Added ring-based styling to dropdown menu matching ThemeSwitcher approach |
| biome.json | Downgraded schema version from 2.3.5 to 2.3.4 |
| app/(main)/ClientComponents/main/ServerOverviewClient.tsx | Updated overview cards to use ring utilities with dark mode variants for hover and selected states |
| app/(main)/ClientComponents/main/ServerListClient.tsx | Added 1px padding to prevent ring clipping on overflow container |
| app/(main)/ClientComponents/main/MapTooltip.tsx | Replaced border with ring utility and updated shadow to match new design system |
| app/(main)/ClientComponents/detail/ServerDetailClient.tsx | Added explicit ring-0 to transparent cards to remove any inherited ring styles |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Card | ||
| className={cn( | ||
| "flex cursor-pointer flex-col items-center justify-start gap-3 p-3 hover:border-stone-300 hover:shadow-md md:px-5 dark:hover:border-stone-700", | ||
| "flex cursor-pointer flex-col items-center justify-start gap-3 p-3 transition-all hover:shadow-sm hover:ring-stone-300 md:px-5 dark:hover:ring-stone-700", |
There was a problem hiding this comment.
[nitpick] The ServerCard hover effect removes the border hover but doesn't set an initial ring state. For consistency with ServerOverviewClient cards (lines 73, 106, 139) which use ring-1, consider adding ring-1 to the base className so that there's a subtle ring by default that changes color on hover.
| }} | ||
| className={cn("group cursor-pointer transition-all hover:border-blue-500")} | ||
| className={cn( | ||
| "group cursor-pointer transition-all hover:ring-blue-500 dark:hover:ring-blue-600", |
There was a problem hiding this comment.
Inconsistent ring removal: The "All" card removes ring-transparent from the default state but the other cards (Online, Offline, Favorite) retain ring-1 with no explicit color. This creates an inconsistent visual appearance where the "All" card may have a visible ring by default (inheriting from the Card base component) while others have ring-1. Consider either adding ring-1 to the "All" card or removing ring-1 from the other cards for consistency.
| "group cursor-pointer transition-all hover:ring-blue-500 dark:hover:ring-blue-600", | |
| "group cursor-pointer ring-1 transition-all hover:ring-blue-500 dark:hover:ring-blue-600", |
| <button | ||
| type="submit" | ||
| className="flex w-fit items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-neutral-200/40 transition-all hover:brightness-95 dark:border-stone-800 dark:shadow-none" | ||
| className="flex w-fit cursor-pointer items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-stone-200/50 transition-all hover:brightness-95 dark:border-stone-800 dark:shadow-none" |
There was a problem hiding this comment.
Inconsistent shadow styling: The base Card component uses shadow-md while the SignIn button uses shadow-lg. For a consistent UI design, the same shadow intensity should be applied across similar components, especially when the PR's purpose is to remove card borders and standardize styling.
| className="flex w-fit cursor-pointer items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-stone-200/50 transition-all hover:brightness-95 dark:border-stone-800 dark:shadow-none" | |
| className="flex w-fit cursor-pointer items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-md shadow-stone-200/50 transition-all hover:brightness-95 dark:border-stone-800 dark:shadow-none" |
| <button | ||
| type="submit" | ||
| className="flex w-fit items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-neutral-200/40 transition-all hover:brightness-95 dark:border-stone-800 dark:shadow-none" | ||
| className="flex w-fit cursor-pointer items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-stone-200/50 transition-all hover:brightness-95 dark:border-stone-800 dark:shadow-none" |
There was a problem hiding this comment.
Inconsistent shadow color: The shadow color changes from shadow-neutral-200/40 to shadow-stone-200/50. This should use stone for consistency with other changes in this PR that also use stone-200/50 (e.g., Card component, ThemeSwitcher, LanguageSwitcher).
| <Card | ||
| className={cn( | ||
| "flex w-full min-w-[900px] cursor-pointer items-center justify-start gap-3 p-3 hover:border-stone-300 hover:shadow-md md:px-5 lg:flex-row dark:hover:border-stone-700", | ||
| "flex w-full min-w-[900px] cursor-pointer items-center justify-start gap-3 p-3 transition-all hover:shadow-sm hover:ring-stone-300 md:px-5 lg:flex-row dark:hover:ring-stone-700", |
There was a problem hiding this comment.
[nitpick] The ServerCardInline hover effect removes the border hover but doesn't set an initial ring state. For consistency with ServerOverviewClient cards (lines 73, 106, 139) which use ring-1, consider adding ring-1 to the base className so that there's a subtle ring by default that changes color on hover.
| <Card | ||
| className={cn( | ||
| "flex min-h-[61px] min-w-[900px] flex-row items-center justify-start gap-3 p-3 hover:border-stone-300 hover:shadow-md md:px-5 dark:hover:border-stone-700", | ||
| "flex min-h-[61px] min-w-[900px] flex-row items-center justify-start gap-3 p-3 transition-all hover:shadow-sm hover:ring-stone-300 md:px-5 lg:flex-row dark:hover:ring-stone-700", |
There was a problem hiding this comment.
[nitpick] The ServerCardInline hover effect removes the border hover but doesn't set an initial ring state. For consistency with ServerOverviewClient cards (lines 73, 106, 139) which use ring-1, consider adding ring-1 to the base className so that there's a subtle ring by default that changes color on hover.
| <Card | ||
| className={cn( | ||
| "flex cursor-pointer flex-col items-center justify-start gap-3 p-3 hover:border-stone-300 hover:shadow-md md:px-5 dark:hover:border-stone-700", | ||
| "flex cursor-pointer flex-col items-center justify-start gap-3 p-3 transition-all hover:shadow-sm hover:ring-stone-300 md:px-5 dark:hover:ring-stone-700", |
There was a problem hiding this comment.
[nitpick] The ServerCard hover effect removes the border hover but doesn't set an initial ring state. For consistency with ServerOverviewClient cards (lines 73, 106, 139) which use ring-1, consider adding ring-1 to the base className so that there's a subtle ring by default that changes color on hover.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
components/LanguageSwitcher.tsx (1)
37-55: Dropdown surface styling looks good; consider fixing item border-radius logic.The new
DropdownMenuContentclasses (border-less + shadow + ring,align="end") are consistent with the rest of the PR. One optional cleanup: the radius conditions on items seem inverted — the first item gets bottom rounding and the last item gets top rounding. If the first item is visually at the top, you probably want the opposite.- { - "rounded-t-[5px]": index === localeItems.length - 1, - "rounded-[5px]": index !== 0 && index !== localeItems.length - 1, - "rounded-b-[5px]": index === 0, - }, + { + "rounded-t-[5px]": index === 0, + "rounded-[5px]": index !== 0 && index !== localeItems.length - 1, + "rounded-b-[5px]": index === localeItems.length - 1, + },components/ThemeSwitcher.tsx (1)
39-66: Theme dropdown surface is consistent; optional tweak for item corner rounding.The updated
DropdownMenuContentstyling (shadow + ring,align="end") matches the new design system and looks fine. Similar to the language menu, the item radii are inverted relative to the render order (first item rounded-bottom, last item rounded-top); flip them if you want “Light” visually at the top and “System” at the bottom.- <DropdownMenuItem - className={cn("rounded-b-[5px]", { + <DropdownMenuItem + className={cn("rounded-t-[5px]", { "gap-3 bg-muted font-semibold": theme === "light", })} @@ - <DropdownMenuItem - className={cn("rounded-t-[5px]", { + <DropdownMenuItem + className={cn("rounded-b-[5px]", { "gap-3 bg-muted font-semibold": theme === "system", })}components/ServerCardInline.tsx (1)
24-30: Hover shadow is now lighter than the new Card base shadow.With
Cardnow providing ashadow-mdby default, these inline cards usehover:shadow-sm, which actually reduces shadow intensity on hover. If that’s not intentional, consider bumping the hover shadow up instead.- className={cn( - "flex w-full min-w-[900px] cursor-pointer items-center justify-start gap-3 p-3 transition-all hover:shadow-sm hover:ring-stone-300 md:px-5 lg:flex-row dark:hover:ring-stone-700", - )} + className={cn( + "flex w-full min-w-[900px] cursor-pointer items-center justify-start gap-3 p-3 transition-all hover:shadow-lg hover:ring-stone-300 md:px-5 lg:flex-row dark:hover:ring-stone-700", + )} @@ - className={cn( - "flex min-h-[61px] min-w-[900px] flex-row items-center justify-start gap-3 p-3 transition-all hover:shadow-sm hover:ring-stone-300 md:px-5 lg:flex-row dark:hover:ring-stone-700", - )} + className={cn( + "flex min-h-[61px] min-w-[900px] flex-row items-center justify-start gap-3 p-3 transition-all hover:shadow-lg hover:ring-stone-300 md:px-5 lg:flex-row dark:hover:ring-stone-700", + )}Also applies to: 123-127
app/(main)/ClientComponents/main/ServerOverviewClient.tsx (1)
43-45: Consider addingring-1for visual consistency.The other three cards (Online, Offline, Network) include
ring-1as a baseline ring, which provides a subtle border in the default state. This card only shows a ring on hover, which may create an inconsistent visual appearance.Apply this diff to add a baseline ring:
className={cn( - "group cursor-pointer transition-all hover:ring-blue-500 dark:hover:ring-blue-600", + "group cursor-pointer ring-1 transition-all hover:ring-blue-500 dark:hover:ring-blue-600", )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (12)
app/(main)/ClientComponents/detail/ServerDetailClient.tsx(13 hunks)app/(main)/ClientComponents/main/MapTooltip.tsx(1 hunks)app/(main)/ClientComponents/main/ServerListClient.tsx(1 hunks)app/(main)/ClientComponents/main/ServerOverviewClient.tsx(4 hunks)biome.json(1 hunks)components/LanguageSwitcher.tsx(1 hunks)components/ServerCard.tsx(2 hunks)components/ServerCardInline.tsx(2 hunks)components/SignIn.tsx(1 hunks)components/ThemeSwitcher.tsx(1 hunks)components/ui/card.tsx(1 hunks)styles/globals.css(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
app/(main)/ClientComponents/main/ServerOverviewClient.tsx (1)
lib/utils.ts (1)
cn(5-7)
app/(main)/ClientComponents/detail/ServerDetailClient.tsx (2)
components/ui/card.tsx (2)
Card(58-58)CardContent(58-58)lib/utils.ts (1)
formatBytes(50-60)
🔇 Additional comments (11)
biome.json (1)
2-2: Biome schema URL downgrade looks fine; just keep it in sync with your Biome version.You’re now pointing at the 2.3.4 schema; as long as your Biome tooling uses the same version, editor/CI validation will behave as expected.
styles/globals.css (1)
343-357: Tooltip animation tweaks are safe and purely visual.Reducing the initial blur and shortening the
tooltip-fade-induration doesn’t affect behavior, only presentation; the animation end-state is unchanged.components/ui/card.tsx (1)
4-11: Card base styling matches the new ring-based design system.The new base classes (background + text tokens, subtle
shadow-md, and light/dark ring colors) look coherent and are easy for callers to override with additional utilities (ring-0, different shadows) when needed.app/(main)/ClientComponents/main/ServerListClient.tsx (1)
91-94: Extrap-pxon the inline list container is reasonable for the new ringed cards.The 1px padding around the scroll container should keep the new card rings from touching/clipping the viewport edge; it doesn’t affect the scroll/restore logic.
app/(main)/ClientComponents/main/ServerOverviewClient.tsx (3)
72-77: LGTM!The ring-based hover feedback with conditional active state styling is well-implemented and provides clear visual feedback.
105-110: LGTM!Consistent styling pattern with appropriate color scheme for offline state.
138-143: LGTM!Network card styling follows the same consistent pattern with appropriate purple accent colors.
app/(main)/ClientComponents/detail/ServerDetailClient.tsx (1)
112-287: LGTM! Consistent styling for detail cards.All Card components in the detail view consistently use
border-none bg-transparent shadow-none ring-0, which transforms them into lightweight, badge-like display elements. This styling approach is appropriate for read-only informational content and aligns with the PR's objective of moving away from traditional card borders.app/(main)/ClientComponents/main/MapTooltip.tsx (1)
24-24: LGTM! Tooltip styling aligned with ring-based approach.The tooltip styling has been updated to use ring-based borders instead of traditional borders, which is consistent with the PR's overall design direction. The dark mode styling appropriately removes shadows and uses
ring-stone-700for subtle contrast.components/ServerCard.tsx (2)
29-29: LGTM! Consistent hover feedback for online servers.The hover styling has been updated to use ring-based feedback with smooth transitions, replacing the previous border-based approach. The
transition-allensures smooth visual transitions, and dark mode is properly supported.
136-136: LGTM! Consistent hover feedback for offline servers.The offline card uses the same ring-based hover styling as the online variant, ensuring a consistent user experience across different server states.
| <button | ||
| type="submit" | ||
| className="flex w-fit items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-neutral-200/40 transition-all hover:brightness-95 dark:border-stone-800 dark:shadow-none" | ||
| className="flex w-fit cursor-pointer items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-stone-200/50 transition-all hover:brightness-95 dark:border-stone-800 dark:shadow-none" | ||
| disabled={loading} |
There was a problem hiding this comment.
Disabled submit button will still look clickable due to cursor-pointer.
With cursor-pointer on the button, the mouse cursor remains a pointer even when disabled, which can be confusing. Consider either dropping cursor-pointer or adding disabled-specific cursor/opacity styles.
- <button
- type="submit"
- className="flex w-fit cursor-pointer items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-stone-200/50 transition-all hover:brightness-95 dark:border-stone-800 dark:shadow-none"
- disabled={loading}
- >
+ <button
+ type="submit"
+ className="flex w-fit items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-stone-200/50 transition-all hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-60 dark:border-stone-800 dark:shadow-none"
+ disabled={loading}
+ >📝 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.
| <button | |
| type="submit" | |
| className="flex w-fit items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-neutral-200/40 transition-all hover:brightness-95 dark:border-stone-800 dark:shadow-none" | |
| className="flex w-fit cursor-pointer items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-stone-200/50 transition-all hover:brightness-95 dark:border-stone-800 dark:shadow-none" | |
| disabled={loading} | |
| <button | |
| type="submit" | |
| className="flex w-fit items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-stone-200/50 transition-all hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-60 dark:border-stone-800 dark:shadow-none" | |
| disabled={loading} | |
| > |
🤖 Prompt for AI Agents
In components/SignIn.tsx around lines 69-72 the submit button always has
cursor-pointer which makes it appear clickable when disabled; change the styling
so the cursor and visual state reflect the disabled/loading state — remove the
unconditional cursor-pointer and instead apply cursor-not-allowed (and
optionally reduced opacity like opacity-70 and/or pointer-events-none) when
disabled/loading, and keep cursor-pointer only when not disabled; implement this
by conditionally composing the className (ternary or classnames utility) based
on the loading/disabled flag so the button shows a disabled cursor and visual
cue when disabled.
Summary by CodeRabbit
Style
Performance
✏️ Tip: You can customize this high-level summary in your review settings.