Compare commits

..

1 Commits

Author SHA1 Message Date
victorAnumudu 4f1a4dd045 Delete/Edit Btn Position Changed 2023-05-15 21:16:18 +01:00
3 changed files with 197 additions and 219 deletions
+26 -24
View File
@@ -62,33 +62,35 @@ export default function MyJobTable({MyJobList, className }) {
currentJobList.map((value, index) => ( currentJobList.map((value, index) => (
<tr key={index} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"> <tr key={index} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className="py-9"> <td className="py-9">
<div className="flex space-x-2 items-center job-items"> <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center"> <div className="flex space-x-2 items-center job-items">
<img <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
src={dataImage2} <img
alt="data" src={dataImage2}
className="w-full h-full" alt="data"
/> className="w-full h-full"
</div> />
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
{value.title}
</h1>
<div>
{value.description}
</div> </div>
<span className="text-sm text-thin-light-gray"> <div className="flex flex-col">
Price: <span className="text-purple">{value.price*0.01}</span> <h1 className="font-bold text-xl text-dark-gray dark:text-white">
</span> {value.title}
<span className="text-sm text-thin-light-gray"> </h1>
Duration: <span className="text-purple"> {value.timeline_days} day(s)</span> <div>
</span> {value.description}
</div>
<span className="text-sm text-thin-light-gray">
Price: <span className="text-purple">{value.price*0.01}</span>
</span>
<span className="text-sm text-thin-light-gray">
Duration: <span className="text-purple"> {value.timeline_days} day(s)</span>
</span>
</div>
</div> </div>
</div>
<div className="job-sub-menu mt-2 flex flex-nowrap justify-start sm:justify-end items-center"> <div className="min-w-[110px] max-w-[110px] bg-yellow-300 mx-2 rounded-md flex flex-nowrap space-x-2 justify-center items-center self-end">
<div className="bg-yellow-300 mx-2 rounded-md"> <button type="button" className="p-2 w-[60px] h-11" onClick={()=>{setDeleteJobPopout({show:true, data:value})}}>[Delete]</button>
<button type="button" className="p-2 w-[60px] h-11" onClick={()=>{setDeleteJobPopout({show:true, data:value})}}>[Delete]</button> | <span>|</span>
<button type="button" className="p-2 w-[40px] h-11">Edit</button> <button type="button" className="p-2 w-[40px] h-11">Edit</button>
</div> </div>
</div> </div>
+169 -183
View File
@@ -1,4 +1,4 @@
import { Link, useLocation, useNavigate } from "react-router-dom"; import {Link} from 'react-router-dom'
import Icons from "../Helpers/Icons"; import Icons from "../Helpers/Icons";
import bank1 from "../../assets/images/bank-1.png"; import bank1 from "../../assets/images/bank-1.png";
import bank2 from "../../assets/images/bank-2.png"; import bank2 from "../../assets/images/bank-2.png";
@@ -8,194 +8,180 @@ import Accordion from "../Helpers/Accordion";
export default function WalletHeader(props) { export default function WalletHeader(props) {
// debugger; // debugger;
//props.myWalletList.result_list //props.myWalletList.result_list
let { pathname } = useLocation(); return (
let navigate = useNavigate(); <>
return ( <div
<> className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-purple pr-1.5 pl-4">
<div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-purple pr-1.5 pl-4"> <div
<div onClick={() => props.handlerBalance()}
onClick={() => props.handlerBalance()} className="flex items-center lg:justify-between justify-center w-full h-full"
className="flex items-center lg:justify-between justify-center w-full h-full" >
> <span className="lg:block hidden">
<span className="lg:block hidden"> <Icons name="wallet"/>
<Icons name="wallet" /> </span>
</span> <p className="lg:text-xl text-lg font-bold text-white">
<p className="lg:text-xl text-lg font-bold text-white">Wallet</p> Wallet
<span className="lg:block hidden"> </p>
<Icons name="deep-plus" /> <span className="lg:block hidden">
</span> <Icons name="deep-plus"/>
</div> </span>
<div </div>
className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${ <div
props.balanceDropdown ? "active" : "" className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
}`} props.balanceDropdown ? "active" : ""
> }`}
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6"> >
<h3 className="text-xl font-bold text-dark-gray dark:text-white"> <div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
Wallet <h3 className="text-xl font-bold text-dark-gray dark:text-white">
</h3> Wallet
</div> </h3>
<div className="content px-7 pb-7">
<ul>
{props.myWalletList &&
props.myWalletList?.result_list?.length > 0 &&
props.myWalletList.result_list.map((value, index) => (
<li
key={index}
className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
>
<div className="sm:flex justify-between items-center">
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
<img src={bank1} alt="" />
</div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium">
{value.description}
</p>
</div>
</div>
<div>
<p className="eth text-xl font-bold text-purple">
{(value.amount * 0.01).toFixed(2)} {value.code}
</p>
<p className="usd text-base text-thin-light-gray text-right">
{/*(773.69 USD)*/}
</p>
</div>
</div> </div>
</li> <div className="content px-7 pb-7">
))} <ul>
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/} {props.myWalletList &&
{/* <div className="sm:flex justify-between items-center">*/} props.myWalletList?.result_list?.length > 0 &&
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/} props.myWalletList.result_list.map((value, index) => (
{/* <div*/} <li key={index} className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/} <div className="sm:flex justify-between items-center">
{/* <img src={bank1} alt=""/>*/} <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
{/* </div>*/} <div
{/* <div className="name">*/} className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/} <img src={bank1} alt=""/>
{/* MetaMask*/} </div>
{/* </p>*/} <div className="name">
{/* </div>*/} <p className="text-base text-dark-gray dark:text-white font-medium">
{/* </div>*/} {value.description}
{/* <div>*/} </p>
{/* <p className="eth text-xl font-bold text-purple">*/} </div>
{/* 75,320 ETH*/} </div>
{/* </p>*/} <div>
{/* <p className="usd text-base text-thin-light-gray text-right">*/} <p className="eth text-xl font-bold text-purple">
{/* (773.69 USD)*/} {(value.amount*0.01).toFixed(2)} {value.code}
{/* </p>*/} </p>
{/* </div>*/} <p className="usd text-base text-thin-light-gray text-right">
{/* </div>*/} {/*(773.69 USD)*/}
{/*</li>*/} </p>
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/} </div>
{/* <div className="sm:flex justify-between items-center">*/} </div>
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/} </li>
{/* <div*/} ))}
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
{/* <img src={bank2} alt=""/>*/} {/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
{/* </div>*/} {/* <div className="sm:flex justify-between items-center">*/}
{/* <div className="name">*/} {/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/} {/* <div*/}
{/* Coinbase Wallet*/} {/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
{/* </p>*/} {/* <img src={bank1} alt=""/>*/}
{/* </div>*/} {/* </div>*/}
{/* </div>*/} {/* <div className="name">*/}
{/* <div>*/} {/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
{/* <p className="eth text-xl font-bold text-purple">*/} {/* MetaMask*/}
{/* 56,124 ETH*/} {/* </p>*/}
{/* </p>*/} {/* </div>*/}
{/* <p className="usd text-base text-thin-light-gray text-right">*/} {/* </div>*/}
{/* (773.69 USD)*/} {/* <div>*/}
{/* </p>*/} {/* <p className="eth text-xl font-bold text-purple">*/}
{/* </div>*/} {/* 75,320 ETH*/}
{/* </div>*/} {/* </p>*/}
{/*</li>*/} {/* <p className="usd text-base text-thin-light-gray text-right">*/}
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/} {/* (773.69 USD)*/}
{/* <div className="sm:flex justify-between items-center">*/} {/* </p>*/}
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/} {/* </div>*/}
{/* <div*/} {/* </div>*/}
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/} {/*</li>*/}
{/* <img src={bank3} alt=""/>*/} {/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
{/* </div>*/} {/* <div className="sm:flex justify-between items-center">*/}
{/* <div className="name">*/} {/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/} {/* <div*/}
{/* Bitski*/} {/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
{/* </p>*/} {/* <img src={bank2} alt=""/>*/}
{/* </div>*/} {/* </div>*/}
{/* </div>*/} {/* <div className="name">*/}
{/* <div>*/} {/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
{/* <p className="eth text-xl font-bold text-purple">*/} {/* Coinbase Wallet*/}
{/* 99,123 ETH*/} {/* </p>*/}
{/* </p>*/} {/* </div>*/}
{/* <p className="usd text-base text-thin-light-gray text-right">*/} {/* </div>*/}
{/* (773.69 USD)*/} {/* <div>*/}
{/* </p>*/} {/* <p className="eth text-xl font-bold text-purple">*/}
{/* </div>*/} {/* 56,124 ETH*/}
{/* </div>*/} {/* </p>*/}
{/*</li>*/} {/* <p className="usd text-base text-thin-light-gray text-right">*/}
{/*<li className="content-item py-5">*/} {/* (773.69 USD)*/}
{/* <div className="sm:flex justify-between items-center">*/} {/* </p>*/}
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/} {/* </div>*/}
{/* <div*/} {/* </div>*/}
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/} {/*</li>*/}
{/* <img src={bank4} alt=""/>*/} {/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
{/* </div>*/} {/* <div className="sm:flex justify-between items-center">*/}
{/* <div className="name">*/} {/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/} {/* <div*/}
{/* WalletConnect*/} {/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
{/* </p>*/} {/* <img src={bank3} alt=""/>*/}
{/* </div>*/} {/* </div>*/}
{/* </div>*/} {/* <div className="name">*/}
{/* <div>*/} {/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
{/* <p className="eth text-xl font-bold text-purple">*/} {/* Bitski*/}
{/* 43,728 ETH*/} {/* </p>*/}
{/* </p>*/} {/* </div>*/}
{/* <p className="usd text-base text-thin-light-gray text-right">*/} {/* </div>*/}
{/* (773.69 USD)*/} {/* <div>*/}
{/* </p>*/} {/* <p className="eth text-xl font-bold text-purple">*/}
{/* </div>*/} {/* 99,123 ETH*/}
{/* </div>*/} {/* </p>*/}
{/*</li>*/} {/* <p className="usd text-base text-thin-light-gray text-right">*/}
</ul> {/* (773.69 USD)*/}
<div className="add-money-btn flex justify-center items-center mt-3"> {/* </p>*/}
{/* <button {/* </div>*/}
onClick={() => { {/* </div>*/}
if(pathname == '/my-wallet') props.setBalanceDropdown.toggle() {/*</li>*/}
else navigate('/my-wallet', {replace: true}) {/*<li className="content-item py-5">*/}
}} {/* <div className="sm:flex justify-between items-center">*/}
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
{/* <div*/}
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
{/* <img src={bank4} alt=""/>*/}
{/* </div>*/}
{/* <div className="name">*/}
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
{/* WalletConnect*/}
{/* </p>*/}
{/* </div>*/}
{/* </div>*/}
{/* <div>*/}
{/* <p className="eth text-xl font-bold text-purple">*/}
{/* 43,728 ETH*/}
{/* </p>*/}
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
{/* (773.69 USD)*/}
{/* </p>*/}
{/* </div>*/}
{/* </div>*/}
{/*</li>*/}
</ul>
<div className="add-money-btn flex justify-center items-center mt-3">
{/* <button
onClick={() => props.addMoneyHandler()}
type="button" type="button"
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white" className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
> >
Manage Manage
</button> */} </button> */}
<Link <Link to='/my-wallet' className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">Manage</Link>
to="/my-wallet" </div>
onClick={() => { </div>
if (pathname == "/my-wallet") </div>
props.setBalanceDropdown.toggle();
else navigate("/my-wallet", { replace: true });
}}
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
Manage
</Link>
</div> </div>
</div> {/*<div*/}
</div> {/* className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple">*/}
</div> {/* <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
{/*<div*/} {/* <p className="lg:text-xl text-lg font-bold text-white">*/}
{/* className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple">*/} {/* $ 234,435.34*/}
{/* <div className="flex items-center lg:justify-between justify-center w-full h-full">*/} {/* </p>*/}
{/* <p className="lg:text-xl text-lg font-bold text-white">*/} {/* </div>*/}
{/* $ 234,435.34*/} {/*</div>*/}
{/* </p>*/} <div className="lg:hidden block"></div>
{/* </div>*/} </>);
{/*</div>*/}
<div className="lg:hidden block"></div>
</>
);
} }
+2 -12
View File
@@ -1,5 +1,5 @@
import React, { useContext,useState, useEffect } from "react"; import React, { useContext,useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom"; import { Link } from "react-router-dom";
import bank1 from "../../assets/images/bank-1.png"; import bank1 from "../../assets/images/bank-1.png";
import bank2 from "../../assets/images/bank-2.png"; import bank2 from "../../assets/images/bank-2.png";
import bank3 from "../../assets/images/bank-3.png"; import bank3 from "../../assets/images/bank-3.png";
@@ -91,15 +91,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
setToggleNotification.toggle() setToggleNotification.toggle()
} }
// getting the location of head
let {pathname} = useLocation()
const handleWalletBtn = () => {
if (pathname === "/my-wallet"){
setbalanceValue.set(false)
} else return balanceDropdown
}
// User Profile // User Profile
let {firstname, lastname, email, profile_pic} = userDetails let {firstname, lastname, email, profile_pic} = userDetails
let userEmail = email.split('@')[0] let userEmail = email.split('@')[0]
@@ -243,8 +234,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
myWalletList={myWalletList} myWalletList={myWalletList}
handlerBalance={handlerBalance} handlerBalance={handlerBalance}
balanceDropdown={balanceDropdown} balanceDropdown={balanceDropdown}
addMoneyHandler={addMoneyHandler} addMoneyHandler={addMoneyHandler} />
setBalanceDropdown = {setbalanceValue} />
{/* notification */} {/* notification */}
<div className="user-notification lg:block hidden relative"> <div className="user-notification lg:block hidden relative">
<div <div