feat: club tropical w3 auth boxen (storacha#350)

Nice up the auth step to be closer to the dream presented in https://beta.ui.web3.storage/keyring <img width="1193" alt="Screenshot 2023-02-02 at 15 24 23" src="https://user-images.githubusercontent.com/58871/216367643-3e0072f3-97a8-4709-8c3c-63755f2fd764.png"> Part of #134 License: MIT Signed-off-by: Oli Evans <[email protected]>
storacha · Feb 3, 2023 · 92fa065 · 92fa065
1 parent e115f9f
commit 92fa065
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/packages/w3ui/examples/react/w3console/public/w3.svg b/packages/w3ui/examples/react/w3console/public/w3.svg
diff --git a/packages/w3ui/examples/react/w3console/src/app.tsx b/packages/w3ui/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/packages/w3ui/examples/react/w3console/src/index.css b/packages/w3ui/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
+}
diff --git a/packages/w3ui/packages/react/src/Authenticator.tsx b/packages/w3ui/packages/react/src/Authenticator.tsx
@@ -8,7 +8,7 @@ export function AuthenticationForm (): JSX.Element {
     <div className='w3ui-authenticator'>
       <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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@