Merge pull request #67 from joshtyf/feature/implement-success-toast

Implement success toast
joshtyf · Feb 29, 2024 · 0d22d26 · 0d22d26
2 parents 52b6c8f + 4e29c65
commit 0d22d26
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 5 deletions.
diff --git a/frontend/src/app/(authenticated)/service-catalog/[pipelineId]/_hooks/use-service-request.ts b/frontend/src/app/(authenticated)/service-catalog/[pipelineId]/_hooks/use-service-request.ts
@@ -76,6 +76,7 @@ const useServiceRequest = ({ pipelineId }: UseServiceRequestOptions) => {
           title: "Request Submission Successful",
           description:
             "Please check the dashboard for the status of the request.",
+          variant: "success",
         })
         console.log("Response: ", data)
       })

diff --git a/frontend/src/app/(authenticated)/service-catalog/create-service/_hooks/use-create-service.ts b/frontend/src/app/(authenticated)/service-catalog/create-service/_hooks/use-create-service.ts
@@ -136,6 +136,7 @@ const useCreateService = ({ router }: UseCreateServiceProps) => {
         toast({
           title: "Service Creation Successful",
           description: "Redirecting to service catalog...",
+          variant: "success",
         })
         setSubmitted(true)
         setTimeout(() => router.push("/service-catalog"), 1500)

diff --git a/frontend/src/components/ui/toast.tsx b/frontend/src/components/ui/toast.tsx
@@ -30,6 +30,8 @@ const toastVariants = cva(
         default: "border bg-background text-foreground",
         destructive:
           "destructive group border-destructive bg-destructive text-destructive-foreground",
+        success:
+          "success group border-success bg-success text-success-foreground",
       },
     },
     defaultVariants: {

diff --git a/frontend/src/components/ui/toaster.tsx b/frontend/src/components/ui/toaster.tsx
@@ -14,7 +14,7 @@ export function Toaster() {
   const { toasts } = useToast()
 
   return (
-    <ToastProvider>
+    <ToastProvider duration={3000}>
       {toasts.map(function ({ id, title, description, action, ...props }) {
         return (
           <Toast key={id} {...props}>

diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
@@ -35,8 +35,8 @@
 
     --ring: 215 20.2% 65.1%;
 
-    --success: 130, 80%, 60%;
-    --success-foreground: 0, 0%, 20%;
+    --success: 131.9, 54.26%, 43.73%;
+    --success-foreground: 0 25% 90%;
 
     --radius: 0.5rem;
   }
@@ -73,8 +73,8 @@
 
     --ring: 217.2 32.6% 17.5%;
 
-    --success: 130, 80%, 40%;
-    --success-foreground: 0, 0%, 80%;
+    --success: 131.9, 54.26%, 43.73%;
+    --success-foreground: 0 85.7% 97.3%;
   }
 }
 

diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -31,6 +31,10 @@ const config = {
           DEFAULT: "hsl(var(--destructive))",
           foreground: "hsl(var(--destructive-foreground))",
         },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
         muted: {
           DEFAULT: "hsl(var(--muted))",
           foreground: "hsl(var(--muted-foreground))",