Toast styling (#35)

* fix: toast styling

* chore: version bump

Author: sergeyzwezdin

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hoodieshq/ms-tools-ui
 
+## 0.8.2
+
+### Patch Changes
+
+- Toast component styling
+
 ## 0.8.1
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoodieshq/ms-tools-ui",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Reusable React components built with React, Tailwind CSS, and Shadcn, forming the visual building blocks of microsites",
   "main": ".",
   "types": "./dist/index.d.ts",

packages/ui/src/components/sonner.tsx

@@ -1,13 +1,17 @@
-import { useTheme } from 'next-themes'
 import { Toaster as Sonner, ToasterProps } from 'sonner'
+import { cn } from '@/lib/utils'
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme()
-
   return (
     <Sonner
-      theme={theme as ToasterProps['theme']}
       className="toaster group"
+      toastOptions={{
+        className: cn(
+          '!px-4 !py-2',
+          'data-[type=success]:!bg-accent-secondary data-[type=success]:!border-accent-secondary data-[type=success]:!text-foreground',
+          'data-[type=error]:!bg-destructive data-[type=error]:!border-destructive data-[type=error]:!text-foreground'
+        ),
+      }}
       style={
         {
           '--normal-bg': 'var(--popover)',