added modal style to wallet modal
This commit was merged in pull request #688.
This commit is contained in:
victorAnumudu
@@ -356,103 +356,105 @@ function ConfirmAddFund({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="content-wrapper w-full h-[32rem]">
|
||||
<div className="w-full mb-10">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
<div className="px-4 md:p-8 py-4 add-fund-info">
|
||||
<div className="field w-full mb-3 min-h-[45px]">
|
||||
{confirmCredit?.show?.awaitConfirm?.state && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<AmountSection
|
||||
currency={__confirmData?.currency}
|
||||
amount={__confirmData?.amount}
|
||||
country={__confirmCountry}
|
||||
/>
|
||||
<TransactionFeeSection
|
||||
currency={__confirmData?.currency}
|
||||
fee={__confirmData?.fee}
|
||||
country={__confirmCountry}
|
||||
/>
|
||||
<TotalSection
|
||||
currency={__confirmData?.currency}
|
||||
amount={__confirmData?.amount}
|
||||
fee={__confirmData?.fee}
|
||||
country={__confirmCountry}
|
||||
/>
|
||||
{__confirmCountry === "US" && (
|
||||
<div className="flex items-center gap-8">
|
||||
<label
|
||||
htmlFor="payment"
|
||||
className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
|
||||
>
|
||||
Payment Method
|
||||
</label>
|
||||
<span className="text-[#181c32] dark:text-white">
|
||||
<ThePaymentText
|
||||
value={__confirmCardDetails}
|
||||
type={__confirmData?.cardType}
|
||||
/>
|
||||
<>
|
||||
<div className="content-wrapper w-full h-[32rem]">
|
||||
<div className="w-full mb-10">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
<div className="px-4 md:p-8 py-4 add-fund-info">
|
||||
<div className="field w-full mb-3 min-h-[45px]">
|
||||
{confirmCredit?.show?.awaitConfirm?.state && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<AmountSection
|
||||
currency={__confirmData?.currency}
|
||||
amount={__confirmData?.amount}
|
||||
country={__confirmCountry}
|
||||
/>
|
||||
<TransactionFeeSection
|
||||
currency={__confirmData?.currency}
|
||||
fee={__confirmData?.fee}
|
||||
country={__confirmCountry}
|
||||
/>
|
||||
<TotalSection
|
||||
currency={__confirmData?.currency}
|
||||
amount={__confirmData?.amount}
|
||||
fee={__confirmData?.fee}
|
||||
country={__confirmCountry}
|
||||
/>
|
||||
{__confirmCountry === "US" && (
|
||||
<div className="flex items-center gap-8">
|
||||
<label
|
||||
htmlFor="payment"
|
||||
className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
|
||||
>
|
||||
Payment Method
|
||||
</label>
|
||||
<span className="text-[#181c32] dark:text-white">
|
||||
<ThePaymentText
|
||||
value={__confirmCardDetails}
|
||||
type={__confirmData?.cardType}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`${
|
||||
__confirmCountry === "US"
|
||||
? "gap-[3.7rem]"
|
||||
: "gap-[1.81rem]"
|
||||
} flex items-center`}
|
||||
>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
Reference No
|
||||
</h1>
|
||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{__confirmData?.credit_reference}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`${
|
||||
__confirmCountry === "US"
|
||||
? "gap-[3.7rem]"
|
||||
: "gap-[1.81rem]"
|
||||
} flex items-center`}
|
||||
>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
Reference No
|
||||
</h1>
|
||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{__confirmData?.credit_reference}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
__confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
|
||||
}
|
||||
></div>
|
||||
<hr />
|
||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
|
||||
<button
|
||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
|
||||
onClick={getBack}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
{__confirmCountry === "US" && (
|
||||
<button
|
||||
className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
|
||||
onClick={
|
||||
__confirmData?.cardType === "prev"
|
||||
? handlePrevCard
|
||||
: handleNewCard
|
||||
}
|
||||
>
|
||||
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
"Proceed"
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{__confirmCountry === "NG" && (
|
||||
<FlutterWaveButton
|
||||
{...fwConfig}
|
||||
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
__confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
|
||||
}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer-wrapper flex justify-end items-center gap-4">
|
||||
<button
|
||||
className="custom-btn bg-[#f5a430] text-black text-base"
|
||||
onClick={getBack}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
{__confirmCountry === "US" && (
|
||||
<button
|
||||
className="custom-btn btn-gradient text-white text-base"
|
||||
onClick={
|
||||
__confirmData?.cardType === "prev"
|
||||
? handlePrevCard
|
||||
: handleNewCard
|
||||
}
|
||||
>
|
||||
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
"Proceed"
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{__confirmCountry === "NG" && (
|
||||
<FlutterWaveButton
|
||||
{...fwConfig}
|
||||
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user