From d33d629e7ee90483a09ae80892560baa96d62977 Mon Sep 17 00:00:00 2001
From: Oli Evans <oli@protocol.ai>
Date: Thu, 2 Feb 2023 15:25:22 +0000
Subject: [PATCH] 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 https://github.com/web3-storage/w3ui/issues/349

License: MIT
Signed-off-by: Oli Evans <oli@protocol.ai>
---
 examples/react/w3console/public/w3.svg |  4 ++++
 examples/react/w3console/src/app.tsx   |  2 +-
 examples/react/w3console/src/index.css | 21 +++++++++++++++++++++
 packages/react/src/Authenticator.tsx   |  2 +-
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 examples/react/w3console/public/w3.svg

diff --git a/examples/react/w3console/public/w3.svg b/examples/react/w3console/public/w3.svg
new file mode 100644
index 00000000..977174e1
--- /dev/null
+++ b/examples/react/w3console/public/w3.svg
@@ -0,0 +1,4 @@
+<svg width='30' viewBox='0 0 27.2 27.18' xmlns='http://www.w3.org/2000/svg'>
+  <path fill='white' d='M13.6 27.18A13.59 13.59 0 1127.2 13.6a13.61 13.61 0 01-13.6 13.58zM13.6 2a11.59 11.59 0 1011.6 11.6A11.62 11.62 0 0013.6 2z'  />
+  <path fill='white' d='M12.82 9.9v2.53h1.6V9.9l2.09 1.21.77-1.21-2.16-1.32 2.16-1.32-.77-1.21-2.09 1.21V4.73h-1.6v2.53l-2-1.21L10 7.26l2.2 1.32L10 9.9l.78 1.21zM18 17.79v2.52h1.56v-2.52L21.63 19l.78-1.2-2.16-1.33 2.16-1.28-.78-1.19-2.08 1.2v-2.58H18v2.56L15.9 14l-.77 1.2 2.16 1.32-2.16 1.33.77 1.15zM8.13 17.79v2.52h1.56v-2.52L11.82 19l.77-1.2-2.16-1.33 2.12-1.28-.73-1.24-2.13 1.23v-2.56H8.13v2.56L6.05 14l-.78 1.2 2.16 1.3-2.16 1.33.78 1.17z' />
+</svg>
\ No newline at end of file
diff --git a/examples/react/w3console/src/app.tsx b/examples/react/w3console/src/app.tsx
index 1b29e367..b1bc7fff 100644
--- a/examples/react/w3console/src/app.tsx
+++ b/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>
diff --git a/examples/react/w3console/src/index.css b/examples/react/w3console/src/index.css
index a90f0749..930f5e81 100644
--- a/examples/react/w3console/src/index.css
+++ b/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
+}
\ No newline at end of file
diff --git a/packages/react/src/Authenticator.tsx b/packages/react/src/Authenticator.tsx
index ceef34c7..1dfb3be7 100644
--- a/packages/react/src/Authenticator.tsx
+++ b/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>