From f55485136299c4f143d97baf96ee7fe70148985d Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 11 Sep 2022 17:56:31 +0300
Subject: [PATCH] update: QA fixes

---
 .../assets/images/logos}/fulgur_logo.svg           |  0
 src/Components/Ads/Fulgur/Fulgur.tsx               |  3 +--
 .../Projects/pages/ExplorePage/ExplorePage.tsx     |  4 ++--
 .../Tournaments/pages/EventsPage/EventsPage.tsx    |  6 +++++-
 .../pages/MakersPage/MakerCard/MakerCard.tsx       |  4 ++--
 .../pages/OverviewPage/FAQsSection/FAQsSection.tsx |  3 +++
 .../OverviewPage/RegisterCard/RegisterCard.tsx     | 13 ++++---------
 .../ConfirmAccount/ConfirmAccount.tsx              | 10 +++++-----
 .../RegisterationModals/LoginModal/LoginModal.tsx  |  6 +++---
 .../RegistrationDetails/RegistrationDetails.tsx    |  6 +++---
 .../RegistrationSuccess/RegistrationSuccess.tsx    | 14 +++++++-------
 .../Navigation/Navigation.tsx                      |  2 +-
 src/styles/index.scss                              |  2 +-
 src/styles/tw.scss                                 |  2 +-
 14 files changed, 38 insertions(+), 37 deletions(-)
 rename {src/Components/Ads/Fulgur => public/assets/images/logos}/fulgur_logo.svg (100%)

diff --git a/src/Components/Ads/Fulgur/fulgur_logo.svg b/public/assets/images/logos/fulgur_logo.svg
similarity index 100%
rename from src/Components/Ads/Fulgur/fulgur_logo.svg
rename to public/assets/images/logos/fulgur_logo.svg
diff --git a/src/Components/Ads/Fulgur/Fulgur.tsx b/src/Components/Ads/Fulgur/Fulgur.tsx
index 10ae079..5328196 100644
--- a/src/Components/Ads/Fulgur/Fulgur.tsx
+++ b/src/Components/Ads/Fulgur/Fulgur.tsx
@@ -1,5 +1,4 @@
 import Button from 'src/Components/Button/Button'
-import Logo from './fulgur_logo.svg'
 import Lines from './lines-h.png'
 
 
