Added space between buttons #691

Merged
ameye merged 1 commits from popout-btn-adjustment into master 2024-04-02 14:22:01 +00:00
6 changed files with 152 additions and 140 deletions
@@ -385,7 +385,7 @@ function ActiveJobsMedia(props) {
<div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
<span className="font-semibold text-black dark:text-white">
Price:{" "}
Reward:{" "}
</span>
<span className="">{thePrice}</span>
</div>
@@ -588,26 +588,28 @@ function AddFundDollars(props) {
</div>
</div>
<div className="modal-footer-wrapper flex justify-end items-center gap-2">
<button
className="custom-btn bg-[#f5a430] text-black text-base"
onClick={handleClose}
>
Cancel
</button>
<button
type="submit"
className="custom-btn btn-gradient text-base text-white"
>
{loadingState ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<>
<span className="text-white">Continue</span>{" "}
<Icons name="chevron-right" />
</>
)}
</button>
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
<button
className="custom-btn bg-[#f5a430] text-black text-base"
onClick={handleClose}
>
Cancel
</button>
<button
type="submit"
className="custom-btn btn-gradient text-base text-white"
>
{loadingState ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<>
<span className="text-white">Continue</span>{" "}
<Icons name="chevron-right" />
</>
)}
</button>
</div>
</div>
</Form>
);
@@ -620,25 +622,27 @@ function AddFundDollars(props) {
</div>
{selectedOption == "previous" && (
<div className="modal-footer-wrapper flex justify-end items-center gap-2">
<button
className="custom-btn bg-[#f5a430] text-black text-base"
onClick={props.onClose}
>
Cancel
</button>
<button
onClick={handleSubmit}
name="previous"
type="button"
className="custom-btn btn-gradient text-base text-white"
>
{loadingState ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<span className="text-white">Continue</span>
)}
</button>
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
<button
className="custom-btn bg-[#f5a430] text-black text-base"
onClick={props.onClose}
>
Cancel
</button>
<button
onClick={handleSubmit}
name="previous"
type="button"
className="custom-btn btn-gradient text-base text-white"
>
{loadingState ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<span className="text-white">Continue</span>
)}
</button>
</div>
</div>
)}
</>
+23 -21
View File
@@ -171,27 +171,29 @@ function AddFundPop({
{countryWallet == "NG" && <div className="h-[19rem]"></div>}
{countryWallet == "NG" && (
<div className="modal-footer-wrapper flex justify-end items-center py-4 gap-4">
<button
className="custom-btn bg-[#f5a430] text-black text-base"
onClick={onClose}
>
Cancel
</button>
<button
onClick={handleSubmit}
type="button"
className="custom-btn btn-gradient text-base text-white"
>
{__awaitComponent.loader ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<>
<span className="text-white">Continue</span>{" "}
<Icons name="chevron-right" />
</>
)}
</button>
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
<button
className="custom-btn bg-[#f5a430] text-black text-base"
onClick={onClose}
>
Cancel
</button>
<button
onClick={handleSubmit}
type="button"
className="custom-btn btn-gradient text-base text-white"
>
{__awaitComponent.loader ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<>
<span className="text-white">Continue</span>{" "}
<Icons name="chevron-right" />
</>
)}
</button>
</div>
</div>
)}
</div>
@@ -424,35 +424,37 @@ function ConfirmAddFund({
</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" && (
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
<button
className="custom-btn btn-gradient text-white text-base"
onClick={
__confirmData?.cardType === "prev"
? handlePrevCard
: handleNewCard
}
className="custom-btn bg-[#f5a430] text-black text-base"
onClick={getBack}
>
{confirmCredit?.show?.acceptConfirm?.loader ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
"Proceed"
)}
Back
</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"
/>
)}
{__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>
</div>
</>
);
@@ -387,37 +387,39 @@ function ConfirmNairaWithdraw({
>
{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"
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
{!completeNairaWithdraw.show && (
<button
type="button"
onClick={action}
className="custom-btn bg-[#f5a430] text-black text-base"
>
Cancel
</button>
)}
</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>
</>
)}
+25 -23
View File
@@ -794,30 +794,32 @@ function NairaWithdraw({
</div>
<div className="modal-footer-wrapper flex justify-end items-center gap-2 py-4">
<button
type="button"
onClick={action}
className="custom-btn bg-[#f5a430] text-black text-base"
>
Cancel
</button>
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
<button
type="button"
onClick={action}
className="custom-btn bg-[#f5a430] text-black text-base"
>
Cancel
</button>
<button
type="submit"
disabled={
props.isSubmitting || sendMoneyFee.loading
? true
: false
}
className="custom-btn btn-gradient text-base text-white"
>
{requestStatus ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
"Continue"
)}
</button>
<button
type="submit"
disabled={
props.isSubmitting || sendMoneyFee.loading
? true
: false
}
className="custom-btn btn-gradient text-base text-white"
>
{requestStatus ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
"Continue"
)}
</button>
</div>
</div>
</Form>
)