Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit fb9081c5 by Chetan
Options

vendor and admin panel new ui

1 parent c2689bd5
Inline Side-by-side
Showing 30 changed files with 783 additions and 451 deletions
components/admin/GiftcardListing.js
......@@ -11,82 +11,78 @@ const GiftcardListing = () => {
return (
<Fragment>
<div className="row">
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2>Gift Card Requests</h2>
<p>View all the gift cards</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
</Button>
</div>
</div>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Name</th>
<th>Amount</th>
<th>Phone Number</th>
<th>Sender Email Address</th>
<th>Receiver Email Address</th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td>Michael Anderson</td>
<td>$ 499</td>
<td>+91 9865 43210</td>
<td>adventuretrails@example.com</td>
<td>john@example.com</td>
<td>
<div className="actions">
<div className="ellipse" onClick={() => toggleMenu(index)}>
<Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" />
</div>
{showMenuIndex === index && (
<div className="menu">
<ul>
<li>Delete</li>
</ul>
</div>
)}
</div>
</td>
</tr>
))}
<tr>
<td colSpan={7}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
<div className="p-5">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2 style={{ fontSize: 28 }}>Gift Card Requests</h2>
<p>View all the gift cards</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
</Button>
</div>
</div>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Name</th>
<th>Amount</th>
<th>Phone Number</th>
<th>Sender Email Address</th>
<th>Receiver Email Address</th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td>Michael Anderson</td>
<td>$ 499</td>
<td>+91 9865 43210</td>
<td>adventuretrails@example.com</td>
<td>john@example.com</td>
<td>
<div className="actions">
<div className="ellipse" onClick={() => toggleMenu(index)}>
<Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" />
</div>
{showMenuIndex === index && (
<div className="menu">
<ul>
<li>Delete</li>
</ul>
</div>
)}
</div>
</td>
</tr>
))}
<tr>
<td colSpan={7}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</Fragment>
);
......
components/admin/Reviews.js
......@@ -184,7 +184,7 @@ const Reviews = ({ isVendor }) => {
return (
<Fragment>
<div className="row">
<div className="p-5">
{!showReviews ? <Table columns={columns} dataSource={data} /> : <ReviewsListing setshowReviews={setshowReviews} activityId={activityId} isVendor={isVendor} />}
</div>
</Fragment>
......
components/admin/VendorListing.js
......@@ -182,22 +182,24 @@ const VendorListing = () => {
return (
<Fragment>
<div className={restriction ? "overlay" : ""}>
{restriction ? (
<div className="d-flex justify-content-center align-items-center" style={{ color: "#FFF", fontSize: "50px", height: "100%" }}>
Access restricted! Only admin is allowed to view the data.
</div>
) : (
<div>
{!showDetail ? (
<Table loading={loading} columns={columns} dataSource={data} />
) : (
// <VendorDetailModal />
<VendorDetails setShowDetail={setShowDetail} showDetail={showDetail} detail={detail} />
)}
<div></div>
</div>
)}
<div className="p-5">
<div className={restriction ? "overlay" : ""}>
{restriction ? (
<div className="d-flex justify-content-center align-items-center" style={{ color: "#FFF", fontSize: "50px", height: "100%" }}>
Access restricted! Only admin is allowed to view the data.
</div>
) : (
<div>
{!showDetail ? (
<Table loading={loading} columns={columns} dataSource={data} />
) : (
// <VendorDetailModal />
<VendorDetails setShowDetail={setShowDetail} showDetail={showDetail} detail={detail} />
)}
<div></div>
</div>
)}
</div>
</div>
</Fragment>
// <Fragment>
......
components/gift-card/GiftCard.js
......@@ -81,7 +81,7 @@ const GiftCard = () => {
<div className="col-md-5">
<div className="gift-card-lt">
<div className="gift-box">
<img src="/images/zango-logo.svg" alt="Gift Card" />
<img src="/images/gift-card.svg" alt="Gift Card" />
</div>
<h3>Amount: ${amount}</h3>
</div>
......
components/layout/Footer.js
......@@ -37,7 +37,7 @@ const Footer = () => {
<div className="col-md-9">
<div className="footer-logo">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/Zango-logo-footer.svg" />
<Image layout="fill" className="image img-fluid" alt="" src="/images/Footer-logo.svg" />
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </div>
......
components/layout/Generics/GenericHeader.js 0 → 100644
import { Avatar, Skeleton } from "antd";
import Image from "next/image"
import { useRouter } from "next/router";
import { signOut } from "next-auth/react";
import { UserOutlined } from '@ant-design/icons';
export const GenericHeader = ({ venderBusiness, venderEmail, adminName, adminEmail, isRoute }) => {
const router = useRouter();
const VenderDetails = () => {
return <div>
{!venderBusiness && !venderEmail ?
<div className="d-flex align-items-center gap-2">
<Skeleton.Image active style={{ height: 50, width: 70 }} />
<Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
</div>
:
<div className="d-flex align-items-center gap-3">
<Skeleton.Image style={{ height: 50, width: 70 }} />
<div className="d-flex flex-column">
<p className="m-0">{venderBusiness}</p>
<p className="m-0">{venderEmail}</p>
</div>
</div>
}
</div>
}
const AdminDetails = () => {
return <div>
{!adminName && !adminEmail ?
<div className="d-flex align-items-center gap-2">
<Skeleton.Avatar active size={40} />
<Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
</div>
:
<div className="d-flex align-items-center gap-3">
<Avatar icon={<UserOutlined />} active size={40} />
<div className="d-flex flex-column">
<p className="m-0">{adminName}</p>
<p className="m-0">{adminEmail}</p>
</div>
</div>
}
</div>
}
return (
<div
className="bg-light px-5 d-flex align-items-center justify-content-between w-100"
style={{
height: 80,
boxshadow: '0px 1px 9px -3px rgba(0,0,0,0.56)',
'-webkit-box-shadow': '0px 1px 9px -3px rgba(0,0,0,0.56)',
'-moz-box-shadow': '0px 4px 1px -3px rgba(0,0,0,0.56)'
}}
>
<Image loading="lazy" objectFit="contain" height={50} width={100} alt="" className="" src="/images/main-logo.svg" />
<div className="d-flex align-items-center gap-5">
{isRoute === 'vendor' && <VenderDetails />}
{isRoute === 'admin' && <AdminDetails />}
<button
className="btn btn-primary rounded-pill"
style={{ height: 40 }}
onClick={async () => {
signOut({ redirect: false });
await router.push("/");
window.location.reload();
}}
>
Logout
</button>
</div>
</div>
)
}
\ No newline at end of file
components/layout/Generics/GenericLayout.js 0 → 100644
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { loadUser } from "../../../redux/actions/userActions";
import { getVendorDetails } from "../../../redux/actions/vendorActions";
import { GenericHeader } from "./GenericHeader";
import { GenericSidebar } from "./GenericSidebar";
import { getActivitiesForAdmin } from "../../../redux/actions/activityAction";
import { useRouter } from "next/router";
export const GenericLayout = ({ children }) => {
const dispatch = useDispatch();
const router = useRouter();
const [isRoute, setIsRoute] = useState("");
useEffect(() => {
const adminUri = router.pathname.includes('admin');
const vendorUri = router.pathname.includes('vendor');
setIsRoute(adminUri ? 'admin' : vendorUri ? 'vendor' : '');
console.log('isRoute:', isRoute);
}, [router.pathname]);
useEffect(() => {
dispatch(loadUser());
dispatch(getVendorDetails());
dispatch(getActivitiesForAdmin({}));
}, []);
const { vendorDetails } = useSelector(state => state.vendorDetails);
const { loadedUser } = useSelector(state => state.loadedUser);
return (
<div
style={{
height: '100vh',
width: '100vw'
}}
>
<GenericHeader
venderBusiness={vendorDetails?.attributes?.businessName}
venderEmail={vendorDetails?.attributes?.email}
adminName={loadedUser?.username}
adminEmail={loadedUser?.email}
isRoute={isRoute}
/>
<div
className="w-100 d-flex"
style={{
height: 'calc(100vh - 80px)',
}}
>
<GenericSidebar isRoute={isRoute} />
<div style={{
width: '85%',
overflowY: 'auto'
}}>
{children}
</div>
</div>
</div>
)
}
\ No newline at end of file
components/layout/Generics/GenericSidebar.js 0 → 100644
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import React from 'react'
export const GenericSidebar = ({isRoute}) => {
const router = useRouter();
const VenderRoutes = () => {
return (
<ul>
<li className={router.pathname === "/vendor/dashboard" ? "active" : ""}>
<Link href="/vendor/dashboard">
<span className="d-flex cursor-pointer">
<Image className="" alt="" width={22} height={15} src="/images/vendor/icon-dashboard.svg" />
<div className="mx-2">
Dashboard
</div>
</span>
</Link>
</li>
<li className={router.pathname === "/vendor/activity-details" ? "active" : ""}>
<Link href="/vendor/activity-details">
<span className="d-flex cursor-pointer">
<Image className="" alt="" width={25} height={18} src="/images/vendor/add-activity.svg" />
<div className="mx-2">
Add Activity
</div>
</span>
</Link>
</li>
<li className={router.pathname === "/vendor/business-details" ? "active" : ""}>
<Link href="/vendor/business-details">
<span className="d-flex cursor-pointer">
<Image className="" alt="" width={22} height={15} src="/images/vendor/icon-dashboard.svg" />
<div className="mx-2">
Business Details
</div>
</span>
</Link>
</li>
<li className={router.pathname === "/vendor/enquiries" ? "active" : ""}>
<Link href="/vendor/enquiries">
<span className="d-flex cursor-pointer">
<Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
<div className="mx-2">
Enquiries
</div>
</span>
</Link>
</li>
<li className={router.pathname === "/vendor/activities" ? "active" : ""}>
<Link href="/vendor/activities">
<span className="d-flex cursor-pointer">
<Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
<div className="mx-2">
Activities
</div>
</span>
</Link>
</li>
<li className={router.pathname === "/vendor/reviews" ? "active" : ""}>
<Link href="/vendor/reviews">
<span className="d-flex cursor-pointer">
<Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
<div className="mx-2">
Reviews
</div>
</span>
</Link>
</li>
</ul>
)
}
const AdminRoutes = () => {
return (
<ul>
<li className={router.pathname === "/admin/activities" ? "active" : ""}>
<Link href="/admin/activities">
<span className="d-flex cursor-pointer">
<Image className="" alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
<div className="mx-2">
Activities
</div>
</span>
</Link>
</li>
<li className={router.pathname === "/admin/vendors" ? "active" : ""}>
<Link href="/admin/vendors">
<span className="d-flex cursor-pointer">
<Image className="" alt="" width={25} height={18} src="/images/admin/icon-user.svg" />
<div className="mx-2">
Vendor
</div>
</span>
</Link>
</li>
<li className={router.pathname === "/admin/giftcards" ? "active" : ""}>
<Link href="/admin/giftcards">
<span className="d-flex cursor-pointer">
<Image className="" alt="" width={22} height={15} src="/images/admin/icon-gift.svg" />
<div className="mx-2">
Gift Card
</div>
</span>
</Link>
</li>
<li className={router.pathname === "/admin/reviews" ? "active" : ""}>
<Link href="/admin/reviews">
<span className="d-flex cursor-pointer">
<Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
<div className="mx-2">
Reviews
</div>
</span>
</Link>
</li>
</ul>
)
}
return (
<div className='h-100 d-flex flex-column justify-content-between bg-z-primary primary-sidebar' style={{
width: '15%',
boxShadow: '8px 0px 16px -15px rgba(0,0,0,0.25)',
'-webkit-box-shadow': '8px 0px 16px -15px rgba(0,0,0,0.25)',
'-moz-box-shadow': '8px 0px 16px -15px rgba(0,0,0,0.25)',
}}>
{isRoute === 'vendor' && <VenderRoutes />}
{isRoute === 'admin' && <AdminRoutes />}
<div className='px-3 py-2' style={{
borderInlineStart: '4px solid #393e49'
}}>
<p className='text-white m-0' style={{ fontSize: 16 }}>
{isRoute === 'admin' ? 'Admin' : 'Vendor'}
</p>
</div>
</div>
)
}
\ No newline at end of file
components/layout/Header.js
......@@ -51,7 +51,7 @@ const Header = () => {
<Container fluid>
<Navbar.Brand href="/">
<span className="image-container">
<Image loading="lazy" layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" />
<Image loading="lazy" layout="fill" alt="" className="image img-fluid" src="/images/main-logo.svg" />
</span>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
......
components/vendor/ActivityDetails.js
......@@ -266,7 +266,7 @@ const ActivityDetails = ({ isUpdate }) => {
console.log("activityPeriodState", activityPeriodState);
return (
<Fragment>
<div className="container p-1">
<div className="container p-5">
<div className="row">
<div className="col-12 col-lg-8">
<div className="content-div business-details">
......
components/vendor/ActivityListingRBAC.js
......@@ -430,7 +430,7 @@ export const ActivityListingRBAC = ({ setactivityDetailInfo, setShowActivityDeta
}
};
return (
<div>
<div className="p-5">
<Table rowSelection={rowSelection} columns={columns} dataSource={data} onChange={onChange} />
<Modal
show={rejectPopUp}
......
components/vendor/BusinessDetails.js
......@@ -116,198 +116,199 @@ const BusinessDetails = () => {
// vendorDetails && console.log("vendorData", vendorData, vendorDetails.length > 0);
return (
<Fragment>
{loadedUser && (
<div className="container p-5">
<div className="row">
<div className="col-12 col-lg-8">
<div className="content-div business-details">
<h2>Tell us about your business</h2>
<p>Please have the following ready before you begin</p>
<p>
<FaArrowRight /> Your bank account details for receiving payments from ZanGO
</p>
<p className="mb-4">
<FaArrowRight /> Tax (GST/PAN) details of your business.
</p>
<hr />
<div className="form-container mt-4">
<ApprovalStatus />
<Formik
enableReinitialize
initialValues={{
panNumber: vendorData?.panNumber ? vendorData?.panNumber : "",
panFile: vendorData?.panImage ? vendorData?.panImage : "",
gstNumber: vendorData?.gstNumber ? vendorData?.gstNumber : "",
gstCertificateFile: vendorData?.gstImage ? vendorData?.gstImage : "",
businessName: vendorData?.businessName ? vendorData?.businessName : "",
brandLogoFile: vendorData?.logo ? vendorData?.logo : "",
pincode: vendorData?.pincode ? vendorData?.pincode : "",
country: vendorData?.country ? vendorData?.country : "",
state: vendorData?.state ? vendorData?.state : "",
city: vendorData?.city ? vendorData?.city : "",
addressLine1: vendorData?.addressLine1 ? vendorData?.addressLine1 : "",
addressLine2: vendorData?.addressLine2 ? vendorData?.addressLine2 : ""
}}
validationSchema={businessDetailsValidationSchema}
// enableReinitialize={true}
onSubmit={async values => {
console.log("business details values", values);
const businessDetails = {
pan: values.panNumber,
gst: values.gstNumber,
businessName: values.businessName,
state: values.state,
city: values.city,
pincode: values.pincode,
country: values.country,
addressLine1: values.addressLine1,
addressLine2: values.addressLine2
};
// await dispatch(updateVendorBusinessDetails({businessDetails, }))
<div className="w-100">
{loadedUser && (
<div className="container p-5">
<div className="row">
<div className="col-12 col-lg-8">
<div className="content-div business-details">
<h2>Tell us about your business</h2>
<p>Please have the following ready before you begin</p>
<p>
<FaArrowRight /> Your bank account details for receiving payments from ZanGO
</p>
<p className="mb-4">
<FaArrowRight /> Tax (GST/PAN) details of your business.
</p>
<hr />
<div className="form-container mt-4">
<ApprovalStatus />
<Formik
enableReinitialize
initialValues={{
panNumber: vendorData?.panNumber ? vendorData?.panNumber : "",
panFile: vendorData?.panImage ? vendorData?.panImage : "",
gstNumber: vendorData?.gstNumber ? vendorData?.gstNumber : "",
gstCertificateFile: vendorData?.gstImage ? vendorData?.gstImage : "",
businessName: vendorData?.businessName ? vendorData?.businessName : "",
brandLogoFile: vendorData?.logo ? vendorData?.logo : "",
pincode: vendorData?.pincode ? vendorData?.pincode : "",
country: vendorData?.country ? vendorData?.country : "",
state: vendorData?.state ? vendorData?.state : "",
city: vendorData?.city ? vendorData?.city : "",
addressLine1: vendorData?.addressLine1 ? vendorData?.addressLine1 : "",
addressLine2: vendorData?.addressLine2 ? vendorData?.addressLine2 : ""
}}
validationSchema={businessDetailsValidationSchema}
// enableReinitialize={true}
onSubmit={async values => {
console.log("business details values", values);
const businessDetails = {
pan: values.panNumber,
gst: values.gstNumber,
businessName: values.businessName,
state: values.state,
city: values.city,
pincode: values.pincode,
country: values.country,
addressLine1: values.addressLine1,
addressLine2: values.addressLine2
};
// await dispatch(updateVendorBusinessDetails({businessDetails, }))
const response = await dispatch(getLoggedInVendor());
const response = await dispatch(getLoggedInVendor());
console.log("loggedInVendorReducer", response);
console.log("loggedInVendorReducer", response);
const updateBusinessDetails = await dispatch(updateVendorBusinessDetails({ businessDetails, vendorId: response.id }));
await updateUserApprovalStatus({ status: "pending" });
await dispatch(loadUser());
router.push("/vendor/dashboard");
// console.log("updateBusinessDetails", updateBusinessDetails);
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
<Form
onSubmit={e => {
e.preventDefault();
handleSubmit();
}}
>
<h4>Vendor Business Information</h4>
<div className="mt-3">
<p className="textH">Business documents</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Enter Business PAN No.</label>
<input type="text" name="panNumber" onChange={handleChange} onBlur={handleBlur} value={values.panNumber} disabled={disableFields} />
{errors.panNumber && touched.panNumber && <span className="form-error">{errors.panNumber}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Upload PAN</label>
<div className="custom-file">
<input
disabled={disableFields}
type="file"
className="custom-file-input"
id="panFile"
name="panFile"
onChange={event => {
if (event) {
const file = event.currentTarget.files[0];
setFieldValue("panFile", file);
}
}}
onBlur={handleBlur}
// value={values.panFile}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor="panFile">
Upload
</label>
const updateBusinessDetails = await dispatch(updateVendorBusinessDetails({ businessDetails, vendorId: response.id }));
await updateUserApprovalStatus({ status: "pending" });
await dispatch(loadUser());
router.push("/vendor/dashboard");
// console.log("updateBusinessDetails", updateBusinessDetails);
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
<Form
onSubmit={e => {
e.preventDefault();
handleSubmit();
}}
>
<h4>Vendor Business Information</h4>
<div className="mt-3">
<p className="textH">Business documents</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Enter Business PAN No.</label>
<input type="text" name="panNumber" onChange={handleChange} onBlur={handleBlur} value={values.panNumber} disabled={disableFields} />
{errors.panNumber && touched.panNumber && <span className="form-error">{errors.panNumber}</span>}
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.panFile && touched.panFile && <span className="form-error">{errors.panFile}</span>}
{values.panFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
<p className="textS m-0">{values.panFile.name}</p>
<FaTimes
style={{ cursor: "pointer" }}
onClick={() => {
setFieldValue("panFile", "");
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Upload PAN</label>
<div className="custom-file">
<input
disabled={disableFields}
type="file"
className="custom-file-input"
id="panFile"
name="panFile"
onChange={event => {
if (event) {
const file = event.currentTarget.files[0];
setFieldValue("panFile", file);
}
}}
onBlur={handleBlur}
// value={values.panFile}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor="panFile">
Upload
</label>
</div>
)}
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.panFile && touched.panFile && <span className="form-error">{errors.panFile}</span>}
{values.panFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
<p className="textS m-0">{values.panFile.name}</p>
<FaTimes
style={{ cursor: "pointer" }}
onClick={() => {
setFieldValue("panFile", "");
}}
/>
</div>
)}
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>GST Number</label>
<input disabled={disableFields} type="text" name="gstNumber" onChange={handleChange} onBlur={handleBlur} value={values.gstNumber} />
{errors.gstNumber && touched.gstNumber && <span className="form-error">{errors.gstNumber}</span>}
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>GST Number</label>
<input disabled={disableFields} type="text" name="gstNumber" onChange={handleChange} onBlur={handleBlur} value={values.gstNumber} />
{errors.gstNumber && touched.gstNumber && <span className="form-error">{errors.gstNumber}</span>}
</div>
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>GST Certificate</label>
<div className="custom-file">
<input
disabled={disableFields}
type="file"
className="custom-file-input"
id="gstCertificateFile"
name="gstCertificateFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.gstCertificateFile}
/>
<label className="custom-file-label" htmlFor="gstCertificateFile">
Upload
</label>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>GST Certificate</label>
<div className="custom-file">
<input
disabled={disableFields}
type="file"
className="custom-file-input"
id="gstCertificateFile"
name="gstCertificateFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.gstCertificateFile}
/>
<label className="custom-file-label" htmlFor="gstCertificateFile">
Upload
</label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.gstCertificateFile && touched.gstCertificateFile && <span className="form-error">{errors.gstCertificateFile}</span>}
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.gstCertificateFile && touched.gstCertificateFile && <span className="form-error">{errors.gstCertificateFile}</span>}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Business Name</label>
<input disabled={disableFields} type="text" name="businessName" onChange={handleChange} onBlur={handleBlur} value={values.businessName} />
{errors.businessName && touched.businessName && <span className="form-error">{errors.businessName}</span>}
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Business Name</label>
<input disabled={disableFields} type="text" name="businessName" onChange={handleChange} onBlur={handleBlur} value={values.businessName} />
{errors.businessName && touched.businessName && <span className="form-error">{errors.businessName}</span>}
</div>
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Brand Logo</label>
<div className="custom-file">
<input
disabled={disableFields}
type="file"
className="custom-file-input"
id="brandLogoFile"
name="brandLogoFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.brandLogoFile}
/>
<label className="custom-file-label" htmlFor="brandLogoFile">
Upload
</label>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Brand Logo</label>
<div className="custom-file">
<input
disabled={disableFields}
type="file"
className="custom-file-input"
id="brandLogoFile"
name="brandLogoFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.brandLogoFile}
/>
<label className="custom-file-label" htmlFor="brandLogoFile">
Upload
</label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>}
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>}
</div>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Business Address</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Pincode</label>
{/* <AsyncTypeahead
<hr />
<div className="mt-4">
<p className="textH">Business Address</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Pincode</label>
{/* <AsyncTypeahead
onSearch={handleSearch}
minLength={3}
value={values.pincode}
......@@ -328,105 +329,106 @@ const BusinessDetails = () => {
console.log("input change", e);
}}
/> */}
<input disabled={disableFields} type="text" name="pincode" onChange={handleChange} onBlur={handleBlur} value={values.pincode} />
{errors.pincode && touched.pincode && <span className="form-error">{errors.pincode}</span>}
<input disabled={disableFields} type="text" name="pincode" onChange={handleChange} onBlur={handleBlur} value={values.pincode} />
{errors.pincode && touched.pincode && <span className="form-error">{errors.pincode}</span>}
</div>
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Country</label>
<input disabled={disableFields} type="text" name="country" onChange={handleChange} onBlur={handleBlur} value={values.country} />
{errors.country && touched.country && <span className="form-error">{errors.country}</span>}
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Country</label>
<input disabled={disableFields} type="text" name="country" onChange={handleChange} onBlur={handleBlur} value={values.country} />
{errors.country && touched.country && <span className="form-error">{errors.country}</span>}
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>State</label>
<input disabled={disableFields} type="text" name="state" onChange={handleChange} onBlur={handleBlur} value={values.state} />
{errors.state && touched.state && <span className="form-error">{errors.state}</span>}
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>State</label>
<input disabled={disableFields} type="text" name="state" onChange={handleChange} onBlur={handleBlur} value={values.state} />
{errors.state && touched.state && <span className="form-error">{errors.state}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>City</label>
<input disabled={disableFields} type="text" name="city" onChange={handleChange} onBlur={handleBlur} value={values.city} />
{errors.city && touched.city && <span className="form-error">{errors.city}</span>}
</div>
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>City</label>
<input disabled={disableFields} type="text" name="city" onChange={handleChange} onBlur={handleBlur} value={values.city} />
{errors.city && touched.city && <span className="form-error">{errors.city}</span>}
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Address Line 1</label>
<input disabled={disableFields} type="text" name="addressLine1" onChange={handleChange} onBlur={handleBlur} value={values.addressLine1} />
{errors.addressLine1 && touched.addressLine1 && <span className="form-error">{errors.addressLine1}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Address Line 2</label>
<input disabled={disableFields} type="text" name="addressLine2" onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} />
{errors.addressLine2 && touched.addressLine2 && <span className="form-error">{errors.addressLine2}</span>}
</div>
</div>
</div>
</div>
<div className="row">
<div className="row mt-3 mb-1">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Address Line 1</label>
<input disabled={disableFields} type="text" name="addressLine1" onChange={handleChange} onBlur={handleBlur} value={values.addressLine1} />
{errors.addressLine1 && touched.addressLine1 && <span className="form-error">{errors.addressLine1}</span>}
<Button disabled={disableFields} type="submit" className="btn btn-primary btn-submit">
Send for Approval
</Button>
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Address Line 2</label>
<input disabled={disableFields} type="text" name="addressLine2" onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} />
{errors.addressLine2 && touched.addressLine2 && <span className="form-error">{errors.addressLine2}</span>}
<Button disabled={false} onClick={() => {
router.push("/vendor/dashboard")
}} className="btn btn-primary btn-submit">
Go to dashboard
</Button>
</div>
</div>
</div>
</div>
<div className="row mt-3 mb-1">
<div className="col-12 col-lg-5">
<div className="input-group">
<Button disabled={disableFields} type="submit" className="btn btn-primary btn-submit">
Send for Approval
</Button>
</div>
</div>
<div className="col-12 col-lg-5">
<div className="input-group">
<Button disabled={false} onClick={()=> {
router.push("/vendor/dashboard")
}} className="btn btn-primary btn-submit">
Go to dashboard
</Button>
</div>
</div>
</div>
</Form>
)}
</Formik>
</Form>
)}
</Formik>
</div>
</div>
</div>
</div>
<div className="col-12 col-lg-4">
<div className="content-div help-center">
<h2>Help Center</h2>
<ul className="helplist">
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/call.svg" width="32" height="32" />
<p>+1 (407) 8798 789</p>
</li>
</ul>
<div className="col-12 col-lg-4">
<div className="content-div help-center">
<h2>Help Center</h2>
<ul className="helplist">
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/call.svg" width="32" height="32" />
<p>+1 (407) 8798 789</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
)}
)}
</div>
</Fragment>
);
};
......
components/vendor/OrderListing.js
......@@ -139,24 +139,24 @@ const OrderListing = () => {
return (
<Fragment>
<div className="row">
{/* <div className="row">
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2>Orders</h2>
<div className="d-flex align-items-center justify-content-between px-2 mb-2"> */}
<div className="mb-3">
<h2 style={{fontSize: 28}}>Orders</h2>
<p>View all the orders</p>
</div>
<div>
{/* <Button type="button" variant="" className="btnAdd m-0">
{/* <div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
</Button> */}
</Button>
</div>
</div>
</div> */}
<Table columns={columns} dataSource={data} onChange={onChange} />
</div>
{/* </div>
</div>
</div>
</div> */}
<Modal
show={showEnquiryModal}
onHide={() => {
......
pages/admin/activities/index.js
......@@ -9,6 +9,7 @@ import { getAllCategories, getAllSubCategories } from "../../../redux/actions/ca
import { useDispatch } from "react-redux";
import { getActivitiesForAdmin } from "../../../redux/actions/activityAction";
import ActivityDetailsModal from "../../../components/admin/ActivityDetailsModal";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
export default function ActivityListingPage() {
const [activityDetailInfo, setactivityDetailInfo] = useState();
......@@ -23,18 +24,20 @@ export default function ActivityListingPage() {
dispatch(getActivitiesForAdmin({}));
}, []);
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
{/* <ActivityListing /> */}
<ActivityListingRBAC setactivityDetailInfo={setactivityDetailInfo} setShowActivityDetailsModal={setShowActivityDetailsModal} />
{showActivityDetailsModal && (
<ActivityDetailsModal show={showActivityDetailsModal} handleClose={handleCloseActivityDetails} activityDetailInfo={activityDetailInfo} />
)}
</div>
</div>
</Layout>
<GenericLayout>
{/* <Layout> */}
{/* <div className="sidebarContainer"> */}
{/* <Sidebar /> */}
{/* <div className="content"> */}
{/* <ActivityListing /> */}
<ActivityListingRBAC setactivityDetailInfo={setactivityDetailInfo} setShowActivityDetailsModal={setShowActivityDetailsModal} />
{showActivityDetailsModal && (
<ActivityDetailsModal show={showActivityDetailsModal} handleClose={handleCloseActivityDetails} activityDetailInfo={activityDetailInfo} />
)}
{/* </div> */}
{/* </div> */}
{/* </Layout> */}
</GenericLayout>
);
}
......
pages/admin/giftcards/index.js
......@@ -2,17 +2,20 @@ import React from "react";
import Layout from "../../../components/layout/Layout";
import Sidebar from "../../../components/layout/AdminDashboardSidebar";
import GiftcardListing from "../../../components/admin/GiftcardListing";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
export default function GiftCardListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<GiftcardListing />
</div>
</div>
</Layout>
// <Layout>
// <div className="sidebarContainer">
// <Sidebar />
// <div className="content">
<GenericLayout>
<GiftcardListing />
</GenericLayout>
// </div>
// </div>
// </Layout>
);
};
pages/admin/reviews/index.js
......@@ -4,19 +4,22 @@ import Sidebar from "../../../components/layout/AdminDashboardSidebar";
import Layout from "../../../components/layout/Layout";
import { getActivitiesByFilters } from "../../../redux/actions/activityAction";
import { wrapper } from "../../../redux/store";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
const ReviewsPage = () => {
return (
<div>
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<Reviews isVendor={false} />
</div>
</div>
</Layout>
</div>
// <div>
// <Layout>
// <div className="sidebarContainer">
// <Sidebar />
// <div className="content">
<GenericLayout>
<Reviews isVendor={false} />
</GenericLayout>
// </div>
// </div>
// </Layout>
// </div>
);
};
......
pages/admin/vendors/index.js
......@@ -6,17 +6,20 @@ import { wrapper } from "../../../redux/store";
import { getAllVendors } from "../../../redux/actions/vendorActions";
import { loadUser } from "../../../redux/actions/userActions";
import { getAllCategories, getAllSubCategories } from "../../../redux/actions/categoriesAction";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
export default function VendorListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<VendorListing />
</div>
</div>
</Layout>
// <Layout>
// <div className="sidebarContainer">
// <Sidebar />
// <div className="content">
<GenericLayout>
<VendorListing />
</GenericLayout>
// </div>
// </div>
// </Layout>
);
}
......
pages/vendor/activities/[id].js
......@@ -12,21 +12,24 @@ import { getActivitiesByVendor, getActivityById } from "../../../redux/actions/a
import { getAllCategories, getAllSubCategories } from "../../../redux/actions/categoriesAction";
import { loadUser } from "../../../redux/actions/userActions";
import { wrapper } from "../../../redux/store";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
const EditActivityDetail = () => {
return (
<Layout>
{/* <ToastContainer position="bottom-right"></ToastContainer> */}
<div className="sidebarContainer">
<Sidebar />
<div className="content">
{/* <ActivityListingRBAC /> */}
<ActivityDetails isUpdate={true} />
{/* <UpdateActivity /> */}
</div>
</div>
</Layout>
<GenericLayout>
<ActivityDetails isUpdate={true} />
</GenericLayout>
// <Layout>
// <ToastContainer position="bottom-right"></ToastContainer>
// <div className="sidebarContainer">
// <Sidebar />
// <div className="content">
// <ActivityListingRBAC />
// <ActivityDetails isUpdate={true} />
// <UpdateActivity />
// </div>
// </div>
// </Layout>
);
};
......
pages/vendor/activities/index.js
......@@ -8,6 +8,7 @@ import { getAllCategories, getAllSubCategories } from "../../../redux/actions/ca
import { getActivitiesByVendor } from "../../../redux/actions/activityAction";
import { loadUser } from "../../../redux/actions/userActions";
import { useDispatch } from "react-redux";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
......@@ -19,14 +20,14 @@ export default function ActivityListingPage() {
}, []);
return (
<Layout>
<div className="sidebarContainer">
<GenericLayout>
{/* <div className="sidebarContainer">
<Sidebar />
<div className="content">
<ActivityListingRBAC />
</div>
</div>
</Layout>
<div className="content"> */}
<ActivityListingRBAC />
{/* </div>
</div> */}
</GenericLayout>
);
}
......
pages/vendor/activity-details/index.js
......@@ -5,27 +5,28 @@ import { getAllCategories, getAllSubCategories } from "../../../redux/actions/ca
import { loadUser } from "../../../redux/actions/userActions";
import { getLoggedInVendor } from "../../../redux/actions/vendorActions";
import { wrapper } from "../../../redux/store";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
export default function ActivityDetailsPage () {
export default function ActivityDetailsPage() {
return (
<Layout>
// <Layout>
<GenericLayout>
<ActivityDetails isUpdate={false} />
</Layout>
</GenericLayout>
);
};
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
await store.dispatch(loadUser());
await store.dispatch(getAllCategories())
// await store.dispatch(getLoggedInVendor())
// await store.dispatch(getAllSubCategories())
return {
props: {}
props: {}
};
});
\ No newline at end of file
});
pages/vendor/business-details/index.js
......@@ -5,6 +5,7 @@ import BusinessDetails from "../../../components/vendor/BusinessDetails";
import { loadUser } from "../../../redux/actions/userActions";
import { getVendorDetails } from "../../../redux/actions/vendorActions";
import { wrapper } from "../../../redux/store";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
......@@ -15,9 +16,11 @@ export default function BusinessDetailsPage() {
}, []);
return (
<Layout>
// <Layout>
<GenericLayout>
<BusinessDetails />
</Layout>
</GenericLayout>
// </Layout>
);
}
......
pages/vendor/dashboard/index.js
......@@ -8,6 +8,7 @@ import { useDispatch, useSelector } from "react-redux";
import { loadUser } from "../../../redux/actions/userActions";
import { wrapper } from "../../../redux/store";
import { useRouter } from "next/router";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
const VendorDashboard = () => {
const { loadedUser, error } = useSelector(state => state.loadedUser);
......@@ -69,18 +70,17 @@ const VendorDashboard = () => {
};
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<div className="row">
<GenericLayout>
{/* <div className="sidebarContainer">
<Sidebar /> */}
<div className="h-100 d-flex-align-items-center justify-content-center p-5">
<ApprovalStatus />
<div className="d-flex justify-content-center py-4">
<span className="image-container">
<Image alt="" layout="fill" src="/images/vendor/Isolation_Mode.png" className="image" />
</span>
</div>
<div className="text-center py-2 mb-5">
<div className="text-center py-2">
<p className="p3">No information is available right now</p>
<Button
onClick={() => {
......@@ -99,9 +99,8 @@ const VendorDashboard = () => {
</Button>
</div>
</div>
</div>
</div>
</Layout>
{/* </div> */}
</GenericLayout>
);
};
......
pages/vendor/enquiries/index.js
......@@ -3,19 +3,20 @@ import Layout from "../../../components/layout/Layout";
import { wrapper } from "../../../redux/store";
import OrderListing from "../../../components/vendor/OrderListing";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
const OrderListingPage = () => {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<GenericLayout>
{/* <div className="sidebarContainer">
<Sidebar /> */}
<div className="w-100 p-5">
<OrderListing />
</div>
</div>
</Layout>
{/* </div> */}
</GenericLayout>
);
};
......
pages/vendor/reviews/index.js
......@@ -5,6 +5,7 @@ import Layout from "../../../components/layout/Layout";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import { getActivitiesByVendor } from "../../../redux/actions/activityAction";
import { wrapper } from "../../../redux/store";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
const ReviewsPage = () => {
const dispatch = useDispatch();
......@@ -13,16 +14,14 @@ const ReviewsPage = () => {
}, []);
return (
<div>
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<Reviews isVendor={true} />
</div>
</div>
</Layout>
</div>
// <div>
<GenericLayout>
{/* <div className="sidebarContainer">
<Sidebar /> */}
<Reviews isVendor={true} />
{/* </div> */}
</GenericLayout>
// </div>
);
};
......
public/images/Footer-logo.svg 0 → 100644
This diff could not be displayed because it is too large.
public/images/gift-card.svg 0 → 100644
This diff could not be displayed because it is too large.
public/images/main-logo.svg 0 → 100644
This diff could not be displayed because it is too large.
public/images/vendor/add-activity.svg 0 → 100644
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M14 7V13M11 10H17M14 21C11 21 8 21 5 21C3.89543 21 3.00001 20.1069 3.00001 19.0023C3 16.2888 3 11.5934 3 10M9 17H19C20.1046 17 21 16.1046 21 15V5C21 3.89543 20.1046 3 19 3H9C7.89543 3 7 3.89543 7 5V15C7 16.1046 7.89543 17 9 17Z" stroke="#fff" stroke-width="1.488" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
\ No newline at end of file
redux/actions/vendorActions.js
......@@ -89,7 +89,7 @@ export const updateVendorBusinessDetails =
export const getLoggedInVendor = () => async dispatch => {
const session = await getSession();
console.log("session", session);
console.log("session lfkjskfjsdh", session);
if (!session) {
throw new Error("You are not authenticated. Please log in.");
......@@ -135,6 +135,9 @@ export const getLoggedInVendor = () => async dispatch => {
export const getVendorDetails = () => async dispatch => {
const session = await getSession();
if (!session) {
return
}
try {
dispatch({
type: GET_VENDOR_DETAILS_REQUEST
......
styles/globals.css
......@@ -1335,6 +1335,48 @@ span.form-error,
}
/* vendor dashboar */
.bg-z-primary{
background-color: #242932;
}
.primary-sidebar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.primary-sidebar ul li {
padding: 0.85rem 2rem;
color: #fff;
}
.primary-sidebar ul li.active {
background-color: #393e49;
color: #fff;
}
.primary-sidebar ul li a {
font-family: "Poppins Regular";
font-size: 14px;
line-height: 21px;
letter-spacing: 0em;
text-align: left;
color: #fff !important;
text-decoration: none;
display: flex;
align-items: center;
}
.primary-sidebar ul li a>span {
flex: 0 0 auto;
}
.primary-sidebar ul li a span {
padding-left: 1rem;
padding-top: 5px;
}
.sidebarContainer {
display: flex;
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!