fix: update project modals to be pageModals

src/features/Projects/pages/CategoryPage/ProjectsGrid/ProjectsGrid.tsx

@@ -2,7 +2,6 @@
 import ProjectCardMini from "src/features/Projects/Components/ProjectCardMini/ProjectCardMini";
 import ProjectCardMiniSkeleton from 'src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton';
 import { openModal } from 'src/redux/features/modals.slice';
-import { openProject } from 'src/redux/features/project.slice';
 import { useAppDispatch } from 'src/utils/hooks';
 import { ProjectCard } from 'src/utils/interfaces';
 
@@ -17,7 +16,9 @@ export default function ProjectsGrid({ isLoading, projects }: Props) {
 
     const handleClick = (projectId: number) => {
         dispatch(openModal({
-            Modal: "ProjectDetailsCard", props: {
+            Modal: "ProjectDetailsCard",
+            isPageModal: true,
+            props: {
                 projectId
             }
         }))

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

@@ -51,7 +51,7 @@ export default function ProjectsRow({ title, link, projects }: Props) {
 
     const handleClick = (projectId: number) => {
         if (isClickAllowed()) {
-            dispatch(openModal({ Modal: "ProjectDetailsCard", props: { projectId } }))
+            dispatch(openModal({ Modal: "ProjectDetailsCard", isPageModal: true, props: { projectId } }))
         }
     }
 

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

@@ -3,7 +3,8 @@ import { MdClose, } from 'react-icons/md';
 import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer';
 import Skeleton from 'react-loading-skeleton';
 import Badge from 'src/Components/Badge/Badge';
-import { useAppSelector } from 'src/utils/hooks';
+import { useMediaQuery } from 'src/utils/hooks';
+import { MEDIA_QUERIES } from 'src/utils/theme';
 
 
 interface Props extends ModalCard {
@@ -13,9 +14,7 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
 
 
 
-    const { isMobileScreen } = useAppSelector(state => ({
-        isMobileScreen: state.ui.isMobileScreen
-    }));
+    const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
 
 
 
@@ -27,12 +26,12 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
             initial='initial'
             animate="animate"
             exit='exit'
-            className={`modal-card max-w-[768px] ${props.isPageModal && isMobileScreen && 'rounded-0 w-full min-h-screen'}`}
+            className={`modal-card max-w-[768px] ${props.isPageModal && !isMdScreen && 'rounded-0 w-full min-h-screen'}`}
 
         >
             <div className="relative h-[80px] lg:h-[152px]">
                 <Skeleton height='100%' className='!leading-inherit' />
-                <button className="w-[48px] h-[48px] bg-white z-10 absolute top-1/2 left-32 -translate-y-1/2 rounded-full hover:bg-gray-200 text-center" onClick={onClose}><MdClose className=' inline-block text-body2 lg:text-body1' /></button>
+                <button className="w-40 h-40 md:w-48 md:h-48 bg-white z-10 absolute top-1/2 left-32 -translate-y-1/2 rounded-full hover:bg-gray-200 text-center" onClick={onClose}><MdClose className=' inline-block text-body2 lg:text-body1' /></button>
             </div>
             <div className="p-24">
                 <div className="flex gap-24 items-center h-[93px]">

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

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { BsJoystick } from 'react-icons/bs'
 import { MdClose, MdLocalFireDepartment } from 'react-icons/md';
 import { ModalCard } from 'src/Components/Modals/ModalsContainer/ModalsContainer';
-import { useAppDispatch, useAppSelector } from 'src/utils/hooks';
+import { useAppDispatch, useAppSelector, useMediaQuery } from 'src/utils/hooks';
 import { openModal, scheduleModal } from 'src/redux/features/modals.slice';
 import { setProject } from 'src/redux/features/project.slice';
 import Button from 'src/Components/Button/Button';
@@ -16,6 +16,7 @@ import linkifyHtml from 'linkify-html';
 import ErrorMessage from 'src/Components/ErrorMessage/ErrorMessage';
 import { setVoteAmount } from 'src/redux/features/vote.slice';
 import { numberFormatter } from 'src/utils/helperFunctions';
+import { MEDIA_QUERIES } from 'src/utils/theme';
 
 
 interface Props extends ModalCard {
@@ -28,11 +29,11 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
     const [screenshotsOpen, setScreenshotsOpen] = useState(-1);
 
 
-    const { isWalletConnected, project, isMobileScreen } = useAppSelector(state => ({
+    const { isWalletConnected, project } = useAppSelector(state => ({
         isWalletConnected: state.wallet.isConnected,
-        project: state.project.project,
-        isMobileScreen: state.ui.isMobileScreen
+        project: state.project.project
     }));
+    const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
 
     const { loading, error } = useProjectDetailsQuery({
         variables: { projectId: projectId! },
@@ -57,7 +58,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
 
     if (error)
         return <div
-            className={`modal-card max-w-[768px] ${props.isPageModal && isMobileScreen && 'rounded-0 w-full min-h-screen'}`}
+            className={`modal-card max-w-[768px] ${props.isPageModal && !isMdScreen && 'rounded-0 w-full min-h-screen'}`}
         >
             <div className="p-64">
                 <ErrorMessage type='fetching' message='Something Wrong happened while fetching project details, please try refreshing the page' />
@@ -98,7 +99,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
 
     return (
         <div
-            className={`modal-card max-w-[768px] ${props.isPageModal && isMobileScreen && '!rounded-0 w-full min-h-screen'}`}
+            className={`modal-card max-w-[768px] ${(props.isPageModal && !isMdScreen) && '!rounded-0 w-full min-h-screen'}`}
         >
             <div className="relative h-[80px] lg:h-[152px]">
                 <img className="w-full h-full object-cover" src={project.cover_image} alt="" />

src/mocks/data/tournament.ts

@@ -38,7 +38,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Semper turpis est, ac e
         amount: "$ 1k",
         image: "https://imagedelivery.net/wyrwp3c-j0gDDUWgnE7lig/fa7b7cdd-7c06-4ebe-1a2d-94af9d2dae00/public",
     }],
-    events_count: 28,
+    events_count: 6,
     makers_count: 668,
     projects_count: 21,
     events: [