From d2845d75ade0c48c57dc3b579a589653679135c9 Mon Sep 17 00:00:00 2001
From: Tong Li <supertong@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:49:57 +1100
Subject: [PATCH] feedback modal rebranding (#470)

---
 src/app/components/Modals/CongratModal.tsx  |  65 ------
 src/app/components/Modals/FeedbackModal.tsx | 224 +++++++++-----------
 2 files changed, 102 insertions(+), 187 deletions(-)
 delete mode 100644 src/app/components/Modals/CongratModal.tsx

diff --git a/src/app/components/Modals/CongratModal.tsx b/src/app/components/Modals/CongratModal.tsx
deleted file mode 100644
index c9c654fd..00000000
--- a/src/app/components/Modals/CongratModal.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-  Button,
-  Dialog,
-  DialogBody,
-  DialogFooter,
-  Heading,
-  MobileDialog,
-} from "@babylonlabs-io/bbn-core-ui";
-import { LuPartyPopper } from "react-icons/lu";
-
-import { useIsMobileView } from "@/app/hooks/useBreakpoint";
-
-interface CongratModalProps {
-  open: boolean;
-  onClose: () => void;
-}
-
-export function CongratModal({ open, onClose }: CongratModalProps) {
-  const isMobileView = useIsMobileView();
-  const DialogComponent = isMobileView ? MobileDialog : Dialog;
-
-  return (
-    <DialogComponent open={open} onClose={onClose}>
-      <DialogBody className="flex flex-col pb-8 pt-4 text-primary-dark gap-4">
-        <div className="py-4 flex flex-col items-center gap-4">
-          <div className="bg-primary-contrast h-20 w-20 flex items-center justify-center">
-            <LuPartyPopper className="text-5xl" />
-          </div>
-          <Heading variant="h4">Conratulations</Heading>
-          <p className="text-base text-center">
-            Share feedback or report issues on our{" "}
-            <a
-              href="https://forum.babylonlabs.io/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-secondary-main hover:text-primary-main"
-            >
-              Forums
-            </a>{" "}
-            or{" "}
-            <a
-              href="https://discord.com/invite/babylonglobal"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-secondary-main hover:text-primary-main"
-            >
-              Discord
-            </a>{" "}
-            (#feedback and #support) – thank you for being part of the Babylon
-            community!
-          </p>
-        </div>
-      </DialogBody>
-      <DialogFooter className="flex gap-4">
-        <Button
-          variant="contained"
-          className="flex-1 text-xs sm:text-base"
-          onClick={onClose}
-        >
-          Done
-        </Button>
-      </DialogFooter>
-    </DialogComponent>
-  );
-}
diff --git a/src/app/components/Modals/FeedbackModal.tsx b/src/app/components/Modals/FeedbackModal.tsx
index 24f9fc8f..d3469d7e 100644
--- a/src/app/components/Modals/FeedbackModal.tsx
+++ b/src/app/components/Modals/FeedbackModal.tsx
@@ -1,8 +1,15 @@
-import { IoMdClose } from "react-icons/io";
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Heading,
+  MobileDialog,
+} from "@babylonlabs-io/bbn-core-ui";
+import { LuPartyPopper } from "react-icons/lu";
+import { MdFeedback } from "react-icons/md";
 
