update: final QA fixes

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'}
     `;
 
 

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">

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">

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>)}

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">

src/styles/shared.scss

@@ -10,7 +10,7 @@
 }
 
 button[disabled] {
-  opacity: 0.5;
+  opacity: 0.8;
   pointer-events: none;
 }