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

Merge branch 'layout-margin-space' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2024-04-09 09:36:09 +00:00
committed by Gogs
parent 4014a84e1a 3f17920bd0
commit a1d96488bf
4 changed files with 13 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Home/index.jsx
+1 -1
View File
@@ -67,7 +67,7 @@ export default function Home(props) {
return ( return (
<Layout> <Layout>
<div className="home-page-wrapper"> <div className="w-full">
{userDetails && userDetails?.account_type == "FAMILY" ? ( {userDetails && userDetails?.account_type == "FAMILY" ? (
<FamilyDash <FamilyDash
account={userDetails} account={userDetails}
src/components/MyWallet/WalletBox.jsx
+2 -2
View File
@@ -15,14 +15,14 @@ export default function WalletBox({ wallet, payment, countries }) {
return ( return (
<div className="my-wallet-wrapper w-full mb-10"> <div className="my-wallet-wrapper w-full mb-10">
<div className="main-wrapper w-full"> <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 ? ( {loading ? (
<div className="w-full h-full flex items-center justify-center"> <div className="w-full h-full flex items-center justify-center">
<LoadingSpinner size="16" color="sky-blue" /> <LoadingSpinner size="16" color="sky-blue" />
</div> </div>
) : ( ) : (
data.length > 0 && data.map((item) => ( data.length > 0 && data.map((item) => (
<div key={item.wallet_uid} className="max-w-[450px] 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} /> <WalletItemCard walletItem={item} payment={payment} countries={countries} />
</div> </div>
)) ))
src/components/Partials/Layout.jsx
+9 -29
View File
@@ -31,54 +31,34 @@ export default function Layout({ children }) {
navigate("/login", { replace: true }); 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 ( return (
<> <>
<div className="nft-main-wrapper-layout container mx-auto"> <div className="relative w-full max-w-[2000px] nft-main-wrapper-layout 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={`nft-wrapper-layout-container w-full min-h-screen flex`}>
{/* sidebar */} {/* 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} /> <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />
</div> </div>
{MobileSideBar && ( {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 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} /> <MobileSidebar logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} myJobList={userJobList} />
</div> </div>
{/* end sidebar */} {/* 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 */} {/* 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 "> <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} /> <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
</div> </div>
{/* container */} {/* 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="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%] w-full"> <div className="flex-[80%] 2xl:flex-[85%] w-full">
{children && children} {children && children}
</div> </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} /> <RightSideBar myJobList={userJobList} />
</div> </div>
</div> </div>
src/components/Partials/Sidebar.jsx
+1 -1
View File
@@ -275,7 +275,7 @@ export default function Sidebar({
<button <button
onClick={logoutModalHandler} onClick={logoutModalHandler}
type="button" 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=""> <span className="">
<Icons name="new-logout" /> <Icons name="new-logout" />