feat: add the NFT.Storage logo and make sure it looks nice (#465)

switch on configured provider to show either the NFT.Storage logo or the web3.storage asterisks <img width="458" alt="Screenshot 2023-03-23 at 11 01 23 PM" src="https://user-images.githubusercontent.com/1113/227437742-6dc45e1c-6f9c-46f1-b736-6cf263021515.png"> <img width="421" alt="Screenshot 2023-03-23 at 11 01 39 PM" src="https://user-images.githubusercontent.com/1113/227437745-da92975a-3686-4537-a03b-5feb584918fb.png"> <img width="235" alt="Screenshot 2023-03-23 at 11 00 44 PM" src="https://user-images.githubusercontent.com/1113/227437747-fea37c79-a738-4339-92f7-aad580343630.png"> <img width="233" alt="Screenshot 2023-03-23 at 11 00 29 PM" src="https://user-images.githubusercontent.com/1113/227437748-c9a641e1-9ccf-472c-be69-1f70f8a1e1e1.png">
storacha · Mar 24, 2023 · 5e16e2f · 5e16e2f
1 parent 17bc3d3
commit 5e16e2f
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 20 deletions.
diff --git a/examples/react/w3console/public/nft-storage.svg b/examples/react/w3console/public/nft-storage.svg
diff --git a/examples/react/w3console/src/brand.tsx b/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
diff --git a/examples/react/w3console/src/components/Authenticator.tsx b/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>

diff --git a/examples/react/w3console/src/pages/index.tsx b/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>

diff --git a/examples/react/w3console/src/pages/terms.tsx b/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>