From ec0c44807a2b4d7575bbc0d35a8e46533aa38a64 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <kevin.jt2007@gmail.com>
Date: Sat, 2 Nov 2024 00:28:38 -0700
Subject: [PATCH] chore: migrated TuringSubmission to tailwindcss & changed
 toggle functionality

---
 .../TuringSubmission/TuringSubmission.tsx     | 115 +++++++++---------
 src/styles/tailwind.css                       |  24 ++--
 2 files changed, 69 insertions(+), 70 deletions(-)

diff --git a/src/components/TuringSubmission/TuringSubmission.tsx b/src/components/TuringSubmission/TuringSubmission.tsx
index 0fa6608..0dd7306 100644
--- a/src/components/TuringSubmission/TuringSubmission.tsx
+++ b/src/components/TuringSubmission/TuringSubmission.tsx
@@ -1,7 +1,7 @@
-import classNames from 'classnames'
+import { motion } from 'framer-motion'
 import { useCallback, useContext, useEffect, useState } from 'react'
+
 import { TuringControllerContext } from 'src/contexts'
-import styles from './TuringSubmission.module.scss'
 
 export const TuringSubmission: React.FC = () => {
   const { game, submitGuess, getNewGame, commentController } = useContext(
@@ -22,102 +22,101 @@ export const TuringSubmission: React.FC = () => {
 
   if (game?.result)
     return (
-      <div className={styles.container}>
-        <h2>
+      <div className="flex flex-col gap-5 bg-background-1 p-4">
+        <h2 className="text-2xl">
           Guess {game.result.correct ? 'correct' : 'incorrect'}, <br />
           {game.result.bot} was the bot
         </h2>
-        <div className={styles.info}>
+        <div className="-mt-1 flex flex-col">
           <h3>
             {game.result.timeControl} · {game.result.gameType}
           </h3>
-          <div>
-            <p className={styles.circle}>●</p>
+          <div className="flex flex-row items-center gap-1">
+            <p className="text-lg">●</p>
             {game.result.whitePlayer.title && (
-              <span className={styles.title}>
-                {game.result.whitePlayer.title}
-              </span>
+              <span className="font-bold">{game.result.whitePlayer.title}</span>
             )}
             {game.result.whitePlayer.name}
             <span>({game.result.whitePlayer.rating})</span>
             {game.result.bot === 'white' ? '🤖' : undefined}
           </div>
-          <div>
-            <p className={styles.circle}>○</p>
+          <div className="flex flex-row items-center gap-1">
+            <p className="text-lg">○</p>
             {game.result.blackPlayer.title && (
-              <span className={styles.title}>
-                {game.result.blackPlayer.title}
-              </span>
+              <span className="font-bold">{game.result.blackPlayer.title}</span>
             )}
             {game.result.blackPlayer.name}
             <span>({game.result.blackPlayer.rating})</span>{' '}
             {game.result.bot === 'black' ? '🤖' : undefined}
           </div>
         </div>
-        <button onClick={getNewGame}>NEXT</button>
+        <button
+          onClick={getNewGame}
+          className="flex w-full items-center justify-center rounded bg-engine-3 py-2 transition duration-200 hover:bg-engine-4 disabled:bg-background-3"
+        >
+          <p className="text-lg">Next</p>
+        </button>
       </div>
     )
 
   return (
-    <div className={styles.container}>
-      <div>
-        <h2>Who is the bot?</h2>
-        <div
-          className={classNames(styles.group, {
-            [styles.selected]: selected != undefined,
-          })}
-        >
+    <div className="flex flex-col gap-1">
+      <div className="flex flex-col gap-3 p-4">
+        <h2 className="text-2xl font-semibold">Who is the bot?</h2>
+        <div className="flex flex-1 flex-row items-center justify-between">
           <button
-            className={classNames(styles.none, styles.left, {
-              [styles.selected]: selected == 'white',
-            })}
+            className="m-0 flex w-1/3 flex-row justify-start bg-transparent p-0"
             onClick={() => setSelected('white')}
           >
-            White {selected == 'white' && '🤖'}
+            <p
+              className={`${selected === 'white' ? 'font-semibold text-primary' : 'text-secondary'}`}
+            >
+              White {selected == 'white' && '🤖'}
+            </p>
           </button>
-          <div className={styles.switch}>
-            <input
-              type="radio"
-              checked={selected === 'white'}
-              className={styles.toggleWhite}
-              onClick={() => setSelected('white')}
-            />
-            <input
-              type="radio"
-              checked={selected === null}
-              disabled={selected !== null}
-              className={styles.toggleNull}
-            />
-            <input
-              type="radio"
-              checked={selected === 'black'}
-              className={styles.toggleBlack}
-              onClick={() => setSelected('black')}
+          <div
+            style={{
+              boxShadow: '0px 0px 10px 5px rgba(255,255,255,0.05)',
+            }}
+            className={`relative flex h-8 w-16 items-center rounded-full p-1 transition duration-300 ${selected === 'white' ? 'bg-white bg-opacity-80' : 'bg-black bg-opacity-60'}`}
+          >
+            <motion.div
+              animate={{
+                x: selected === null ? 16 : selected == 'white' ? 0 : 30,
+              }}
+              style={{
+                shadow: '0px 0px 5px 5px rgba(255,255,255,0.75)',
+              }}
+              transition={{ duration: 0.3 }}
+              layout="position"
+              className="absolute h-6 w-6 transform rounded-full bg-engine-4 shadow-md"
             />
-            <div className={styles.slider}></div>
           </div>
           <button
-            className={classNames(styles.none, styles.right, {
-              [styles.selected]: selected == 'black',
-            })}
+            className="m-0 flex w-1/3 flex-row justify-end bg-transparent p-0"
             onClick={() => setSelected('black')}
           >
-            {selected == 'black' && '🤖'} Black
+            <p
+              className={`${selected === 'black' ? 'font-semibold text-primary' : 'text-secondary'}`}
+            >
+              {selected == 'black' && '🤖'} Black
+            </p>
           </button>
         </div>
       </div>
-      <button
-        onClick={handleSubmit}
-        disabled={!selected}
-        className={styles.submit}
-      >
-        Submit
-      </button>
       <textarea
+        className="rounded bg-background-2 p-2 text-sm text-secondary outline-none placeholder:text-secondary"
         placeholder="Optional justification"
         value={comment}
         onChange={(e) => setComment(e.target.value)}
       />
+      <button
+        onClick={handleSubmit}
+        disabled={!selected}
+        className="flex w-full items-center justify-center rounded bg-engine-3 py-2 transition duration-200 hover:bg-engine-4 disabled:bg-background-3"
+      >
+        <p className="text-lg">Submit</p>
+      </button>
     </div>
   )
 }
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index c9c33ea..5d43c92 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -20,15 +20,15 @@ pre {
   --color-background4: #aeaeb2;
   --color-background5: #8e8e93;
 
-  --color-human-accent1: #ff705b;
-  --color-human-accent2: #ff8270;
-  --color-human-accent3: #ff9080;
-  --color-human-accent4: #ffa193;
+  --color-human-accent1: #fe7f6d;
+  --color-human-accent2: #de6f5f;
+  --color-human-accent3: #bf5f52;
+  --color-human-accent4: #9f4f44;
 
-  --color-engine-accent1: #7fb3fc;
-  --color-engine-accent1: #9ac4fe;
-  --color-engine-accent1: #aed0ff;
-  --color-engine-accent1: #c6deff;
+  --color-engine-accent1: #abccf8;
+  --color-engine-accent2: #96bff6;
+  --color-engine-accent3: #81b3f4;
+  --color-engine-accent4: #5799f1;
 }
 
 .theme-dark {
@@ -49,10 +49,10 @@ pre {
   --color-human-accent3: #bf5f52;
   --color-human-accent4: #9f4f44;
 
-  --color-engine-accent1: #74a5e9;
-  --color-engine-accent2: #87ace0;
-  --color-engine-accent3: #95b2db;
-  --color-engine-accent4: #a2b6d2;
+  --color-engine-accent1: #76addd;
+  --color-engine-accent2: #5a9dd7;
+  --color-engine-accent3: #3f8cd0;
+  --color-engine-accent4: #237cc9;
 }
 
 svg {