From 8b91e09a65c2480dd234c3f673bf7e5d019155a7 Mon Sep 17 00:00:00 2001
From: Spencer Spenst <spencerspenst@gmail.com>
Date: Thu, 23 May 2024 15:01:32 -0700
Subject: [PATCH] username select

---
 components/forms/forgotPasswordForm.tsx |  2 +-
 components/forms/loginForm.tsx          |  2 +-
 components/forms/signupFormWizard.tsx   | 67 ++++++++++++++-----------
 components/page/loadingSpinner.tsx      | 30 +++++------
 pages/[subdomain]/play/index.tsx        |  2 +-
 5 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/components/forms/forgotPasswordForm.tsx b/components/forms/forgotPasswordForm.tsx
index 54fdf13aa..ce45ef390 100644
--- a/components/forms/forgotPasswordForm.tsx
+++ b/components/forms/forgotPasswordForm.tsx
@@ -55,7 +55,7 @@ export default function ForgotPasswordForm() {
             {errorMessage}
           </div>
         }
-        <div className='text-center text-sm mt-2'>
+        <div className='text-center text-sm'>
           <Link
             className='font-medium text-sm text-blue-500 hover:text-blue-400'
             href='/login'
diff --git a/components/forms/loginForm.tsx b/components/forms/loginForm.tsx
index d621ba752..cd22639c8 100644
--- a/components/forms/loginForm.tsx
+++ b/components/forms/loginForm.tsx
@@ -89,7 +89,7 @@ export default function LoginForm() {
             {errorMessage}
           </div>
         }
-        <div className='text-center text-sm mt-2'>
+        <div className='text-center text-sm'>
           <span>
             {'New to Thinky.gg? '}
           </span>
diff --git a/components/forms/signupFormWizard.tsx b/components/forms/signupFormWizard.tsx
index 658961c98..3de537e6f 100644
--- a/components/forms/signupFormWizard.tsx
+++ b/components/forms/signupFormWizard.tsx
@@ -95,7 +95,7 @@ export default function SignupFormWizard() {
     const resObj = await res.json();
 
     setIsExistsLoading(false);
-    setUsernameExists(!resObj.exists);
+    setUsernameExists(resObj.exists);
   };
 
   // debounce the checkUsername function
