v2.18.5 (#265)

Author: HACO8888

app/confirm/Status/BackToHome/BackToHome.module.scss

@@ -1,16 +1,17 @@
-import { useRouter } from "next/navigation";
+"use client";
 
-import styles from "./BackToHome.module.scss";
+import { useRouter } from "next/navigation";
 
 export default function BackToHome() {
-  const route = useRouter();
+  const router = useRouter();
 
   return (
-    <div
-      onClick={() => route.replace("/")} // prevent user from going back to confirm page
-      className={styles.backToHome}
+    <button
+      onClick={() => router.replace("/")}
+      className="px-6 py-4 rounded-2xl text-white font-semibold cursor-pointer select-none hover:opacity-90 transition-opacity"
+      style={{ backgroundColor: "rgb(0, 145, 189)" }}
     >
       Back To Home
-    </div>
+    </button>
   );
-}
+}

app/confirm/Status/BackToHome/BackToHome.tsx

@@ -1,16 +1,42 @@
-import styles from "./Failed.module.scss";
-
 export default function Failed({ message }: { message: string }) {
   return (
     <>
       <svg
-        className={styles.status_svg}
+        className="w-24 h-24 block"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 130.2 130.2"
       >
+        <style>{`
+          @keyframes dash {
+            0% {
+              stroke-dashoffset: 1000;
+            }
+            100% {
+              stroke-dashoffset: 0;
+            }
+          }
+          @keyframes dash-line {
+            0% {
+              stroke-dashoffset: 1000;
+            }
+            100% {
+              stroke-dashoffset: 0;
+            }
+          }
+          .status-circle-error {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 0;
+            animation: dash 0.9s ease-in-out;
+          }
+          .status-line {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
+            animation: dash-line 0.9s 0.35s ease-in-out forwards;
+          }
+        `}</style>
         <circle
-          className={styles.status_path + " " + styles.circle}
+          className="status-circle-error"
           fill="none"
           stroke="#D06079"
           strokeWidth="6"
@@ -20,7 +46,7 @@ export default function Failed({ message }: { message: string }) {
           r="62.1"
         />
         <line
-          className={styles.path + " " + styles.line}
+          className="status-line"
           fill="none"
           stroke="#D06079"
           strokeWidth="6"
@@ -32,7 +58,7 @@ export default function Failed({ message }: { message: string }) {
           y2="92.3"
         />
         <line
-          className={styles.path + " " + styles.line}
+          className="status-line"
           fill="none"
           stroke="#D06079"
           strokeWidth="6"
@@ -44,7 +70,9 @@ export default function Failed({ message }: { message: string }) {
           y2="92.2"
         />
       </svg>
-      <h1 className={styles.status_text + " " + styles.error}>{message}</h1>
+      <h1 className="text-2xl text-center font-semibold" style={{ color: "#D06079" }}>
+        {message}
+      </h1>
     </>
   );
-}
+}

app/confirm/Status/Failed/Failed.module.scss

@@ -1,16 +1,42 @@
-import styles from "./Success.module.scss";
-
 export default function Success({ message }: { message: string }) {
   return (
     <>
       <svg
-        className={styles.status_svg}
+        className="w-24 h-24 block"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 130.2 130.2"
       >
+        <style>{`
+          @keyframes dash {
+            0% {
+              stroke-dashoffset: 1000;
+            }
+            100% {
+              stroke-dashoffset: 0;
+            }
+          }
+          @keyframes dash-check {
+            0% {
+              stroke-dashoffset: -100;
+            }
+            100% {
+              stroke-dashoffset: 900;
+            }
+          }
+          .status-circle {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 0;
+            animation: dash 0.9s ease-in-out;
+          }
+          .status-check {
+            stroke-dashoffset: -100;
+            stroke-dasharray: 1000;
+            animation: dash-check 0.9s 0.35s ease-in-out forwards;
+          }
+        `}</style>
         <circle
-          className={styles.status_path + " " + styles.circle}
+          className="status-circle"
           fill="none"
           stroke="#73AF55"
           strokeWidth="6"
@@ -20,7 +46,7 @@ export default function Success({ message }: { message: string }) {
           r="62.1"
         />
         <polyline
-          className={styles.status_path + " " + styles.check}
+          className="status-check"
           fill="none"
           stroke="#73AF55"
           strokeWidth="6"
@@ -29,7 +55,9 @@ export default function Success({ message }: { message: string }) {
           points="100.2,40.2 51.5,88.8 29.8,67.5 "
         />
       </svg>
-      <h1 className={styles.status_text + " " + styles.success}>{message}</h1>
+      <h1 className="text-2xl text-center font-semibold" style={{ color: "#73AF55" }}>
+        {message}
+      </h1>
     </>
   );
 }