feat: club tropical w3 auth boxen

Nice up the auth step to be closer to the dream presented in https://beta.ui.web3.storage/keyring

While implementing this it occurs to me that we should drop the Authneticator pattern in-favour of the "come on in" pattern. The app should just work straight away without forcing you to register your first space per #349

License: MIT
Signed-off-by: Oli Evans <oli@protocol.ai>

examples/react/w3console/src/app.tsx

@@ -148,7 +148,7 @@ export function App (): JSX.Element {
               </div>
             </div>
           </nav>
-          <main className='grow bg-dark-gray text-white p-4'>
+          <main className='grow bg-gray-dark text-white p-4'>
             <SpaceSection />
           </main>
         </div>

examples/react/w3console/src/index.css

@@ -2,3 +2,24 @@
 @tailwind components;
 @tailwind utilities;
 
+
+.w3ui-authenticator {
+  background-image: url("w3.svg");
+  background-repeat: no-repeat;
+  background-position: center 95%;
+  @apply bg-gray-900;
+}
+
+.w3ui-authenticator-form {
+  background: linear-gradient(104.3deg,#3064e0 -8.21%,#00d8ff 88.68%);
+  @apply shadow-md px-10 pt-14 pb-8 rounded-xl;
+}
+
+.w3ui-authenticator-form .email-field label {
+  @apply text-white font-semibold uppercase text-xs tracking-wider m-1 font-mono opacity-80;
+}
+
+.w3ui-authenticator-form .email-field input {
+  width: 22rem;
+  @apply bg-white rounded-md shadow-md
+}

packages/react/src/Authenticator.tsx

@@ -7,7 +7,7 @@ export function AuthenticationForm (): JSX.Element {
   return (
     <AuthCore.Form className='w3ui-authenticator-form'>
       <div className='email-field'>
-        <label htmlFor='w3ui-authenticator-email'>Email address:</label>
+        <label htmlFor='w3ui-authenticator-email'>Email</label>
         <AuthCore.EmailInput id='w3ui-authenticator-email' required />
       </div>
       <button className='register w3ui-button' type='submit' disabled={submitted}>Register</button>