[FIX] Fix sonner presentation #60
Conversation
|
@h3rmel is attempting to deploy a commit to the Retro UI Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes introduce dynamic theming support for toast notifications using the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Toaster (Sonner)
participant ThemeProvider (next-themes)
User->>Toaster: Triggers toast notification
Toaster->>ThemeProvider: Requests current theme
ThemeProvider-->>Toaster: Returns theme (system/light/dark)
Toaster->>User: Displays toast with theme and updated styles
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
CodeRabbit Configuration File (
|
![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)
preview/components/sonner-style-default.tsx (1)
8-8: Consider removing debug log statement.The
console.log("clicked");statement appears to be for debugging purposes and may not be needed in production code.- console.log("clicked");app/layout.tsx (1)
71-71: Enhanced body element with additional layout utilities.The added Tailwind classes improve the layout and scrolling behavior:
w-fullandsize-fullensure proper width and dimensionsmin-h-dvhsets minimum height to dynamic viewport heightoverflow-x-hiddenprevents horizontal overflowrelativesets positioning context for descendantsscroll-smoothadds smooth scrolling behaviorantialisedimproves text rendering (note: should beantialiased)There's a typo in
antialised- it should beantialiased:- className={`${space.className} ${archivoBlack.variable} ${space.variable} ${spaceMono.variable} bg-background text-foreground w-full min-h-dvh overflow-x-hidden size-full relative antialised scroll-smooth`} + className={`${space.className} ${archivoBlack.variable} ${space.variable} ${spaceMono.variable} bg-background text-foreground w-full min-h-dvh overflow-x-hidden size-full relative antialiased scroll-smooth`}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
app/(docs)/docs/[[...slug]]/page.tsx(1 hunks)app/layout.tsx(1 hunks)components/retroui/Sonner.tsx(1 hunks)package.json(1 hunks)preview/components/sonner-style-default.tsx(1 hunks)
🔇 Additional comments (12)
package.json (1)
37-37: Addednext-themesdependency for dynamic theming support.The addition of
next-themesis appropriate for enabling dynamic theming capabilities, which will be used with the Sonner toast component.app/(docs)/docs/[[...slug]]/page.tsx (1)
8-8: Removed unused icon import.Good cleanup by removing the unnecessary
MoveRightIconimport while keeping only the actively usedMoveUpRightIcon.preview/components/sonner-style-default.tsx (1)
1-2: Added client directive.The
"use client";directive is necessary since this component uses client-side features (event handlers and toast notifications).components/retroui/Sonner.tsx (9)
3-3: Good addition of theming support.Adding the
useThemehook from next-themes is appropriate for enabling dynamic theme support for toast notifications.
9-10: Proper hook implementation with fallback.The implementation correctly destructures the theme value with a sensible default fallback to "system" when undefined. This follows React hooks best practices.
13-14: Good theming implementation and class structure.The theme is correctly passed to the Sonner component with proper type casting. The addition of "toaster group" class names creates the necessary structure for the group selectors used in the toast styling.
18-18: Style specificity improvement.Adding
!prefixes (Tailwind's important flag) ensures these styles take precedence over default Sonner styles, fixing presentation issues. The group selectors are properly structured to target toast elements.
20-20: Consistent style enforcement for description text.The important flags and group selectors ensure toast descriptions maintain consistent styling across different themes.
22-22: Action button styling consistency.The styling ensures that action buttons maintain consistent appearance regardless of theme changes.
24-24: Cancel button styling consistency.Similar to the action button, these changes ensure cancel buttons have consistent styling across themes.
25-25: Title text styling improvement.The addition of
!text-baseensures consistent title text size, which was likely one of the presentation issues being addressed.
27-27: Close button positioning fix.The important flags ensure the close button positioning and styling is consistently applied across different theme contexts.
|
Hi @h3rmel 👋 |
Work on sonner styles to be properly presented on page:
Summary by CodeRabbit
New Features
Style
Chores
next-themespackage to support theme management.