added modal style to wallet modal

This commit was merged in pull request #688.
This commit is contained in:
victorAnumudu
2024-04-01 18:23:34 +01:00
parent bf19dfe86a
commit 3775c520ff
9 changed files with 667 additions and 662 deletions
@@ -107,8 +107,8 @@ function ConfirmNairaWithdraw({
<ModalCom action={action} situation={situation}>
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
<div className="w-full">
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
<h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
<div className="modal-header-con">
<h2 className="modal-title">
{completeNairaWithdraw.load ? (
"Confirming..."
) : (
@@ -126,7 +126,7 @@ function ConfirmNairaWithdraw({
</h2>
<button
type="button"
className="text-[#374557] dark:text-red-500"
className="modal-close-btn"
onClick={action}
>
<svg
@@ -151,7 +151,7 @@ function ConfirmNairaWithdraw({
</button>
</div>
<hr />
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
<div className="add-fund w-full bg-white dark:bg-dark-white">
{completeNairaWithdraw.load ? (
<div className="h-[35rem] flex items-center justify-center">
<LoadingSpinner size="12" color="sky-blue" />
@@ -376,53 +376,52 @@ function ConfirmNairaWithdraw({
</div>
</div>
)}
{!completeNairaWithdraw.load && (
<>
{" "}
<hr />
<p
className={`text-base ${
requestStatus.status ? "text-green-500" : "text-red-500"
} px-4 md:px-8 py-4 h-5`}
>
{requestStatus.message && requestStatus.message}
</p>
<div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
{!completeNairaWithdraw.show && (
<button
type="button"
onClick={action}
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
>
Cancel
</button>
)}
<button
onClick={
completeNairaWithdraw.show
? action
: completeNairaWithdraw?.state?.internal_return < 0
? action
: handleSubmit
}
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px]"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : completeNairaWithdraw.show ? (
"Okay"
) : completeNairaWithdraw?.state?.internal_return < 0 ? (
"Cancel"
) : (
"Transfer"
)}
</button>
</div>
</>
)}
</div>
{!completeNairaWithdraw.load && (
<>
<p
className={`text-base ${
requestStatus.status ? "text-green-500" : "text-red-500"
} px-4 md:px-8 py-4 h-5`}
>
{requestStatus.message && requestStatus.message}
</p>
<div className="modal-footer-wrapper flex justify-end items-center gap-2">
{!completeNairaWithdraw.show && (
<button
type="button"
onClick={action}
className="custom-btn bg-[#f5a430] text-black text-base"
>
Cancel
</button>
)}
<button
onClick={
completeNairaWithdraw.show
? action
: completeNairaWithdraw?.state?.internal_return < 0
? action
: handleSubmit
}
className="custom-btn btn-gradient text-base text-white"
>
{requestStatus.loading ? (
<LoadingSpinner size="6" color="sky-blue" />
) : completeNairaWithdraw.show ? (
"Okay"
) : completeNairaWithdraw?.state?.internal_return < 0 ? (
"Cancel"
) : (
"Transfer"
)}
</button>
</div>
</>
)}
</div>
</div>
</ModalCom>