refactor(tailwind): move from custom-form to forms and update classes

This commit is contained in:
Christopher Astfalk
2020-11-30 02:17:47 +01:00
parent b504f1cc9d
commit d0713bad29
11 changed files with 32 additions and 35 deletions
+4 -6
View File
@@ -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": {
+1 -1
View File
@@ -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",
+5 -5
View File
@@ -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)
+1 -1
View File
@@ -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}
+1 -1
View File
@@ -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]}
+1 -1
View File
@@ -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
+11 -11
View File
@@ -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}
+3 -3
View File
@@ -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
+3 -3
View File
@@ -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'
+1 -1
View File
@@ -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}
+1 -2
View File
@@ -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')
]
}