feat: add the NFT.Storage logo and make sure it looks nice

examples/react/w3console/src/brand.tsx

@@ -1,6 +1,6 @@
 export const serviceName = import.meta.env.VITE_W3UP_SERVICE_BRAND_NAME || 'dev.web3.storage'
 export const tosUrl = import.meta.env.VITE_W3UP_PROVIDER == 'did:web:nft.storage' ? 'https://nft.storage/terms' : 'https://web3.storage/terms'
-export const LogoIcon = () => (
+export const Web3StorageLogoIcon = () => (
   <svg
     width='30'
     viewBox='0 0 27.2 27.18'
@@ -15,4 +15,17 @@ export const LogoIcon = () => (
       fill='currentColor'
     />
   </svg>
-)
+)
+
+export const NFTStorageLogo = ({ className = '' }: { className?: string }) => (
+  <img className={className} src='nft-storage.svg'></img>
+)
+
+export const Web3StorageLogo = () => (
+  <div className='font-bold flex flex-row justify-center items-center gap-2'>
+    <Web3StorageLogoIcon />
+    <span>console</span>
+  </div>
+)
+
+export const Logo = import.meta.env.VITE_W3UP_PROVIDER == 'did:web:nft.storage' ? NFTStorageLogo : Web3StorageLogo

examples/react/w3console/src/components/Authenticator.tsx

@@ -2,18 +2,15 @@ import {
   Authenticator as AuthCore,
   useAuthenticator
 } from '@w3ui/react-keyring'
-import { serviceName, tosUrl, LogoIcon } from '../brand'
+import { serviceName, tosUrl, Logo } from '../brand'
 
 export function AuthenticationForm (): JSX.Element {
   const [{ submitted }] = useAuthenticator()
   return (
     <div className='authenticator'>
       <AuthCore.Form className='text-white/80 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl shadow-md px-10 pt-8 pb-8'>
         <div className='flex flex-row gap-4 mb-8 flex justify-center gap-4'>
-          <LogoIcon />
-          <h1 className='text-2xl'>
-            {serviceName}
-          </h1>
+          <Logo className='w-36'/>
         </div>
         <div>
           <label className='block mb-2 uppercase text-xs font-semibold tracking-wider m-1 font-mono' htmlFor='authenticator-email'>Email</label>

examples/react/w3console/src/pages/index.tsx

@@ -14,7 +14,7 @@ import { UploadsList } from '../components/UploadsList'
 import { SpaceFinder } from '../components/SpaceFinder'
 import { SpaceCreatorForm, SpaceCreator } from '../components/SpaceCreator'
 import { AuthenticationEnsurer } from '../components/Authenticator'
-import { tosUrl, LogoIcon } from '../brand'
+import { tosUrl, Logo } from '../brand'
 
 function SpaceRegistrar (): JSX.Element {
   const [, { registerSpace }] = useKeyring()
@@ -170,14 +170,6 @@ function SpaceSelector (props: any): JSX.Element {
   )
 }
 
-export function Logo (): JSX.Element {
-  return (
-    <h1 className='font-bold flex flex-row justify-center items-center gap-2'>
-      <LogoIcon />
-      console
-    </h1>
-  )
-}
 
 export function SpaceEnsurer ({
   children
@@ -227,9 +219,9 @@ export default function Home (): JSX.Element {
                   spaces={spaces}
                 />
               </div>
-              <div>
+              <div className='flex flex-col items-center'>
                 <SpaceCreator className='mb-8' />
-                <Logo />
+                <Logo className='w-36 mb-2'/>
                 <a className='text-xs block text-center mt-2' href={tosUrl}>Terms</a>
               </div>
             </div>

examples/react/w3console/src/pages/terms.tsx

@@ -1,11 +1,11 @@
-import { LogoIcon, tosUrl } from '../brand'
+import { Logo, tosUrl } from '../brand'
 
 export default function Terms () {
   const serviceName = import.meta.env.VITE_W3UP_SERVICE_BRAND_NAME || 'dev.web3.storage'
   return (
     <div className='flex flex-col justify-start items-center min-h-full w-full bg-gray-900 text-white p-8'>
       <div className='flex flex-row gap-4'>
-        <LogoIcon />
+        <Logo className='h-12'/>
         <h1 className='text-2xl my-4 font-bold'>
           {serviceName} w3up beta Terms of Service
         </h1>