update: show name of project in vote modal, hide similarProjects card when empty

src/features/Projects/pages/ProjectPage/Components/AboutCard/AboutCard.tsx

@@ -40,6 +40,7 @@ export default function AboutCard({ project }: Props) {
         dispatch(openModal({
             Modal: 'VoteCard', props: {
                 projectId: project.id,
+                title: project.title,
                 initVotes: votes
             }
         }))
@@ -66,7 +67,7 @@ export default function AboutCard({ project }: Props) {
                 <div className="flex flex-col gap-24 relative">
                     <div className="flex flex-wrap justify-end items-center gap-16">
                         {canEdit && <Button size="sm" color="gray" href={createRoute({ type: "edit-project", id: project.id })}>Edit Project</Button>}
-                        <Button size="sm" variant='outline' color='gray' className='w-full md:w-auto' onClick={() => onVote()}>
+                        <Button size="sm" variant='outline' color='gray' className='w-full md:w-auto hover:!text-red-500 hover:!border-red-200 hover:!bg-red-50' onClick={() => onVote()}>
                             <MdLocalFireDepartment />{<span className="align-middle w-[4ch]"> {numberFormatter(project.votes_count)}</span>}
                         </Button>
                     </div>

src/features/Projects/pages/ProjectPage/Components/SimilarProjectsCard/SimilarProjectsCard.tsx

@@ -15,6 +15,8 @@ export default function SimilarProjectsCard({ id }: Props) {
 
     if (query.loading) return null;
 
+    if (query.data?.similarProjects.length === 0) return null;
+
     return (
         <Card onlyMd>
             <h3 className="text-body2 font-bolder">🚀 Similar projects</h3>

src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx

@@ -107,6 +107,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
         dispatch(openModal({
             Modal: 'VoteCard', props: {
                 projectId: project.id,
+                title: project.title,
                 initVotes: votes
             }
         }))

src/features/Projects/pages/ProjectPage/VoteCard/VoteCard.tsx

@@ -7,6 +7,7 @@ import { PaymentStatus, useVote } from 'src/utils/hooks';
 import Confetti from "react-confetti";
 import { useWindowSize } from '@react-hookz/web';
 import { Vote_Item_Type } from 'src/graphql';
+import IconButton from 'src/Components/IconButton/IconButton';
 
 const defaultOptions = [
     { text: '100 sat', value: 100 },
@@ -17,6 +18,7 @@ const defaultOptions = [
 
 interface Props extends ModalCard {
     projectId: number;
+    title?: string;
     initVotes?: number;
 }
 
@@ -69,8 +71,12 @@ export default function VoteCard({ onClose, direction, projectId, initVotes, ...
             exit='exit'
             className="modal-card max-w-[343px] p-24 rounded-xl relative"
         >
-            <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
-            <h2 className='text-h5 font-bold'>Vote for this Project</h2>
+            <div className="flex items-start gap-12">
+                <h2 className='text-h5 font-bold'>Vote for {props.title ?? "project"}</h2>
+                <IconButton onClick={onClose} >
+                    <IoClose className='text-body2' />
+                </IconButton>
+            </div>
             <form onSubmit={requestPayment} className="mt-32 ">
                 <label className="block text-gray-700 text-body4 mb-2 ">
                     Enter Amount