From 41fbc9edace426a13adad2b5f0a59c2c15d59539 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Mon, 28 Oct 2024 18:19:27 -0700
Subject: [PATCH] feat: migrate Header to tailwindcss, fix beta blurb, fix
 responsive design of landing page profile statistics

---
 src/components/Header/Header.tsx              | 326 ++++++++++++------
 src/components/Header/MobileHeader.tsx        | 134 +++++++
 src/components/HomeHero/HomeHero.tsx          |   2 +-
 .../ModalContainer/ModalContainer.module.scss |   2 +-
 src/styles/Home.module.scss                   |   6 +
 5 files changed, 354 insertions(+), 116 deletions(-)
 create mode 100644 src/components/Header/MobileHeader.tsx

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index dd717e5..ad84af2 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,16 +1,17 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import Link from 'next/link'
 import Image from 'next/image'
-import classNames from 'classnames'
 import { useRouter } from 'next/router'
 import { MenuIcon, UserIcon, DiscordIcon } from 'src/components/Icons/icons'
 import { useCallback, useContext, useEffect, useState } from 'react'
 
-import styles from './Header.module.scss'
 import { ThemeButton } from '../ThemeButton'
-import { AuthContext, ModalContext } from 'src/contexts'
+import { AuthContext, ModalContext, WindowSizeContext } from 'src/contexts'
 
 export const Header: React.FC = () => {
   const [showMenu, setShowMenu] = useState(false)
+  const { isMobile } = useContext(WindowSizeContext)
 
   const { user, connectLichess, logout } = useContext(AuthContext)
 
@@ -49,123 +50,127 @@ export const Header: React.FC = () => {
   }, [router])
 
   const userInfo = user?.lichessId ? (
-    <div className={styles.auth}>
-      <div className={styles.user}>
-        {UserIcon}
-        <div className={styles.content}>
-          {user?.displayName}
-          <p>View Info</p>
-        </div>
+    <div className="group relative flex w-full items-center gap-3 rounded bg-background-1 px-3 py-2 md:w-auto">
+      <i className="h-6 w-6">{UserIcon}</i>
+      <div className="flex flex-col">
+        <p className="text-sm">{user?.displayName}</p>
+        <p className="text-xs text-secondary">View Info</p>
       </div>
-      <div className={styles.dropdown}>
+      <div className="absolute bottom-[100%] left-0 z-10 hidden w-full overflow-hidden rounded bg-background-2 group-hover:flex group-hover:flex-col md:bottom-auto md:top-[100%]">
         <Link
           href="/profile"
-          className={
-            router.pathname.startsWith('/profile') ? styles.selected : ''
-          }
+          className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-3"
         >
           Profile
         </Link>
-        <button onClick={logout}>Logout</button>
+        <button
+          onClick={logout}
+          className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-3"
+        >
+          Logout
+        </button>
       </div>
     </div>
   ) : (
-    <div className={styles.auth}>
-      <button onClick={connectLichess}>Sign in</button>
-    </div>
+    <button onClick={connectLichess}>Sign in</button>
   )
 
