Skip to content

Commit

Permalink
feedback modal rebranding (#470)
Browse files Browse the repository at this point in the history
  • Loading branch information
@supertong
supertong authored Dec 9, 2024
1 parent b238391 commit d2845d7
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 187 deletions.
65 changes: 0 additions & 65 deletions src/app/components/Modals/CongratModal.tsx
View file

This file was deleted.

224 changes: 102 additions & 122 deletions src/app/components/Modals/FeedbackModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,128 +1,107 @@
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;
onClose: () => void;
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>
);
};
Expand All @@ -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>
);
};

0 comments on commit d2845d7

Please sign in to comment.