From 4981fdd35b8d38121d366d48415806841dd5a38e Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 3 Oct 2022 18:00:49 +0300
Subject: [PATCH] update: QA improvements & fixes

---
 .../ProfilePage/StoriesCard/StoriesCard.tsx   |  2 +-
 .../Components/AboutCard/AboutCard.tsx        | 13 ++++++++++--
 .../CapabilitiesCard/CapabilitiesCard.tsx     |  2 +-
 .../Components/MakersCard/MakersCard.tsx      |  2 +-
 .../SimilarProjectsCard.tsx                   |  2 +-
 .../ProjectDetailsCard/ProjectDetailsCard.tsx | 20 ++++++++++---------
 .../pages/ProjectPage/ProjectPage.tsx         | 15 +++++++++++---
 7 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/src/features/Profiles/pages/ProfilePage/StoriesCard/StoriesCard.tsx b/src/features/Profiles/pages/ProfilePage/StoriesCard/StoriesCard.tsx
index c292808..d7c114a 100644
--- a/src/features/Profiles/pages/ProfilePage/StoriesCard/StoriesCard.tsx
+++ b/src/features/Profiles/pages/ProfilePage/StoriesCard/StoriesCard.tsx
@@ -52,7 +52,7 @@ export default function StoriesCard({ stories, isOwner, onlyMd }: Props) {
                 </ul>}
             {stories.length === 0 &&
                 <div className="flex flex-col gap-16 mt-24">
-                    <p className="text-body3 text-gray-500 font-medium">
+                    <p className="text-body4 text-gray-600">
                         😐 No Stories Added Yet
                     </p>
                     {/* <p className="text-body5 text-gray-500">
diff --git a/src/features/Projects/pages/ProjectPage/Components/AboutCard/AboutCard.tsx b/src/features/Projects/pages/ProjectPage/Components/AboutCard/AboutCard.tsx
index 75727a9..787bc0d 100644
--- a/src/features/Projects/pages/ProjectPage/Components/AboutCard/AboutCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/Components/AboutCard/AboutCard.tsx
@@ -10,6 +10,7 @@ import { setVoteAmount } from 'src/redux/features/vote.slice'
 import { numberFormatter } from 'src/utils/helperFunctions'
 import { useAppDispatch } from 'src/utils/hooks'
 import { createRoute } from 'src/utils/routing'
+import LinksCard from '../LinksCard/LinksCard'
 
 interface Props {
     project: Pick<ProjectDetailsQuery['getProject'],
@@ -25,6 +26,12 @@ interface Props {
         | "tagline"
         | "website"
         | "votes_count"
+        | 'discord'
+        | 'website'
+        | 'github'
+        | 'twitter'
+        | 'slack'
+        | 'telegram'
     >
 }
 
@@ -52,7 +59,7 @@ export default function AboutCard({ project }: Props) {
     return (
         <Card defaultPadding={false} onlyMd>
             {/* Cover Image */}
-            <div className="relative rounded-t-12 md:rounded-t-16 h-[120px] lg:h-[160px]">
+            <div className="hidden md:block relative rounded-t-12 md:rounded-t-16 h-[120px] lg:h-[160px]">
                 <img className="w-full h-full object-cover rounded-12 md:rounded-0 md:rounded-t-16" src={project.cover_image} alt="" />
                 <div className="absolute top-16 md:top-24 left-24 flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
                     {project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
@@ -82,7 +89,9 @@ export default function AboutCard({ project }: Props) {
                         <MdLocalFireDepartment />{<span className="align-middle w-[4ch]"> {numberFormatter(project.votes_count)}</span>}
                     </Button>
                 </div>
-
+                <div className="md:hidden">
+                    <LinksCard links={project} />
+                </div>
 
                 {/* About */}
                 <div>
diff --git a/src/features/Projects/pages/ProjectPage/Components/CapabilitiesCard/CapabilitiesCard.tsx b/src/features/Projects/pages/ProjectPage/Components/CapabilitiesCard/CapabilitiesCard.tsx
index c8a937a..7c5a6c5 100644
--- a/src/features/Projects/pages/ProjectPage/Components/CapabilitiesCard/CapabilitiesCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/Components/CapabilitiesCard/CapabilitiesCard.tsx
@@ -17,7 +17,7 @@ export default function CapabilitiesCard({ capabilities }: Props) {
                 {capabilities.length === 0 && <>
                     <p className="text-gray-700 text-body4">No capabilities added</p>
                 </>}
-                <div className="flex flex-wrap gap-16">
+                <div className="flex flex-wrap gap-8 md:gap-16">
                     {capabilities.map(cap => <Badge key={cap.id} size='sm'>{cap.icon} {cap.title}</Badge>)}
                 </div>
             </div>
diff --git a/src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx b/src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx
index c57c8cd..7a9e2b5 100644
--- a/src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx
@@ -40,7 +40,7 @@ export default function MakersCard({ members, recruit_roles }: Props) {
                 {recruit_roles.length === 0 && <>
                     <p className="text-gray-700 text-body4">No open roles for now</p>
                 </>}
-                <div className="flex flex-wrap gap-16">
+                <div className="flex flex-wrap gap-8">
                     {recruit_roles.map(role => <Badge key={role.id} size='sm'>{role.icon} {role.title}</Badge>)}
                 </div>
             </div>
diff --git a/src/features/Projects/pages/ProjectPage/Components/SimilarProjectsCard/SimilarProjectsCard.tsx b/src/features/Projects/pages/ProjectPage/Components/SimilarProjectsCard/SimilarProjectsCard.tsx
index 59c0706..3f2ddd9 100644
--- a/src/features/Projects/pages/ProjectPage/Components/SimilarProjectsCard/SimilarProjectsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/Components/SimilarProjectsCard/SimilarProjectsCard.tsx
@@ -22,7 +22,7 @@ export default function SimilarProjectsCard({ id }: Props) {
             <h3 className="text-body2 font-bolder">🚀 Similar projects</h3>
             <ul className='flex flex-col'>
                 {query.data?.similarProjects.map(project => {
-                    return <Link key={project.id} to={createRoute({ type: "project", tag: project.hashtag })} className="border-b py-16 last-of-type:border-b-0 last-of-type:pb-0">
+                    return <Link key={project.id} to={createRoute({ type: "project", tag: project.hashtag })} className="md:border-b py-16 last-of-type:border-b-0 last-of-type:pb-0">
                         <li className="flex items-center gap-12">
                             <img className='w-48 aspect-square rounded-12 border border-gray-100' alt='' src={project.thumbnail_image} />
                             <div className='overflow-hidden'>
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
index 202b1f2..6963b36 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
@@ -120,14 +120,16 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
             {/* Cover Image */}
             <div className="relative h-[120px] lg:h-[80px]">
                 <img className="w-full h-full object-cover" src={project.cover_image} alt="" />
-                <div className="absolute top-16 md:top-24 left-24 flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
-                    {project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
-                    {project.launch_status === ProjectLaunchStatusEnum.Wip && `🔧 WIP`}
-                </div>
-                <div className="absolute top-16 md:top-24 right-24 flex gap-8">
-                    {project.permissions.includes(ProjectPermissionEnum.UpdateInfo) &&
-                        <Link className="w-32 h-32  bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={() => props.onClose?.()} to={createRoute({ type: "edit-project", id: project.id })}><FiEdit2 /></Link>}
-                    <button className="w-32 h-32  bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={closeModal}><IoMdClose className=' inline-block' /></button>
+                <div className="absolute w-full px-16 md:px-24 top-16 md:top-24 flex justify-between items-center">
+                    <div className="flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
+                        {project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
+                        {project.launch_status === ProjectLaunchStatusEnum.Wip && `🔧 WIP`}
+                    </div>
+                    <div className="flex gap-8">
+                        {project.permissions.includes(ProjectPermissionEnum.UpdateInfo) &&
+                            <Link className="w-32 h-32  bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={() => props.onClose?.()} to={createRoute({ type: "edit-project", id: project.id })}><FiEdit2 /></Link>}
+                        <button className="w-32 h-32  bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={closeModal}><IoMdClose className=' inline-block' /></button>
+                    </div>
                 </div>
             </div>
             <div className="p-24 flex flex-col gap-24">
@@ -248,7 +250,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
                         </div>
                     </div>}
 
-                <Button color='gray' fullWidth href={createRoute({ type: "project", tag: project.hashtag })} onClick={props.onClose}>View Project Details</Button>
+                <Button color='white' fullWidth href={createRoute({ type: "project", tag: project.hashtag })} onClick={props.onClose}>View project details</Button>
 
                 {/* <div className="text-center">
                     <h3 className="text-body4 font-regular">Are you the creator of this project</h3>
diff --git a/src/features/Projects/pages/ProjectPage/ProjectPage.tsx b/src/features/Projects/pages/ProjectPage/ProjectPage.tsx
index a0f8045..77a9033 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectPage.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectPage.tsx
@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom"
 import LoadingPage from "src/Components/LoadingPage/LoadingPage"
 import NotFoundPage from "src/features/Shared/pages/NotFoundPage/NotFoundPage"
-import { useProjectDetailsQuery } from "src/graphql"
+import { ProjectLaunchStatusEnum, useProjectDetailsQuery } from "src/graphql"
 import { Helmet } from 'react-helmet'
 import { useAppDispatch, useMediaQuery } from 'src/utils/hooks';
 import styles from './styles.module.scss'
@@ -60,6 +60,16 @@ export default function ProjectPage() {
                 }
                 <meta property="og:image" content={project.cover_image} />
             </Helmet>
+            <div className="relative w-full md:hidden h-[120px]">
+                <img className="w-full h-full object-cover" src={project.cover_image} alt="" />
+                <div className="absolute top-16 md:top-24 left-24 flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
+                    {project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
+                    {project.launch_status === ProjectLaunchStatusEnum.Wip && `🔧 WIP`}
+                </div>
+                <div className="absolute left-24 bottom-0 translate-y-1/2 w-[108px] aspect-square">
+                    <img className="w-full h-full border-2 border-white rounded-24" src={project.thumbnail_image} alt="" />
+                </div>
+            </div>
             <div className={`page-container bg-white md:bg-inherit`}
             >
                 <div className={` ${styles.grid}`}
@@ -84,13 +94,12 @@ export default function ProjectPage() {
                     <>
                         <main>
                             <AboutCard project={project} />
-                            <LinksCard links={project} />
                             <CapabilitiesCard capabilities={project.capabilities} />
                             <hr className="bg-gray-100" />
                             <MakersCard members={project.members} recruit_roles={project.recruit_roles} />
                             <hr className="bg-gray-100" />
-                            <TournamentsCard onlyMd tournaments={[]} />
                             <StoriesCard onlyMd stories={[]} />
+                            <TournamentsCard onlyMd tournaments={[]} />
                             <SimilarProjectsCard id={project.id} />
                         </main>
                     </>