-import { getNetworkConfig } from "@/config/network.config";
-
-import { GeneralModal } from "./GeneralModal";
+import { useIsMobileView } from "@/app/hooks/useBreakpoint";
 
 interface FeedbackModalProps {
   open: boolean;
@@ -10,119 +17,91 @@ interface FeedbackModalProps {
   type: "success" | "cancel" | null;
 }
 
-interface ContentProps {
-  networkName?: string;
-}
+interface ContentProps {}
 
-const SuccessContent: React.FC<ContentProps> = ({ networkName }) => {
+const SuccessContent: React.FC<ContentProps> = () => {
   return (
-    <div className="text-text-black dark:text-white">
-      <div className="mt-6 flex flex-col gap-4">
-        <p>
-          You have successfully completed your Bitcoin staking journey on our{" "}
-          {networkName}. Your contribution helps secure the decentralized
-          economy.
-        </p>
-        <ul className="list-disc pl-4">
-          <li>
-            <strong>Feedback:</strong> Share your experience on our{" "}
-            <a
-              href="https://forum.babylonlabs.io/c/feedback/44"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary"
-            >
-              Feedback Forum
-            </a>{" "}
-            or{" "}
-            <a
-              href="https://discord.com/invite/babylonglobal"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary"
-            >
-              Discord
-            </a>{" "}
-            (<code>#feedback</code> channel).
-          </li>
-          <li>
-            <strong>Report Bugs:</strong> Help us improve by reporting any
-            issues on our{" "}
-            <a
-              href="https://forum.babylonlabs.io/c/support/45"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary"
-            >
-              Support Forum
-            </a>{" "}
-            or{" "}
-            <a
-              href="https://discord.com/invite/babylonglobal"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary"
-            >
-              Discord
-            </a>{" "}
-            (<code>#support</code> channel).
-          </li>
-        </ul>
-        <p>Thank you for being a part of the Babylon community!</p>
+    <div className="py-4 flex flex-col items-center gap-4">
+      <div className="bg-primary-contrast h-20 w-20 flex items-center justify-center">
+        <LuPartyPopper className="text-5xl" />
       </div>
+      <Heading variant="h4">Conratulations</Heading>
+      <p className="text-base text-center">
+        Share feedback or report issues on our{" "}
+        <a
+          href="https://forum.babylonlabs.io/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-secondary-main hover:text-primary-main"
+        >
+          Forums
+        </a>{" "}
+        or{" "}
+        <a
+          href="https://discord.com/invite/babylonglobal"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-secondary-main hover:text-primary-main"
+        >
+          Discord
+        </a>{" "}
+        (#feedback and #support) – thank you for being part of the Babylon
+        community!
+      </p>
     </div>
   );
 };
 
 const CancelContent: React.FC<ContentProps> = () => {
   return (
-    <div className="text-text-black dark:text-white">
-      <div className="mt-6 flex flex-col gap-4">
-        <p>
-          It looks like you didn’t complete your staking journey. We&apos;d love
-          to help you get back on track or hear about any issues you faced.
-        </p>
-        <ul className="list-disc pl-4">
-          <li>
-            <strong>Need Assistance?</strong> Reach out on our{" "}
-            <a
-              href="https://discord.com/invite/babylonglobal"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary"
-            >
-              Discord
-            </a>{" "}
-            (<code>#support</code> channel).
-          </li>
-          <li>
-            <strong>Feedback:</strong> Let us know your thoughts on our{" "}
-            <a
-              href="https://forum.babylonlabs.io/c/feedback/44"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary"
-            >
-              Feedback Forum
-            </a>{" "}
-            or{" "}
-            <a
-              href="https://discord.com/invite/babylonglobal"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary"
-            >
-              Discord
-            </a>{" "}
-            (<code>#feedback</code> channel).
-          </li>
-        </ul>
-        <p>
-          Your feedback is crucial for us to improve and provide a seamless
-          experience. Thank you for being a part of our Bitcoin Staking
-          Protocol!
-        </p>
+    <div className="py-4 flex flex-col items-center gap-4">
+      <div className="bg-primary-contrast h-20 w-20 flex items-center justify-center">
+        <MdFeedback className="text-5xl" />
       </div>
+      <Heading variant="h4">We Value Your Feedback</Heading>
+      <p className="text-base">
+        It looks like you didn’t complete your staking journey. We&apos;d love
+        to help you get back on track or hear about any issues you faced.
+      </p>
+      <ul className="list-disc pl-4 text-base">
+        <li>
+          <strong>Need Assistance?</strong> Reach out on our{" "}
+          <a
+            href="https://discord.com/invite/babylonglobal"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary"
+          >
+            Discord
+          </a>{" "}
+          (<code>#support</code> channel).
+        </li>
+        <li>
+          <strong>Feedback:</strong> Let us know your thoughts on our{" "}
+          <a
+            href="https://forum.babylonlabs.io/c/feedback/44"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-secondary-main hover:text-primary-main"
+          >
+            Feedback Forum
+          </a>{" "}
+          or{" "}
+          <a
+            href="https://discord.com/invite/babylonglobal"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-secondary-main hover:text-primary-main"
+          >
+            Discord
+          </a>{" "}
+          (<code>#feedback</code> channel).
+        </li>
+      </ul>
+      <p className="text-base">
+        Your feedback is crucial for us to improve and provide a seamless
+        experience. Thank you for being a part of our Bitcoin Staking Protocol!
+      </p>
     </div>
   );
 };
@@ -132,23 +111,24 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
   onClose,
   type,
 }) => {
-  const { networkName } = getNetworkConfig();
+  const isMobileView = useIsMobileView();
+  const DialogComponent = isMobileView ? MobileDialog : Dialog;
 
   return (
-    <GeneralModal open={open} onClose={onClose}>
-      <div className="mb-4 flex items-center justify-between">
-        <h3 className="font-bold">
-          {type === "success" ? "Congratulations!" : "We Value Your Feedback"}
-        </h3>
-        <button
-          className="btn btn-circle btn-ghost btn-sm"
-          onClick={() => onClose()}
+    <DialogComponent open={open} onClose={onClose}>
+      <DialogBody className="flex flex-col pb-8 pt-4 text-primary-dark gap-4">
+        {type === "success" && <SuccessContent />}
+        {type === "cancel" && <CancelContent />}
+      </DialogBody>
+      <DialogFooter className="flex gap-4">
+        <Button
+          variant="contained"
+          className="flex-1 text-xs sm:text-base"
+          onClick={onClose}
         >
-          <IoMdClose size={24} />
-        </button>
-      </div>
-      {type === "success" && <SuccessContent networkName={networkName} />}
-      {type === "cancel" && <CancelContent />}
-    </GeneralModal>
+          Done
+        </Button>
+      </DialogFooter>
+    </DialogComponent>
   );
 };