fix: fixing some QA issues

- change rows shown on products page & change the api
- restyle sort by
- rebuild navigation menus
- fix issues with donation stats & donate card
- update products header link & date of hackathon
This commit is contained in:
MTG2000
2022-05-27 10:50:25 +03:00
parent 5ad84a7357
commit e49b0dafe6
18 changed files with 219 additions and 165 deletions

View File

@@ -35,11 +35,20 @@ type Props<T extends object | string> = {
const colourStyles: StylesConfig = {
control: (styles, state) => ({
...styles,
padding: '9px 16px',
borderRadius: 12,
}),
indicatorSeparator: (styles, state) => ({
...styles,
display: "none"
}),
input: (styles, state) => ({
...styles,
" input": {
boxShadow: 'none !important'
}
},
}),
};
@@ -78,6 +87,7 @@ export default function AutoComplete<T extends object>({
onChange={v => onChange?.(v as any)}
onBlur={onBlur}
styles={colourStyles}
theme={(theme) => ({
...theme,

View File

@@ -22,7 +22,7 @@ import {
SubMenu
} from '@szhsin/react-menu';
import '@szhsin/react-menu/dist/index.css';
import { FiChevronDown, FiSend } from "react-icons/fi";
import { FiAward, FiChevronDown, FiFeather, FiMic, FiSend } from "react-icons/fi";
import { MdComment, MdOutlineExplore, MdOutlineLocalFireDepartment } from "react-icons/md";
import { IoMdTrophy } from "react-icons/io";
import { BiCoinStack } from "react-icons/bi";
@@ -57,55 +57,48 @@ export default function NavDesktop() {
</h2>
</a>
<ul className="flex gap-32 xl:gap-64">
<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="/products"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/products");
}}
className='!px-24 !py-16 font-medium'
>
<MdOutlineExplore className={`text-body1 inline-block mr-12 text-primary-600 `} /> Explore
</MenuItem>
<MenuItem
href="/products/hottest"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/products/hottest");
}}
className='!px-24 !py-16 font-medium'
>
<MdOutlineLocalFireDepartment className={`text-body1 inline-block mr-12 text-primary-600 `} /> Hottest
</MenuItem>
<SubMenu
overflow="auto"
itemProps={{ className: '!p-0' }}
label={<div className='!px-24 !py-16 font-medium'><IoExtensionPuzzle className={`text-body1 inline-block mr-12 text-primary-600 `} /> Categories</div>}
>
<CategoriesList />
</SubMenu>
<MenuItem
href="https://airtable.com/shr2VkxarNsIFilDz"
target="_blank" rel="noopener noreferrer"
className='!px-24 !py-16 font-medium'
>
<FiSend className={`text-body1 inline-block mr-12 text-primary-600 `} /> Submit LApp
</MenuItem>
</Menu>
<li className="relative">
<Link to={'/products'} className='text-body4 font-bold hover:text-primary-600'>
Products
</Link>
</li>
<li>
<Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
<Menu offsetY={28} menuClassName='!rounded-12 !p-8 !border-gray-200' menuStyle={{ border: '1px solid' }} menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
<MenuItem
href="/blog"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/blog");
}}
className='!px-24 !py-16 font-medium'
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 '
>
<MdComment className={`text-body1 inline-block mr-12 text-primary-600 `} /> Stories
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<FiFeather className={`text-body1 inline-block text-primary-600 `} />
</div>
<div>
<p className="text-body4 text-black font-medium">
Stories
</p>
<p className="text-body5 text-gray-600 mt-4">
Tales from the maker community
</p>
</div>
</MenuItem>
<MenuItem
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 opacity-60'
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<FiMic className={`text-body1 inline-block text-primary-600 `} />
</div>
<div>
<p className="text-body4 text-black font-medium">
Discussions
</p>
<p className="text-body5 text-gray-600 mt-4">
Coming soon
</p>
</div>
</MenuItem>
<MenuItem
href="/hackathons"
@@ -113,9 +106,19 @@ export default function NavDesktop() {
e.syntheticEvent.preventDefault();
navigate("/hackathons");
}}
className='!px-24 !py-16 font-medium'
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
<IoMdTrophy className={`text-body1 inline-block mr-12 text-primary-600 `} /> Hackathons
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<FiAward className={`text-body1 inline-block text-primary-600 `} />
</div>
<div>
<p className="text-body4 text-black font-medium">
Hackathons
</p>
<p className="text-body5 text-gray-600 mt-4">
Take part in hackathons & tournaments
</p>
</div>
</MenuItem>
</Menu>
</li>