-  const headerContent = (
-    <>
-      <Link href="/" passHref>
-        <div className="flex flex-row items-center gap-2">
-          <Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
-          <h2 className="text-2xl font-bold">Maia Chess</h2>
-        </div>
-      </Link>
-      <div className={styles.links}>
-        {user?.lichessId ? (
-          <div
-            className={
-              router.pathname.startsWith('/play') ? styles.selected : ''
-            }
-          >
-            <button>Play</button>
-            <div className={styles.dropdownContent}>
-              <button onClick={() => startGame('againstMaia')}>
-                Play Maia
-              </button>
-              <a
-                href="https://lichess.org/@/maia1"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Play Maia on Lichess
-              </a>
-              <button onClick={() => startGame('handAndBrain')}>
-                Play Hand and Brain
-              </button>
-            </div>
+  const desktopLayout = (
+    <div className="flex w-[90%] flex-row items-center justify-between">
+      <div className="flex flex-row items-center justify-start gap-6">
+        <Link href="/" passHref>
+          <div className="flex flex-row items-center gap-2">
+            <Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
+            <h2 className="text-2xl font-bold">Maia Chess</h2>
           </div>
-        ) : (
+        </Link>
+        <div className="hidden flex-row gap-1 *:px-2 *:py-1 md:flex">
+          {user?.lichessId ? (
+            <div
+              className={`${router.pathname.startsWith('/play') && 'bg-background-1'} group relative`}
+            >
+              <button>PLAY</button>
+              <div className="absolute left-0 top-[100%] z-30 hidden w-48 flex-col items-start bg-background-1 group-hover:flex">
+                <button
+                  onClick={() => startGame('againstMaia')}
+                  className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-2"
+                >
+                  Play Maia
+                </button>
+                <a
+                  className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-2"
+                  href="https://lichess.org/@/maia1"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Play Maia on Lichess
+                </a>
+                <button
+                  onClick={() => startGame('handAndBrain')}
+                  className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-2"
+                >
+                  Play Hand and Brain
+                </button>
+              </div>
+            </div>
+          ) : (
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href="https://lichess.org/@/maia1"
+            >
+              Play
+            </a>
+          )}
+          <Link
+            href="/analysis"
+            className={`${router.pathname.startsWith('/analysis') && 'bg-background-1'} uppercase hover:bg-background-1`}
+          >
+            Analysis
+          </Link>
+          <Link
+            href="/train"
+            className={`${router.pathname.startsWith('/train') && 'bg-background-1'} uppercase hover:bg-background-1`}
+          >
+            Train
+          </Link>
+          <Link
+            href="/turing"
+            className={`${router.pathname.startsWith('/turing') && 'bg-background-1'} uppercase hover:bg-background-1`}
+          >
+            Bot-or-not
+          </Link>
+          <Link
+            href="/leaderboard"
+            className={`${router.pathname.startsWith('/leaderboard') && 'bg-background-1'} uppercase hover:bg-background-1`}
+          >
+            Leaderboard
+          </Link>
+          <Link
+            href="/blog"
+            className={`${router.pathname.startsWith('/blog') && 'bg-background-1'} uppercase hover:bg-background-1`}
+          >
+            Blog
+          </Link>
           <a
             target="_blank"
             rel="noreferrer"
-            href="https://lichess.org/@/maia1"
+            href="https://twitch.tv/maiachess"
+            className="uppercase hover:bg-background-1"
           >
-            Play
+            WATCH
           </a>
-        )}
-        <Link
-          href="/analysis"
-          className={
-            router.pathname.startsWith('/analysis') ? styles.selected : ''
-          }
-        >
-          Analysis
-        </Link>
-        <Link
-          href="/train"
-          className={
-            router.pathname.startsWith('/train') ? styles.selected : ''
-          }
-        >
-          Train
-        </Link>
-        <Link
-          href="/turing"
-          className={
-            router.pathname.startsWith('/turing') ? styles.selected : ''
-          }
-        >
-          Bot-or-not
-        </Link>
-        <Link
-          href="/leaderboard"
-          className={
-            router.pathname.startsWith('/leaderboard') ? styles.selected : ''
-          }
-        >
-          Leaderboard
-        </Link>
-        <Link
-          href="/blog"
-          className={router.pathname.startsWith('/blog') ? styles.selected : ''}
-        >
-          Blog
-        </Link>
-        <a target="_blank" rel="noreferrer" href="https://twitch.tv/maiachess">
-          WATCH
-        </a>
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href="https://forms.gle/XYeoTJF4YgUu4Vq28"
-        >
-          FEEDBACK
-        </a>
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://forms.gle/XYeoTJF4YgUu4Vq28"
+            className="uppercase hover:bg-background-1"
+          >
+            FEEDBACK
+          </a>
+        </div>
       </div>
-      <div className={styles.linksRight}>
+      <div className="hidden flex-row items-center gap-3 md:flex">
         <ThemeButton />
         <a
           target="_blank"
@@ -176,27 +181,120 @@ export const Header: React.FC = () => {
         </a>
         {userInfo}
       </div>
+    </div>
+  )
+
+  const mobileLayout = (
+    <div className="flex w-full flex-row justify-between px-4">
+      <Link href="/" passHref>
+        <div className="flex flex-row items-center gap-2">
+          <Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
+          <h2 className="text-2xl font-bold">Maia Chess</h2>
+        </div>
+      </Link>
       <button
-        className={styles.button}
+        className="block cursor-pointer *:*:fill-primary md:hidden"
         onClick={() => setShowMenu((show) => !show)}
       >
         {MenuIcon}
       </button>
-    </>
+      {showMenu && (
+        <div className="fixed left-0 top-0 z-50 flex h-screen w-screen flex-col items-start justify-between bg-backdrop py-4">
+          <div className="flex w-full flex-row justify-between px-4">
+            <Link href="/" passHref>
+              <div className="flex flex-row items-center gap-2">
+                <Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
+                <h2 className="text-2xl font-bold">Maia Chess</h2>
+              </div>
+            </Link>
+            <button
+              className="block cursor-pointer *:*:fill-primary md:hidden"
+              onClick={() => setShowMenu(false)}
+            >
+              {MenuIcon}
+            </button>
+          </div>
+          <div className="flex flex-col gap-6 px-12">
+            {user?.lichessId ? (
+              <div className="flex flex-col items-start justify-center gap-6">
+                <button>PLAY</button>
+                <div className="flex flex-col items-start justify-center gap-4">
+                  <button onClick={() => startGame('againstMaia')}>
+                    Play Maia
+                  </button>
+                  <a
+                    href="https://lichess.org/@/maia1"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Play Maia on Lichess
+                  </a>
+                  <button onClick={() => startGame('handAndBrain')}>
+                    Play Hand and Brain
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href="https://lichess.org/@/maia1"
+              >
+                Play
+              </a>
+            )}
+            <Link href="/analysis" className="uppercase">
+              Analysis
+            </Link>
+            <Link href="/train" className="uppercase">
+              Train
+            </Link>
+            <Link href="/turing" className="uppercase">
+              Bot-or-not
+            </Link>
+            <Link href="/leaderboard" className="uppercase">
+              Leaderboard
+            </Link>
+            <Link href="/blog" className="uppercase">
+              Blog
+            </Link>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href="https://twitch.tv/maiachess"
+              className="uppercase"
+            >
+              Watch
+            </a>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href="https://forms.gle/XYeoTJF4YgUu4Vq28"
+              className="uppercase"
+            >
+              Feedback
+            </a>
+          </div>
+          <div className="flex w-full flex-row items-center gap-3 px-4">
+            <ThemeButton />
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href="https://discord.gg/Az93GqEAs7"
+            >
+              <div className="h-6 w-6">{DiscordIcon}</div>
+            </a>
+            {userInfo}
+          </div>
+        </div>
+      )}
+    </div>
   )
 
   return (
     <>
-      <div className={styles.header}>{headerContent}</div>
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-      <div
-        className={classNames(styles.menu, { [styles.active]: showMenu })}
-        onClick={() => setShowMenu(false)}
-      >
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-        <div className={styles.mobile} onClick={(e) => e.stopPropagation()}>
-          {headerContent}
-        </div>
+      <div className="flex w-screen flex-row items-center justify-center pt-4">
+        {isMobile ? mobileLayout : desktopLayout}
       </div>
     </>
   )
diff --git a/src/components/Header/MobileHeader.tsx b/src/components/Header/MobileHeader.tsx
new file mode 100644
index 0000000..8b5ff01
--- /dev/null
+++ b/src/components/Header/MobileHeader.tsx
@@ -0,0 +1,134 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import Link from 'next/link'
+import Image from 'next/image'
+import classNames from 'classnames'
+import { useRouter } from 'next/router'
+
+import styles from './Header.module.scss'
+
+type Props = {
+    use
+  showMenu: boolean
+  setShowMenu: (show: boolean) => void
+}
+
+export const MobileHeader: React.FC = ({ showMenu, setShowMenu }: Props) => {
+  const router = useRouter()
+  return (
+
+  )
+}
+
+// <div className="flex w-[90%] flex-row items-center justify-between">
+//   <div className="flex flex-row items-center justify-start gap-6">
+// <Link href="/" passHref>
+//   <div className="flex flex-row items-center gap-2">
+//     <Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
+//     <h2 className="text-2xl font-bold">Maia Chess</h2>
+//   </div>
+// </Link>
+// <div className="hidden flex-row gap-1 *:px-2 *:py-1 md:flex">
+//   {user?.lichessId ? (
+//     <div
+//       className={`${router.pathname.startsWith('/play') && 'bg-background-1'} group relative`}
+//     >
+//       <button>PLAY</button>
+//       <div className="absolute left-0 top-[100%] z-30 hidden w-48 flex-col items-start bg-background-1 group-hover:flex">
+//         <button
+//           onClick={() => startGame('againstMaia')}
+//           className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-2"
+//         >
+//           Play Maia
+//         </button>
+//         <a
+//           className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-2"
+//           href="https://lichess.org/@/maia1"
+//           target="_blank"
+//           rel="noreferrer"
+//         >
+//           Play Maia on Lichess
+//         </a>
+//         <button
+//           onClick={() => startGame('handAndBrain')}
+//           className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-2"
+//         >
+//           Play Hand and Brain
+//         </button>
+//       </div>
+//     </div>
+//   ) : (
+//     <a
+//       target="_blank"
+//       rel="noreferrer"
+//       href="https://lichess.org/@/maia1"
+//     >
+//       Play
+//     </a>
+//   )}
+//   <Link
+//     href="/analysis"
+//     className={`${router.pathname.startsWith('/analysis') && styles.selected} uppercase hover:bg-background-1`}
+//   >
+//     Analysis
+//   </Link>
+//   <Link
+//     href="/train"
+//     className={`${router.pathname.startsWith('/train') && styles.selected} uppercase hover:bg-background-1`}
+//   >
+//     Train
+//   </Link>
+//   <Link
+//     href="/turing"
+//     className={`${router.pathname.startsWith('/turing') && styles.selected} uppercase hover:bg-background-1`}
+//   >
+//     Bot-or-not
+//   </Link>
+//   <Link
+//     href="/leaderboard"
+//     className={`${router.pathname.startsWith('/leaderboard') && styles.selected} uppercase hover:bg-background-1`}
+//   >
+//     Leaderboard
+//   </Link>
+//   <Link
+//     href="/blog"
+//     className={`${router.pathname.startsWith('/blog') && styles.selected} uppercase hover:bg-background-1`}
+//   >
+//     Blog
+//   </Link>
+//   <a
+//     target="_blank"
+//     rel="noreferrer"
+//     href="https://twitch.tv/maiachess"
+//     className="uppercase hover:bg-background-1"
+//   >
+//     WATCH
+//   </a>
+//   <a
+//     target="_blank"
+//     rel="noreferrer"
+//     href="https://forms.gle/XYeoTJF4YgUu4Vq28"
+//     className="uppercase hover:bg-background-1"
+//   >
+//     FEEDBACK
+//   </a>
+// </div>
+//   </div>
+//   <div className="hidden flex-row items-center gap-3 md:flex">
+//     <ThemeButton />
+//     <a
+//       target="_blank"
+//       rel="noreferrer"
+//       href="https://discord.gg/Az93GqEAs7"
+//     >
+//       {DiscordIcon}
+//     </a>
+//     {userInfo}
+//   </div>
+//   <button
+//     className={styles.button}
+//     onClick={() => setShowMenu((show) => !show)}
+//   >
+//     {MenuIcon}
+//   </button>
+// </div>
diff --git a/src/components/HomeHero/HomeHero.tsx b/src/components/HomeHero/HomeHero.tsx
index 386dc0b..549f556 100644
--- a/src/components/HomeHero/HomeHero.tsx
+++ b/src/components/HomeHero/HomeHero.tsx
@@ -161,7 +161,7 @@ function BetaBlurb() {
   return (
     <>
       {user?.lichessId ? (
-        <div className="my-4 mt-20 flex w-screen flex-col items-start bg-engine-1 p-3 transition md:mt-0 md:w-auto md:rounded">
+        <div className="my-4 flex w-screen flex-col items-start bg-engine-1 p-3 transition md:mt-0 md:w-auto md:rounded">
           <div className="flex items-center gap-2">
             <div className="*:h-5 *:w-5">{SunIcon}</div>
             <p className="text-lg font-medium">Maia Chess is in private beta</p>
diff --git a/src/components/modals/ModalContainer/ModalContainer.module.scss b/src/components/modals/ModalContainer/ModalContainer.module.scss
index 844673c..81e6e04 100644
--- a/src/components/modals/ModalContainer/ModalContainer.module.scss
+++ b/src/components/modals/ModalContainer/ModalContainer.module.scss
@@ -8,7 +8,7 @@
   top: 0;
   bottom: 0;
   width: 100vw;
-  z-index: 8;
+  z-index: 100;
 
   @include themed-styles {
     background-color: rgba(themed-colour(backdrop), 0.9);
diff --git a/src/styles/Home.module.scss b/src/styles/Home.module.scss
index bcbccd3..6d2f392 100644
--- a/src/styles/Home.module.scss
+++ b/src/styles/Home.module.scss
@@ -112,6 +112,12 @@
     display: flex;
     flex-direction: row;
 
+    @include mobile {
+      flex-grow: 1;
+      flex-direction: column;
+      gap: 16px;
+    }
+
     @include themed-styles {
       background-color: rgba(themed-colour('text-primary'), 0.05);
     }