@@ -129,33 +129,38 @@ export default function SignupFormWizard() {
 
   return (
     <FormTemplate title='Create your Thinky.gg account'>
-      <form className='flex flex-col items-center gap-4' onSubmit={onSubmit}>
+      <form className='flex flex-col gap-6' onSubmit={onSubmit}>
         <StepWizard className='w-full' instance={setWizard}>
-          <div className='flex flex-col gap-4'>
+          <div className='flex flex-col gap-6'>
             <div>
-              <label className='block mb-2' htmlFor='username'>Username</label>
+              <div className='flex justify-between gap-2 flex-wrap mb-2'>
+                <label htmlFor='username'>Username</label>
+                {username.length >= 3 &&
+                  <div className='flex items-center text-sm gap-2'>
+                    {isExistsLoading ? <LoadingSpinner size={20} /> :
+                      isValidUsername && !usernameExists ?
+                        <div className='text-sm' style={{
+                          color: 'var(--color-complete)',
+                        }}>
+                          Username is available
+                        </div>
+                        :
+                        <div className='text-red-500 text-sm'>
+                          {!isValidUsername ? 'Username is not valid' : 'Username is not available'}
+                        </div>
+                    }
+                  </div>
+                }
+              </div>
               <input required onChange={e => handleUsernameChange(e)} className='w-full' id='username' type='text' placeholder='Username' />
             </div>
             <button
               className='bg-blue-600 enabled:hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50'
-              disabled={!isValidUsername || !usernameExists}
+              disabled={isExistsLoading || !isValidUsername || usernameExists}
               onClick={() => (wizard as any)?.nextStep()}
             >
               Continue
             </button>
-            {username.length >= 3 &&
-              <div className='flex items-center gap-2'>
-                {isExistsLoading ? <LoadingSpinner size='small' /> : <>
-                  <span className={`text-sm ${isValidUsername ? 'text-green-600' : 'text-red-600'}`}>
-                    {isValidUsername && usernameExists ? '✅' : '❌'}
-                  </span>
-                  <span>
-                    {!isValidUsername ? 'Username is not valid' : usernameExists ? 'Username is available' : 'Username is not available'}
-                  </span>
-                </>
-                }
-              </div>
-            }
           </div>
           <div className='flex flex-col gap-2'>
             <p className='text-center text-lg'>
@@ -186,22 +191,24 @@ export default function SignupFormWizard() {
             </div>
           </div>
         </StepWizard>
-        <Link
-          className='font-medium mt-2 text-sm text-blue-500 hover:text-blue-400'
-          href='/play-as-guest'
-        >
-          Play as guest
-        </Link>
-        <div className='text-center text-sm'>
-          <span>
-            {'Already have an account? '}
-          </span>
+        <div className='flex flex-col gap-4 items-center'>
           <Link
             className='font-medium text-sm text-blue-500 hover:text-blue-400'
-            href='/login'
+            href='/play-as-guest'
           >
-            Log in
+            Play as guest
           </Link>
+          <div className='text-center text-sm'>
+            <span>
+              {'Already have an account? '}
+            </span>
+            <Link
+              className='font-medium text-sm text-blue-500 hover:text-blue-400'
+              href='/login'
+            >
+              Log in
+            </Link>
+          </div>
         </div>
       </form>
     </FormTemplate>
diff --git a/components/page/loadingSpinner.tsx b/components/page/loadingSpinner.tsx
index 1e735c436..af8e5b186 100644
--- a/components/page/loadingSpinner.tsx
+++ b/components/page/loadingSpinner.tsx
@@ -1,29 +1,25 @@
 import React from 'react';
 
 interface LoadingSpinnerProps {
-  size?: 'small' | 'medium' | 'large';
+  size?: number;
 }
 
-export default function LoadingSpinner({ size }: LoadingSpinnerProps) {
-  if (size === 'small') {
-    return <svg className='text-gray-300 animate-spin' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'
-      width='24' height='24'>
+export default function LoadingSpinner({ size = 32 }: LoadingSpinnerProps) {
+  return (
+    <svg className='animate-spin' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'
+      width={size} height={size} style={{
+        color: 'var(--color-gray)',
+      }}>
       <path
         d='M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z'
-        stroke='currentColor' strokeWidth='5' strokeLinecap='round' strokeLinejoin='round' />
+        stroke='currentColor' strokeWidth='5' strokeLinecap='round' strokeLinejoin='round' style={{
+          color: 'var(--bg-color)',
+        }}
+      />
       <path
         d='M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762'
-        stroke='currentColor' strokeWidth='5' strokeLinecap='round' strokeLinejoin='round' className='text-gray-900' />
+        stroke='currentColor' strokeWidth='5' strokeLinecap='round' strokeLinejoin='round'
+      />
     </svg>
-    ;
-  }
-
-  return (
-    <div className='flex justify-center'>
-      <svg aria-hidden='true' className='w-8 h-8 animate-spin text-gray-600 fill-blue-600' viewBox='0 0 100 101' fill='none' xmlns='http://www.w3.org/2000/svg'>
-        <path d='M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z' fill='currentColor' />
-        <path d='M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z' fill='currentFill' />
-      </svg>
-    </div>
   );
 }
diff --git a/pages/[subdomain]/play/index.tsx b/pages/[subdomain]/play/index.tsx
index 1752d497a..5eb79567f 100644
--- a/pages/[subdomain]/play/index.tsx
+++ b/pages/[subdomain]/play/index.tsx
@@ -58,7 +58,7 @@ export default function PlayPage({ reqUser }: PlayPageProps) {
               <>
                 <PlayerRank levelsSolvedByDifficulty={levelsSolvedByDifficulty} user={reqUser} />
               </>
-              : <LoadingSpinner size='small' />
+              : <LoadingSpinner size={24} />
           }
         </div>
         <div className='flex flex-col items-center gap-6'>