aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-02 05:54:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix some QA issues

Browse Source 
- fix navbar height
- remove input shadow
- change donateCard options style
- add 2px borders to cards
- remove search from nav on sections other than products
- implement useMediaQuery
This commit is contained in:
MTG2000
2022-05-26 20:27:39 +03:00
parent 5c7723316b
commit 113ec18479
18 changed files with 150 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Components/Navbar/CategoriesList/CategoriesList.tsx
View File

@@ -33,13 +33,14 @@ export default function CategoriesList({ classes = {}, onClick }: Props) {
<>
{data?.allCategories.map(category =>
<MenuItem
className={`w-full !p-16 text-body4 font-semibold hover:bg-gray-100 !rounded-8 flex w-items-center ${classes.item}`}
onClick={() => {
onClick?.(category.id)
navigate(`/category/${category.id}`)
}}
key={category.id}
href={`/category/${category.id}`}
className={`w-full !p-16 text-body4 font-semibold hover:bg-gray-100 !rounded-8 flex w-items-center ${classes.item}`}
href={`/products/category/${category.id}`}
onClick={(e) => {
e.syntheticEvent.preventDefault();
onClick?.(category.id)
navigate(`/products/category/${category.id}`)
}}
>
<span className="text-body3 mr-8">{category.icon}</span> {category.title} <span className="ml-auto pl-8 text-body5 font-normal text-gray-400">{numberFormatter(category.votes_sum)}</span>
</MenuItem>

34
src/Components/Navbar/NavDesktop.tsx
View File

@@ -1,7 +1,7 @@
import { BsSearch } from "react-icons/bs";
import { motion } from "framer-motion";
import { useAppDispatch, useAppSelector } from "src/utils/hooks";
import { useAppDispatch, useAppSelector, useCurrentSection } from "src/utils/hooks";
import { openModal } from "src/redux/features/modals.slice";
import Button from "../Button/Button";
import ASSETS from "src/assets";
@@ -46,27 +46,11 @@ export default function NavDesktop() {
};
const onConnectWallet = () => {
dispatch(
openModal({
Modal: "Login_ScanningWalletCard",
})
);
};
const onWithdraw = () => {
dispatch(
openModal({
Modal: "Claim_FundWithdrawCard",
})
);
};
const currentSection = useCurrentSection();
const navigate = useNavigate()
return (<nav className="bg-white w-full flex fixed h-[118px] top-0 left-0 py-36 px-32 items-center z-[2010]">
return (<nav className="bg-white w-full flex fixed h-[72px] top-0 left-0 py-36 px-32 items-center z-[2010]">
<a href="https://bolt.fun/">
<h2 className="text-h5 font-bold mr-40 lg:mr-64">
<img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
@@ -76,20 +60,20 @@ export default function NavDesktop() {
<li>
<Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>LApps <FiChevronDown className="ml-8" /></MenuButton>}>
<MenuItem
href="/"
href="/products"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/");
navigate("/products");
}}
className='!px-24 !py-16 font-medium'
>
<MdOutlineExplore className={`text-body1 inline-block mr-12 text-primary-600 `} /> Explore
</MenuItem>
<MenuItem
href="/hottest"
href="/products/hottest"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/hottest");
navigate("/products/hottest");
}}
className='!px-24 !py-16 font-medium'
>
@@ -172,9 +156,9 @@ export default function NavDesktop() {
: <Button className="ml-16 py-12 px-16 lg:px-20" onClick={onConnectWallet}><AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet </Button>
} */}
<IconButton className='ml-16 self-center' onClick={handleSearchClick}>
{currentSection === 'products' && <IconButton className='ml-16 self-center' onClick={handleSearchClick}>
<BsSearch className='scale-125 text-gray-400' />
</IconButton>
</IconButton>}
</motion.div>
<Search />

8
src/Components/Navbar/NavMobile.tsx
View File

@@ -163,20 +163,20 @@ export default function NavMobile({ }: Props) {
<li>
<Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>LApps <FiChevronDown className="ml-8" /></MenuButton>}>
<MenuItem
href="/"
href="/products"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/");
navigate("/products");
}}
className='!px-24 !py-16 font-medium'
>
<MdOutlineExplore className={`text-body1 inline-block mr-12 text-primary-600 `} /> Explore
</MenuItem>
<MenuItem
href="/hottest"
href="/products/hottest"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/hottest");
navigate("/products/hottest");
}}
className='!px-24 !py-16 font-medium'
>

42
src/Components/Navbar/Navbar.tsx
View File

@@ -1,14 +1,14 @@
import NavMobile from "./NavMobile";
import { MdComment, MdHomeFilled, MdLocalFireDepartment } from "react-icons/md";
import { IoExtensionPuzzle } from "react-icons/io5";
import { useCallback, useEffect } from "react";
import { useAppDispatch, useAppSelector } from "src/utils/hooks";
import { useCallback, useEffect, useState } from "react";
import { useAppDispatch, useAppSelector, useMediaQuery } from "src/utils/hooks";
import { openModal } from "src/redux/features/modals.slice";
import { setNavHeight } from "src/redux/features/ui.slice";
import NavDesktop from "./NavDesktop";
import { useMediaQuery } from "@react-hookz/web";
import { MEDIA_QUERIES } from "src/utils/theme/media_queries";
import { IoMdTrophy } from "react-icons/io";
import { useLocation } from "react-router-dom";
export const navLinks = [
@@ -39,34 +39,18 @@ export const navLinks = [
// },
];
export default function Navbar() {
const dispatch = useAppDispatch();
const { isWalletConnected, isMobileScreen } = useAppSelector((state) => ({
isWalletConnected: state.wallet.isConnected,
isMobileScreen: state.ui.isMobileScreen
}));
// const { isWalletConnected, isMobileScreen } = useAppSelector((state) => ({
// isWalletConnected: state.wallet.isConnected,
// isMobileScreen: state.ui.isMobileScreen
// }));
const isLargeScreen = useMediaQuery(MEDIA_QUERIES.isLarge)
const onConnectWallet = () => {
dispatch(
openModal({
Modal: "Login_ScanningWalletCard",
})
);
};
const onWithdraw = () => {
dispatch(
openModal({
Modal: "Claim_FundWithdrawCard",
})
);
};
useEffect(() => {
const nav = document.querySelector("nav");
@@ -84,17 +68,15 @@ export default function Navbar() {
document.body.style.paddingTop = oldPadding
}
}, [dispatch, isMobileScreen, isLargeScreen])
}, [dispatch])
return (
<>
{(isMobileScreen || !isLargeScreen) ?
<NavMobile />
:
{(isLargeScreen) ?
<NavDesktop />
:
<NavMobile />
}
</>
);