update: qa improvements

src/Components/Navbar/NavDesktop.tsx

@@ -14,6 +14,7 @@ import '@szhsin/react-menu/dist/index.css';
 import { FiChevronDown } from "react-icons/fi";
 import { createRoute, PAGES_ROUTES } from "src/utils/routing";
 import Button from "../Button/Button";
+import { BiRocket } from "react-icons/bi";
 
 
 export default function NavDesktop() {
@@ -44,7 +45,7 @@ export default function NavDesktop() {
                             <img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
                         </h2>
                     </Link>
-                    <Button color="primary" size="sm" className="ml-auto">Submit project</Button>
+                    <Button color="primary" size="sm" variant="text" className="ml-auto">Submit project <BiRocket /></Button>
 
                     <motion.div
                         animate={searchOpen ? { opacity: 0 } : { opacity: 1 }}

src/features/Projects/Components/Categories/Categories.tsx

@@ -50,16 +50,16 @@ export default function Categories(props: Props) {
     return (
         <div className="relative group">
             <div className="overflow-hidden border-b border-gray-200" ref={viewportRef}>
-                <div className="select-none w-full flex gap-8">
+                <div className="select-none w-full flex gap-32">
                     <button
                         onClick={() => {
                             props.onChange?.(null)
                         }}
                         className={`
-                            text-center flex flex-wrap gap-8 flex-col justify-end items-center font-medium hover:bg-gray-100 active:bg-gray-200 rounded-t-8 px-16 py-16 min-w-max
+                            text-body5 text-center flex flex-wrap gap-8 flex-col justify-end items-center font-medium py-16 min-w-max
                             ${props.value === null ? "text-primary-500 border-b-2 border-primary-500" : "text-gray-500"} 
                             `}
-                    ><i className={props.filtersActive ? "fa-solid fa-search" : "fa-solid fa-table-cells-large"}></i>    <span className='w-full'>{props.filtersActive ? "Search results" : "All projects"}</span></button>
+                    ><i className="fa-solid fa-table-cells-large"></i>    <span className='w-full'>All Projects</span></button>
                     {data.categoryList?.filter(v => !!v?.projectsCount && v.projectsCount !== '0').map((category, idx) => {
 
                         return <button
@@ -69,7 +69,7 @@ export default function Categories(props: Props) {
                                 props.onChange?.(isSame ? null : category)
                             }}
                             className={`
-                            text-center flex flex-wrap gap-8 flex-col justify-end items-center font-medium hover:bg-gray-100 active:bg-gray-200 rounded-t-8 px-8 py-16 min-w-max
+                            text-body5 text-center flex flex-wrap gap-8 flex-col justify-end items-center font-medium  py-16 min-w-max
                             ${props.value?.id === category?.id ? "text-primary-500 border-b-2 border-primary-500" : "text-gray-500"} 
                             `}
                         ><i className={category?.icon ? `fa-solid fa-${category.icon}` : "fa-regular fa-circle-question"}></i>    <span className='w-full'>{category!.name} ({category?.projectsCount!})</span></button>

src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx

@@ -27,8 +27,8 @@ export default function ProjectCardMini({ project, onClick }: Props) {
             <img src={logo} alt={project?.title ?? ''} draggable="false" className="flex-shrink-0 w-64 h-64 object-cover bg-gray-200 border border-gray-200 rounded-full hover:cursor-pointer"></img>
             <div className="justify-around items-start min-w-0 flex-1 hover:cursor-pointer"
             >
-                <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.dead && "💀 "}{project?.title}</p>
-                <p className="text-body5 text-gray-600 font-light my-[5px]">{tag?.name}</p>
+                <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project?.title}</p>
+                <p className="text-body5 text-gray-600 font-light mt-4"><span className={`scale-150 inline-block ${project.dead ? "text-red-500" : "text-green-400"}`}>•</span> {tag?.name}</p>
                 {/* <span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {numberFormatter(project?.votes_count)} </span> */}
             </div>
             {/* <VoteButton votes={project?.votes_count} direction='vertical' dense onVote={vote}></VoteButton> */}

src/features/Projects/pages/ExplorePage/ExplorePage.tsx

@@ -168,7 +168,7 @@ function ExplorePage() {
                 selectedCategry={selectedCategory}
             />
             <div className="page-container">
-                <div className="grid grid-cols-1  md:grid-cols-[1fr_auto] items-center gap-x-32 gap-y-16">
+                <div className="grid grid-cols-1  md:grid-cols-[1fr_auto] items-center gap-x-32 gap-y-16 mb-36">
                     <div className="min-w-0 max-md:row-start-2"><Categories filtersActive={hasSearchFilters} value={selectedCategory} onChange={v => selectCategoryTab(v)} /></div>
                     <Button
                         className={`self-center ${hasSearchFilters ? "!font-bold !bg-primary-50 !text-primary-600 !border-2 !border-primary-400" : "!text-gray-600"}`}
@@ -177,9 +177,10 @@ function ExplorePage() {
                         onClick={openFilters}>
                         <FiSliders className="scale-150 mr-12" />
                         <span className='align-middle'>Filter</span>
+                        {hasSearchFilters && <span className='absolute bg-primary-600 text-body6 text-white w-24 aspect-square rounded-full top-0 right-0 translate-x-1/3 -translate-y-1/3 flex justify-center border-2 border-white items-center '>{Object.keys(filters ?? {}).length}</span>}
                     </Button>
                 </div>
-                <div className="flex justify-end mb-12 md:mb-24 my-24">
+                {/* <div className="flex justify-end mb-12 md:mb-24 my-24">
                     <label className='flex gap-16 items-center'>
                         <input
                             disabled={hasDeadProjectsFilter}
@@ -189,11 +190,11 @@ function ExplorePage() {
                             type="checkbox" />
                         <span className={`text-body4 text-gray-800 ${hasDeadProjectsFilter && 'opacity-60'}`}>Show dead projects {deadProjectsCount !== undefined && `(${deadProjectsCount})`}</span>
                     </label>
-                </div>
+                </div> */}
                 <ProjectsGrid
                     isLoading={isLoading}
                     isLoadingMore={isLoadingMore}
-                    projects={data?.projects?.filter((p) => p !== null && ((showDeadProjects ? true : !p.dead) || hasDeadProjectsFilter)) as any[] ?? []}
+                    projects={data?.projects?.filter((p) => p !== null) as any[] ?? []}
                 />
                 {canLoadMore && <div className="flex justify-center mt-36">
                     <Button onClick={clickFetchMore} color="gray"><HiOutlineChevronDoubleDown /> Load more</Button>

src/features/Projects/pages/ExplorePage/Filters/filters.graphql

@@ -1,5 +1,5 @@
 query GetFilters {
-  categoryList {
+  categoryList(isHidden: false) {
     id
     name
     icon

src/features/Projects/pages/ExplorePage/Header/Header.tsx

@@ -55,9 +55,9 @@ export default function Header(props: Props) {
                         <div className="flex gap-8 flex-wrap">
                             {filters?.yearFounded && <Badge size='sm'>📆 Founded in <span className='font-bold text-gray-700'>{filters.yearFounded}</span> <button onClick={() => removeFilter("yearFounded")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
                             {filters?.projectStatus && <Badge size='sm'>🌱 Status: <span className='font-bold text-gray-700'>{filters?.projectStatus}</span> <button onClick={() => removeFilter("projectStatus")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
-                            {filters?.projectLicense && <Badge size='sm'>💻 License: <span className='font-bold text-gray-700'>{filters.projectLicense}</span> <button onClick={() => removeFilter("projectLicense")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
+                            {filters?.projectLicense && <Badge size='sm'>💻 <span className='font-bold text-gray-700'>{filters.projectLicense}</span> <button onClick={() => removeFilter("projectLicense")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
                             {filters?.categories && filters.categories.length > 0 && <Badge size='sm'>Category: <span className='font-bold text-gray-700'>{filters.categories[0].label}</span> <button onClick={() => removeFilter("categories")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
-                            {filters?.tags && filters.tags.length > 0 && <Badge size='sm'>Tags: <span className='font-bold text-gray-700'>{filters.tags.map(t => t.label).join(', ')}</span> <button onClick={() => removeFilter("tags")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
+                            {filters?.tags && filters.tags.length > 0 && <Badge size='sm'>🏷️ <span className='font-bold text-gray-700'>{filters.tags.map(t => t.label).join(', ')}</span> <button onClick={() => removeFilter("tags")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
                         </div>
                     </div>}
                 </div>

src/graphql/index.tsx

@@ -471,7 +471,7 @@ export type AllCategoriesLazyQueryHookResult = ReturnType<typeof useAllCategorie
 export type AllCategoriesQueryResult = Apollo.QueryResult<AllCategoriesQuery, AllCategoriesQueryVariables>;
 export const GetFiltersDocument = gql`
     query GetFilters {
-  categoryList {
+  categoryList(isHidden: false) {
     id
     name
     icon