From f3f885086f7544b2c42e1995537f266f88abe126 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 11 Sep 2022 21:52:06 +0300
Subject: [PATCH] fix: tournament overview bg on mobile, hackathons page
 redesign

---
 src/Components/Navbar/NavDesktop.tsx          | 358 +++++++++---------
 .../pages/HackathonsPage/HackathonsPage.tsx   |  38 +-
 .../pages/OverviewPage/OverviewPage.tsx       |   2 +-
 3 files changed, 213 insertions(+), 185 deletions(-)

diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx
index 5bbc318..038c76d 100644
--- a/src/Components/Navbar/NavDesktop.tsx
+++ b/src/Components/Navbar/NavDesktop.tsx
@@ -39,113 +39,115 @@ export default function NavDesktop() {
 
     return (
         <nav className="bg-white py-16 flex items-center w-full min-w-full">
-            <div className="content-container flex items-center">
-                <Link to="/">
-                    <h2 className="text-h5 font-bold mr-40 lg:mr-64">
-                        <img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
-                    </h2>
-                </Link>
-                <ul className="flex gap-32 xl:gap-64">
-                    <li className="relative">
-                        <Link to={'/projects'} className='text-body4 font-bold hover:text-primary-600'>
-                            Projects
-                        </Link>
-                    </li>
-                    <li>
-                        <Menu
-                            offsetY={28}
-                            menuButton={
-                                <MenuButton
-                                    className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" />
-                                </MenuButton>
-                            }
-                            menuClassName='!rounded-12 !p-8 !border-gray-200'
-                            menuStyle={{ border: '1px solid' }}
-                        >
-                            <MenuItem
-                                href="/blog"
-                                onClick={(e) => {
-                                    e.syntheticEvent.preventDefault();
-                                    navigate("/blog");
-                                }}
-                                className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 '
+            <div className="content-container">
+                <div className="flex items-center">
+
+                    <Link to="/">
+                        <h2 className="text-h5 font-bold mr-40 lg:mr-64">
+                            <img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
+                        </h2>
+                    </Link>
+                    <ul className="flex gap-32 xl:gap-64">
+                        <li className="relative">
+                            <Link to={'/projects'} className='text-body4 font-bold hover:text-primary-600'>
+                                Projects
+                            </Link>
+                        </li>
+                        <li>
+                            <Menu
+                                offsetY={28}
+                                menuButton={
+                                    <MenuButton
+                                        className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" />
+                                    </MenuButton>
+                                }
+                                menuClassName='!rounded-12 !p-8 !border-gray-200'
+                                menuStyle={{ border: '1px solid' }}
                             >
-                                <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 `} /> */}
-                                    <span className="text-body2">✍🏼</span>
-                                </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
+                                <MenuItem
+                                    href="/blog"
+                                    onClick={(e) => {
+                                        e.syntheticEvent.preventDefault();
+                                        navigate("/blog");
+                                    }}
+                                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !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 `} /> */}
+                                        <span className="text-body2">✍🏼</span>
+                                    </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-40'
+                                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 opacity-40'
+                                >
+                                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                                        <span className="text-body2">💬</span>
+                                    </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"
+                                    onClick={(e) => {
+                                        e.syntheticEvent.preventDefault();
+                                        navigate("/hackathons");
+                                    }}
+                                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                                >
+                                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                                        <span className="text-body2">🏆</span>
+                                    </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>
+                        <li className="relative">
+                            <a
+                                href={'https://bolt.fun/guide/'}
+                                target="_blank"
+                                rel="noreferrer"
+                                className='text-body4 font-bold hover:text-primary-600'
                             >
-                                <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
-                                    <span className="text-body2">💬</span>
-                                </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"
-                                onClick={(e) => {
-                                    e.syntheticEvent.preventDefault();
-                                    navigate("/hackathons");
-                                }}
-                                className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                            >
-                                <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
-                                    <span className="text-body2">🏆</span>
-                                </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>
-                    <li className="relative">
-                        <a
-                            href={'https://bolt.fun/guide/'}
-                            target="_blank"
-                            rel="noreferrer"
-                            className='text-body4 font-bold hover:text-primary-600'
-                        >
-                            Guide
-                        </a>
-                    </li>
-                    <li className="relative">
-                        <Link to={'/donate'} className='text-body4 font-bold hover:text-primary-600'>
-                            Donate
-                        </Link>
-                    </li>
-                </ul>
+                                Guide
+                            </a>
+                        </li>
+                        <li className="relative">
+                            <Link to={'/donate'} className='text-body4 font-bold hover:text-primary-600'>
+                                Donate
+                            </Link>
+                        </li>
+                    </ul>
 
