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

adjusted wallet btn size

Browse Source
This commit was merged in pull request #697.
This commit is contained in:
victorAnumudu
2024-04-04 15:25:50 +01:00
parent f8e14fe6a0
commit e6392bc433
2 changed files with 39 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx
+30 -28
View File
@@ -121,7 +121,7 @@ function PastDueJobAction({jobDetails}) {
<button <button
type="button" type="button"
onClick={popUpHandler} onClick={popUpHandler}
className="px-4 h-[48px] flex justify-center items-center btn-gradient text-base rounded-full text-white" className="custom-btn btn-gradient text-base text-white"
> >
Cancel or Extend Timeline Cancel or Extend Timeline
</button> </button>
@@ -133,14 +133,14 @@ function PastDueJobAction({jobDetails}) {
{popUp && ( {popUp && (
<ModalCom action={popUpHandler} situation={popUp}> <ModalCom action={popUpHandler} situation={popUp}>
<div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl"> <div className="logout-modal-wrapper lg:w-[460px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
<div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple"> <div className="modal-header-con">
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide"> <h1 className="modal-title">
Past Due Task Past Due Task
</h1> </h1>
<button <button
type="button" type="button"
className="text-[#374557] dark:text-red-500" className="modal-close-btn"
onClick={popUpHandler} onClick={popUpHandler}
> >
<svg <svg
@@ -164,7 +164,7 @@ function PastDueJobAction({jobDetails}) {
</svg> </svg>
</button> </button>
</div> </div>
<div className="job-action-modal-body w-full px-10 py-8 gap-4"> <div className="relative job-action-modal-body w-full px-10 py-8 gap-4">
<div className="w-full flex flex-col items-center"> <div className="w-full flex flex-col items-center">
<div className="mb-5 flex justify-center items-center gap-2"> <div className="mb-5 flex justify-center items-center gap-2">
<input <input
@@ -173,26 +173,26 @@ function PastDueJobAction({jobDetails}) {
onChange={()=>{setChecked(prev => !prev)}} onChange={()=>{setChecked(prev => !prev)}}
className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue' className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue'
/> />
<p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>I am ready to cancel this task</p> <p className='job-label'>I am ready to cancel this task</p>
</div> </div>
<div className="mb-5 flex justify-center items-center"> <div className="mb-5 w-full flex justify-end items-center">
{reqStatus.loading && action=='cancel'? {reqStatus.loading && action=='cancel'?
<LoadingSpinner color='sky-blue' size='10' /> <LoadingSpinner color='sky-blue' size='10' />
: :
<button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"> <button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="custom-btn border-gradient text-base text-white">
<span className='text-gradient'>Cancel this task</span> <span className='text-gradient'>Cancel this task</span>
</button> </button>
} }
</div> </div>
{/* EXTEND TIMELINE SECTION */} {/* EXTEND TIMELINE SECTION */}
<div className='w-full my-3 py-3 border-y flex flex-col items-center'> <div className='w-full my-3 py-3 border-t flex flex-col items-center'>
<div className='mb-5 flex items-center gap-2'> <div className='mb-5 flex items-center gap-2'>
<p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>Extend the timeline by:</p> <p className='job-label'>Extend the timeline by:</p>
<select <select
onChange={({target})=>{setExtendedTime(target.value)}} onChange={({target})=>{setExtendedTime(target.value)}}
className='text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' className='text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 rounded-full'
> >
<option className='text-slate-500 text-lg' value=''>select</option> <option className='text-slate-500 text-lg' value=''>select</option>
<option className='text-slate-500 text-lg' value='2'>1 days</option> <option className='text-slate-500 text-lg' value='2'>1 days</option>
@@ -204,25 +204,27 @@ function PastDueJobAction({jobDetails}) {
{reqStatus.loading && action=='extend' ? {reqStatus.loading && action=='extend' ?
<LoadingSpinner color='sky-blue' size='10' /> <LoadingSpinner color='sky-blue' size='10' />
: :
<button disabled={reqStatus.loading} type="button" onClick={extendTime} className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"> <div className='w-full flex justify-end items-center'>
Extend Timeline <button disabled={reqStatus.loading} type="button" onClick={extendTime} className="custom-btn btn-gradient text-base text-white">
</button> Extend Timeline
</button>
</div>
} }
</div> </div>
{/* FOR SUCCESS/ERROR DISPLAY SECTION*/} {/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
<div className="w-full"> <div className="w-full absolute left-0 bottom-0 text-center">
{reqStatus.message != "" && {reqStatus.message != "" &&
(!reqStatus.status ? ( (!reqStatus.status ? (
<div <div
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`} className={`relative p-2 mx-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
> >
{reqStatus.message} {reqStatus.message}
</div> </div>
) : ( ) : (
reqStatus.status && ( reqStatus.status && (
<div <div
className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`} className={`relative p-2 mx-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
> >
{reqStatus.message} {reqStatus.message}
</div> </div>
@@ -232,17 +234,17 @@ function PastDueJobAction({jobDetails}) {
{/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/} {/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
</div> </div>
{/* cancel btn */}
<div className='flex justify-end items-center'>
<button onClick={popUpHandler} type="button"
// className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
className='w-[150px] mt-2 h-[48px] rounded-full text-base bg-transparent border border-red-500 text-red-500'
>
Cancel
{/* <span className='text-gradient'>Cancel</span> */}
</button>
</div>
</div> </div>
{/* cancel btn */}
<div className='modal-footer-wrapper flex justify-center items-center'>
<button onClick={popUpHandler} type="button"
// className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
className='custom-btn text-base bg-transparent border border-red-500 text-red-500'
>
Cancel
{/* <span className='text-gradient'>Cancel</span> */}
</button>
</div>
</div> </div>
</ModalCom> </ModalCom>
)} )}
src/components/MyWallet/Popup/ConfirmAddFund.jsx
+9 -17
View File
@@ -46,11 +46,10 @@ function ThePaymentText({ value, type }) {
*/ */
function AmountSection({ currency, amount, country }) { function AmountSection({ currency, amount, country }) {
const formattedAmount = (+amount * 0.01)?.toFixed(2); const formattedAmount = (+amount * 0.01)?.toFixed(2);
const gapClassName = country === "US" ? "gap-14" : "gap-4";
return ( return (
<div className={`flex items-center gap-8 ${gapClassName}`}> <div className={`flex items-center gap-8`}>
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"> <h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Amount({currency}) Amount({currency})
</h1> </h1>
<span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1"> <span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
@@ -66,11 +65,10 @@ function AmountSection({ currency, amount, country }) {
*/ */
function TransactionFeeSection({ currency, fee, country }) { function TransactionFeeSection({ currency, fee, country }) {
const formattedFee = (+fee).toFixed(2); const formattedFee = (+fee).toFixed(2);
const gapClass = country === "US" ? "gap-[2.7rem]" : "gap-4";
return ( return (
<div className={`flex items-center gap-8 border-b border-gray-600 ${gapClass}`}> <div className={`flex items-center gap-8 border-b border-gray-600`}>
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"> <h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Transaction Fee Transaction Fee
</h1> </h1>
<span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1"> <span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
@@ -89,11 +87,9 @@ function TotalSection({ currency, amount, fee, country }) {
const total = Number(amount) + Number(fee); const total = Number(amount) + Number(fee);
const formattedTotal = (total * 0.01)?.toFixed(2); const formattedTotal = (total * 0.01)?.toFixed(2);
const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";
return ( return (
<div className={`flex items-center ${gap}`}> <div className={`flex items-center gap-8`}>
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"> <h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Total Total
</h1> </h1>
<span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1"> <span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
@@ -384,7 +380,7 @@ function ConfirmAddFund({
<div className="flex items-center gap-8"> <div className="flex items-center gap-8">
<label <label
htmlFor="payment" htmlFor="payment"
className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1" className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
> >
Payment Method Payment Method
</label> </label>
@@ -397,13 +393,9 @@ function ConfirmAddFund({
</div> </div>
)} )}
<div <div
className={`${ className={`gap-8 flex items-center`}
__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"> <h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Reference No Reference No
</h1> </h1>
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1"> <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">