chore: migrate leaderboard page to tailwindcss

Author: kevinjosethomas

src/pages/_app.tsx

@@ -11,14 +11,14 @@ import {
   WindowSizeContextProvider,
   AnalysisListContextProvider,
 } from 'src/providers'
-import { Compose, ErrorBoundary, Header } from 'src/components/'
 import 'src/styles/globals.scss'
 import 'src/styles/tailwind.css'
 import 'react-tooltip/dist/react-tooltip.css'
 import 'chessground/assets/chessground.base.css'
 import 'chessground/assets/chessground.brown.css'
 import 'chessground/assets/chessground.cburnett.css'
 import { Footer } from 'src/components/Footer/Footer'
+import { Compose, ErrorBoundary, Header } from 'src/components/'
 
 function MaiaPlatform({ Component, pageProps }: AppProps) {
   const router = useRouter()

src/pages/leaderboard.tsx

@@ -1,14 +1,14 @@
-import styles from 'src/styles/App.module.scss'
-import { LeaderboardColumn } from 'src/components/LeaderboardColumn/LeaderboardColumn'
+import { useCallback, useEffect, useState } from 'react'
+
 import {
   BrainIcon,
   HandIcon,
   RegularPlayIcon,
   TrainIcon,
   TuringIcon,
 } from 'src/components/Icons/icons'
-import { useCallback, useEffect, useState } from 'react'
 import { getLeaderboard } from 'src/api'
+import { LeaderboardColumn } from 'src/components/LeaderboardColumn/LeaderboardColumn'
 
 const Leaderboard: React.FC = () => {
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
@@ -57,8 +57,8 @@ const Leaderboard: React.FC = () => {
   }, [fetchLeaderboard])
 
   return (
-    <div className={styles.leaderboardPage}>
-      <div className={styles.leaderboardHeader}>
+    <div className="flex h-full w-full flex-col items-start justify-center gap-8 px-[4%] py-[2%]">
+      <div className="flex flex-col">
         <h1 className="text-4xl font-bold">Rating Leaderboards</h1>
         <p>
           Last Updated:{' '}
@@ -74,7 +74,7 @@ const Leaderboard: React.FC = () => {
             : '...'}
         </p>
       </div>
-      <div className={styles.leaderboardContainer}>
+      <div className="flex h-full w-full flex-row flex-wrap justify-start gap-4">
         {leaderboard?.map((column, index) => (
           <LeaderboardColumn key={index} {...column} />
         ))}

src/styles/App.module.scss

@@ -536,37 +536,3 @@
     }
   }
 }
-
-.leaderboardPage {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  justify-content: center;
-  gap: 20px;
-  width: 100%;
-  padding: 2% 4%;
-  height: 100%;
-
-  @include mobile {
-    padding: 15% 4%;
-  }
-
-  .leaderboardHeader {
-    display: flex;
-    flex-direction: column;
-
-    p {
-      margin: 0px;
-    }
-  }
-
-  .leaderboardContainer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: start;
-    gap: 25px;
-    width: 100%;
-    height: 100%;
-  }
-}