-                <div className="flex-1"></div>
+                    <div className="flex-1"></div>
 
-                <motion.div
-                    animate={searchOpen ? { opacity: 0 } : { opacity: 1 }}
-                    className="flex"
-                >
+                    <motion.div
+                        animate={searchOpen ? { opacity: 0 } : { opacity: 1 }}
+                        className="flex"
+                    >
 
-                    {/* <Button
+                        {/* <Button
                 color="primary"
                 size="md"
                 className="lg:px-40"
@@ -154,87 +156,89 @@ export default function NavDesktop() {
             >
                 Submit App️
             </Button> */}
-                    {/* {isWalletConnected ?
+                        {/* {isWalletConnected ?
                             <Button className="ml-16 py-12 px-16 lg:px-20">Connected <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /></Button>
                             : <Button className="ml-16 py-12 px-16 lg:px-20" onClick={onConnectWallet}><AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet </Button>
                         } */}
 
-                    {currentSection === 'apps' && <IconButton className='mr-16 self-center' onClick={openSearch}>
-                        <BsSearch className='scale-125 text-gray-400' />
-                    </IconButton>}
-                </motion.div>
-                {curUser !== undefined &&
-                    (curUser ?
-                        <Menu
-                            align="end"
-                            offsetY={4}
-                            menuClassName='!p-8 !rounded-12'
-                            menuButton={<MenuButton ><Avatar src={curUser.avatar} width={40} /> </MenuButton>}>
-                            <MenuItem
-                                href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
-                                onClick={(e) => {
-                                    e.syntheticEvent.preventDefault();
-                                    navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
-                                }}
-                                className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                            >
-                                👾 Profile
-                            </MenuItem>
-                            <MenuItem
-                                href="/edit-profile"
-                                onClick={(e) => {
-                                    e.syntheticEvent.preventDefault();
-                                    navigate("/edit-profile");
-                                }}
-                                className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                            >
-                                ⚙️ Settings
-                            </MenuItem>
-                            <MenuItem
-                                href="/logout"
-                                onClick={(e) => {
-                                    e.syntheticEvent.preventDefault();
-                                    navigate("/logout");
-                                }}
-                                className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                            >
-                                👋 Logout
-                            </MenuItem>
-                        </Menu>
-
-                        :
-                        <Button size="sm" color="white" href="/login">
-                            Connect ⚡
-                        </Button>
-                    )
-                }
-                <div className="relative h-36">
-                    <motion.div
-                        initial={{
-                            opacity: 0,
-                            y: '0'
-                        }}
-                        animate={searchOpen ? {
-                            opacity: 1,
-                            y: '0',
-                            transition: { type: "spring", stiffness: 70 }
-
-                        } : {
-                            opacity: 0,
-                            y: '-120px',
-                            transition: {
-                                ease: "easeIn"
-                            }
-                        }}
-                        className='absolute top-0 right-0 flex items-center h-full'
-                    >
-                        <Search
-                            width={326}
-                            isOpen={searchOpen}
-                            onClose={() => setSearchOpen(false)}
-                            onResultClick={() => setSearchOpen(false)}
-                        />
+                        {currentSection === 'apps' && <IconButton className='mr-16 self-center' onClick={openSearch}>
+                            <BsSearch className='scale-125 text-gray-400' />
+                        </IconButton>}
                     </motion.div>
+                    {curUser !== undefined &&
+                        (curUser ?
+                            <Menu
+                                align="end"
+                                offsetY={4}
+                                menuClassName='!p-8 !rounded-12'
+                                menuButton={<MenuButton ><Avatar src={curUser.avatar} width={40} /> </MenuButton>}>
+                                <MenuItem
+                                    href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
+                                    onClick={(e) => {
+                                        e.syntheticEvent.preventDefault();
+                                        navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
+                                    }}
+                                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                                >
+                                    👾 Profile
+                                </MenuItem>
+                                <MenuItem
+                                    href="/edit-profile"
+                                    onClick={(e) => {
+                                        e.syntheticEvent.preventDefault();
+                                        navigate("/edit-profile");
+                                    }}
+                                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                                >
+                                    ⚙️ Settings
+                                </MenuItem>
+                                <MenuItem
+                                    href="/logout"
+                                    onClick={(e) => {
+                                        e.syntheticEvent.preventDefault();
+                                        navigate("/logout");
+                                    }}
+                                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                                >
+                                    👋 Logout
+                                </MenuItem>
+                            </Menu>
+
+                            :
+                            <Button size="sm" color="white" href="/login">
+                                Connect ⚡
+                            </Button>
+                        )
+                    }
+                    <div className="relative h-36">
+                        <motion.div
+                            initial={{
+                                opacity: 0,
+                                y: '0'
+                            }}
+                            animate={searchOpen ? {
+                                opacity: 1,
+                                y: '0',
+                                transition: { type: "spring", stiffness: 70 }
+
+                            } : {
+                                opacity: 0,
+                                y: '-120px',
+                                transition: {
+                                    ease: "easeIn"
+                                }
+                            }}
+                            className='absolute top-0 right-0 flex items-center h-full'
+                        >
+                            <Search
+                                width={326}
+                                isOpen={searchOpen}
+                                onClose={() => setSearchOpen(false)}
+                                onResultClick={() => setSearchOpen(false)}
+                            />
+                        </motion.div>
+                    </div>
+
                 </div>
             </div>
         </nav>
