From 26faeafbfb621ba76f4054f7a88a046ec86147af Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 12 Sep 2022 15:19:20 +0300
Subject: [PATCH] update: final QA fixes

---
 src/Components/Button/Button.tsx              |  2 +-
 .../pages/HackathonsPage/HackathonsPage.tsx   | 33 +++++++++----------
 .../pages/ExplorePage/Header/Header.tsx       | 31 ++++++++++++-----
 .../RegisterCard/RegisterCard.tsx             |  2 +-
 .../TournamentDetailsPage/Header/Header.tsx   |  2 +-
 src/styles/shared.scss                        |  2 +-
 6 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/Components/Button/Button.tsx b/src/Components/Button/Button.tsx
index e01b929..81fa3c1 100644
--- a/src/Components/Button/Button.tsx
+++ b/src/Components/Button/Button.tsx
@@ -89,7 +89,7 @@ const Button = React.forwardRef<any, Props>(({ color = 'white',
     ${variant === 'fill' ? btnStylesFill[color] : btnStylesOutline[color]}
     ${isLoading && disableOnLoading && 'bg-opacity-70 pointer-events-none'}
     ${fullWidth && 'w-full'}
-    ${disabled && 'opacity-40 pointer-events-none'}
+    ${disabled && 'opacity-90 pointer-events-none'}
     `;
 
 
diff --git a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx b/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
index 7b0914c..a69618f 100644
--- a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
+++ b/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
@@ -10,6 +10,7 @@ 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'
+import { bannerData } from 'src/features/Projects/pages/ExplorePage/Header/Header'
 
 
 export default function HackathonsPage() {
@@ -33,24 +34,22 @@ export default function HackathonsPage() {
             <div
                 className={`page-container`}
             >
-                <div className={`pt-16 w-full`}>
-                    <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 className={`w-full`}>
+                    <div className="rounded-16 min-h-[280px] 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={bannerData.img}
+                            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%]">
+                            {bannerData.title}
                         </div>
-                    </Link>
+
+                        <Button href={bannerData.link.url} color="white" className="mt-24">
+                            {bannerData.link.content}
+                        </Button>
+                    </div>
                     <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">
diff --git a/src/features/Projects/pages/ExplorePage/Header/Header.tsx b/src/features/Projects/pages/ExplorePage/Header/Header.tsx
index 3a08965..5eace51 100644
--- a/src/features/Projects/pages/ExplorePage/Header/Header.tsx
+++ b/src/features/Projects/pages/ExplorePage/Header/Header.tsx
@@ -7,6 +7,19 @@ import useEmblaCarousel from 'embla-carousel-react'
 import { useCallback, useEffect, useState } from "react";
 import { createRoute } from "src/utils/routing";
 
+export const bannerData = {
+  title:
+    <>
+      <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>
+    </>,
+  img: "https://imagedelivery.net/wyrwp3c-j0gDDUWgnE7lig/1d5d2c86-fe46-4478-6909-bb3c425c0d00/public",
+  link: {
+    content: "Register Now",
+    url: createRoute({ type: "tournament", id: 1, tab: 'overview' }),
+  },
+}
+
 const headerLinks = [
   {
     title:
@@ -62,22 +75,22 @@ export default function Header() {
     <div className="relative group">
       <div className="overflow-hidden" ref={emblaRef}>
         <div className="w-full flex gap-16">
-          <div className="flex-[0_0_100%] md:flex-[0_0_calc(50%-8px)] rounded-20 h-[280px] relative overflow-hidden p-24 flex flex-col items-start justify-end">
+          <div className="flex-[0_0_100%] rounded-20 min-h-[280px] relative overflow-hidden p-24 flex flex-col items-start justify-end">
             <img
-              className="w-full h-full object-cover absolute top-0 left-0 z-[-2]"
-              src={headerLinks[0].img}
+              className="w-full h-full object-cover object-top absolute top-0 left-0 z-[-2]"
+              src={bannerData.img}
               alt=""
             />
-            <div className="w-full h-full object-cover bg-gradient-to-t from-gray-900 absolute top-0 left-0 z-[-1]"></div>
+            <div className="w-full h-full object-cover bg-gradient-to-tr from-gray-900 absolute top-0 left-0 z-[-1]"></div>
             <div className="max-w-[90%]">
-              {headerLinks[0].title}
+              {bannerData.title}
             </div>
 
-            <Button href={headerLinks[0].link.url} color="white" className="mt-24">
-              {headerLinks[0].link.content}
+            <Button href={bannerData.link.url} color="white" className="mt-24">
+              {bannerData.link.content}
             </Button>
           </div>
-          <div className="flex-[0_0_100%] md:flex-[0_0_calc(50%-8px)] rounded-20 h-[280px] relative overflow-hidden p-24 flex flex-col items-start justify-end">
+          {/* <div className="flex-[0_0_100%] md:flex-[0_0_calc(50%-8px)] rounded-20 h-[280px] relative overflow-hidden p-24 flex flex-col items-start justify-end">
             <img
               className="w-full h-full object-cover absolute top-0 left-0 z-[-2]"
               src={headerLinks[1].img}
@@ -90,7 +103,7 @@ export default function Header() {
             <Button color="white" href={headerLinks[1].link.url} newTab className="mt-24">
               {headerLinks[1].link.content}
             </Button>
-          </div>
+          </div> */}
         </div>
       </div>
       <div className="absolute inset-x-0 bottom-8 flex justify-center gap-4 md:hidden">
diff --git a/src/features/Tournaments/pages/OverviewPage/RegisterCard/RegisterCard.tsx b/src/features/Tournaments/pages/OverviewPage/RegisterCard/RegisterCard.tsx
index cfe200c..214f014 100644
--- a/src/features/Tournaments/pages/OverviewPage/RegisterCard/RegisterCard.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/RegisterCard/RegisterCard.tsx
@@ -45,7 +45,7 @@ export default function RegisterCard({ makers_count, start_date, avatars, isRegi
 
 
     return (
-        <Card onlyMd className='flex flex-col gap-24 !outline-1'>
+        <Card onlyMd className='flex flex-col gap-24 !border'>
             <div>
                 {makers_count > 2 && <p className="text-body5 text-gray-600 flex">
                     {avatars.map((img, idx) => <div className='w-[16px] h-32 relative'><Avatar key={idx} src={img} width={32} className='absolute top-0 left-0 min-w-[32px] !border-white' /></div>)}
diff --git a/src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx b/src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx
index ace5b32..7071565 100644
--- a/src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx
+++ b/src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx
@@ -15,7 +15,7 @@ export default function Header() {
             <Helmet>
                 <title>{tournamentDetails.title} Tournament</title>
             </Helmet>
-            <div className="w-full p-16 md:p-24 flex flex-col min-h-[240px] md:min-h-[280px] relative mb-[-1px]">
+            <div className="w-full p-16 md:p-24 flex flex-col h-[280px] relative mb-[-1px]">
                 <img src={tournamentDetails.cover_image} className='absolute inset-0 h-full w-full object-cover object-top' alt="" />
                 <div className='absolute inset-0 h-full w-full bg-black bg-opacity-50 ' />
                 <div className="content-container mt-auto">
diff --git a/src/styles/shared.scss b/src/styles/shared.scss
index 6a03db4..8e4caf6 100644
--- a/src/styles/shared.scss
+++ b/src/styles/shared.scss
@@ -10,7 +10,7 @@
 }
 
 button[disabled] {
-  opacity: 0.5;
+  opacity: 0.8;
   pointer-events: none;
 }