From 056a1069902356ddf5c04842797512d14c022e92 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Fri, 27 Feb 2026 16:48:31 +0800
Subject: [PATCH] cenvert to components

---
 .../src/app/components/icons/circledCheck.jsx | 24 +++++++++++++
 .../src/app/components/icons/toastClose.jsx   | 24 +++++++++++++
 .../components/toast/success/successToast.jsx | 34 +++----------------
 3 files changed, 52 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/app/components/icons/circledCheck.jsx
 create mode 100644 frontend/src/app/components/icons/toastClose.jsx

diff --git a/frontend/src/app/components/icons/circledCheck.jsx b/frontend/src/app/components/icons/circledCheck.jsx
new file mode 100644
index 0000000..ea4ed76
--- /dev/null
+++ b/frontend/src/app/components/icons/circledCheck.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const CircledChececkIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M7.5 10L9.16667 11.6667L12.5 8.33333M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 9.01509 17.306 8.03982 16.9291 7.12987C16.5522 6.21993 15.9997 5.39314 15.3033 4.6967C14.6069 4.00026 13.7801 3.44781 12.8701 3.0709C11.9602 2.69399 10.9849 2.5 10 2.5C9.01509 2.5 8.03982 2.69399 7.12987 3.0709C6.21993 3.44781 5.39314 4.00026 4.6967 4.6967C4.00026 5.39314 3.44781 6.21993 3.0709 7.12987C2.69399 8.03982 2.5 9.01509 2.5 10Z"
+        stroke="#016730"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CircledChececkIcon;
diff --git a/frontend/src/app/components/icons/toastClose.jsx b/frontend/src/app/components/icons/toastClose.jsx
new file mode 100644
index 0000000..e455046
--- /dev/null
+++ b/frontend/src/app/components/icons/toastClose.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const ToastCloseIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M15 5L5 15M5 5L15 15"
+        stroke="#016730"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ToastCloseIcon;
diff --git a/frontend/src/app/components/toast/success/successToast.jsx b/frontend/src/app/components/toast/success/successToast.jsx
index 3899184..2b21b36 100644
--- a/frontend/src/app/components/toast/success/successToast.jsx
+++ b/frontend/src/app/components/toast/success/successToast.jsx
@@ -1,43 +1,17 @@
 import React from "react";
 import styles from "./styles.module.css";
+import CircledChececkIcon from "../../icons/circledCheck";
+import ToastCloseIcon from "../../icons/toastClose";
 const SuccessToast = ({ message }) => {
   return (
     <div className={styles.toastContainer}>
       <div className={styles.messageContainer}>
         <div className={styles.iconContainer}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            fill="none"
-          >
-            <path
-              d="M7.5 10L9.16667 11.6667L12.5 8.33333M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 9.01509 17.306 8.03982 16.9291 7.12987C16.5522 6.21993 15.9997 5.39314 15.3033 4.6967C14.6069 4.00026 13.7801 3.44781 12.8701 3.0709C11.9602 2.69399 10.9849 2.5 10 2.5C9.01509 2.5 8.03982 2.69399 7.12987 3.0709C6.21993 3.44781 5.39314 4.00026 4.6967 4.6967C4.00026 5.39314 3.44781 6.21993 3.0709 7.12987C2.69399 8.03982 2.5 9.01509 2.5 10Z"
-              stroke="#016730"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
+          <CircledChececkIcon />
         </div>
         <p>{message}</p>
       </div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-      >
-        <path
-          d="M15 5L5 15M5 5L15 15"
-          stroke="#016730"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
+      <ToastCloseIcon />
     </div>
   );
 };