diff --git a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx b/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
index 83b99f0..b194a9a 100644
--- a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
+++ b/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
@@ -7,6 +7,9 @@ import SortByFilter from '../../Components/SortByFilter/SortByFilter'
 import styles from './styles.module.scss'
 import { Helmet } from 'react-helmet'
 import { Fulgur } from 'src/Components/Ads/Fulgur'
+import { IoLocationOutline } from 'react-icons/io5'
+import { Link } from 'react-router-dom'
+import { createRoute } from 'src/utils/routing'
 
 
 export default function HackathonsPage() {
@@ -28,17 +31,38 @@ export default function HackathonsPage() {
                 <meta property="og:title" content={'Hackathons'} />
             </Helmet>
             <div
-                className={`page-container  pt-16 w-full ${styles.grid}`}
+                className={`page-container pt-16 w-full`}
             >
-                <aside className='no-scrollbar'>
+                <Link to={createRoute({ type: "tournament", id: 1, tab: 'overview' })}>
+                    <div className="rounded-16 min-h-[200px] md:min-h-[240px] relative overflow-hidden p-16 md:p-24 flex flex-col items-start justify-end">
+                        <img
+                            className="w-full h-full object-cover object-top absolute top-0 left-0 z-[-2]"
+                            src='https://imagedelivery.net/wyrwp3c-j0gDDUWgnE7lig/1d5d2c86-fe46-4478-6909-bb3c425c0d00/public'
+                            alt=""
+                        />
+                        <div className="w-full h-full object-cover bg-black bg-opacity-60 absolute top-0 left-0 z-[-1]"></div>
+                        <div className="max-w-[90%]">
+                            <p className="text-body1 font-bolder text-white">Legends of Lightning ⚡️ Tournament</p>
+                            <p className="text-body3 font-medium text-white mt-8">1st Oct - 31st Nov, 2022</p>
+                        </div>
+                        <p className="text-body4 font-medium text-white mt-8">
+                            <IoLocationOutline className="mr-8" /> Online
+                        </p>
+                    </div>
+                </Link>
+                <div className="flex gap-16 flex-wrap my-24 justify-between">
+                    <h1 id='title' className="text-body1 lg:text-h2 font-bolder">Hackathons 🏆</h1>
+                    <div className="self-center">
+                        <SortByFilter
+                            filterChanged={setSortByFilter}
+                        /></div>
+                </div>
+                {/* <aside className='no-scrollbar'>
                     <div className="flex flex-col gap-24 md:overflow-y-scroll sticky-side-element">
                         <h1 id='title' className="text-body1 lg:text-h2 font-bolder">Hackathons 🏆</h1>
                         <SortByFilter
                             filterChanged={setSortByFilter}
-                        />
-                        {/* <TopicsFilter
-                        filterChanged={setTopicsFilter}
-                    /> */}
+                        /> 
                         <Button
                             href='https://airtable.com/shrgXKynON8YWeyyE'
                             newTab
@@ -51,7 +75,7 @@ export default function HackathonsPage() {
                             <Fulgur />
                         </div>
                     </div>
-                </aside>
+                </aside> */}
                 <main className="self-start">
                     <HackathonsList
                         currentFilter={sortByFilter}
diff --git a/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx b/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx
index 8a821d8..f0de391 100644
--- a/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx
@@ -15,7 +15,7 @@ export default function OverviewPage() {
     const { tournamentDetails, makers, myParticipationInfo } = useTournament()
 
     return (
-        <Card onlyMd className='flex flex-col gap-42'>
+        <Card onlyMd className='flex flex-col gap-42 bg-white -mx-16 -my-24 md:m-0 px-16'>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-24 items-start">
                 <div className='md:col-span-2'>
                     <div