From d0713bad29b21add73e25fcc6e6fa9c2dcbe3467 Mon Sep 17 00:00:00 2001
From: Christopher Astfalk <christopher.astfalk@icloud.com>
Date: Mon, 30 Nov 2020 02:17:47 +0100
Subject: [PATCH] refactor(tailwind): move from custom-form to forms and update
 classes

---
 package-lock.json                            | 10 ++++-----
 package.json                                 |  2 +-
 src/components/accountDialog.js              | 10 ++++-----
 src/components/chatDialog.js                 |  2 +-
 src/components/friendsList.js                |  2 +-
 src/components/login/avatarLogin.js          |  2 +-
 src/components/login/newAvatarLogin.js       | 22 ++++++++++----------
 src/components/modals/resetPasswordDialog.js |  6 +++---
 src/components/modals/signIn.js              |  6 +++---
 src/components/modals/unlockDialog.js        |  2 +-
 tailwind.config.js                           |  3 +--
 11 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f9a2bef..3c72ef1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2488,15 +2488,13 @@
         "defer-to-connect": "^1.0.1"
       }
     },
-    "@tailwindcss/custom-forms": {
+    "@tailwindcss/forms": {
       "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
-      "integrity": "sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",
+      "integrity": "sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==",
       "dev": true,
       "requires": {
-        "lodash": "^4.17.11",
-        "mini-svg-data-uri": "^1.0.3",
-        "traverse": "^0.6.6"
+        "mini-svg-data-uri": "^1.2.3"
       }
     },
     "@testing-library/dom": {
diff --git a/package.json b/package.json
index 295994e..c212297 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@reduxjs/toolkit": "^1.5.0",
-    "@tailwindcss/custom-forms": "^0.2.1",
+    "@tailwindcss/forms": "^0.2.1",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/react-hooks": "^3.4.2",
diff --git a/src/components/accountDialog.js b/src/components/accountDialog.js
index 2c99960..2fb8a4f 100644
--- a/src/components/accountDialog.js
+++ b/src/components/accountDialog.js
@@ -103,7 +103,7 @@ export default function AccountPanel () {
           {...changedUsername}
           id='usernameChange'
           type='email'
-          className='block w-full mt-1 text-gray-900 form-input'
+          className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
           disabled={isUpdating}
           autoFocus
           required
@@ -117,7 +117,7 @@ export default function AccountPanel () {
           {...oldPassword}
           id='passwordChangeOld'
           type='password'
-          className='block w-full mt-1 text-gray-900 form-input'
+          className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
           autoComplete='current-password'
           minLength='8'
           required={username !== changedUsername.value || passwordRequired}
@@ -138,7 +138,7 @@ export default function AccountPanel () {
             {...newPassword}
             id='passwordChangeNew'
             type='password'
-            className='block w-full mt-1 text-gray-900 form-input'
+            className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
             autoComplete='new-password'
             minLength='8'
             required={passwordRequired}
@@ -162,7 +162,7 @@ export default function AccountPanel () {
             {...newPassword2}
             id='passwordChangeNew2'
             type='password'
-            className='block w-full mt-1 text-gray-900 form-input'
+            className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
             autoComplete='new-password'
             minLength='8'
             required={passwordRequired}
@@ -361,7 +361,7 @@ function DeleteAccountModal () {
 
             <input
               type='password'
-              className='block w-full mt-1 text-gray-900 form-input'
+              className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
               value={password}
               onChange={event => {
                 setPassword(event.target.value)
diff --git a/src/components/chatDialog.js b/src/components/chatDialog.js
index 1706540..100fd29 100644
--- a/src/components/chatDialog.js
+++ b/src/components/chatDialog.js
@@ -64,7 +64,7 @@ export default function ChatDialog ({ isIM = false, data = {}, sendTo, loadHisto
       <form className='flex flex-row flex-shrink-0 m-2 space-x-2' onSubmit={send}>
         <input
           type='text'
-          className='flex-grow flex-shrink-0 form-input'
+          className='flex-grow flex-shrink-0 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
           name='chatInput'
           placeholder={placeholderText}
           aria-label={placeholderText}
diff --git a/src/components/friendsList.js b/src/components/friendsList.js
index 7fd5522..c4d38cb 100644
--- a/src/components/friendsList.js
+++ b/src/components/friendsList.js
@@ -40,7 +40,7 @@ function FriendRow ({ friend, name, skipLink, onRightsChanged, startNewIMChat })
         <input
           key={`friend-${friend.id}-${key}-${rightName}`}
           type='checkbox'
-          className='m-1 form-checkbox'
+          className='m-1 rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
           disabled={key === 'rightsHas'} // on the rights friend has given me
           checked={rightsMap[rightName]}
           title={titles[key][rightName]}
diff --git a/src/components/login/avatarLogin.js b/src/components/login/avatarLogin.js
index 7e726b3..3a919e4 100644
--- a/src/components/login/avatarLogin.js
+++ b/src/components/login/avatarLogin.js
@@ -60,7 +60,7 @@ export default function AvatarLogin ({ avatar, grid, isLoggingIn, onLogin, isSel
         <input
           id={passwordInputId}
           type='password'
-          className='block w-full mt-1 text-gray-900 form-input'
+          className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
           value={password}
           onChange={event => { setPassword(event.target.value) }}
           required
diff --git a/src/components/login/newAvatarLogin.js b/src/components/login/newAvatarLogin.js
index 477fe18..3fa1fd2 100644
--- a/src/components/login/newAvatarLogin.js
+++ b/src/components/login/newAvatarLogin.js
@@ -45,9 +45,9 @@ export default function NewAvatarLogin ({
       >
         <button className='flex flex-col text-white btn-transparent focus:outline-none'>
           <h2 className='block m-1 text-xl text-center'>
-            <span className='whitespace-no-wrap'>Add avatar</span>
+            <span className='whitespace-nowrap'>Add avatar</span>
             <span> or </span>
-            <span className='whitespace-no-wrap'>login anonymously</span>
+            <span className='whitespace-nowrap'>login anonymously</span>
           </h2>
 
           <span className='text-center text-gray-400'>click to add</span>
@@ -90,18 +90,18 @@ export default function NewAvatarLogin ({
       <h2 className='block m-1 text-xl text-center'>
         {isSignedIn && (
           <>
-            <span className='whitespace-no-wrap'>Add avatar</span>
+            <span className='whitespace-nowrap'>Add avatar</span>
             <span> or </span>
           </>
         )}
-        <span className='whitespace-no-wrap'>login anonymously</span>
+        <span className='whitespace-nowrap'>login anonymously</span>
       </h2>
 
       <label className='text-left'>
         <span>Avatar</span>
         <input
           type='text'
-          className='block w-full mt-1 text-gray-900 form-input'
+          className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
           value={name}
           onChange={onNameChange}
           disabled={isLoggingIn}
@@ -132,7 +132,7 @@ export default function NewAvatarLogin ({
         <span>Password</span>
         <input
           type='password'
-          className='block w-full mt-1 text-gray-900 form-input'
+          className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
           value={password}
           onChange={onPasswordChange}
           disabled={isLoggingIn}
@@ -144,7 +144,7 @@ export default function NewAvatarLogin ({
       <label className='mt-3 text-left'>
         <span>Grid</span>
         <select
-          className='block w-full mt-1 text-gray-900 form-select'
+          className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
           value={selectedGrid}
           onChange={event => { setSelectedGrid(event.target.value) }}
         >
@@ -166,7 +166,7 @@ export default function NewAvatarLogin ({
             <span>Name</span>
             <input
               type='text'
-              className='block w-full mt-1 text-gray-900 form-input'
+              className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
               value={gridName}
               onChange={onGridNameChange}
               minLength='1'
@@ -178,7 +178,7 @@ export default function NewAvatarLogin ({
             <span>URL</span>
             <input
               type='url'
-              className='block w-full mt-1 text-gray-900 form-input'
+              className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
               placeholder='https://example.com/login'
               value={gridUrl}
               onChange={onGridUrlChange}
@@ -193,7 +193,7 @@ export default function NewAvatarLogin ({
           >
             <input
               type='checkbox'
-              className='form-checkbox'
+              className='rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
               checked={isGridLLSD}
               onChange={event => { setIsGridLLSD(event.target.checked) }}
             />
@@ -206,7 +206,7 @@ export default function NewAvatarLogin ({
         <label>
           <input
             type='checkbox'
-            className='form-checkbox'
+            className='rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
             onChange={event => { setSaveAvatar(event.target.checked) }}
             checked={saveAvatar}
             disabled={!isSignedIn || isLoggingIn}
diff --git a/src/components/modals/resetPasswordDialog.js b/src/components/modals/resetPasswordDialog.js
index 90c0d55..3ac373d 100644
--- a/src/components/modals/resetPasswordDialog.js
+++ b/src/components/modals/resetPasswordDialog.js
@@ -62,7 +62,7 @@ export default function ResetPasswordDialog ({ type, dialog }) {
           <input
             id='oldInput'
             type='text'
-            className='block w-full mt-1 text-gray-900 form-input'
+            className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
             value={resetKey}
             onChange={event => { setResetKey(event.target.value) }}
             autoFocus
@@ -91,7 +91,7 @@ export default function ResetPasswordDialog ({ type, dialog }) {
           <input
             id='newPassword'
             type='password'
-            className='block w-full mt-1 text-gray-900 form-input'
+            className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
             value={password1}
             onChange={event => { setPassword1(event.target.value) }}
             required
@@ -109,7 +109,7 @@ export default function ResetPasswordDialog ({ type, dialog }) {
           <input
             id='newPassword2'
             type='password'
-            className='block w-full mt-1 text-gray-900 form-input'
+            className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
             value={password2}
             onChange={event => { setPassword2(event.target.value) }}
             required
diff --git a/src/components/modals/signIn.js b/src/components/modals/signIn.js
index b5b75b2..34da159 100644
--- a/src/components/modals/signIn.js
+++ b/src/components/modals/signIn.js
@@ -68,7 +68,7 @@ export default function SignInPopup ({ isSignUp, dialog }) {
           <input
             id='username'
             type='email'
-            className='block w-full mt-1 text-gray-900 form-input'
+            className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
             autoComplete='email'
             value={username}
             onChange={event => {
@@ -95,7 +95,7 @@ export default function SignInPopup ({ isSignUp, dialog }) {
             {...password}
             id='password'
             type='password'
-            className='block w-full mt-1 text-gray-900 form-input'
+            className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
             autoComplete={isSignUp ? 'new-password' : 'current-password'}
             required
             minLength='8'
@@ -129,7 +129,7 @@ export default function SignInPopup ({ isSignUp, dialog }) {
               {...password2}
               id='password2'
               type='password'
-              className='block w-full mt-1 text-gray-900 form-input'
+              className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
               autoComplete='new-password'
               required
               minLength='8'
diff --git a/src/components/modals/unlockDialog.js b/src/components/modals/unlockDialog.js
index fa37f7a..6c296c9 100644
--- a/src/components/modals/unlockDialog.js
+++ b/src/components/modals/unlockDialog.js
@@ -74,7 +74,7 @@ export default function UnlockDialog () {
           <input
             id='unlockPasswordIn'
             type='password'
-            className='block w-full mt-1 text-gray-900 form-input'
+            className='block w-full mt-1 text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
             autoComplete='current-password'
             autoFocus
             ref={doAutoFocus}
diff --git a/tailwind.config.js b/tailwind.config.js
index 951623c..faa768c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,4 @@
 module.exports = {
-  future: {},
   purge: [
     './public/**/*.html',
     './src/components/**/*.js',
@@ -18,6 +17,6 @@ module.exports = {
     }
   },
   plugins: [
-    require('@tailwindcss/custom-forms')
+    require('@tailwindcss/forms')
   ]
 }