chore: removed unnecessary components and continued migration to tail…

…wind
CSSLab · Nov 3, 2024 · 2b26c4e · 2b26c4e
1 parent 0f08dae
commit 2b26c4e
Show file tree

Hide file tree

Showing 14 changed files with 89 additions and 167 deletions.
diff --git a/src/components/BoardController/BoardController.tsx b/src/components/BoardController/BoardController.tsx
@@ -1,10 +1,9 @@
 import { useCallback, useContext, useEffect, useMemo } from 'react'
-import { GameControllerContext } from 'src/contexts/'
+
 import { useWindowSize } from 'src/hooks'
+import { GameControllerContext } from 'src/contexts/'
 import { FlipIcon } from 'src/components/Icons/icons'
 
-import styles from './BoardController.module.scss'
-
 interface Props {
   setCurrentMove?: (move: [string, string] | null) => void
 }
@@ -92,18 +91,39 @@ export const BoardController: React.FC<Props> = ({ setCurrentMove }: Props) => {
   ])
 
   return (
-    <div className={styles.container}>
-      <button onClick={toggleBoardOrientation}>{FlipIcon}</button>
-      <button onClick={getFirst} disabled={!hasPrevious}>
+    <div className="flex w-full flex-row items-center gap-[1px] rounded">
+      <button
+        onClick={toggleBoardOrientation}
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-button-secondary transition duration-200 hover:bg-human-3 disabled:bg-button-secondary/40"
+      >
+        {FlipIcon}
+      </button>
+      <button
+        onClick={getFirst}
+        disabled={!hasPrevious}
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-button-secondary transition duration-200 hover:bg-human-3 disabled:bg-button-secondary/40"
+      >
         &#8249;&#8249;&#8249;
       </button>
-      <button onClick={getPrevious} disabled={!hasPrevious}>
+      <button
+        onClick={getPrevious}
+        disabled={!hasPrevious}
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-button-secondary transition duration-200 hover:bg-human-3 disabled:bg-button-secondary/40"
+      >
         &#8249;
       </button>
-      <button onClick={getNext} disabled={!hasNext}>
+      <button
+        onClick={getNext}
+        disabled={!hasNext}
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-button-secondary transition duration-200 hover:bg-human-3 disabled:bg-button-secondary/40"
+      >
         &#8250;
       </button>
-      <button onClick={getLast} disabled={!hasNext}>
+      <button
+        onClick={getLast}
+        disabled={!hasNext}
+        className="flex h-7 flex-1 items-center justify-center rounded-sm bg-button-secondary transition duration-200 hover:bg-human-3 disabled:bg-button-secondary/40"
+      >
         &#8250;&#8250;&#8250;
       </button>
     </div>

diff --git a/src/components/CategoryList/CategoryList.module.scss b/src/components/CategoryList/CategoryList.module.scss
diff --git a/src/components/CategoryList/CategoryList.tsx b/src/components/CategoryList/CategoryList.tsx
diff --git a/src/components/CategoryList/index.ts b/src/components/CategoryList/index.ts
diff --git a/src/components/EmbeddedGame/EmbeddedGame.module.scss b/src/components/EmbeddedGame/EmbeddedGame.module.scss
diff --git a/src/components/EmbeddedGame/EmbeddedGame.tsx b/src/components/EmbeddedGame/EmbeddedGame.tsx
diff --git a/src/components/EmbeddedGame/index.ts b/src/components/EmbeddedGame/index.ts
diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,8 +1,6 @@
-import Chessground from '@react-chess/chessground'
 import Link from 'next/link'
 import { Component } from 'react'
-
-import styles from './ErrorBoundary.module.scss'
+import Chessground from '@react-chess/chessground'
 
 interface Props {
   children: React.ReactNode
@@ -38,20 +36,30 @@ export class ErrorBoundary extends Component<Props, State> {
     if (this.state.hasError) {
       if (this.state.isUnauthorized) {
         return (
-          <div className={styles.container}>
-            <h1>Unauthorized Access</h1>
+          <div className="flex h-screen w-screen flex-col items-center justify-center gap-4 bg-backdrop">
+            <h2 className="text-3xl font-bold">Unauthorized Access</h2>
             <p>
               You do not have permission to view this content. Please log in.
             </p>
-            <Link href="/">Click here to go home</Link>
+            <Link href="/">
+              <div
+                role="button"
+                tabIndex={0}
+                className="flex items-center justify-center rounded bg-human-3 px-8 py-2 transition duration-200 hover:bg-human-4"
+                onClick={() => this.setState({ hasError: false })}
+                onKeyDown={() => this.setState({ hasError: false })}
+              >
+                <p className="text-lg text-primary">Click here to go home</p>
+              </div>
+            </Link>
           </div>
         )
       }
 
       return (
-        <div className={styles.container}>
-          <div>
-            <div className={styles.board}>
+        <div className="flex h-screen w-screen flex-col items-center justify-center gap-10 bg-backdrop">
+          <div className="flex flex-col items-center gap-3">
+            <div className="h-[90vh] w-[90vh] md:h-[40vh] md:w-[40vh]">
               <Chessground
                 contained
                 config={{
@@ -60,21 +68,26 @@ export class ErrorBoundary extends Component<Props, State> {
                 }}
               />
             </div>
+            <h2 className="text-3xl font-bold">
+              Sorry, you encountered an Error
+            </h2>
+            <Link href="/">
+              <div
+                role="button"
+                tabIndex={0}
+                className="flex items-center justify-center rounded bg-human-3 px-8 py-2 transition duration-200 hover:bg-human-4"
+                onClick={() => this.setState({ hasError: false })}
+                onKeyDown={() => this.setState({ hasError: false })}
+              >
+                <p className="text-lg text-primary">Click here to go home</p>
+              </div>
+            </Link>
           </div>
-          <h2>Sorry, you encountered an Error</h2>
-
-          <div
-            role="button"
-            tabIndex={0}
-            className="mb-10"
-            onClick={() => this.setState({ hasError: false })}
-            onKeyDown={() => this.setState({ hasError: false })}
-          >
-            <Link href="/">Click here to go home</Link>
-          </div>
-          <div className="flex flex-col justify-center">
+          <div className="mt-4 flex flex-col justify-center">
             <p>Please share this stack trace:</p>
-            <code>{this.state.error?.toString()}</code>
+            <code className="bg-background-1 p-2">
+              {this.state.error?.toString()}
+            </code>
           </div>
         </div>
       )

diff --git a/src/components/Feedback/Feedback.tsx b/src/components/Feedback/Feedback.tsx
@@ -2,7 +2,6 @@ import { Chess } from 'chess.ts'
 import { useMemo, Dispatch, SetStateAction, useCallback } from 'react'
 
 import { Markdown } from 'src/components'
-import styles from './Feedback.module.scss'
 import { useTrainingController } from 'src/hooks'
 import { TrainingGame, Status } from 'src/types/training'
 
@@ -86,11 +85,11 @@ export const Feedback: React.FC<Props> = ({
   }, [game.targetIndex, setCurrentIndex])
 
   return (
-    <div className={styles.container}>
-      <div>
+    <div className="flex w-screen flex-1 flex-col justify-between gap-2 bg-background-1 p-3 md:w-auto md:gap-0 md:p-5">
+      <div className="[&_h2]:text-lg [&_p]:text-sm">
         <Markdown>{content.trim()}</Markdown>
       </div>
-      <div className={styles.buttons}>
+      <div className="flex flex-col gap-1.5">
         {status !== 'archived' && (
           <>
             {status === 'incorrect' && currentMove && (
@@ -99,6 +98,7 @@ export const Feedback: React.FC<Props> = ({
                   setStatus('default')
                   setCurrentMove(null)
                 }}
+                className="flex w-full justify-center rounded-sm bg-engine-3 py-1.5 text-sm font-medium text-primary transition duration-300 hover:bg-engine-4 disabled:bg-backdrop disabled:text-secondary"
               >
                 Try Again
               </button>
@@ -107,30 +107,32 @@ export const Feedback: React.FC<Props> = ({
               <button
                 onClick={moveToTarget}
                 disabled={status == 'loading' || !currentMove}
+                className="flex w-full justify-center rounded-sm bg-engine-3 py-1.5 text-sm font-medium text-primary transition duration-300 hover:bg-engine-4 disabled:bg-backdrop disabled:text-secondary"
               >
                 Reset
               </button>
             )}
             {status !== 'forfeit' && status !== 'correct' && (
-              <button className={styles.secondary} onClick={setAndGiveUp}>
+              <button
+                onClick={setAndGiveUp}
+                className="flex w-full justify-center rounded-sm bg-human-3 py-1.5 text-sm font-medium text-primary transition duration-300 hover:bg-human-4 disabled:bg-backdrop disabled:text-secondary"
+              >
                 Give Up
               </button>
             )}
             {(status === 'forfeit' || status === 'correct') && (
               <button
                 onClick={async () => {
                   setCurrentMove(null)
-
                   await getNewGame()
                 }}
-                className={styles.secondary}
+                className="flex w-full justify-center rounded-sm bg-human-3 py-1.5 text-sm font-medium text-primary transition duration-300 hover:bg-human-4 disabled:bg-backdrop disabled:text-secondary"
               >
                 Next Puzzle
               </button>
             )}
           </>
         )}
-
         {/* <button
               onClick={() => {
                 router.push(

diff --git a/src/components/GameInfo/GameInfo.tsx b/src/components/GameInfo/GameInfo.tsx
@@ -1,10 +1,9 @@
 import { useContext } from 'react'
-import { ModalContext, ThemeContext } from 'src/contexts'
+
 import { Player, Termination } from 'src/types'
-import { InstructionsType } from 'src/components/modals/InstructionsModal'
 import { HelpIcon } from 'src/components/Icons/icons'
-
-import styles from './GameInfo.module.scss'
+import { ModalContext, ThemeContext } from 'src/contexts'
+import { InstructionsType } from 'src/components/modals/InstructionsModal'
 
 interface Props {
   termination?: Termination
@@ -41,19 +40,19 @@ export const GameInfo: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <div className={styles.container}>
-        <div className={styles.headerContainer}>
-          <h3>
+      <div className="flex flex-col rounded-l bg-background-1/80 p-3">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-medium">
             {prettyTypes[type]}
             {showId ? (
               <>
                 {' '}
-                &middot; <span className={styles.id}>{id}</span>
+                &middot; <span className="font-light">{id}</span>
               </>
             ) : null}
           </h3>
           <button
-            className={styles.helpButton}
+            className="h-5 w-5 transition duration-200 *:h-5 *:w-5 *:hover:text-human-2"
             onClick={() => {
               setInstructionsModalProps({ instructionsType: instructionsType })
             }}
@@ -71,7 +70,7 @@ export const GameInfo: React.FC<Props> = (props: Props) => {
           {blackPlayer?.rating ? `(${blackPlayer.rating})` : null}
         </div>
         {termination ? (
-          <div className={styles.termination}>
+          <div className="p-1 text-center">
             {termination.result}
             {', '}
             {termination.winner !== 'none'

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,8 +1,6 @@
 export * from './Compose'
 export * from './Navigation'
-export * from './EmbeddedGame'
 export * from './GameList'
-export * from './CategoryList'
 export * from './GameInfo'
 export * from './BoardController'
 export * from './MovePlot'