@@ -8,7 +7,7 @@ export default function Fulgur() {
         <div className='p-24 pt-48 bg-black rounded-16 relative'>
             <img src={Lines} alt="" className='w-full absolute top-0 left-0' />
             <div className="flex flex-col gap-24 relative">
-                <img src={Logo} alt="Fulgur Ventures Logo" className='w-10/12 max-w-[230px] ' />
+                <img src={'/assets/images/logos/fulgur_logo.svg'} alt="Fulgur Ventures Logo" className='w-10/12 max-w-[230px] ' />
                 <div>
                     <h3 className="text-white font-bolder text-body1">Turn your hackathon project into a startup</h3>
                     <p className="text-white font-medium mt-8 text-body4">Schedule an office hour with Fulgur Ventures</p>
diff --git a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
index 27053cd..ec3d04c 100644
--- a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
+++ b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
@@ -6,7 +6,7 @@ import Categories from "./Categories/Categories";
 
 export default function ExplorePage() {
     return (
-        <>
+        <div className="bg-white">
             <Helmet>
                 <title>{`Explore Lightning Products`}</title>
                 <meta property="og:title" content={`Explore Lightning Products`} />
@@ -22,6 +22,6 @@ export default function ExplorePage() {
                     <ProjectsSection />
                 </div>
             </div>
-        </>
+        </div>
     )
 }
diff --git a/src/features/Tournaments/pages/EventsPage/EventsPage.tsx b/src/features/Tournaments/pages/EventsPage/EventsPage.tsx
index c721bd4..95977ff 100644
--- a/src/features/Tournaments/pages/EventsPage/EventsPage.tsx
+++ b/src/features/Tournaments/pages/EventsPage/EventsPage.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import Button from 'src/Components/Button/Button';
 import { TournamentEventTypeEnum } from 'src/graphql'
 import { useTournament } from '../TournamentDetailsPage/TournamentDetailsContext';
 import EventCard from './EventCard/EventCard';
@@ -12,7 +13,10 @@ export default function EventsPage() {
 
     return (
         <div className='pb-42'>
-            <h2 className='text-body1 font-bolder text-gray-900 mb-24'>Events 📆 ({events_count})</h2>
+            <div className="flex gap-24 justify-between">
+                <h2 className='text-body1 font-bolder text-gray-900 mb-24'>Events 📆 ({events_count})</h2>
+                <Button size='sm' href='https://airtable.com/shrjVx8MjLfl8zyXD' color='primary' newTab className='ml-auto'>List an event</Button>
+            </div>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 lg:gap-24">
                 <EventsFilters
                     searchValue={searchFilter}
diff --git a/src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx b/src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx
index f07737e..b01a8d5 100644
--- a/src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx
+++ b/src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx
@@ -104,11 +104,11 @@ export default function MakerCard({ maker, isMe }: Props) {
                 <p className="text-body5 text-gray-900 font-medium mb-12">🚦 Hacking status</p>
                 <div className="flex flex-wrap gap-8">
                     <button
-                        className={`py-8 px-16 rounded-10 border ${hackingStatus === TournamentMakerHackingStatusEnum.OpenToConnect ? "bg-primary-100 text-primary-600 border-primary-200" : "bg-gray-50 hover:bg-gray-100 border-gray-200"}`}
+                        className={`py-8 px-16 text-body5 rounded-10 border ${hackingStatus === TournamentMakerHackingStatusEnum.OpenToConnect ? "bg-primary-100 text-primary-600 border-primary-200" : "bg-gray-50 hover:bg-gray-100 border-gray-200"}`}
                         onClick={() => changeHacktingStatus(TournamentMakerHackingStatusEnum.OpenToConnect)}
                     >👋 Open to connect</button>
                     <button
-                        className={`py-8 px-16 rounded-10 border ${hackingStatus === TournamentMakerHackingStatusEnum.Solo ? "bg-primary-100 text-primary-600 border-primary-200" : "bg-gray-50 hover:bg-gray-100 border-gray-200"}`}
+                        className={`py-8 px-16 text-body5 rounded-10 border ${hackingStatus === TournamentMakerHackingStatusEnum.Solo ? "bg-primary-100 text-primary-600 border-primary-200" : "bg-gray-50 hover:bg-gray-100 border-gray-200"}`}
                         onClick={() => changeHacktingStatus(TournamentMakerHackingStatusEnum.Solo)}
                     >👻 Hacking han solo</button>
                 </div>
diff --git a/src/features/Tournaments/pages/OverviewPage/FAQsSection/FAQsSection.tsx b/src/features/Tournaments/pages/OverviewPage/FAQsSection/FAQsSection.tsx
index 426037c..8807968 100644
--- a/src/features/Tournaments/pages/OverviewPage/FAQsSection/FAQsSection.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/FAQsSection/FAQsSection.tsx
@@ -17,6 +17,9 @@ export default function FAQsSection({ faqs }: Props) {
         <div>
             <h2 className='text-body1 font-bolder text-gray-900 mb-4'>FAQs</h2>
             <Accordion
+                classes={{
+                    heading: "!text-body3"
+                }}
                 items={faqs.map(faq => ({
                     heading: faq.question, content: <div
                         className={`text-gray-600 prose `}
diff --git a/src/features/Tournaments/pages/OverviewPage/RegisterCard/RegisterCard.tsx b/src/features/Tournaments/pages/OverviewPage/RegisterCard/RegisterCard.tsx
index 9e0c1ce..cfe200c 100644
--- a/src/features/Tournaments/pages/OverviewPage/RegisterCard/RegisterCard.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/RegisterCard/RegisterCard.tsx
@@ -45,13 +45,13 @@ export default function RegisterCard({ makers_count, start_date, avatars, isRegi
 
 
     return (
-        <Card onlyMd className='flex flex-col gap-24'>
+        <Card onlyMd className='flex flex-col gap-24 !outline-1'>
             <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>)}
                     <span className='self-center ml-24 font-medium '>+ {makers_count} makers</span>
                 </p>}
-                <Button color='primary' disabled={isRegistered} fullWidth className='mt-16' onClick={onRegister}>{isRegistered ? "Registered!" : "Register Now"}</Button>
+                <Button color={isRegistered ? 'gray' : "primary"} disabled={isRegistered} fullWidth className='mt-16' onClick={onRegister}>{isRegistered ? "Registered!" : "Register Now"}</Button>
             </div>
             <div>
                 {counter.isExpired ?
@@ -77,14 +77,9 @@ export default function RegisterCard({ makers_count, start_date, avatars, isRegi
             </div>
             <div>
                 <p className="text-body5 text-gray-900 font-medium">
-                    Sponsors
+                    Sponsored by
                 </p>
-                <div className="flex flex-wrap gap-12 mt-16">
-                    <Avatar width={42} src='https://i.pravatar.cc/42?id=70' />
-                    <Avatar width={42} src='https://i.pravatar.cc/42?id=80' />
-                    <Avatar width={42} src='https://i.pravatar.cc/42?id=90' />
-                    <Avatar width={42} src='https://i.pravatar.cc/42?id=100' />
-                </div>
+                <img src={'/assets/images/logos/fulgur_logo.svg'} alt="Fulgur Ventures Logo" className='max-h-48 mt-16 ' />
             </div>
         </Card>
     )
diff --git a/src/features/Tournaments/pages/OverviewPage/RegisterationModals/ConfirmAccount/ConfirmAccount.tsx b/src/features/Tournaments/pages/OverviewPage/RegisterationModals/ConfirmAccount/ConfirmAccount.tsx
index 9ea7762..6fbd69b 100644
--- a/src/features/Tournaments/pages/OverviewPage/RegisterationModals/ConfirmAccount/ConfirmAccount.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/RegisterationModals/ConfirmAccount/ConfirmAccount.tsx
@@ -40,15 +40,15 @@ export default function ConfirmAccount({ onClose, direction, tournamentId, ...pr
             exit='exit'
             className="modal-card max-w-[442px] rounded-xl relative"
         >
-            <div className="p-24">
-                <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
+            <div className="p-16 md:p-24">
+                <IoClose className='absolute text-body2 top-16 right-16 hover:cursor-pointer' onClick={onClose} />
                 <h2 className='text-h5 font-bold text-center'>Register for tournament</h2>
             </div>
             <hr className="bg-gray-200" />
-            <div className='flex flex-col justify-center gap-16 items-center text-center p-24'>
+            <div className='flex flex-col justify-center gap-16 items-center text-center p-16 md:p-24'>
                 <Avatar src={me.avatar} width={80} />
-                <div className="flex flex-col gap-4">
-                    <p className="text-body3 text-gray-900">{me.name}</p>
+                <div className="flex flex-col gap-4 overflow-hidden max-w-full">
+                    <p className="text-body3 text-gray-900 text-ellipsis overflow-hidden">{me.name}</p>
                     <p className="text-body4 text-gray-600">{me.jobTitle}</p>
                 </div>
 
diff --git a/src/features/Tournaments/pages/OverviewPage/RegisterationModals/LoginModal/LoginModal.tsx b/src/features/Tournaments/pages/OverviewPage/RegisterationModals/LoginModal/LoginModal.tsx
index 7c68e50..71bf657 100644
--- a/src/features/Tournaments/pages/OverviewPage/RegisterationModals/LoginModal/LoginModal.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/RegisterationModals/LoginModal/LoginModal.tsx
@@ -171,12 +171,12 @@ export default function LinkingAccountModal({ onClose, direction, tournamentId,
             exit='exit'
             className="modal-card max-w-[442px] rounded-xl relative"
         >
-            <div className="p-24">
-                <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
+            <div className="p-16 md:p-24">
+                <IoClose className='absolute text-body2 top-16 right-16 hover:cursor-pointer' onClick={onClose} />
                 <h2 className='text-h5 font-bold text-center'>Connect ⚡️ your maker profile</h2>
             </div>
             <hr className="bg-gray-200" />
-            <div className=' p-24'>
+            <div className=' p-16 md:p-24'>
                 {content}
             </div>
         </motion.div>
diff --git a/src/features/Tournaments/pages/OverviewPage/RegisterationModals/RegistrationDetails/RegistrationDetails.tsx b/src/features/Tournaments/pages/OverviewPage/RegisterationModals/RegistrationDetails/RegistrationDetails.tsx
index 76e8348..6ee6298 100644
--- a/src/features/Tournaments/pages/OverviewPage/RegisterationModals/RegistrationDetails/RegistrationDetails.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/RegisterationModals/RegistrationDetails/RegistrationDetails.tsx
@@ -113,12 +113,12 @@ export default function RegistrationDetails({ onClose, direction, ...props }: Pr
             exit='exit'
             className="modal-card max-w-[442px] rounded-xl relative "
         >
-            <div className="p-24">
-                <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
+            <div className="p-16 md:p-24">
+                <IoClose className='absolute text-body2 top-16 right-16 hover:cursor-pointer' onClick={onClose} />
                 <h2 className='text-h5 font-bold text-center'>Register for tournament</h2>
             </div>
             <hr className="bg-gray-200" />
-            <form onSubmit={handleSubmit(onSubmit)} className='flex flex-col gap-24 p-24'>
+            <form onSubmit={handleSubmit(onSubmit)} className='flex flex-col gap-24 p-16 md:p-24'>
                 <p className="text-body4 text-gray-600">Please provide us with some additional details below.</p>
 
                 <div className='flex flex-col gap-8'>
diff --git a/src/features/Tournaments/pages/OverviewPage/RegisterationModals/RegistrationSuccess/RegistrationSuccess.tsx b/src/features/Tournaments/pages/OverviewPage/RegisterationModals/RegistrationSuccess/RegistrationSuccess.tsx
index a267c32..ed74936 100644
--- a/src/features/Tournaments/pages/OverviewPage/RegisterationModals/RegistrationSuccess/RegistrationSuccess.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/RegisterationModals/RegistrationSuccess/RegistrationSuccess.tsx
@@ -30,15 +30,15 @@ export default function RegistrationSuccess({ onClose, direction, ...props }: Pr
             exit='exit'
             className="modal-card max-w-[442px] rounded-xl relative"
         >
-            <div className="p-24">
-                <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
+            <div className="p-16 md:p-24">
+                <IoClose className='absolute text-body2 top-16 right-16 hover:cursor-pointer' onClick={onClose} />
                 <h2 className='text-h5 font-bold text-center'>Registration succeeded!! ✅</h2>
             </div>
             <hr className="bg-gray-200" />
-            <div className='flex flex-col justify-center gap-16 items-center text-center p-24'>
+            <div className='flex flex-col justify-center gap-16 items-center text-center p-16 md:p-24'>
                 <Avatar src={me.avatar} width={80} />
-                <div className="flex flex-col gap-4">
-                    <p className="text-body3 text-gray-900 font-medium">{me.name}</p>
+                <div className="flex flex-col gap-4 max-w-full">
+                    <p className="text-body3 text-gray-900 font-medium overflow-hidden text-ellipsis">{me.name}</p>
                     <p className="text-body4 text-gray-600">{me.jobTitle}</p>
                 </div>
 
@@ -61,8 +61,8 @@ export default function RegistrationSuccess({ onClose, direction, ...props }: Pr
                 </div>
 
                 <div className="flex flex-col gap-16 w-full mt-24">
-                    <Button fullWidth href={createRoute({ type: "edit-profile" })} onClick={onClose} color='primary'>👾 Complete maker profile</Button>
-                    <Button fullWidth href={createRoute({ type: "tournament", tab: "makers", id: props.tournamentId })} onClick={onClose} color='gray'>🤝 Team up with other makers</Button>
+                    <Button fullWidth href={createRoute({ type: "tournament", tab: "makers", id: props.tournamentId })} onClick={onClose} color='primary'>🤝 Team up with other makers</Button>
+                    <Button fullWidth href={createRoute({ type: "edit-profile" })} onClick={onClose} color='gray'>👾 Complete maker profile</Button>
                 </div>
             </div>
         </motion.div>
diff --git a/src/features/Tournaments/pages/TournamentDetailsPage/Navigation/Navigation.tsx b/src/features/Tournaments/pages/TournamentDetailsPage/Navigation/Navigation.tsx
index bd3cec5..ce8e79d 100644
--- a/src/features/Tournaments/pages/TournamentDetailsPage/Navigation/Navigation.tsx
+++ b/src/features/Tournaments/pages/TournamentDetailsPage/Navigation/Navigation.tsx
@@ -44,7 +44,7 @@ export default function Navigation() {
     ], [tournamentDetails.events_count, tournamentDetails.makers_count])
 
     return (
-        <div className="w-full bg-white py-16 border-b border-gray-200 sticky-top-element z-10">
+        <div className="w-full bg-white py-16 border-y border-gray-200 sticky-top-element z-10">
             <div className="relative group content-container">
                 <div className="overflow-hidden" ref={viewportRef}>
                     <div className="select-none w-full flex gap-8 md:gap-16">
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 74fe6ac..a2439b5 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -12,7 +12,7 @@ html {
 
 body {
   overflow-x: hidden;
-  background-color: #ffffff;
+  background-color: #f9fafb;
 }
 
 .content-container,
diff --git a/src/styles/tw.scss b/src/styles/tw.scss
index 18b2141..896cb1b 100644
--- a/src/styles/tw.scss
+++ b/src/styles/tw.scss
@@ -16,7 +16,7 @@
   }
 
   .input-wrapper {
-    @apply relative w-full border border-gray-300 rounded-12 flex focus-within:outline-primary-400 focus-within:border-primary-300 focus-within:ring focus-within:ring-primary-200 focus-within:ring-opacity-50;
+    @apply relative w-full border bg-white border-gray-300 rounded-12 flex focus-within:outline-primary-400 focus-within:border-primary-300 focus-within:ring focus-within:ring-primary-200 focus-within:ring-opacity-50;
   }
 
   .input-text {