Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 564e5ed2 by Ravindra Kanojiya
Options

updated ui

1 parent 62a89dce
Expand all
Inline Side-by-side
Showing 5 changed files with 45 additions and 19 deletions
components/detail/DetailInfo.js
...@@ -47,6 +47,7 @@ const DetailInfo = ({ activityById }) => { ...@@ -47,6 +47,7 @@ const DetailInfo = ({ activityById }) => {
const [showshareWidget, setshowshareWidget] = useState(false); const [showshareWidget, setshowshareWidget] = useState(false);
const { loadedUser } = useSelector(state => state.loadedUser); const { loadedUser } = useSelector(state => state.loadedUser);
const { endUser } = useSelector(state => state.endUser); const { endUser } = useSelector(state => state.endUser);
console.log("endUser", endUser)
useEffect(() => { useEffect(() => {
const fetchSession = async () => { const fetchSession = async () => {
setSession(await getSession()); setSession(await getSession());
...@@ -190,21 +191,29 @@ const DetailInfo = ({ activityById }) => { ...@@ -190,21 +191,29 @@ const DetailInfo = ({ activityById }) => {
<h2>Send Enquiry</h2> <h2>Send Enquiry</h2>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<div>Experience Name:</div>
<div className="text01">
{activityById.data.attributes.name}
</div>
<div className="mt-3">Full Name:</div> <div className="mt-3">Full Name:</div>
<div className="text01"> <div className="text01">
{endUser?.attributes.name} {endUser?.attributes.name}
</div> </div>
<div className="mt-3">Mobile:</div>
<div className="text01">
{endUser?.attributes.phone}
</div>
<div className="mt-3">Email ID:</div> <div className="mt-3">Email ID:</div>
<div className="text01"> <div className="text01">
{endUser?.attributes.email} {endUser?.attributes.email}
</div> </div>
<div className="row d-flex justify-content-center">
<div className="mt-3">Experience Name:</div>
<div className="text01">
{activityById.data.attributes.name}
</div>
<div className="row d-flex justify-content-center mt-2">
<div className="col-6"> <div className="col-6">
<div className="mt-2">Quantity:</div> <div className="my-2">Quantity:</div>
<Input <Input
type="number" type="number"
onChange={e => { onChange={e => {
...@@ -214,7 +223,7 @@ const DetailInfo = ({ activityById }) => { ...@@ -214,7 +223,7 @@ const DetailInfo = ({ activityById }) => {
></Input> ></Input>
</div> </div>
<div className="col-6"> <div className="col-6">
<div className="mt-2">Date:</div> <div className="my-2">Date:</div>
<div className=""> <div className="">
<DatePicker <DatePicker
...@@ -234,7 +243,7 @@ const DetailInfo = ({ activityById }) => { ...@@ -234,7 +243,7 @@ const DetailInfo = ({ activityById }) => {
</div> </div>
<Button <Button
disabled={loading || !quantity} disabled={loading || !quantity}
className="mt-2 col-12" className="mt-4 col-12"
onClick={async () => { onClick={async () => {
setloading(true); setloading(true);
console.log("hello"); console.log("hello");
......
components/layout/Header.js
...@@ -90,7 +90,7 @@ const Header = () => { ...@@ -90,7 +90,7 @@ const Header = () => {
</Navbar.Brand> </Navbar.Brand>
{loadedUser && loadedUser.id ? ( {loadedUser && loadedUser.id ? (
<div className="top-btn hide-on-desktop"> <div className="top-btn hide-on-desktop">
<div className="logout-bk"> <div className="logout-bk" ref={logoutBkRef}>
<a onClick={toggleGridViewDropdown} className="user-icon"> <a onClick={toggleGridViewDropdown} className="user-icon">
<span className="image-container user-pic"> <span className="image-container user-pic">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" /> <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
...@@ -100,7 +100,7 @@ const Header = () => { ...@@ -100,7 +100,7 @@ const Header = () => {
</span> </span>
</a> </a>
{/* <p>{loadedUser.phone}</p> */} {/* <p>{loadedUser.phone}</p> */}
<div ref={logoutBkRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}> <div ref={innerBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
{endUser && ( {endUser && (
<div className="user-info"> <div className="user-info">
<div className="pic"> <div className="pic">
...@@ -288,7 +288,7 @@ const Header = () => { ...@@ -288,7 +288,7 @@ const Header = () => {
<> <>
{endUser && endUser.id ? ( {endUser && endUser.id ? (
<div className="top-btn hide-on-mobile"> <div className="top-btn hide-on-mobile">
<div className="logout-bk"> <div className="logout-bk" ref={logoutBkRef}>
<a onClick={toggleGridViewDropdown} className="user-icon"> <a onClick={toggleGridViewDropdown} className="user-icon">
<span className="image-container user-pic"> <span className="image-container user-pic">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" /> <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
......
components/vendor/UpdateActivity.js
...@@ -1053,7 +1053,7 @@ const UpdateActivity = () => { ...@@ -1053,7 +1053,7 @@ const UpdateActivity = () => {
</li> </li>
<li> <li>
<img src="/images/vendor/call.svg" className="img-fluid" /> <img src="/images/vendor/call.svg" className="img-fluid" />
<p className="number">+1 (407) 8798 789 asdasd</p> <p className="number">+1 (407) 8798 789</p>
</li> </li>
</ul> </ul>
</div> </div>
......
styles/globals.css
...@@ -374,6 +374,7 @@ header { ...@@ -374,6 +374,7 @@ header {
.header-search .rbt .rbt-input-main { .header-search .rbt .rbt-input-main {
padding-right: 2.5rem; padding-right: 2.5rem;
font-size: 0.833vw; font-size: 0.833vw;
width: 18vw;
} }
.header-search > .form-control { .header-search > .form-control {
...@@ -2051,14 +2052,18 @@ span.form-error, ...@@ -2051,14 +2052,18 @@ span.form-error,
height: calc(25px + (25 - 25) * (100vw - 320px) / (1920 - 320)) !important; height: calc(25px + (25 - 25) * (100vw - 320px) / (1920 - 320)) !important;
padding-top: 7px; padding-top: 7px;
} }
.modal-01-session h2 { .modal-01-session h2 {
font-size: calc(32px + (32 - 32) * (100vw - 320px) / (1920 - 320)); font-size: calc(28px + (28 - 28) * (100vw - 320px) / (1920 - 320));
line-height: calc(44px + (44 - 44) * (100vw - 320px) / (1920 - 320)); line-height: calc(40px + (40 - 40) * (100vw - 320px) / (1920 - 320));
} }
.modal-01-session .text01 { .modal-01-session .text01 {
font-size: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320)); font-size: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
padding-top: 0.2rem; padding-top: 0.2rem;
padding-bottom: 1rem; padding-bottom: 0.5rem;
}
.modal-header {
padding-bottom: 0;
} }
.info .top-name .title { .info .top-name .title {
font-size: 0.885vw; font-size: 0.885vw;
...@@ -2074,6 +2079,9 @@ span.form-error, ...@@ -2074,6 +2079,9 @@ span.form-error,
.cl-blue { .cl-blue {
color: #0a58ca !important; color: #0a58ca !important;
} }
.text-danger {
font-size: 0.8rem;
}
.info .rating-wishlist .rating { .info .rating-wishlist .rating {
background: #002c5f; background: #002c5f;
border-radius: 4px; border-radius: 4px;
...@@ -4214,6 +4222,12 @@ footer .footer-link ul { ...@@ -4214,6 +4222,12 @@ footer .footer-link ul {
.vendor-signup .btn-light { .vendor-signup .btn-light {
background: #fff; background: #fff;
} }
.modal-01-session .modal-header {
border: 0 !important;
}
.modal-01-session .modal-content {
padding: 1rem;
}
@media (min-width: 992px) { @media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem; margin: 0 2rem;
...@@ -4232,7 +4246,7 @@ footer .footer-link ul { ...@@ -4232,7 +4246,7 @@ footer .footer-link ul {
position: relative; position: relative;
} }
.navbar-expand-lg .navbar-nav .nav-link.gift-card::after { /* .navbar-expand-lg .navbar-nav .nav-link.gift-card::after {
content: ""; content: "";
background: #000; background: #000;
height: 2px; height: 2px;
...@@ -4240,7 +4254,7 @@ footer .footer-link ul { ...@@ -4240,7 +4254,7 @@ footer .footer-link ul {
bottom: 0; bottom: 0;
left: 0; left: 0;
position: absolute; position: absolute;
} } */
.navbar-expand-lg .navbar-nav .nav-link.gift-card .image-container { .navbar-expand-lg .navbar-nav .nav-link.gift-card .image-container {
width: 21px; width: 21px;
...@@ -4272,7 +4286,7 @@ footer .footer-link ul { ...@@ -4272,7 +4286,7 @@ footer .footer-link ul {
position: relative; position: relative;
} }
.navbar-expand-lg .navbar-nav .nav-link.gift-card::after { /* .navbar-expand-lg .navbar-nav .nav-link.gift-card::after {
content: ""; content: "";
background: #000; background: #000;
height: 2px; height: 2px;
...@@ -4280,7 +4294,7 @@ footer .footer-link ul { ...@@ -4280,7 +4294,7 @@ footer .footer-link ul {
bottom: 0; bottom: 0;
left: 0; left: 0;
position: absolute; position: absolute;
} } */
.navbar-expand-lg .navbar-nav .nav-link.gift-card .image-container { .navbar-expand-lg .navbar-nav .nav-link.gift-card .image-container {
width: 1.094vw; width: 1.094vw;
...@@ -4394,6 +4408,9 @@ footer .footer-link ul { ...@@ -4394,6 +4408,9 @@ footer .footer-link ul {
.vendor-signup a { .vendor-signup a {
min-width: 140px; min-width: 140px;
} }
.top-btn .inner-box {
right: -15vw;
}
} }
@media (max-width: 767px) { @media (max-width: 767px) {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!