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

adjusted wallet btn size #697

Merged
ameye merged 1 commits from wallet-page-btn into master 2024-04-04 15:19:32 +00:00
Conversation 0 Commits 1 Files Changed 2
+39 -45
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
type="button"
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
</button>
@@ -133,14 +133,14 @@ function PastDueJobAction({jobDetails}) {
{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-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">
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
<div className="logout-modal-wrapper lg:w-[460px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
<div className="modal-header-con">
<h1 className="modal-title">
Past Due Task
</h1>
<button
type="button"
className="text-[#374557] dark:text-red-500"
className="modal-close-btn"
onClick={popUpHandler}
>
<svg
@@ -164,7 +164,7 @@ function PastDueJobAction({jobDetails}) {
</svg>
</button>
</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="mb-5 flex justify-center items-center gap-2">
<input
@@ -173,26 +173,26 @@ function PastDueJobAction({jobDetails}) {
onChange={()=>{setChecked(prev => !prev)}}
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 className="mb-5 flex justify-center items-center">
<div className="mb-5 w-full flex justify-end items-center">
{reqStatus.loading && action=='cancel'?
<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>
</button>
}
</div>
{/* 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'>
<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
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='2'>1 days</option>
@@ -204,25 +204,27 @@ function PastDueJobAction({jobDetails}) {
{reqStatus.loading && action=='extend' ?
<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">
Extend Timeline
</button>
<div className='w-full flex justify-end items-center'>
<button disabled={reqStatus.loading} type="button" onClick={extendTime} className="custom-btn btn-gradient text-base text-white">
Extend Timeline
</button>
</div>
}
</div>
{/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
<div className="w-full">
<div className="w-full absolute left-0 bottom-0 text-center">
{reqStatus.message != "" &&
(!reqStatus.status ? (
<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}
</div>
) : (
reqStatus.status && (
<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}
</div>
@@ -232,17 +234,17 @@ function PastDueJobAction({jobDetails}) {
{/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
</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>
{/* 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>
</ModalCom>
)}
src/components/MyWallet/Popup/ConfirmAddFund.jsx
+9 -17
View File
@@ -46,11 +46,10 @@ function ThePaymentText({ value, type }) {
*/
function AmountSection({ currency, amount, country }) {
const formattedAmount = (+amount * 0.01)?.toFixed(2);
const gapClassName = country === "US" ? "gap-14" : "gap-4";
return (
<div className={`flex items-center gap-8 ${gapClassName}`}>
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
<div className={`flex items-center gap-8`}>
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Amount({currency})
</h1>
<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 }) {
const formattedFee = (+fee).toFixed(2);
const gapClass = country === "US" ? "gap-[2.7rem]" : "gap-4";
return (
<div className={`flex items-center gap-8 border-b border-gray-600 ${gapClass}`}>
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
<div className={`flex items-center gap-8 border-b border-gray-600`}>
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Transaction Fee
</h1>
<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 formattedTotal = (total * 0.01)?.toFixed(2);
const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";
return (
<div className={`flex items-center ${gap}`}>
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
<div className={`flex items-center gap-8`}>
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Total
</h1>
<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">
<label
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
</label>
@@ -397,13 +393,9 @@ function ConfirmAddFund({
</div>
)}
<div
className={`${
__confirmCountry === "US"
? "gap-[3.7rem]"
: "gap-[1.81rem]"
} flex items-center`}
className={`gap-8 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
</h1>
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">