storacha · travis · Nov 6, 2023 · Nov 6, 2023 · Nov 6, 2023 · Nov 6, 2023
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/app-icon.svg b/public/app-icon.svg
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/icon-tray.svg b/public/icon-tray.svg
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -11,5 +11,26 @@
 }
 
 .authenticator {
-  @apply bg-gray-900 bg-logo bg-center bg-no-repeat w-full h-screen flex flex-col justify-center items-center;
-}
+  @apply bg-zinc-950 w-full h-screen flex flex-col justify-center items-center;
+}
+
+@keyframes bgPosDrift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@layer utilities {
+  .bg-grad {
+    background-color: rgb(244 244 245);
+    background-image: linear-gradient(225deg, #ff149296 0%, #00ffff96 100%);
+    background-size: 400% 400%;
+    animation: bgPosDrift 60s ease infinite;
+  }
+  .text-grad {
+    background: linear-gradient(92deg, #B507DC 0.82%, #2F0FDB 26.77%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link'
 
 export const metadata: Metadata = {
   title: 'w3up console',
-  description: 'web3.storage file uploader',
+  description: 'web3.storage management console',
 }
 
 export default function RootLayout ({
@@ -16,7 +16,7 @@ export default function RootLayout ({
 }) {
   return (
     <html lang="en">
-      <body className='bg-gray-dark min-h-screen'>
+      <body className='bg-grad min-h-screen'>
         <SidebarLayout>
           {/* <H2 explain='a decentralised bucket identified by a DID'>
             <Link href='/'>Space</Link>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -28,11 +28,11 @@ export default function SpacePage (): JSX.Element {
 
 function Item ({space}: {space: Space}) {
   return (
-    <Link href={`/space/${space.did()}`} className='flex flex-row items-start gap-2 p-3 text-left hover:bg-gray-800 border-b border-zinc-700'>
+    <Link href={`/space/${space.did()}`} className='flex flex-row items-start gap-2 p-3 text-white text-left bg-gray-900/30 hover:bg-gray-900/60 border-b last:border-0 border-zinc-700'>
       <DidIcon did={space.did()} />
-      <div className='grow overflow-hidden whitespace-nowrap text-ellipsis text-gray-500'>
-        <span className='text-md font-semibold leading-5 text-white m-0'>
-          {space.name() ?? 'Untitled'}
+      <div className='grow overflow-hidden whitespace-nowrap text-ellipsis'>
+        <span className='text-md font-semibold leading-5 m-0'>
+          {space.name() || 'Untitled'}
         </span>
         <span className='font-mono text-xs block'>
           {space.did()}

diff --git a/src/app/space/[did]/layout.tsx b/src/app/space/[did]/layout.tsx
@@ -4,7 +4,6 @@ import { PropsWithChildren } from 'react'
 import { DIDKey } from '@ucanto/interface'
 import { useKeyring } from '@w3ui/react-keyring'
 import { DidIcon } from '@/components/DidIcon'
-import Link from 'next/link'
 import { Nav, NavLink } from '@/components/Nav'
 
 interface LayoutProps extends PropsWithChildren {
@@ -36,17 +35,17 @@ export default function Layout ({children, params}: LayoutProps): JSX.Element {
       <header className='py-3'>
         <div className='flex flex-row items-start gap-2'>
           <DidIcon did={space.did()} />
-          <div className='grow overflow-hidden whitespace-nowrap text-ellipsis text-gray-500'>
-            <h1 className='text-lg font-semibold leading-5 text-white'>
-              {space.name() ?? 'Untitled'}
+          <div className='grow overflow-hidden whitespace-nowrap text-ellipsis text-black'>
+            <h1 className='text-lg font-semibold leading-5 text-black'>
+              {space.name() || 'Untitled'}
             </h1>
             <label className='font-mono text-xs'>
               {space.did()}
             </label>
           </div>
         </div>
       </header>
-      <Nav className='mb-8 mt-7'>
+      <Nav className='mb-8 mt-8'>
         <NavLink href={`/space/${space.did()}`}>List</NavLink>
         <NavLink href={`/space/${space.did()}/share`}>Share</NavLink>
         <NavLink href={`/space/${space.did()}/upload`}>Upload</NavLink>

diff --git a/src/app/space/[did]/root/[cid]/page.tsx b/src/app/space/[did]/root/[cid]/page.tsx
@@ -27,7 +27,7 @@ export default function ItemPage ({ params: { cid }}: PageProps): JSX.Element {
       </div>
       <H2>URL</H2>
       <div className="pb-5">
-        <a href={url} className="font-mono text-sm text-blue-400 m-0 p-0 block">{url}</a>
+        <a href={url} className="font-mono text-sm underline m-0 p-0 block">{url}</a>
       </div>
       <H2>Shards</H2>
       <div className=''>

diff --git a/src/app/space/create/page.tsx b/src/app/space/create/page.tsx
@@ -12,7 +12,7 @@ export default function CreateSpacePage (): JSX.Element {
         <H2>Create a new Space</H2>
         <SpaceCreatorForm />
       </div>
-      <div className='mt-12 text-gray-200 max-w-xl text-sm leading-6'>
+      <div className='mt-12 max-w-xl text-sm leading-6'>
         <H2>Explain</H2>
         <p>
           A space is decentralised bucket. The name you give it is a memorable alias.
@@ -27,7 +27,7 @@ export default function CreateSpacePage (): JSX.Element {
           You can allow others to use your space, by creating a delegation to their email or a specific agent from the share page.
         </p>
         <p className="mt-4">
-          For details on how this works see <a className='text-blue-400' href="https://github.com/web3-storage/specs/blob/main/w3-account.md">specs/w3-account</a>
+          For details on how this works see <a className='underline' href="https://github.com/web3-storage/specs/blob/main/w3-account.md">specs/w3-account</a>
         </p>
       </div>
     </>

diff --git a/src/brand.tsx b/src/brand.tsx
@@ -16,7 +16,7 @@ export const Web3StorageLogoIcon = () => (
 )
 
 export const Web3StorageLogo = ({ className = '' }) => (
-  <Link href='/' className={`${className} font-bold flex flex-row justify-center items-center gap-2`}>
+  <Link href='/' className={`${className} font-mono flex flex-row justify-center items-center gap-2`}>
     <Web3StorageLogoIcon />
     <span>console</span>
   </Link>

diff --git a/src/components/Authenticator.tsx b/src/components/Authenticator.tsx
@@ -11,21 +11,23 @@ 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'>
+      <AuthCore.Form className='text-zinc-950 bg-grad rounded-xl shadow-md px-10 pt-8 pb-8'>
         <div className='flex flex-row gap-4 mb-8 flex justify-center gap-4'>
           <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>
-          <AuthCore.EmailInput className='block rounded-md p-2 w-80 bg-white text-black shadow-md' id='authenticator-email' required />
+          <AuthCore.EmailInput className='text-black py-2 px-2 rounded block mb-4 border border-gray-800 w-80 shadow-md' id='authenticator-email' required />
+        </div>
+        <div className='text-center mt-4'>
+          <button
+            className='inline-block bg-zinc-950 hover:outline text-white font-bold text-sm px-6 py-2 rounded-full whitespace-nowrap'
+            type='submit'
+            disabled={submitted}
+          >
+            Authorize
+          </button>
         </div>
-        <button
-          className='mt-2 bg-white/0 w-full hover:bg-blue-800 rounded-md w-full text-sm font-medium py-2 px-8 transition-colors ease-in'
-          type='submit'
-          disabled={submitted}
-        >
-          Authorize
-        </button>
       </AuthCore.Form>
       <p className='text-xs text-white/80 italic max-w-xs text-left mt-6'>
         By registering with {serviceName} w3up beta, you agree to the <a className='underline' href={tosUrl}>Terms of Service</a>.
@@ -44,15 +46,15 @@ export function AuthenticationSubmitted (): JSX.Element {
 
   return (
     <div className='authenticator'>
-      <div className='text-white 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'>
+      <div className='text-zinc-950 bg-grad rounded-xl shadow-md px-10 pt-8 pb-8'>
+        <div className='flex flex-row gap-4 mb-8 justify-center'>
           <Logo className='w-36' />
         </div>
         <h1 className='text-xl font-semibold'>Verify your email address!</h1>
         <p className='pt-2 pb-4'>
           Click the link in the email we sent to <span className='font-semibold tracking-wide'>{email}</span> to authorize this agent.
         </p>
-        <AuthCore.CancelButton className='w3ui-button' >
+        <AuthCore.CancelButton className='inline-block bg-zinc-950 hover:outline text-white font-bold text-sm px-6 py-2 rounded-full whitespace-nowrap' >
           Cancel
         </AuthCore.CancelButton>
       </div>

diff --git a/src/components/DidIcon.tsx b/src/components/DidIcon.tsx
@@ -7,7 +7,7 @@ export function DidIcon({ did }: { did: string }): JSX.Element {
       title={did}
       alt={`gravatar for did ${did}`}
       src={src}
-      className='w-10 hover:saturate-200 saturate-0 invert border-solid border-gray-500 border'
+      className='w-10 hover:saturate-200 saturate-0 invert border-solid border-white border'
     />
   )
 }
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -81,7 +81,7 @@ export function DefaultLayout ({ sidebar = <div></div>, children }: LayoutCompon
           <Bars3Icon className='w-6 h-6' onClick={() => setSidebarOpen(true)} />
           <a href='/'><Logo className='w-36 mb-2' /></a>
         </div>
-        <main className='grow bg-gray-dark text-white p-4'>
+        <main className='grow bg-gray-dark text-black p-4'>
           {children}
         </main>
       </div>

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -7,7 +7,7 @@ import Link from "next/link"
 export function Nav ({ children, ...rest}: PropsWithChildren & { className?: string }) {
   return (
     <nav {...rest}>
-      <div className="inline-flex rounded-sm border-zinc-600 bg-gray-800 mt-4 font-semibold">
+      <div className="inline-flex rounded-md  mt-2 font-semibold text-white overflow-hidden">
         {children}
       </div>
     </nav>
@@ -16,7 +16,7 @@ export function Nav ({ children, ...rest}: PropsWithChildren & { className?: str
 
 export function NavLink ({ href, children }: PropsWithChildren & { href: string }) {
   const pathname = usePathname()
-  const active = href === pathname ? 'text-gray-900 bg-gray-100' : 'text-blue-100 hover:bg-gray-700'
-  const cls = `inline-block rounded-sm px-9 py-2 text-sm focus:relative ${active}` 
+  const active = href === pathname ? 'bg-gray-900/60' : 'bg-gray-900/40 hover:bg-gray-900/50 shadow-inner'
+  const cls = `inline-block px-10 py-3 text-sm focus:relative ${active} bg-clip-padding border-r border-transparent last:border-0` 
   return (<Link className={cls} href={href}>{children}</Link>)
 }
diff --git a/src/components/SidebarLayout.tsx b/src/components/SidebarLayout.tsx
@@ -24,20 +24,20 @@ interface SidebarComponentProps {
 }
 
 function Sidebar ({ sidebar = <div></div> }: SidebarComponentProps): JSX.Element {
-  const [{ space, spaces }, { setCurrentSpace }] = useKeyring()
+  const [{space, spaces}] = useKeyring()
   const router = useRouter()
   const pathname = usePathname()
   const goToSpace = (s: Space) => {
     router.push(`/space/${s.did()}`)
   }
   return (
-    <nav className='flex-none w-64 bg-gray-900 text-white px-4 pb-4 border-r border-gray-800 h-screen'>
+    <nav className='flex-none w-64 bg-gray-900 lg:bg-gray-900/60 text-white px-4 pb-4 border-r border-gray-800 h-screen'>
       <div className='flex flex-col justify-between h-full'>
         <div>
           <header className='opacity-0 lg:opacity-100'>
             <Logo className='py-8' />
           </header>
-          <H2>Spaces</H2>
+          <H2 className='text-white'>Spaces</H2>
           <SpaceFinder spaces={spaces} selected={space} setSelected={goToSpace} />
         </div>
         {sidebar}
@@ -97,18 +97,17 @@ export default function SidebarLayout ({ children }: LayoutComponentProps): JSX.
                     </div>
                   </Dialog>
                 </Transition.Root>
-
                 {/* static sidebar for wide browsers */}
                 <div className='hidden lg:block'>
                   <Sidebar />
                 </div>
-                <div className='w-full h-screen overflow-scroll'>
+                <div className='w-full h-screen overflow-scroll text-white'>
                   {/* top nav bar for narrow browsers, mainly to have a place to put the hamburger */}
                   <div className='lg:hidden flex justify-between pt-4 px-4'>
                     <Bars3Icon className='w-6 h-6' onClick={() => setSidebarOpen(true)} />
                     <Logo className='w-full' />
                   </div>
-                  <main className='grow bg-gray-dark text-white p-4'>
+                  <main className='grow text-black p-4'>
                     {children}
                   </main>
                 </div>

diff --git a/src/components/SpaceCreator.tsx b/src/components/SpaceCreator.tsx
@@ -53,7 +53,7 @@ export function SpaceCreatorForm ({
     }
   }
 
-  if (created) {
+  if (created && space) {
     return (
       <div className={className}>
         <SpacePreview did={space.did()} name={space.name()} />
@@ -73,14 +73,15 @@ export function SpaceCreatorForm ({
     <div className={className}>
       <form className='' onSubmit={(e: React.FormEvent<HTMLFormElement>) => { void onSubmit(e) }}>
         <input
-          className='text-black py-1 px-2 rounded block w-full mb-4'
+          className='text-black py-2 px-2 rounded block w-full mb-4 border border-gray-800'
           placeholder='Name'
           value={name}
           onChange={(e: ChangeEvent<HTMLInputElement>) => {
             setName(e.target.value)
           }}
+          required={true}
         />
-        <button type='submit' className='w3ui-button'>Create</button>
+        <button type='submit' className='inline-block bg-zinc-950 hover:outline text-white font-bold text-sm px-6 py-2 rounded-full whitespace-nowrap'>Create</button>
       </form>
     </div>
   )
@@ -116,7 +117,7 @@ export function SpaceCreator ({
 
 export function SpacePreview ({ did, name }: { did: DIDKey, name?: string }) {
   return (
-    <figure className='p-4 flex flex-row items-start gap-2'>
+    <figure className='p-4 flex flex-row items-start gap-2 bg-zinc-950/10 hover:bg-white/10 rounded'>
       <Link href={`/space/${did}`} className='block'>
         <DidIcon did={did} />
       </Link>
@@ -125,13 +126,13 @@ export function SpacePreview ({ did, name }: { did: DIDKey, name?: string }) {
           <span className='block text-lg font-semibold leading-5 mb-1'>
             { name ?? 'Untitled'}
           </span>
-          <span className='block font-mono text-xs text-gray-500 truncate'>
+          <span className='block font-mono text-xs truncate'>
             {did}
           </span>
         </Link>
       </figcaption>
       <div>
-        <Link href={`/space/${did}`} className='text-sm font-semibold align-[-8px] hover:text-blue-400'>
+        <Link href={`/space/${did}`} className='text-sm font-semibold align-[-8px] hover:underline'>
           View
         </Link>
       </div>