chore: replace CrossIcon for the toast and change variants when error

components/icons/Icons.tsx

@@ -329,7 +329,7 @@ export const DeleteIcon: React.FC<IconSvgProps> = ({
 );
 
 export const CheckIcon: React.FC<IconSvgProps> = ({
-  size = 48,
+  size = 24,
   width,
   height,
   ...props
@@ -348,6 +348,50 @@ export const CheckIcon: React.FC<IconSvgProps> = ({
   </svg>
 );
 
+export const CrossIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size || width}
+    height={size || height}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M16.066 8.995a.75.75 0 1 0-1.06-1.061L12 10.939L8.995 7.934a.75.75 0 1 0-1.06 1.06L10.938 12l-3.005 3.005a.75.75 0 0 0 1.06 1.06L12 13.06l3.005 3.006a.75.75 0 0 0 1.06-1.06L13.062 12z"
+    />
+  </svg>
+);
+
+export const PassIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size || width}
+    height={size || height}
+    viewBox="0 0 16 16"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M6.27 10.87h.71l4.56-4.56l-.71-.71l-4.2 4.21l-1.92-1.92L4 8.6z" />
+      <path
+        fillRule="evenodd"
+        d="M8.6 1c1.6.1 3.1.9 4.2 2c1.3 1.4 2 3.1 2 5.1c0 1.6-.6 3.1-1.6 4.4c-1 1.2-2.4 2.1-4 2.4s-3.2.1-4.6-.7s-2.5-2-3.1-3.5S.8 7.5 1.3 6c.5-1.6 1.4-2.9 2.8-3.8C5.4 1.3 7 .9 8.6 1m.5 12.9c1.3-.3 2.5-1 3.4-2.1c.8-1.1 1.3-2.4 1.2-3.8c0-1.6-.6-3.2-1.7-4.3c-1-1-2.2-1.6-3.6-1.7c-1.3-.1-2.7.2-3.8 1S2.7 4.9 2.3 6.3c-.4 1.3-.4 2.7.2 4q.9 1.95 2.7 3c1.2.7 2.6.9 3.9.6"
+        clipRule="evenodd"
+      />
+    </g>
+  </svg>
+);
+
 export const RocketIcon: React.FC<IconSvgProps> = ({
   size = 24,
   width,

components/providers/AddProvider.tsx

@@ -21,8 +21,9 @@ export const AddProvider = () => {
         const errorMessage = `${error.detail}`;
         // show error
         toast({
-          title: "Wops! Something went wrong",
-          description: errorMessage,
+          variant: "destructive",
+          title: "Ups! Something went wrong",
+          description: errorMessage
         });
       });
     } else {

components/providers/CheckConnectionProvider.tsx

@@ -21,7 +21,8 @@ export const CheckConnectionProvider = ({ id }: { id: string }) => {
       const errorMessage = `${error.detail}`;
       // show error
       toast({
-        title: "Wops! Something went wrong",
+        variant: "destructive",
+        title: "Ups! Something went wrong",
         description: errorMessage,
       });
     } else {

components/providers/DeleteProvider.tsx

@@ -21,7 +21,8 @@ export const DeleteProvider = ({ id }: { id: string }) => {
       const errorMessage = `${error.detail}`;
       // show error
       toast({
-        title: "Wops! Something went wrong",
+        variant: "destructive",
+        title: "Ups! Something went wrong",
         description: errorMessage,
       });
     } else {

components/ui/toast/Toast.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Cross2Icon } from "@radix-ui/react-icons";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
+import { CrossIcon } from "@/components/icons";
 import { cn } from "@/lib/utils";
 
 const ToastProvider = ToastPrimitives.Provider;
@@ -84,7 +84,7 @@ const ToastClose = React.forwardRef<
     toast-close=""
     {...props}
   >
-    <Cross2Icon className="h-4 w-4" />
+    <CrossIcon />
   </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
@@ -95,7 +95,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
-    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    className={cn("text-lg font-semibold [&+div]:text-md", className)}
     {...props}
   />
 ));
@@ -107,7 +107,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("text-sm opacity-90", className)}
+    className={cn("text-md opacity-90", className)}
     {...props}
   />
 ));