added space between buttons

This commit was merged in pull request #691.
This commit is contained in:
victorAnumudu
2024-04-02 14:56:07 +01:00
parent 1533465f8d
commit 359344772e
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"> <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"> <span className="font-semibold text-black dark:text-white">
Price:{" "} Reward:{" "}
</span> </span>
<span className="">{thePrice}</span> <span className="">{thePrice}</span>
</div> </div>
@@ -588,26 +588,28 @@ function AddFundDollars(props) {
</div> </div>
</div> </div>
<div className="modal-footer-wrapper flex justify-end items-center gap-2"> <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
<button <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
className="custom-btn bg-[#f5a430] text-black text-base" <button
onClick={handleClose} className="custom-btn bg-[#f5a430] text-black text-base"
> onClick={handleClose}
Cancel >
</button> Cancel
<button </button>
type="submit" <button
className="custom-btn btn-gradient text-base text-white" type="submit"
> className="custom-btn btn-gradient text-base text-white"
{loadingState ? ( >
<LoadingSpinner size="6" color="sky-blue" /> {loadingState ? (
) : ( <LoadingSpinner size="6" color="sky-blue" />
<> ) : (
<span className="text-white">Continue</span>{" "} <>
<Icons name="chevron-right" /> <span className="text-white">Continue</span>{" "}
</> <Icons name="chevron-right" />
)} </>
</button> )}
</button>
</div>
</div> </div>
</Form> </Form>
); );
@@ -620,25 +622,27 @@ function AddFundDollars(props) {
</div> </div>
{selectedOption == "previous" && ( {selectedOption == "previous" && (
<div className="modal-footer-wrapper flex justify-end items-center gap-2"> <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
<button <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
className="custom-btn bg-[#f5a430] text-black text-base" <button
onClick={props.onClose} className="custom-btn bg-[#f5a430] text-black text-base"
> onClick={props.onClose}
Cancel >
</button> Cancel
<button </button>
onClick={handleSubmit} <button
name="previous" onClick={handleSubmit}
type="button" name="previous"
className="custom-btn btn-gradient text-base text-white" type="button"
> className="custom-btn btn-gradient text-base text-white"
{loadingState ? ( >
<LoadingSpinner size="6" color="sky-blue" /> {loadingState ? (
) : ( <LoadingSpinner size="6" color="sky-blue" />
<span className="text-white">Continue</span> ) : (
)} <span className="text-white">Continue</span>
</button> )}
</button>
</div>
</div> </div>
)} )}
</> </>
+23 -21
View File
@@ -171,27 +171,29 @@ function AddFundPop({
{countryWallet == "NG" && <div className="h-[19rem]"></div>} {countryWallet == "NG" && <div className="h-[19rem]"></div>}
{countryWallet == "NG" && ( {countryWallet == "NG" && (
<div className="modal-footer-wrapper flex justify-end items-center py-4 gap-4"> <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
<button <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
className="custom-btn bg-[#f5a430] text-black text-base" <button
onClick={onClose} className="custom-btn bg-[#f5a430] text-black text-base"
> onClick={onClose}
Cancel >
</button> Cancel
<button </button>
onClick={handleSubmit} <button
type="button" onClick={handleSubmit}
className="custom-btn btn-gradient text-base text-white" type="button"
> className="custom-btn btn-gradient text-base text-white"
{__awaitComponent.loader ? ( >
<LoadingSpinner size="6" color="sky-blue" /> {__awaitComponent.loader ? (
) : ( <LoadingSpinner size="6" color="sky-blue" />
<> ) : (
<span className="text-white">Continue</span>{" "} <>
<Icons name="chevron-right" /> <span className="text-white">Continue</span>{" "}
</> <Icons name="chevron-right" />
)} </>
</button> )}
</button>
</div>
</div> </div>
)} )}
</div> </div>
@@ -424,35 +424,37 @@ function ConfirmAddFund({
</div> </div>
</div> </div>
<div className="modal-footer-wrapper flex justify-end items-center gap-4"> <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
<button <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
className="custom-btn bg-[#f5a430] text-black text-base"
onClick={getBack}
>
Back
</button>
{__confirmCountry === "US" && (
<button <button
className="custom-btn btn-gradient text-white text-base" className="custom-btn bg-[#f5a430] text-black text-base"
onClick={ onClick={getBack}
__confirmData?.cardType === "prev"
? handlePrevCard
: handleNewCard
}
> >
{confirmCredit?.show?.acceptConfirm?.loader ? ( Back
<LoadingSpinner size="6" color="sky-blue" />
) : (
"Proceed"
)}
</button> </button>
)} {__confirmCountry === "US" && (
{__confirmCountry === "NG" && ( <button
<FlutterWaveButton className="custom-btn btn-gradient text-white text-base"
{...fwConfig} onClick={
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white" __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>
</> </>
); );
@@ -387,37 +387,39 @@ function ConfirmNairaWithdraw({
> >
{requestStatus.message && requestStatus.message} {requestStatus.message && requestStatus.message}
</p> </p>
<div className="modal-footer-wrapper flex justify-end items-center gap-2"> <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
{!completeNairaWithdraw.show && ( <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
<button {!completeNairaWithdraw.show && (
type="button" <button
onClick={action} type="button"
className="custom-btn bg-[#f5a430] text-black text-base" onClick={action}
> className="custom-btn bg-[#f5a430] text-black text-base"
Cancel >
</button> 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>
<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>
</> </>
)} )}
+25 -23
View File
@@ -794,30 +794,32 @@ function NairaWithdraw({
</div> </div>
<div className="modal-footer-wrapper flex justify-end items-center gap-2 py-4"> <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
<button <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
type="button" <button
onClick={action} type="button"
className="custom-btn bg-[#f5a430] text-black text-base" onClick={action}
> className="custom-btn bg-[#f5a430] text-black text-base"
Cancel >
</button> Cancel
</button>
<button <button
type="submit" type="submit"
disabled={ disabled={
props.isSubmitting || sendMoneyFee.loading props.isSubmitting || sendMoneyFee.loading
? true ? true
: false : false
} }
className="custom-btn btn-gradient text-base text-white" className="custom-btn btn-gradient text-base text-white"
> >
{requestStatus ? ( {requestStatus ? (
<LoadingSpinner size="6" color="sky-blue" /> <LoadingSpinner size="6" color="sky-blue" />
) : ( ) : (
"Continue" "Continue"
)} )}
</button> </button>
</div>
</div> </div>
</Form> </Form>
) )