Layout Readjusting
This commit is contained in:
@@ -145,45 +145,73 @@ function AddFundDollars(props) {
|
||||
<>
|
||||
<div className="w-full">
|
||||
{/* switch button */}
|
||||
<div className="my-1 flex items-center gap-2">
|
||||
<label
|
||||
onClick={() => setTab("previous")}
|
||||
htmlFor="previous"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id="previous"
|
||||
name="card-option"
|
||||
checked={tab === "previous"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "previous" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Previous Cards
|
||||
</label>
|
||||
<label
|
||||
onClick={() => setTab("new")}
|
||||
htmlFor="new"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
id="new"
|
||||
type="radio"
|
||||
name="card-option"
|
||||
checked={tab === "new"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "new" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Add New Card
|
||||
</label>
|
||||
<div className="flex justify-between">
|
||||
<form className="add-fund-info flex items-center gap-3">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{props.currency == "US Dollars" && "Payment Method"}
|
||||
</h1>
|
||||
<div className="my-1 flex items-center gap-2">
|
||||
<label
|
||||
onClick={() => setTab("previous")}
|
||||
htmlFor="previous"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id="previous"
|
||||
name="card-option"
|
||||
checked={tab === "previous"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "previous" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Previous Cards
|
||||
</label>
|
||||
<label
|
||||
onClick={() => setTab("new")}
|
||||
htmlFor="new"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
id="new"
|
||||
type="radio"
|
||||
name="card-option"
|
||||
checked={tab === "new"}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||
tab == "new" ? "" : ""
|
||||
} tracking-wide transition duration-200`}
|
||||
/>
|
||||
Add New Card
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<form className="add-fund-info flex items-center gap-3">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{props.currency == "US Dollars"
|
||||
? "Amount (USD)"
|
||||
: "Amount (Naira)"}
|
||||
</h1>
|
||||
<div className="field w-full max-w-[8rem]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
type="text"
|
||||
name="amount"
|
||||
placeholder="0"
|
||||
value={props.input}
|
||||
inputHandler={props.handleChange}
|
||||
/>
|
||||
<p className="text-base text-red-500 h-5">
|
||||
{props.inputError && props.inputError}
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<hr />
|
||||
{/* END OF switch button */}
|
||||
|
||||
{/* previous tab */}
|
||||
{tab == "previous" ? (
|
||||
<div className="p-4 previous-details w-full min-h-[177px] flex flex-col justify-between items-center">
|
||||
<div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
|
||||
{payListCards.loading ? (
|
||||
<LoadingSpinner size="10" color="sky-blue" />
|
||||
) : payListCards?.data?.length ? (
|
||||
@@ -253,7 +281,7 @@ function AddFundDollars(props) {
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="new-details w-full max-h-[19.063rem] overflow-y-scroll">
|
||||
<div className="new-details w-full max-h-[23rem] overflow-y-scroll">
|
||||
<div className="w-full flex flex-col justify-between">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
|
||||
@@ -53,35 +53,12 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-[36rem] w-full">
|
||||
<div className="h-[32rem] w-full">
|
||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||
<div className="lg:w-2/2 w-full mb-10 lg:mb-0">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
{/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
|
||||
{/*<hr />*/}
|
||||
<form className="md:p-8 p-4 add-fund-info">
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label={
|
||||
currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
|
||||
}
|
||||
type="text"
|
||||
name="amount"
|
||||
placeholder="0"
|
||||
value={input}
|
||||
inputHandler={handleChange}
|
||||
/>
|
||||
{inputError && (
|
||||
<p className="text-base text-red-500">{inputError}</p>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
<h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
|
||||
{currency == "US Dollars" && "Payment Method"}
|
||||
</h1>
|
||||
<hr />
|
||||
|
||||
{/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
|
||||
{currency == "US Dollars" && (
|
||||
<div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl">
|
||||
@@ -91,6 +68,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
setInput={setInput}
|
||||
currency={currency}
|
||||
onClose={onClose}
|
||||
handleChange={handleChange}
|
||||
setConfirmCredit={setConfirmCredit}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -96,7 +96,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
|
||||
// }
|
||||
// }, []);
|
||||
|
||||
const ThePaymentText = ({value}) => (
|
||||
const ThePaymentText = ({ value }) => (
|
||||
<div className="my-2 flex items-center gap-5">
|
||||
<div className="card-details">
|
||||
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
@@ -109,7 +109,9 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
|
||||
</div>
|
||||
);
|
||||
|
||||
console.log("data on confirm", confirmCredit?.data?.card.card_uid);
|
||||
let __something = JSON.parse(confirmCredit?.data.card);
|
||||
|
||||
console.log("data on confirm", __something["card_uid"], __something.card_uid);
|
||||
|
||||
return (
|
||||
<div className="content-wrapper w-full h-[36rem]">
|
||||
@@ -122,7 +124,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
|
||||
<div className="px-4 md:p-8 py-4 add-fund-info">
|
||||
<div className="field w-full mb-3 min-h-[45px]">
|
||||
{confirmCredit?.show ? (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<label
|
||||
htmlFor="amount"
|
||||
|
||||
@@ -47,7 +47,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
console.log("prop drills >> ", confirmCredit);
|
||||
console.log("prop drills >> ", state);
|
||||
|
||||
return (
|
||||
<ModalCom
|
||||
|
||||
Reference in New Issue
Block a user