feat: more styles

storacha · Jul 31, 2024 · d4e8efa · d4e8efa
1 parent 0c013d4
commit d4e8efa
Show file tree

Hide file tree

Showing 29 changed files with 441 additions and 354 deletions.
diff --git a/public/racha-fire-opacity-50.png b/public/racha-fire-opacity-50.png
diff --git a/public/racha-fire.png b/public/racha-fire.png
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -18,7 +18,11 @@
   font-style: normal;
 }
 .bg-racha-fire {
-  background: var(--hot-red-light) url("/racha-fire.jpg") bottom left;
+  background: var(--hot-red-light) url("/racha-fire.png") bottom left;
+  background-size: cover;
+}
+.bg-racha-fire\/50 {
+  background: transparent url("/racha-fire-opacity-50.png") bottom left;
   background-size: cover;
 }
 .bg-hot-red,

diff --git a/src/app/migration/[id]/page.tsx b/src/app/migration/[id]/page.tsx
@@ -57,7 +57,7 @@ export default function MigrationPage ({ params }: PageProps): JSX.Element {
   return (
     <div className='max-w-6xl'>
       <H1>Migrating from {migration.source}</H1>
-      <div className='bg-white/60 my-4 p-4 rounded-xl shadow'>
+      <div className='bg-white my-4 p-4 rounded-2xl border border-hot-red'>
         <div className='flex mb-4'>
           <div className='flex-auto'>
             <H2>Target</H2>
@@ -114,7 +114,7 @@ const LogLines = ({ lines }: { lines: string[] }) => {
     ref.current?.scrollIntoView({ block: 'end', behavior: 'smooth' })
   })
   return (
-    <pre className='text-xs p-4 h-80 bg-white overflow-y-auto mb-4 rounded shadow-inner'>
+    <pre className='text-xs p-4 h-60 bg-white overflow-y-auto mb-4 rounded shadow-inner border'>
       {lines.map(line => `${line}\n`)}
       {lines.length ? '' : 'No logs yet!'}
       <div ref={ref} className='py-2'></div>
@@ -147,15 +147,15 @@ const RemoveButton = ({ onRemove, progress }: { onRemove: () => void, progress?:
 
   if (progress && progress.pending <= 0) {
     return (
-      <button type='button' onClick={onRemove} className={`inline-block bg-zinc-950 text-white font-bold text-sm pl-4 pr-6 py-2 rounded-full whitespace-nowrap hover:bg-green-700 hover:outline`}>
+      <button type='button' onClick={onRemove} className='inline-block bg-hot-red border border-hot-red hover:bg-white hover:text-hot-red font-epilogue text-white uppercase text-sm px-6 py-2 rounded-full whitespace-nowrap'>
         <CheckCircleIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> Close and Remove
       </button>
     )
   }
 
   return (
     <>
-      <button type='button' onClick={() => setRemoveConfirmModalOpen(true)} className={`inline-block bg-zinc-950 text-white font-bold text-sm pl-4 pr-6 py-2 rounded-full whitespace-nowrap hover:bg-red-700 hover:outline`}>
+      <button type='button' onClick={() => setRemoveConfirmModalOpen(true)} className='inline-block bg-hot-red border border-hot-red hover:bg-white hover:text-hot-red font-epilogue text-white uppercase text-sm px-6 py-2 rounded-full whitespace-nowrap'>
         <TrashIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> Remove
       </button>
       <RemoveConfirmModal
@@ -178,8 +178,8 @@ function RemoveConfirmModal ({ isOpen, onConfirm, onCancel }: RemoveConfirmModal
   return (
     <Dialog open={isOpen} onClose={() => { setConfirmed(false); onCancel() }} className='relative z-50'>
       <div className='fixed inset-0 flex w-screen items-center justify-center bg-black/70' aria-hidden='true'>
-        <Dialog.Panel className='bg-grad p-4 shadow-lg rounded-lg'>
-          <Dialog.Title className='text-lg font-semibold leading-5 text-black text-center my-3'>
+        <Dialog.Panel className='bg-hot-red p-10 shadow-lg rounded-lg font-epilogue text-white'>
+          <Dialog.Title className='text-lg text-center my-3'>
             <ExclamationTriangleIcon className='h-10 w-10 inline-block' /><br/>
             Confirm remove
           </Dialog.Title>
@@ -188,10 +188,10 @@ function RemoveConfirmModal ({ isOpen, onConfirm, onCancel }: RemoveConfirmModal
           </Dialog.Description>
           <p className='py-2'>The migration has not yet completed.</p>
           <div className='py-2 text-center'>
-            <button onClick={e => { e.preventDefault(); setConfirmed(true); onConfirm() }} className={`inline-block bg-red-700 text-white font-bold text-sm pl-4 pr-6 py-2 mr-3 rounded-full whitespace-nowrap ${confirmed ? 'opacity-50' : 'hover:outline'}`} disabled={confirmed}>
+            <button onClick={e => { e.preventDefault(); setConfirmed(true); onConfirm() }} className={`inline-block bg-hot-red-light border border-white hover:bg-white hover:text-hot-red font-epilogue text-hot-red uppercase text-sm px-6 py-2 mr-3 rounded-full whitespace-nowrap ${confirmed ? 'opacity-50' : 'hover:outline'}`} disabled={confirmed}>
               <TrashIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> {confirmed ? 'Removing...' : 'Remove'}
             </button>
-            <button onClick={e => { e.preventDefault(); setConfirmed(false); onCancel() }} className={`inline-block bg-zinc-950 text-white font-bold text-sm px-8 py-2 rounded-full whitespace-nowrap ${confirmed ? 'opacity-50' : 'hover:outline'}`} disabled={confirmed}>
+            <button onClick={e => { e.preventDefault(); setConfirmed(false); onCancel() }} className={`inline-block bg-hot-red border border-white hover:bg-white hover:text-hot-red font-epilogue text-white uppercase text-sm px-6 py-2 mr-3 rounded-full whitespace-nowrap ${confirmed ? 'opacity-50' : 'hover:outline'}`} disabled={confirmed}>
               Cancel
             </button>
           </div>
@@ -206,7 +206,7 @@ const FailList = ({ items }: { items: UnknownLink[] }) => {
   return (
     <div className='max-w-lg'>
       <div className='float-right'><CopyIcon text={content} /></div>
-      <pre className='text-xs p-4 max-h-24 bg-white overflow-y-auto rounded shadow-inner'>
+      <pre className='text-xs p-4 max-h-24 bg-white overflow-y-auto rounded shadow-inner border'>
         {content}
       </pre>
     </div>

diff --git a/src/app/migration/create/page.tsx b/src/app/migration/create/page.tsx
@@ -54,23 +54,25 @@ function ChooseSource ({ config, onNext }: WizardProps) {
   }
 
   return (
-    <div>
+    <div className='max-w-4xl'>
       <H1>Create a new migration</H1>
-      <p className='mb-8'>This allows data to be migrated from a previous provider to one of your spaces.</p>
-
-      <H2>Where from?</H2>
-      <p className='mb-4'>Pick a storage service you want to migrate data from.</p>
-      <div className='mb-4'>
-        <button className={`bg-white/60 rounded-lg shadow-md p-8 hover:outline mr-4 ${source === 'classic.nft.storage' ? 'outline' : ''}`} type='button' onClick={() => setSource('classic.nft.storage')} title='Migrate from NFT.Storage (Classic)'>
-          <img src='/nftstorage-logo.png' width='360' />
-        </button>
-        <button className={`bg-white/60 opacity-60 rounded-lg shadow-md p-8 ${source === 'old.web3.storage' ? 'outline' : ''}`} type='button' onClick={() => setSource('old.web3.storage')} title='COMING SOON! Migrate from Web3.Storage (Old)' disabled={true}>
-          <img src='/web3storage-logo.png' width='360' />
+      <div className='bg-white my-4 p-5 rounded-2xl border border-hot-red font-epilogue'>
+        <p className='mb-8'>This tool allows data to be migrated from a previous provider to one of your spaces.</p>
+
+        <H2>Where from?</H2>
+        <p className='mb-4'>Pick a storage service you want to migrate data from.</p>
+        <div className='mb-4'>
+          <button className={`bg-white/60 rounded-lg shadow-md p-8 hover:outline mr-4 ${source === 'classic.nft.storage' ? 'outline' : ''}`} type='button' onClick={() => setSource('classic.nft.storage')} title='Migrate from NFT.Storage (Classic)'>
+            <img src='/nftstorage-logo.png' width='350' />
+          </button>
+          <button className={`bg-white/60 opacity-60 rounded-lg shadow-md p-8 ${source === 'old.web3.storage' ? 'outline' : ''}`} type='button' onClick={() => setSource('old.web3.storage')} title='COMING SOON! Migrate from Web3.Storage (Old)' disabled={true}>
+            <img src='/web3storage-logo.png' width='350' />
+          </button>
+        </div>
+        <button onClick={handleNextClick} className={`inline-block bg-hot-red border border-hot-red font-epilogue text-white uppercase text-sm px-6 py-2 rounded-full whitespace-nowrap ${source ? 'hover:bg-white hover:text-hot-red' : 'opacity-10'}`} disabled={!source}>
+          Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle' style={{marginTop: -4}} />
         </button>
       </div>
-      <button onClick={handleNextClick} className={`inline-block bg-zinc-950 text-white font-bold text-sm pl-6 pr-3 py-2 rounded-full whitespace-nowrap hover:outline ${source ? '' : 'opacity-10'}`} disabled={!source}>
-        Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle'/>
-      </button>
     </div>
   )
 }
@@ -99,27 +101,29 @@ function AddSourceToken ({ config, onNext, onPrev }: WizardProps) {
     onNext({ ...config, token })
   }
   return (
-    <div>
+    <div className='max-w-4xl'>
       <H1>Add data source token</H1>
-      <p className='mb-8'>Add your <strong>{config.source}</strong> API token. Note: the key never leaves this device, it is for local use only by the migration tool.</p>
-      <H1>API Token</H1>
-      <div className='max-w-xl mb-4'>
-        <input
-          type='password'
-          className='text-black py-2 px-2 rounded block w-full border border-gray-800'
-          placeholder='eyJhb...'
-          value={token ?? ''}
-          onChange={e => setToken(e.target.value)}
-          required={true}
-        />
-        <p className='text-xs text-red-700'>{error}</p>
+      <div className='bg-white my-4 p-5 rounded-2xl border border-hot-red font-epilogue'>
+        <p className='mb-8'>Add your <strong>{config.source}</strong> API token. Note: the key never leaves this device, it is for local use only by the migration tool.</p>
+        <H2>API Token</H2>
+        <div className='max-w-xl mb-4'>
+          <input
+            type='password'
+            className='text-black py-2 px-2 rounded block w-full border border-gray-800'
+            placeholder='eyJhb...'
+            value={token ?? ''}
+            onChange={e => setToken(e.target.value)}
+            required={true}
+          />
+          <p className='text-xs text-red-700'>{error}</p>
+        </div>
+        <button onClick={e => { e.preventDefault(); onPrev() }} className={`inline-block bg-hot-red border border-hot-red font-epilogue text-white uppercase text-sm mr-2 px-6 py-2 rounded-full whitespace-nowrap hover:bg-white hover:text-hot-red`}>
+          <ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}}/> Previous
+        </button>
+        <button onClick={handleNextClick} className={`inline-block bg-hot-red border border-hot-red font-epilogue text-white uppercase text-sm px-6 py-2 rounded-full whitespace-nowrap ${token ? 'hover:bg-white hover:text-hot-red' : 'opacity-10'}`} disabled={!token}>
+          Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle' style={{marginTop: -4}}/>
+        </button>
       </div>
-      <button onClick={e => { e.preventDefault(); onPrev() }} className={`inline-block bg-zinc-950 text-white font-bold text-sm pl-3 pr-6 py-2 mr-3 rounded-full whitespace-nowrap hover:outline`}>
-        <ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle'/> Previous
-      </button>
-      <button onClick={handleNextClick} className={`inline-block bg-zinc-950 text-white font-bold text-sm pl-6 pr-3 py-2 rounded-full whitespace-nowrap hover:outline ${token ? '' : 'opacity-10'}`} disabled={!token}>
-        Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle'/>
-      </button>
     </div>
   )
 }
@@ -134,20 +138,20 @@ function ChooseTargetSpace ({ config, onNext, onPrev }: WizardProps) {
     onNext({ ...config, space })
   }
   return (
-    <div>
+    <div className='font-epilogue'>
       <H1>Target space</H1>
       <p className='mb-8'>Choose an existing space to migrate data to.</p>
       <H2>Space</H2>
-      <div className='max-w-lg mb-4 border rounded-md border-zinc-700'>
+      <div className='max-w-lg border rounded-2xl border-hot-red bg-white mb-4'>
         {spaces.map(s => (
           <button
             key={s.did()}
             type='button'
-            className={`flex flex-row items-start gap-2 p-3 text-white text-left border-b last:border-0 border-zinc-700 w-full ${s.did() === space ? 'bg-gray-900/60' : 'bg-gray-900/30 hover:bg-gray-900/50'}`}
+            className={`w-full flex flex-row items-start gap-4 p-4 text-left border-b last:border-0 border-hot-red first:rounded-t-2xl last:rounded-b-2xl ${s.did() === space ? 'bg-hot-yellow' : 'hover:bg-hot-yellow-light'}`}
             onClick={() => setSpace(s.did())}>
             <DidIcon did={s.did()} />
             <div className='grow overflow-hidden whitespace-nowrap text-ellipsis'>
-              <span className='text-md font-semibold leading-5 m-0'>
+              <span className='text-lg text-hot-red leading-5 m-0'>
                 {s.name || 'Untitled'}
               </span>
               <span className='font-mono text-xs block'>
@@ -157,11 +161,11 @@ function ChooseTargetSpace ({ config, onNext, onPrev }: WizardProps) {
           </button>
         ))}
       </div>
-      <button onClick={e => { e.preventDefault(); onPrev() }} className={`inline-block bg-zinc-950 text-white font-bold text-sm pl-3 pr-6 py-2 mr-3 rounded-full whitespace-nowrap hover:outline`}>
-        <ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle'/> Previous
+      <button onClick={e => { e.preventDefault(); onPrev() }} className={`inline-block bg-hot-red border border-hot-red font-epilogue text-white uppercase text-sm mr-2 px-6 py-2 rounded-full whitespace-nowrap hover:bg-white hover:text-hot-red`}>
+        <ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}}/> Previous
       </button>
-      <button onClick={handleNextClick} className={`inline-block bg-zinc-950 text-white font-bold text-sm pl-6 pr-3 py-2 rounded-full whitespace-nowrap hover:outline ${space ? '' : 'opacity-10'}`} disabled={!space}>
-        Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle'/>
+      <button onClick={handleNextClick} className={`inline-block bg-hot-red border border-hot-red font-epilogue text-white uppercase text-sm px-6 py-2 rounded-full whitespace-nowrap ${space ? 'hover:bg-white hover:text-hot-red' : 'opacity-10'}`} disabled={!space}>
+        Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle' style={{marginTop: -4}}/>
       </button>
     </div>
   )
@@ -177,34 +181,36 @@ function Confirmation ({ config, onNext, onPrev }: WizardProps) {
     onNext(config)
   }
   return (
-    <div>
+    <div className='max-w-4xl'>
       <H1>Ready to start!</H1>
-      <p className='mb-8'>Make sure these details are correct before starting the migration.</p>
-      <H2>Source</H2>
-      <div className={`bg-white/60 rounded-lg shadow-md p-8 mb-4 inline-block`} title='Web3.Storage (Old)'>
-        <img src={config.source === 'old.web3.storage' ? '/web3storage-logo.png' : '/nftstorage-logo.png'} width='360' />
-      </div>
-      <H2>Target</H2>
-      <div className='max-w-lg mb-8 border rounded-md border-zinc-700'>
-        <div className={`flex flex-row items-start gap-2 p-3 text-white text-left border-b last:border-0 border-zinc-700 w-full bg-gray-900/30`}>
-          <DidIcon did={space.did()} />
-          <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()}
-            </span>
+      <div className='bg-white my-4 p-5 rounded-2xl border border-hot-red font-epilogue'>
+        <p className='mb-8'>Make sure these details are correct before starting the migration.</p>
+        <H2>Source</H2>
+        <div className={`bg-white/60 rounded-lg shadow-md p-8 mb-4 inline-block`} title='Web3.Storage (Old)'>
+          <img src={config.source === 'old.web3.storage' ? '/web3storage-logo.png' : '/nftstorage-logo.png'} width='360' />
+        </div>
+        <H2>Target</H2>
+        <div className='max-w-lg border rounded-2xl border-hot-red bg-white mb-4'>
+          <div className={`flex flex-row items-start gap-4 p-4 text-left border-b last:border-0 border-hot-red first:rounded-t-2xl last:rounded-b-2xl`}>
+            <DidIcon did={space.did()} />
+            <div className='grow overflow-hidden whitespace-nowrap text-ellipsis'>
+              <span className='text-lg text-hot-red leading-5 m-0'>
+                {space.name || 'Untitled'}
+              </span>
+              <span className='font-mono text-xs block'>
+                {space.did()}
+              </span>
+            </div>
           </div>
         </div>
-      </div>
 
-      <button onClick={e => { e.preventDefault(); onPrev() }} className={`inline-block bg-zinc-950 text-white font-bold text-sm pl-3 pr-6 py-2 mr-3 rounded-full whitespace-nowrap hover:outline`}>
-        <ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle'/> Previous
-      </button>
-      <button onClick={handleNextClick} className={`inline-block bg-zinc-950 text-white font-bold text-sm pl-6 pr-3 py-2 rounded-full whitespace-nowrap hover:outline ${space ? '' : 'opacity-10'}`} disabled={!space}>
-        Start <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle'/>
-      </button>
+        <button onClick={e => { e.preventDefault(); onPrev() }} className={`inline-block bg-hot-red border border-hot-red font-epilogue text-white uppercase text-sm mr-2 px-6 py-2 rounded-full whitespace-nowrap hover:bg-white hover:text-hot-red`}>
+          <ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}}/> Previous
+        </button>
+        <button onClick={handleNextClick} className={`inline-block bg-hot-red border border-hot-red font-epilogue text-white uppercase text-sm px-6 py-2 rounded-full whitespace-nowrap hover:bg-white hover:text-hot-red`}>
+          Start <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle' style={{marginTop: -4}}/>
+        </button>
+      </div>
     </div>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -37,10 +37,10 @@ function SpacePage (): ReactNode {
 
 function Item ({space}: {space: Space}) {
   return (
-    <Link href={`/space/${space.did()}`} className='flex flex-row items-start gap-4 p-4 text-hot-red text-left hover:bg-hot-yellow-light border-b last:border-0 border-hot-red first:rounded-t-2xl last:rounded-b-2xl'>
+    <Link href={`/space/${space.did()}`} className='flex flex-row items-start gap-4 p-4 text-left hover:bg-hot-yellow-light border-b last:border-0 border-hot-red first:rounded-t-2xl last:rounded-b-2xl'>
       <DidIcon did={space.did()} />
       <div className='grow overflow-hidden whitespace-nowrap text-ellipsis'>
-        <span className='font-epilogue text-lg font-semibold leading-5 m-0'>
+        <span className='font-epilogue text-lg text-hot-red leading-5 m-0'>
           {space.name || 'Untitled'}
         </span>
         <span className='font-mono text-xs block'>