View File

@@ -8,17 +8,12 @@ import Search from "./Search/Search";
import IconButton from "../IconButton/IconButton";
import { useAppDispatch, useAppSelector } from "src/utils/hooks";
import { toggleSearch } from "src/redux/features/ui.slice";
import { FiChevronDown, FiMenu, FiSend } from "react-icons/fi";
import { navLinks } from "./Navbar";
import { FiAward, FiChevronDown, FiFeather, FiMenu, FiMic, } from "react-icons/fi";
import { Link, useNavigate } from "react-router-dom";
import { IoExtensionPuzzle } from "react-icons/io5";
import CategoriesList from "./CategoriesList/CategoriesList";
import { useToggle } from "@react-hookz/web";
import styles from './styles.module.css'
import { Menu, MenuButton, MenuItem, SubMenu } from "@szhsin/react-menu";
import { Menu, MenuButton, MenuItem, } from "@szhsin/react-menu";
import '@szhsin/react-menu/dist/index.css';
import { IoMdTrophy } from "react-icons/io";
import { MdComment, MdOutlineExplore, MdOutlineLocalFireDepartment } from "react-icons/md";
interface Props {
}
@@ -54,7 +49,7 @@ const categoriesListVariants = {
}
}
const categoriesArrowVariants = {
const listArrowVariants = {
open: { rotate: 180 },
closed: { rotate: 0 }
}
@@ -62,14 +57,13 @@ const categoriesArrowVariants = {
export default function NavMobile({ }: Props) {
const dispatch = useAppDispatch();
const navigate = useNavigate()
const { searchOpen } = useAppSelector((state) => ({
isWalletConnected: state.wallet.isConnected,
searchOpen: state.ui.isSearchOpen
}));
const [drawerOpen, toggleDrawerOpen] = useToggle(false);
const [categoriesOpen, toggleCategories] = useToggle(false)
const [communityOpen, toggleCommunityOpen] = useToggle(false)
@@ -160,68 +154,85 @@ export default function NavMobile({ }: Props) {
{/* {navLinks.map((link, idx) => <li key={idx} className="text-body3 p-16 active:bg-gray-200">
<Link to={link.url} onClick={() => toggleDrawerOpen(false)}><link.icon className={`text-body2 inline-block mr-12 text-primary-600`} /> <span className="align-middle">{link.text}</span> </Link></li>
)} */}
<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="/products"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/products");
}}
className='!px-24 !py-16 font-medium'
>
<MdOutlineExplore className={`text-body1 inline-block mr-12 text-primary-600 `} /> Explore
</MenuItem>
<MenuItem
href="/products/hottest"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/products/hottest");
}}
className='!px-24 !py-16 font-medium'
>
<MdOutlineLocalFireDepartment className={`text-body1 inline-block mr-12 text-primary-600 `} /> Hottest
</MenuItem>
<SubMenu
itemProps={{ className: '!p-0' }}
direction='bottom'
overflow="auto"
label={<div className='!px-24 !py-16 font-medium'><IoExtensionPuzzle className={`text-body1 inline-block mr-12 text-primary-600 `} /> Categories</div>}
>
<CategoriesList />
</SubMenu>
<MenuItem
href="https://airtable.com/shr2VkxarNsIFilDz"
target="_blank" rel="noopener noreferrer"
className='!px-24 !py-16 font-medium'
>
<FiSend className={`text-body1 inline-block mr-12 text-primary-600 `} /> Submit LApp
</MenuItem>
</Menu>
<li className="relative">
<Link
to={'/products'}
onClick={() => toggleDrawerOpen(false)}
className='text-body4 font-bold hover:text-primary-600'>
Products
</Link>
</li>
<li>
<Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
<MenuItem
href="/blog"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/blog");
}}
className='!px-24 !py-16 font-medium'
>
<MdComment className={`text-body1 inline-block mr-12 text-primary-600 `} /> Stories
</MenuItem>
<MenuItem
href="/hackathons"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/hackathons");
}}
className='!px-24 !py-16 font-medium'
>
<IoMdTrophy className={`text-body1 inline-block mr-12 text-primary-600 `} /> Hackathons
</MenuItem>
</Menu>
<button
className='text-body4 font-bold hover:text-primary-600 w-full flex justify-between'
onClick={() => toggleCommunityOpen()}
>Community
<motion.span
variants={listArrowVariants}
initial={'closed'}
animate={communityOpen ? 'open' : 'closed'}
className="ml-auto">
<BsChevronDown className=" text-gray-400" />
</motion.span>
</button>
{<motion.div
variants={categoriesListVariants}
initial={'closed'}
animate={communityOpen ? 'open' : 'closed'}
>
<div className='flex flex-col gap-24 pt-16' >
<Link
to="/blog"
onClick={() => toggleDrawerOpen(false)}
className='font-medium flex gap-16 !rounded-12 '
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<FiFeather className={`text-body1 inline-block text-primary-600 `} />
</div>
<div>
<p className="text-body4 text-black font-medium">
Stories
</p>
<p className="text-body5 font-normal text-gray-600 mt-4">
Tales from the maker community
</p>
</div>
</Link>
<p
className='font-medium flex gap-16 !rounded-12 opacity-60'
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<FiMic className={`text-body1 inline-block text-primary-600 `} />
</div>
<div>
<p className="text-body4 text-black font-medium">
Discussions
</p>
<p className="text-body5 font-normal text-gray-600 mt-4">
Coming soon
</p>
</div>
</p>
<Link
to="/hackathons"
onClick={() => toggleDrawerOpen(false)}
className='font-medium flex gap-16 !rounded-12'
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<FiAward className={`text-body1 inline-block text-primary-600 `} />
</div>
<div>
<p className="text-body4 text-black font-medium">
Hackathons
</p>
<p className="text-body5 font-normal text-gray-600 mt-4">
Take part in hackathons & tournaments
</p>
</div>
</Link>
</div>
</motion.div>}
</li>
<li className="relative">
<a
@@ -234,7 +245,10 @@ export default function NavMobile({ }: Props) {
</a>
</li>
<li className="relative">
<Link to={'/donate'} className='text-body4 font-bold hover:text-primary-600'>
<Link
to={'/donate'}
onClick={() => toggleDrawerOpen(false)}
className='text-body4 font-bold hover:text-primary-600'>
Donate
</Link>
</li>

View File

@@ -59,7 +59,7 @@ export default function DonateCard() {
autoFocus
/>
<p className='px-16 shrink-0 self-center text-primary-400'>
Sats
sats
</p>
</div>
<div className="flex mt-16 justify-between">

View File

@@ -1,5 +1,5 @@
import { BiCoinStack } from "react-icons/bi";
import { FiGrid } from "react-icons/fi";
import { FiAward, FiGrid } from "react-icons/fi";
import { IoMedalOutline, IoRocketOutline } from "react-icons/io5";
import { useDonationsStatsQuery } from "src/graphql";
import { generateList, numberFormatter } from "src/utils/helperFunctions";
@@ -14,7 +14,7 @@ export default function DonationStats() {
return (
<div className="grid grid-cols-2 md:grid-cols-4 gap-16">
<div className="grid sm:grid-cols-2 md:grid-cols-4 gap-16">
{donationsStatQuery.loading && generateList(<StatCardSkeleton />, 4)}
@@ -32,7 +32,7 @@ export default function DonationStats() {
/>
<StatCard
color="#22C55E"
label={<><IoMedalOutline className='w-full lg:w-auto scale-125 mr-8' /> <span className="align-middle">Prizes</span></>}
label={<><FiAward className='w-full lg:w-auto scale-125 mr-8' /> <span className="align-middle">Prizes</span></>}
value={donationsStatQuery.data?.getDonationsStats.prizes}
/>
<StatCard

View File

@@ -1,6 +1,6 @@
import { useMediaQuery } from '@react-hookz/web';
import React, { useState } from 'react'
import AutoComplete from 'src/Components/Inputs/Autocomplete/Autocomplete';
import { useMediaQuery } from 'src/utils/hooks';
import { MEDIA_QUERIES } from 'src/utils/theme';
const filters = [

View File

@@ -1,4 +1,4 @@
import { useMediaQuery } from '@react-hookz/web';
import { useMediaQuery } from 'src/utils/hooks';
import React, { useState } from 'react'
import Skeleton from 'react-loading-skeleton';
import Slider from 'src/Components/Slider/Slider';
@@ -27,9 +27,9 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
return (
<>
<div className='overflow-hidden'>
{isMdScreen ?
<div className='bg-white border-2 rounded-12 p-16'>
<div className='bg-white border-2 rounded-12 p-16 overflow-hidden'>
<p className="text-body2 font-bolder text-black mb-16">Topics</p>
<ul className=' flex flex-col gap-16'>
{topicsQuery.loading ?
@@ -75,7 +75,7 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
}
</>
}
</>
</div>
)

View File

@@ -1,4 +1,4 @@
import { useMediaQuery } from '@react-hookz/web';
import { useMediaQuery } from 'src/utils/hooks';
import React, { useState } from 'react'
import Skeleton from 'react-loading-skeleton';
import Slider from 'src/Components/Slider/Slider';
@@ -26,7 +26,7 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
return (
<>
<div className='overflow-hidden'>
{isMdScreen ?
<div className='bg-white border-2 rounded-12 p-16'>
<p className="text-body2 font-bolder text-black mb-16">Topics</p>
@@ -74,7 +74,7 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
}
</>
}
</>
</div>
)

View File

@@ -1,4 +1,4 @@
import { useMediaQuery } from '@react-hookz/web';
import { useMediaQuery } from 'src/utils/hooks';
import React, { useState } from 'react'
import { Nullable } from 'remirror';
import AutoComplete from 'src/Components/Inputs/Autocomplete/Autocomplete';

View File

@@ -11,7 +11,7 @@ export default function ProjectCardMini({ project, onClick }: Props) {
return (
<div
className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100"
className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border-2 border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100"
onClick={() => onClick(project.id)}
onKeyDown={e => e.key !== 'Enter' || onClick(project.id)}
tabIndex={0}

View File

@@ -18,11 +18,11 @@ const headerLinks = [
},
{
title:
"Want to learn to build lightning applications? Join Shock the Web hackathon on March 22 - 28",
"Shock the web is back !! Join us from 16 to 19 June.",
img: Assets.Images_ExploreHeader2,
link: {
content: "Register Now",
url: "https://bolt.fun/hackathons/shock-the-web/",
url: "https://bolt.fun/hackathons/shock-the-web-2/",
},
},
];

View File

@@ -20,14 +20,13 @@ Hottest.args = {
<MdLocalFireDepartment
className='inline-block text-fire align-bottom scale-125 ml-4 origin-bottom'
/></>,
categoryId: 0,
projects: MOCK_DATA.projects
}
export const Defi = Template.bind({});
Defi.args = {
title: 'DeFi',
categoryId: 8,
link: "category-page-url",
projects: MOCK_DATA.projects
}

View File

@@ -13,7 +13,7 @@ import ProjectCardMini from "src/features/Projects/Components/ProjectCardMini/Pr
interface Props {
title: string | ReactNode,
categoryId: number,
link?: string;
projects: ProjectCard[]
}
@@ -37,7 +37,7 @@ function calcNumItems() {
export default function ProjectsRow({ title, categoryId, projects }: Props) {
export default function ProjectsRow({ title, link, projects }: Props) {
const [carouselItmsCnt, setCarouselItmsCnt] = useState(calcNumItems);
const dispatch = useAppDispatch()
@@ -85,7 +85,7 @@ export default function ProjectsRow({ title, categoryId, projects }: Props) {
<div className='mb-48'>
<h3 className="font-bolder text-body3 mb-24">
<span className="align-middle">{title}</span>
{categoryId > 0 && <Link to={`/category/${categoryId}`}>
{link && <Link to={link}>
<MdDoubleArrow className='text-gray-200 ml-8 hover:cursor-pointer transform scale-y-110 scale-x-125 origin-left' />
</Link>}
</h3>

View File

@@ -19,17 +19,21 @@ export default function ProjectsSection() {
return (
<div className='mt-32 lg:mt-48'>
<ProjectsRow title={shockTheWebCategory?.title}
categoryId={shockTheWebCategory?.id!}
projects={shockTheWebCategory?.project!} />
<ProjectsRow title={<><span className="align-middle mr-8">Newest</span> <MdLocalFireDepartment className='inline-block text-fire scale-125 ' /></>}
categoryId={0}
<ProjectsRow title={<><span className="align-middle mr-8">Hottest</span> <MdLocalFireDepartment className='inline-block text-fire scale-125 ' /></>}
link='/products/hottest'
projects={data.hottestProjects} />
<ProjectsRow title="Recently added"
projects={data.newProjects} />
<ProjectsRow title={shockTheWebCategory?.title}
link={`/products/category/${shockTheWebCategory?.id}`}
projects={shockTheWebCategory?.project!} />
{restCategories.map(({ id, title, project, }) => {
if (project)
return <ProjectsRow
key={id}
categoryId={id}
link={`/products/category/${id}`}
title={title}
projects={project} />
else return null

View File

@@ -1,4 +1,26 @@
query ExploreProjects {
hottestProjects(take: 10, skip: 0) {
id
title
thumbnail_image
votes_count
category {
title
id
}
}
newProjects {
id
title
thumbnail_image
votes_count
category {
title
id
}
}
allCategories {
id
title
@@ -13,14 +35,4 @@ query ExploreProjects {
}
}
}
newProjects {
id
title
thumbnail_image
votes_count
category {
title
id
}
}
}

View File

@@ -426,7 +426,7 @@ export type AllCategoriesQuery = { __typename?: 'Query', allCategories: Array<{
export type ExploreProjectsQueryVariables = Exact<{ [key: string]: never; }>;
export type ExploreProjectsQuery = { __typename?: 'Query', allCategories: Array<{ __typename?: 'Category', id: number, title: string, project: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> }>, newProjects: Array<{ __typename?: 'Project', id: number, title: string, thumbnail_image: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> };
export type ExploreProjectsQuery = { __typename?: 'Query', hottestProjects: Array<{ __typename?: 'Project', id: number, title: string, thumbnail_image: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }>, newProjects: Array<{ __typename?: 'Project', id: number, title: string, thumbnail_image: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }>, allCategories: Array<{ __typename?: 'Category', id: number, title: string, project: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> }> };
export type HottestProjectsQueryVariables = Exact<{ [key: string]: never; }>;
@@ -1139,6 +1139,26 @@ export type AllCategoriesLazyQueryHookResult = ReturnType<typeof useAllCategorie
export type AllCategoriesQueryResult = Apollo.QueryResult<AllCategoriesQuery, AllCategoriesQueryVariables>;
export const ExploreProjectsDocument = gql`
query ExploreProjects {
hottestProjects(take: 10, skip: 0) {
id
title
thumbnail_image
votes_count
category {
title
id
}
}
newProjects {
id
title
thumbnail_image
votes_count
category {
title
id
}
}
allCategories {
id
title
@@ -1153,16 +1173,6 @@ export const ExploreProjectsDocument = gql`
}
}
}
newProjects {
id
title
thumbnail_image
votes_count
category {
title
id
}
}
}
`;

View File

@@ -58,7 +58,8 @@ export const handlers = [
return res(
ctx.data({
allCategories: allCategories(),
newProjects: newProjects()
newProjects: newProjects(),
hottestProjects: hottestProjects()
})
)
}),

View File

@@ -3,6 +3,7 @@ import { Query, QueryGetFeedArgs, QueryGetPostByIdArgs } from 'src/graphql'
import { Chance } from "chance";
import { topics } from "./data/topics";
import { hackathons } from "./data/hackathon";
import { shuffle } from "src/utils/helperFunctions";
const chance = new Chance()
@@ -28,7 +29,7 @@ export function allCategories() {
}
export function newProjects() {
return MOCK_DATA.projects;
return shuffle(MOCK_DATA.projects).slice(0, 10);
}
export function getProject(projectId: number) {