layout margin centralized

.env

@@ -121,4 +121,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0
 REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
 
 # FOR FAMILY GAME LINK
-REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90

.env.development

@@ -89,4 +89,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0
 REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
 
 # FOR FAMILY GAME LINK
-REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90

.env.production

@@ -95,4 +95,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0
 REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
 
 # FOR FAMILY GAME LINK
-REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90

src/components/AddJob/AddJob.jsx

@@ -72,9 +72,21 @@ function AddJob({ popUpHandler, categories }) {
     }
   };
 
+  // For form initial values
+  const initialValues = {
+    // initial values for formik
+    country: walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
+    price: "",
+    title: "",
+    description: "",
+    job_detail: "",
+    timeline_days: "",
+    category: [],
+  };
+
   return (
     <Formik
-        initialValues={IV}
+        initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={handleAddJob}
       >
@@ -105,12 +117,13 @@ function AddJob({ popUpHandler, categories }) {
                           className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
                           onChange={props.handleChange}
                           onBlur={props.handleBlur}
+                          disabled={walletDetails.data.length == 1}
                         >
                           {walletDetails?.loading ? (
                             <option className="text-slate-500 text-lg" value="">
                               Loading...
                             </option>
-                          ) : walletDetails.data.length ? (
+                          ) : walletDetails.data.length > 1 ? (
                             <>
                               <option className="text-slate-500 text-lg" value="">
                                 Select a currency
@@ -125,7 +138,19 @@ function AddJob({ popUpHandler, categories }) {
                                 </option>
                               ))}
                             </>
-                          ) : (
+                          ) : walletDetails.data.length == 1 ?
+                          <>
+                            {walletDetails.data?.map((item, index) => (
+                              <option
+                                key={index}
+                                className="text-slate-500 text-lg"
+                                value={item?.country}
+                              >
+                                {item?.description}
+                              </option>
+                            ))}
+                          </>
+                          :(
                             <option className="text-slate-500 text-lg" value="">
                               No Options Found! Try Again
                             </option>

src/components/History/RewardsTable.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react'
+import React, {memo, useCallback, useEffect, useState} from 'react'
 import Image from '../../assets/images/taskbanners/default.jpg'
 
 import usersService from '../../services/UsersService';
@@ -9,8 +9,8 @@ import LoadingSpinner from '../Spinners/LoadingSpinner';
 
 import { AmountTo2DP } from '../Helpers/PriceFormatter';
 
-function RewardsTable() {
 
+export const RewardsTable = memo(() => {
     const apiCall = new usersService()
 
     let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
@@ -30,7 +30,7 @@ function RewardsTable() {
 
 
     //FUNCTION TO GET FAMILY REWARD HISTORY
-    const getFamilyRewardHistory = ()=>{
+    const getFamilyRewardHistory = useCallback(()=>{
         apiCall.getFamilyRewardHx().then((res)=>{
             if(res.data.internal_return < 0){ // success but no data
                 setFamilyRewardHistory(prev => ({...prev, loading: false}))
@@ -40,7 +40,7 @@ function RewardsTable() {
         }).catch((error)=>{
             setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
         })
-    }
+    },[])
 
     useEffect(()=>{
         getFamilyRewardHistory()
@@ -99,5 +99,5 @@ function RewardsTable() {
     </div>
   )
 }
-
+)
 export default RewardsTable

src/components/History/index.jsx

@@ -13,11 +13,15 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import RewardsTable from "./RewardsTable";
 import JobsCompleted from "./JobsCompleted";
 
+import TabButton from "../customTabs/TabButton";
+
 export default function History() {
 
     const apiCall = new usersService()
 
     let [tab, setTab] = useState("purchases"); //STATE FOR SWITCHING BETWEEN TABS
+    const [selectedTab, setSelectedTab] = useState("purchases");
+    const tabs = ["purchases", "recent activity", "rewards", 'jobs completed'] //STATE FOR SWITCHING BETWEEN TABS
 
     let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
         loading: true,
@@ -222,7 +226,18 @@ export default function History() {
             {/* <TopHxBox className="mb-11" /> */}
             <div className='w-full p-4 md:p-8 bg-white dark:bg-dark-white rounded-2xl shadow bottomMargin'>
                 {/* switch button */}
-                <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
+                <div className="grid grid-cols-4 mt-4">
+                {tabs.map((item) => (
+                    <TabButton 
+                        key={item}
+                        item={item}
+                        selectedTab={selectedTab}
+                        setSelectedTab={setSelectedTab}
+                    />
+                ))}
+                </div>
+                {/* switch button */}
+                {/* <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
                     <button
                     name="purchases"
                     onClick={(e) => setTab(e.target.name)}
@@ -259,12 +274,12 @@ export default function History() {
                     >
                     Jobs Completed
                     </button>
-                </div>
+                </div> */}
                 {/* END OF switch button */}
-                <div className="history-tables w-full">
+                <div className="history-tables w-full bg-red-50 overflow-x-auto">
                     {/* PURCHASE SECTION */}
-                    {tab == 'purchases' &&
-                        <div className="wallet w-full border-t">
+                    {selectedTab == 'purchases' &&
+                        <div className="wallet w-full">
                             {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1> */}
                             {purchaseHistory.loading ? 
                             <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
@@ -276,8 +291,8 @@ export default function History() {
                     {/* END OF PURCHASE SECTION */}
                     
                     {/* RECENT ACTIVITY SECTION */}
-                    {tab == 'recent' &&
-                        <div className="wallet w-full border-t">
+                    {selectedTab == 'recent activity' &&
+                        <div className="wallet w-full">
                             {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1> */}
                             {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                             {paymentHistory.loading ? 
@@ -290,16 +305,16 @@ export default function History() {
                     {/* END OF RECENT ACTIVITY SECTION */}
 
                     {/* REWARD SECTION */}
-                    {tab == 'reward' &&
-                        <div className="wallet w-full border-t">
+                    {selectedTab == 'rewards' &&
+                        <div className="wallet w-full">
                             <RewardsTable />
                         </div>
                     }
                     {/* END OF REWARD SECTION */}
 
                     {/* JOBS COMPLETED SECTION */}
-                    {tab == 'jobs_completed' &&
-                        <div className="wallet w-full border-t">
+                    {selectedTab == 'jobs completed' &&
+                        <div className="wallet w-full">
                             <JobsCompleted />
                         </div>
                     }

src/components/Home/index.jsx

@@ -67,7 +67,7 @@ export default function Home(props) {
 
   return (
     <Layout>
-      <div className="home-page-wrapper">
+      <div className="w-full">
         {userDetails && userDetails?.account_type == "FAMILY" ? (
           <FamilyDash
             account={userDetails}

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -256,14 +256,16 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 </p>
                 <hr />
                 <button
-                  className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex sm:flex-col flex-row sm:gap-0 gap-1 items-center justify-center"
+                  className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
                   name="market-interest"
                   onClick={ManageInterest}
                 >
                   {" "}
-                  <span>Send</span>
-                  <span>Interest</span>
-                  <span>Request</span>
+                  <div className="w-full flex flex-col justify-between gap-2">
+                    <span>Send</span>
+                    <span>Interest</span>
+                    <span>Request</span>
+                  </div>
                 </button>
                 <>
                   {manageInt.loading ? (

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -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/AddFundDollars.jsx

@@ -260,13 +260,13 @@ function AddFundDollars(props) {
         {/* switch button */}
         <div className="flex">
           <form className="add-fund-info flex items-center gap-3 md:px-8 md:pt-4 px-4 pt-2">
-            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+            <h1 className="job-label my-1">
               {countryWallet == "US" && "Payment Method"}
             </h1>
             <div className="my-1 flex items-center gap-2">
               <label
                 htmlFor="previous"
-                className="cursor-pointer flex items-center gap-1"
+                className="flex items-center gap-1"
               >
                 <input
                   type="radio"
@@ -283,7 +283,7 @@ function AddFundDollars(props) {
               </label>
               <label
                 htmlFor="new"
-                className={`cursor-pointer flex items-center gap-1 ${
+                className={`flex items-center gap-1 ${
                   payListCards.data.length >= MaxNoOfCards
                     ? "pointer-events-none"
                     : ""
@@ -388,7 +388,7 @@ function AddFundDollars(props) {
                               {/* Inputs */}
                               {/* Name */}
                               <div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
-                                <label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
+                                <label className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
                                   Name:
                                 </label>
                                 <p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
@@ -423,7 +423,7 @@ function AddFundDollars(props) {
                                         className={`flex items-center justify-between mb-2.5`}
                                       >
                                         <label
-                                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
+                                          className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
                                           htmlFor="expiration"
                                         >
                                           Exp Month{" "}

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -131,7 +131,7 @@ function AddFundPop({
         <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
             <form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
-              <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+              <h1 className="job-label my-1">
                 Amount({currency})
               </h1>
               <div className="field w-full max-w-[250px]">

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -9,7 +9,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
 
   return (
     <div className="logout-modal-body w-full">
-      <div className="content-wrapper w-full h-[32rem]">
+      <div className="content-wrapper w-full h-[32rem] flex flex-col justify-center">
         <div className="w-full mb-10">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
             <div className="px-4 md:p-8 py-4 add-fund-info">
@@ -49,7 +49,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                     </svg>
                   </div>
 
-                  <div className="flex items-center">
+                  <div className="w-full flex justify-center items-center">
                     <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
                       {isSuccess
                         ? "Credit was Successful!"
@@ -59,41 +59,42 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
 
                   {data?.internal_return >= 0 &&
                     data?.result !== "Charge failed" && (
-                      <>
-                        <div className="flex items-center gap-8">
-                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      <div className="w-full max-w-[300px] mx-auto">
+                        <div className="flex gap-8 my-2">
+                          <h1 className="w-full job-label">
                             Amount({data?.currency || ""})
                           </h1>
-                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                             {`${data?.symbol || ""} ${
-                              Number(data?.amount * 0.01).toLocaleString() || ""
+                              Number(data?.amount * 0.01).toFixed(2) || ""
                             }`}
                           </span>
                         </div>
                         
                         {data?.curr_balance &&
-                        <div className="flex items-center gap-8">
-                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                        <div className="flex gap-8 my-2">
+                          <h1 className="w-full job-label">
                             Wallet Balance
                           </h1>
-                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                            {data?.curr_balance * 0.01}
+                          <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
+                            {(data?.curr_balance * 0.01).toFixed(2)}
                           </span>
                         </div>
                         }
 
                         {isSuccess && (
-                          <div className="flex items-center gap-8">
-                            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <div className="flex gap-8 my-2">
+                            <h1 className="w-full job-label">
                               Confirmation Number
                             </h1>
-                            <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                               {data?.confirmation}
                             </span>
                           </div>
                         )}
-                      </>
-                    )}
+                      </div>
+                    )
+                  }
                 </div>
               </div>
             </div>

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -29,10 +29,10 @@ function ThePaymentText({ value, type }) {
   return (
     <div className="my-2 flex items-center gap-5">
       <div className="card-details flex items-center gap-3">
-        <h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
+        <h1 className="text-base">
           {description} Card
         </h1>
-        <p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
+        <p className="text-base font-normal text-dark-gray dark:text-white tracking-wide">
           Bank **************{digits}
         </p>
       </div>
@@ -46,14 +46,14 @@ 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 ${gapClassName}`}>
-      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+    <div className={`flex items-center gap-8`}>
+      {/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
+      <h1 className="min-w-[150px] job-label">
         Amount({currency})
       </h1>
-      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedAmount}
       </span>
     </div>
@@ -66,14 +66,13 @@ 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 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] job-label">
         Transaction Fee
       </h1>
-      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedFee}
       </span>
     </div>
@@ -89,14 +88,12 @@ 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] job-label">
         Total
       </h1>
-      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedTotal}
       </span>
     </div>
@@ -384,7 +381,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] job-label"
                         >
                           Payment Method
                         </label>
@@ -397,17 +394,14 @@ 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] job-label">
                         Reference No
                       </h1>
-                      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
-                        {__confirmData?.credit_reference}
+                      <span className="text-base font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+                        {/* Displays only half of the string */}
+                        {__confirmData?.credit_reference.slice(0, (Math.floor(__confirmData?.credit_reference.length/2)))}
                       </span>
                     </div>
                   </div>

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -58,13 +58,12 @@ function ConfirmNairaWithdraw({
       .sendMoney(reqData)
       .then((res) => {
         if (res.data.internal_return < 0) {
-          // if (res.data?.status_message?.toLowerCase().includes("limit")) {
-          //   setRequestStatus({
-          //     message: ,
-          //     loading: false,
-          //     status: false,
-          //   });
-          // }
+          setRequestStatus({
+            message: 'Unable to complete, try again',
+            loading: false,
+            status: false,
+          });
+
           return setTimeout(() => {
             setRequestStatus({
               message: "",
@@ -79,19 +78,19 @@ function ConfirmNairaWithdraw({
           }, 5000);
         }
 
+        setRequestStatus({
+          message: "Withdrawal sucessful",
+          loading: false,
+          status: true,
+        });
+        setShowCompleteNairaWithdraw({
+          show: true,
+          load: false,
+          state: res.data,
+        });
         setTimeout(() => {
-          setRequestStatus({
-            message: "",
-            loading: false,
-            status: false,
-          });
-          setShowCompleteNairaWithdraw({
-            show: true,
-            load: false,
-            state: res.data,
-          });
+          dispatch(tableReload({ type: "WALLETTABLE" }));
         }, 5000);
-        dispatch(tableReload({ type: "WALLETTABLE" }));
         return;
       })
       .catch((error) => {
@@ -381,23 +380,23 @@ function ConfirmNairaWithdraw({
           {!completeNairaWithdraw.load && (
             <>
               <p
-                className={`text-base ${
-                  requestStatus.status ? "text-green-500" : "text-red-500"
-                } px-4 md:px-8 py-4 h-5`}
+                className={`text-lg text-center font-bold ${
+                  requestStatus.status ? "text-emerald-600" : "text-red-500"
+                } px-4 md:px-8 py-4`}
               >
                 {requestStatus.message && requestStatus.message}
               </p>
               <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
+                    type="button"
+                    onClick={action}
+                    className="custom-btn bg-[#f5a430] text-black text-base"
+                  >
+                    Cancel
+                  </button>
+
 
                   <button
                     onClick={

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -4,6 +4,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AddFundPop from "./AddFundPop";
 import CompleteConfirmCredit from "./CompleteConfirmCredit";
 import ConfirmAddFund from "./ConfirmAddFund";
+import CustomTimer from "../../countdown/CustomTimer";
 
 const CreditPopup = ({ details, onClose, situation, walletItem }) => {
   const [input, setInput] = useState("");
@@ -33,7 +34,6 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     <ModalCom
       action={onClose}
       situation={situation}
-      className="assign-task-popup"
     >
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="modal-header-con">
@@ -71,7 +71,13 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
         <div className="w-full">
           {confirmCredit?.show?.acceptConfirm?.loader ? (
             <div className="h-[32rem] flex items-center justify-center">
-              <LoadingSpinner size="12" color="sky-blue" />
+              <div className="h-[32rem] flex flex-col items-center justify-center gap-4">
+                <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Processing payment</p>
+                <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Please do not refresh</p>
+                <LoadingSpinner size="6" color="sky-blue" height='h-20' />
+                {/* <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Timer countdown</p> */}
+                <CustomTimer className="text-lg text-center md:text-2xl text-emerald-600 tracking-wide font-bold" />
+              </div>
             </div>
           ) : (
             <>

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -330,13 +330,13 @@ function NairaWithdraw({
                   <Form className="transfer-fund-info">
                     <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white h-full rounded-2xl">
                       {/* Amount Form */}
-                      <div className="flex flex-col">
+                      <div className="flex flex-col gap-2">
                         <div className="field w-full">
                           <InputCom
                             fieldClass="px-4 text-end"
-                            parentClass="flex items-center gap-1 justify-between"
-                            labelClass="flex-[0.4] mb-0"
-                            inputClass="flex-[0.6] max-w-[12rem]"
+                            parentClass="flex items-center gap-1"
+                            labelClass="flex-[0.2] mb-0"
+                            inputClass="flex-[0.8] max-w-[12rem]"
                             label="Amount:"
                             type="number"
                             name="amount"
@@ -352,10 +352,10 @@ function NairaWithdraw({
 
                         <div className="field w-full">
                           <InputCom
-                            fieldClass="px-4 transfer-field"
-                            parentClass="flex items-center gap-1 justify-between"
+                            fieldClass="px-4"
+                            parentClass="flex items-center gap-1"
                             labelClass="flex-[0.2] mb-0"
-                            inputClass="flex-[0.8] transfer-field max-w-[12rem]"
+                            inputClass="flex-[0.8] max-w-[12rem]"
                             label="Fee:"
                             type="text"
                             name="fee"
@@ -371,10 +371,10 @@ function NairaWithdraw({
 
                         <div className="field w-full">
                           <InputCom
-                            fieldClass="px-4 transfer-field"
-                            parentClass="flex items-center gap-1 justify-between"
+                            fieldClass="px-4"
+                            parentClass="flex items-center gap-1"
                             labelClass="flex-[0.2] mb-0"
-                            inputClass="flex-[0.8] transfer-field max-w-[12rem]"
+                            inputClass="flex-[0.8] max-w-[12rem]"
                             label="Total:"
                             type="text"
                             name="total"
@@ -414,7 +414,7 @@ function NairaWithdraw({
                           <label
                             onClick={() => setTab("previous")}
                             htmlFor="previous"
-                            className="cursor-pointer flex items-center gap-1"
+                            className="cursor-pointer flex items-center gap-1 text-dark-gray dark:text-white"
                           >
                             <input
                               type="radio"
@@ -431,7 +431,7 @@ function NairaWithdraw({
                           <label
                             onClick={() => setTab("new")}
                             htmlFor="new"
-                            className={`cursor-pointer flex items-center gap-1 ${
+                            className={`cursor-pointer flex items-center gap-1 text-dark-gray dark:text-white ${
                               recipients.data.length >= MaxNoOfBanks
                                 ? "pointer-events-none"
                                 : ""
@@ -545,7 +545,7 @@ function NairaWithdraw({
                               <LoadingSpinner size="10" color="sky-blue" />
                             </div>
                           ) : recipients.data.length < MaxNoOfBanks ? (
-                            <div className="w-full mt-3 rounded-md bg-slate-100">
+                            <div className="w-full mt-3 rounded-md bg-slate-100 dark:bg-dark-white">
                               <div className="relative fields w-full flex flex-col p-4">
                                 <div className="flex flex-[2] min-h-[52px]">
                                   {/* country */}
@@ -557,7 +557,7 @@ function NairaWithdraw({
                                       Country{" "}
                                       <span className="text-red-500">*</span>
                                     </label>
-                                    <div className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
+                                    <div className="w-full text-base p-2 text-dark-gray bg-white dark:bg-[#11131F] dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
                                       <span className="text-slate-500 text-lg italic">
                                         {wallet.walletCountry[0]?.country}
                                       </span>
@@ -619,7 +619,7 @@ function NairaWithdraw({
                                       <span className="text-red-500">*</span>
                                     </label>
                                     <select
-                                      className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
+                                      className="w-full text-base p-2 bg-white dark:bg-[#11131F] text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
                                       name="newAccount.bank"
                                       value={props.values.newAccount?.bank}
                                       onChange={props.handleChange}
@@ -698,7 +698,7 @@ function NairaWithdraw({
                                       Type <span className="text-red-500">*</span>
                                     </label>
                                     <select
-                                      className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
+                                      className="w-full text-base p-2 text-dark-gray bg-white dark:bg-[#11131F] dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
                                       name="newAccount.accountType"
                                       value={props.values.newAccount?.accountType}
                                       onChange={props.handleChange}

src/components/MyWallet/WalletAction.jsx

@@ -16,21 +16,21 @@ function WalletAction({ walletItem, payment, openPopUp }) {
 
   return (
     <div className="counters w-full flex justify-between gap-2">
-      <div className="w-1/2 flex justify-center items-center">
+      <div className="w-1/2 flex justify-start items-center">
         <button
           onClick={() => {
             setShowNairaWithdraw((prev) => ({ ...prev, show: true }));
           }}
           className={`${
             walletItem.code != "NAIRA" && "invisible"
-          } custom-btn btn-gradient text-white`}
+          } logout-btn btn-gradient text-white`}
         >
           Spend
         </button>
       </div>
-      <div className="w-1/2 flex justify-center items-center">
+      <div className="w-1/2 flex justify-end items-center">
         <button
-          className="custom-btn btn-gradient text-white"
+          className="logout-btn btn-gradient text-white"
           onClick={() => {
             openPopUp({
               payment: payment,
@@ -38,7 +38,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
             });
           }}
         >
-          <span className="">Add Credit</span>
+          Add Credit
         </button>
       </div>
 

src/components/MyWallet/WalletBox.jsx

@@ -15,14 +15,14 @@ export default function WalletBox({ wallet, payment, countries }) {
   return (
     <div className="my-wallet-wrapper w-full mb-10">
       <div className="main-wrapper w-full">
-        <div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
+        <div className="balance-inquery w-auto grid md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
           {loading ? (
             <div className="w-full h-full flex items-center justify-center">
               <LoadingSpinner size="16" color="sky-blue" />
             </div>
           ) : (
             data.length > 0 && data.map((item) => (
-              <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
+              <div key={item.wallet_uid} className="w-full md:max-w-[450px] h-full mb-10 lg:mb-0">
                 <WalletItemCard walletItem={item} payment={payment} countries={countries} />
               </div>
             ))

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -24,7 +24,7 @@ function RecentActivityTable({ payment }) {
           <thead className="border-b-2">
             <tr className="text-slate-600">
               <th className="p-2">Date</th>
-              <th className="p-4">Trx.</th>
+              <th className="p-2">Trx.</th>
               <th className="p-2">Amnt./Fee</th>
               <th className="p-2">Status</th>
             </tr>

src/components/MyWallet/WalletItemCard.jsx

@@ -44,7 +44,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
   return (
     <>
       <div
-        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
+        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-4 p-4 justify-between"
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
@@ -81,12 +81,12 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
               walletItem.escrow * 0.01,
               walletItem.code,
               undefined,
-              "text-[2rem]"
+              "text-[1.5rem]"
             )}
           </span>
         </p>
 
-        <div className="my-2 w-full h-[1px] bg-white"></div>
+        <div className="w-full h-[1px] bg-white"></div>
 
         <WalletAction
           walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}

src/components/Partials/Layout.jsx

@@ -31,54 +31,34 @@ export default function Layout({ children }) {
     navigate("/login", { replace: true });
   };
 
-  //---------------------------------------
-  /* LET U DEAL WITH JOB LIST - we need to centralize this list  */
-  // const {jobListTable} = useSelector((state) => state.tableReload)
-  // const [myJobList, setMyJobList] = useState({loading: true, data:[]});
-  // const api = new usersService();
-
-  // const getMyJobList = async () => {
-  //   setMyJobList({loading: true, data:[]})
-  //   try {
-  //     const res = await api.getMyJobList();
-  //     setMyJobList({loading: false, data:res.data})
-  //     // setMyJobList(res.data);
-  //   } catch (error) {
-  //     setMyJobList({loading: false, data:[]})
-  //     console.log("Error getting mode");
-  //   }
-  // };
-  // useEffect(() => {
-  //   getMyJobList();
-  // }, [jobListTable]);
-
   return (
     <>
-      <div className="nft-main-wrapper-layout container mx-auto">
-        <div className={`relative nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
+      <div className="relative w-full max-w-[2000px] nft-main-wrapper-layout mx-auto">
+        <div className={`nft-wrapper-layout-container w-full min-h-screen flex`}>
           {/* sidebar */}
-          <div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>
+          <div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-screen overflow-y-scroll overflow-style-none sticky left-0 top-0 pt-[30px]`}>
             <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />
           </div>
           {MobileSideBar && (
             <div onClick={() => setMobileSidebar.toggle()} className="bg-black bg-opacity-20 fixed left-0 top-0 w-full h-full z-[50] block xl:hidden"></div>
           )}
-          <div className={`nft-sidebar block xl:hidden section-shadow w-[280px] pl-3 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>
+          <div className={`nft-sidebar block xl:hidden section-shadow w-[280px] 2xl:pl-20 pl-10 pr-6 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>
             <MobileSidebar logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} myJobList={userJobList} />
           </div>
           {/* end sidebar */}
-          <div className={`nft-header-container-wrapper flex-1 md:ml-10 ${drawer ? "2xl:ml-[375px] xl:ml-[310px]" : "xl:ml-[110px]"} h-full`}>
+          {/* FORMER CLASS NAME `w-full nft-header-container-wrapper ${drawer ? "2xl:ml-[335px] xl:ml-[280px]" : "xl:ml-[70px]"} h-full` */}
+          <div className={`w-full nft-header-container-wrapper h-full 2xl:px-10 px-8`}>
             {/* header */}
             <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 ">
               <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
             </div>
             {/* container */}
-            <div className="nft-container container mx-auto 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
-              <div className="flex-[80%] w-full">
+            <div className="nft-container 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col items-start justify-center xl:flex-row xl:justify-between gap-4">
+              <div className="flex-[80%] 2xl:flex-[85%] w-full">
                 {children && children}
               </div>
 
-              <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
+              <div className="nft-right-side-content flex-[20%] 2xl:flex-[15%] w-full h-full 2xl:flex justify-center 2xl:justify-end relative">
                 <RightSideBar myJobList={userJobList} />
               </div>
             </div>

src/components/Partials/RightSideBar.jsx

@@ -40,7 +40,7 @@ export default function RightSideBar({ myJobList }) {
   return (
     <>
       <div className="right-sidebar-wrapper overflow-y-scroll overflow-style-none 2xl:fixed h-full 2xl:pb-96">
-        <div className="top-platform bg-white dark:bg-dark-white rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-6 2xl:border-none border ">
+        <div className="top-platform bg-white dark:bg-dark-white rounded-2xl p-8 w-full 2xl:mb-6 2xl:border-none border ">
           {/* heading */}
           <div className="heading flex justify-between items-center mb-3.5">
             <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
@@ -280,7 +280,7 @@ export default function RightSideBar({ myJobList }) {
         {/*JOB LINKS*/}
         {userDetails?.account_type !== "FAMILY" &&
           myJobList?.data?.result_list?.length > 0 && (
-            <div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none border ">
+            <div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 w-full 2xl:mb-10 2xl:border-none border ">
               {/* heading */}
               <div className="px-8 heading flex justify-between items-center mb-3.5">
                 <h3 className="text-xl font-bold   text-dark-gray dark:text-white">

src/components/Partials/Sidebar.jsx

@@ -275,7 +275,7 @@ export default function Sidebar({
         <button
           onClick={logoutModalHandler}
           type="button"
-          className="signout-btn flex items-center space-x-1  p-2.5 w-2/3 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
+          className="signout-btn flex items-center space-x-1  p-2.5 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
         >
           <span className="">
             <Icons name="new-logout" />

src/components/countdown/CustomTimer.jsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react'
+
+export default function CustomTimer({className='text-emerald-500'}) {
+
+    const [time, setTime] = useState(Number(process.env.REACT_APP_CUSTOMTIMER))
+
+    useEffect(()=>{
+        const timer = setInterval(()=>{
+            setTime(prev => prev - 1)
+        },1000)
+        return ()=>{
+            clearInterval(timer)
+        }
+    },[])
+
+    let minutes = time == 0 ? 0 : Math.floor(time/60)
+    let seconds = time == 0 ? 0 :time - (minutes * 60)
+
+  return (
+    <p className={`w-full text-base text-emerald-500 ${className}`}>
+        {`${minutes > 9 ? minutes : '0'+minutes} : ${seconds > 9 ? seconds : '0'+seconds}`}
+    </p>
+  )
+}

src/components/customTabs/TabButton.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+export default function TabButton({ item='', selectedTab='', setSelectedTab=()=>{} }) {
+  return (
+    <button
+      className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
+        selectedTab === item
+          ? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
+          : "bg-white text-[#000]"
+      }`}
+      value={item}
+      name={item}
+      onClick={() => setSelectedTab(item)}
+    >
+      <div
+        className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
+          selectedTab === item
+            ? "border-white bg-emerald-500"
+            : "border-red-50 dark:border-[#D85A5A] bg-white"
+        }`}
+      ></div>
+      {item[0].toUpperCase() + item.slice(1)}
+    </button>
+  )
+}
+

src/index.css

@@ -183,7 +183,7 @@
     @apply px-2 min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
   }
   .logout-btn {
-    @apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-base rounded-full cursor-pointer
+    @apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-xl font-bold rounded-full cursor-pointer
   }
 }
 
@@ -1103,6 +1103,6 @@ TODO: Responsive ===========================
   margin: 0;
 }
 
-.assign-task-popup {
+/* .assign-task-popup {
   top: 75px;
-}
+} */