WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Layout Readjusting

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-12 15:12:50 +01:00
parent 7990959e9f
commit 3919a2bc4b
4 changed files with 71 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/AddFundDollars.jsx
+63 -35
View File
@@ -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}