fix toast styling

complexdatacollective · Dec 5, 2024 · 58629b4 · 58629b4
1 parent d2f4791
commit 58629b4
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/components/ui/Alert.tsx b/components/ui/Alert.tsx
@@ -12,11 +12,11 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: '',
-        info: 'border-info bg-info/10 [--color-link:var(--color-info)] [&>svg]:text-info',
+        info: 'bg-info/5 border-info text-info [--color-link:var(--color-info)] [&>svg]:text-info',
         destructive:
-          'border-destructive bg-destructive/5 text-destructive dark:border-destructive [&>svg]:text-destructive [--color-link:var(--color-destructive)]',
+          'bg-destructive/5 border-destructive text-destructive [&>svg]:text-destructive [--color-link:var(--color-destructive)]',
         success:
-          'border-success bg-success/10 text-success-foreground [&>svg]:text-success-foreground [--color-link:var(--color-success-foreground)]',
+          'bg-success/5 border-success text-success [&>svg]:text-success [--color-link:var(--color-success)]',
       },
     },
     defaultVariants: {

diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',
       className,
     )}
     {...props}
@@ -35,7 +35,7 @@ const toastVariants = cva(toastBaseClasses, {
       destructive:
         'destructive group border-destructive bg-destructive text-destructive-foreground',
       success:
-        'success group border-success bg-success/10 text-success-foreground backdrop-blur',
+        'success group border-success bg-success text-success-foreground',
     },
   },
   defaultVariants: {
@@ -65,7 +65,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      'focus:ring-ring inline-flex h-8 shrink-0 items-center justify-center rounded-md border px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      'focus:ring-ring ring-offset-background hover:bg-secondary group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border px-3 text-sm font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none disabled:opacity-50',
       className,
     )}
     {...props}
@@ -80,7 +80,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100',
+      'absolute top-2 right-2 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100 focus:ring-2 focus:outline-hidden',
       className,
     )}
     toast-close=""

diff --git a/styles/globals.css b/styles/globals.css
@@ -229,7 +229,7 @@
 
     --sea-green-hue: 168;
     --sea-green-saturation: 100%;
-    --sea-green-lightness: 40%;
+    --sea-green-lightness: 35%;
     --sea-green: var(--sea-green-hue) var(--sea-green-saturation)
       var(--sea-green-lightness);
     --sea-green--dark: var(--sea-green-hue) var(--sea-green-saturation)
@@ -374,8 +374,7 @@
     --info-foreground: var(--white);
 
     --success: var(--sea-green);
-    --success-foreground: var(--sea-green-hue) var(--sea-green-saturation)
-      calc(var(--sea-green-lightness) - 12%);
+    --success-foreground: var(--white);
 
     --border: var(--platinum--dark);