feat: Update toast to better colours with logos (#20)

javinchua · web-flow · commit b2312ec5a86d · 2024-10-01T14:18:14.000+08:00
- Introduced `error` variant - Rename `green` to `success` - Added icons to `success` and `error` variants <img width="434" alt="image" src="https://github.com/user-attachments/assets/71edf1f7-c64e-4883-a7d9-8174c3807386"> <img width="422" alt="image" src="https://github.com/user-attachments/assets/0d3c2450-0a60-498d-9a15-89516a1d67a4">
diff --git a/project/apps/web/app/auth/SignInForm.tsx b/project/apps/web/app/auth/SignInForm.tsx
@@ -32,8 +32,9 @@ export function SignInForm() {
     },
     onError(error) {
       toast({
+        title: "Error",
         description: error.message,
-        variant: "destructive",
+        variant: "error",
       });
     },
   });
diff --git a/project/apps/web/app/auth/SignUpForm.tsx b/project/apps/web/app/auth/SignUpForm.tsx
@@ -32,7 +32,8 @@ export function SignUpForm() {
     onError: (error) => {
       toast({
         description: error.message,
-        variant: "destructive",
+        variant: "error",
+        title: "Error",
       });
     },
   });
diff --git a/project/apps/web/app/globals.css b/project/apps/web/app/globals.css
@@ -46,8 +46,11 @@ h6 {
     --destructive: 0 100% 50%;
     --destructive-foreground: 210 40% 98%;
 
-    --green: 120 100% 25%;
-    --green-foreground: 0 0% 100%;
+    --success: 120 100% 25%;
+    --success-foreground: 0 0% 100%;
+
+    --error: 0 78.4% 47.3%;
+    --error-foreground: 0 75% 98.4%;
 
     --ring: 215 20.2% 65.1%;
 
diff --git a/project/apps/web/app/question/[id]/page.tsx b/project/apps/web/app/question/[id]/page.tsx
@@ -61,9 +61,9 @@ const QuestionPageContent = ({ id }: { id: string }) => {
     onSettled: () => setConfirmLoading(false),
     onError: (error) => {
       toast({
-        variant: "destructive",
+        variant: "error",
         title: "Error",
-        description: "Error updating question" + error.message,
+        description: error.message,
       });
     },
   });
@@ -86,9 +86,9 @@ const QuestionPageContent = ({ id }: { id: string }) => {
     onSettled: () => setConfirmLoading(false),
     onError: (error) => {
       toast({
-        variant: "destructive",
+        variant: "error",
         title: "Error",
-        description: "Error deleting question" + error.message,
+        description: error.message,
       });
     },
   });
diff --git a/project/apps/web/app/questions/page.tsx b/project/apps/web/app/questions/page.tsx
@@ -51,9 +51,9 @@ const QuestionRepositoryContent = () => {
     onSettled: () => setConfirmLoading(false),
     onError: (error) => {
       toast({
-        variant: "destructive",
+        variant: "error",
         title: "Error",
-        description: "Error creating question: " + error.message,
+        description: error.message,
       });
     },
   });
diff --git a/project/apps/web/components/ui/toast.tsx b/project/apps/web/components/ui/toast.tsx
@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { CircleAlert, CircleCheck } from "lucide-react";
+import { cn } from "@/lib/utils";
 
-import { cn } from "@/lib/utils"
-
-const ToastProvider = ToastPrimitives.Provider
+const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -17,29 +17,41 @@ const ToastViewport = React.forwardRef<
     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]",
-      className
+      className,
     )}
     {...props}
   />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
         default: "border bg-background text-foreground",
-        success: "success bg-green text-green-foreground",
+        success:
+          "success group border-success bg-success text-success-foreground",
+        error: "error group border-error bg-error text-error-foreground",
         destructive:
           "destructive group border-destructive bg-destructive text-destructive-foreground",
       },
     },
     defaultVariants: {
       variant: "default",
     },
+  },
+);
+
+const ToastLogo = ({ variant }: VariantProps<typeof toastVariants>) => {
+  switch (variant) {
+    case "success":
+      return <CircleCheck className="w-4 h-4" />;
+    case "error":
+      return <CircleAlert className="w-4 h-4" />;
   }
-)
+  return <></>;
+};
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
@@ -52,9 +64,9 @@ const Toast = React.forwardRef<
       className={cn(toastVariants({ variant }), className)}
       {...props}
     />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -64,12 +76,12 @@ const ToastAction = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring 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",
-      className
+      className,
     )}
     {...props}
   />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -79,15 +91,15 @@ const ToastClose = React.forwardRef<
     ref={ref}
     className={cn(
       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
+      className,
     )}
     toast-close=""
     {...props}
   >
-    <X className="h-4 w-4" />
+    <X className="w-4 h-4" />
   </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
@@ -98,8 +110,8 @@ const ToastTitle = React.forwardRef<
     className={cn("text-sm font-semibold", className)}
     {...props}
   />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -110,12 +122,13 @@ const ToastDescription = React.forwardRef<
     className={cn("text-sm opacity-90", className)}
     {...props}
   />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+));
+
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
   type ToastProps,
@@ -127,4 +140,5 @@ export {
   ToastDescription,
   ToastClose,
   ToastAction,
-}
+  ToastLogo,
+};
diff --git a/project/apps/web/components/ui/toaster.tsx b/project/apps/web/components/ui/toaster.tsx
@@ -5,6 +5,7 @@ import {
   Toast,
   ToastClose,
   ToastDescription,
+  ToastLogo,
   ToastProvider,
   ToastTitle,
   ToastViewport,
@@ -19,7 +20,12 @@ export function Toaster() {
         return (
           <Toast key={id} {...props}>
             <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
+              {title && (
+                <ToastTitle className="flex flex-row items-center gap-2">
+                  <ToastLogo variant={props.variant} />
+                  {title}
+                </ToastTitle>
+              )}
               {description && (
                 <ToastDescription>{description}</ToastDescription>
               )}
diff --git a/project/apps/web/tailwind.config.js b/project/apps/web/tailwind.config.js
@@ -31,9 +31,13 @@ module.exports = {
           DEFAULT: "hsl(var(--destructive))",
           foreground: "hsl(var(--destructive-foreground))",
         },
-        green: {
-          DEFAULT: "hsl(var(--green))",
-          foreground: "hsl(var(--green-foreground))",
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        error: {
+          DEFAULT: "hsl(var(--error))",
+          foreground: "hsl(var(--error-foreground))",
         },
         muted: {
           DEFAULT: "hsl(var(--muted))",
