Skip to content

Commit f90320b

Browse files
author
Alan Shaw
committed
feat: more styles
1 parent 2bdf7ed commit f90320b

29 files changed

+441
-354
lines changed

‎public/racha-fire-opacity-50.png

261 KB
Loading

‎public/racha-fire.png

284 KB
Loading

‎src/app/globals.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@
1818
font-style: normal;
1919
}
2020
.bg-racha-fire {
21-
background: var(--hot-red-light) url("/racha-fire.jpg") bottom left;
21+
background: var(--hot-red-light) url("/racha-fire.png") bottom left;
22+
background-size: cover;
23+
}
24+
.bg-racha-fire\/50 {
25+
background: transparent url("/racha-fire-opacity-50.png") bottom left;
2226
background-size: cover;
2327
}
2428
.bg-hot-red,

‎src/app/migration/[id]/page.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default function MigrationPage ({ params }: PageProps): JSX.Element {
5757
return (
5858
<div className='max-w-6xl'>
5959
<H1>Migrating from {migration.source}</H1>
60-
<div className='bg-white/60 my-4 p-4 rounded-xl shadow'>
60+
<div className='bg-white my-4 p-4 rounded-2xl border border-hot-red'>
6161
<div className='flex mb-4'>
6262
<div className='flex-auto'>
6363
<H2>Target</H2>
@@ -114,7 +114,7 @@ const LogLines = ({ lines }: { lines: string[] }) => {
114114
ref.current?.scrollIntoView({ block: 'end', behavior: 'smooth' })
115115
})
116116
return (
117-
<pre className='text-xs p-4 h-80 bg-white overflow-y-auto mb-4 rounded shadow-inner'>
117+
<pre className='text-xs p-4 h-60 bg-white overflow-y-auto mb-4 rounded shadow-inner border'>
118118
{lines.map(line => `${line}\n`)}
119119
{lines.length ? '' : 'No logs yet!'}
120120
<div ref={ref} className='py-2'></div>
@@ -147,15 +147,15 @@ const RemoveButton = ({ onRemove, progress }: { onRemove: () => void, progress?:
147147

148148
if (progress && progress.pending <= 0) {
149149
return (
150-
<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`}>
150+
<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'>
151151
<CheckCircleIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> Close and Remove
152152
</button>
153153
)
154154
}
155155

156156
return (
157157
<>
158-
<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`}>
158+
<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'>
159159
<TrashIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> Remove
160160
</button>
161161
<RemoveConfirmModal
@@ -178,8 +178,8 @@ function RemoveConfirmModal ({ isOpen, onConfirm, onCancel }: RemoveConfirmModal
178178
return (
179179
<Dialog open={isOpen} onClose={() => { setConfirmed(false); onCancel() }} className='relative z-50'>
180180
<div className='fixed inset-0 flex w-screen items-center justify-center bg-black/70' aria-hidden='true'>
181-
<Dialog.Panel className='bg-grad p-4 shadow-lg rounded-lg'>
182-
<Dialog.Title className='text-lg font-semibold leading-5 text-black text-center my-3'>
181+
<Dialog.Panel className='bg-hot-red p-10 shadow-lg rounded-lg font-epilogue text-white'>
182+
<Dialog.Title className='text-lg text-center my-3'>
183183
<ExclamationTriangleIcon className='h-10 w-10 inline-block' /><br/>
184184
Confirm remove
185185
</Dialog.Title>
@@ -188,10 +188,10 @@ function RemoveConfirmModal ({ isOpen, onConfirm, onCancel }: RemoveConfirmModal
188188
</Dialog.Description>
189189
<p className='py-2'>The migration has not yet completed.</p>
190190
<div className='py-2 text-center'>
191-
<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}>
191+
<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}>
192192
<TrashIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> {confirmed ? 'Removing...' : 'Remove'}
193193
</button>
194-
<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}>
194+
<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}>
195195
Cancel
196196
</button>
197197
</div>
@@ -206,7 +206,7 @@ const FailList = ({ items }: { items: UnknownLink[] }) => {
206206
return (
207207
<div className='max-w-lg'>
208208
<div className='float-right'><CopyIcon text={content} /></div>
209-
<pre className='text-xs p-4 max-h-24 bg-white overflow-y-auto rounded shadow-inner'>
209+
<pre className='text-xs p-4 max-h-24 bg-white overflow-y-auto rounded shadow-inner border'>
210210
{content}
211211
</pre>
212212
</div>

‎src/app/migration/create/page.tsx

+71-65
Original file line numberDiff line numberDiff line change
@@ -54,23 +54,25 @@ function ChooseSource ({ config, onNext }: WizardProps) {
5454
}
5555

5656
return (
57-
<div>
57+
<div className='max-w-4xl'>
5858
<H1>Create a new migration</H1>
59-
<p className='mb-8'>This allows data to be migrated from a previous provider to one of your spaces.</p>
60-
61-
<H2>Where from?</H2>
62-
<p className='mb-4'>Pick a storage service you want to migrate data from.</p>
63-
<div className='mb-4'>
64-
<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)'>
65-
<img src='/nftstorage-logo.png' width='360' />
66-
</button>
67-
<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}>
68-
<img src='/web3storage-logo.png' width='360' />
59+
<div className='bg-white my-4 p-5 rounded-2xl border border-hot-red font-epilogue'>
60+
<p className='mb-8'>This tool allows data to be migrated from a previous provider to one of your spaces.</p>
61+
62+
<H2>Where from?</H2>
63+
<p className='mb-4'>Pick a storage service you want to migrate data from.</p>
64+
<div className='mb-4'>
65+
<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)'>
66+
<img src='/nftstorage-logo.png' width='350' />
67+
</button>
68+
<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}>
69+
<img src='/web3storage-logo.png' width='350' />
70+
</button>
71+
</div>
72+
<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}>
73+
Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle' style={{marginTop: -4}} />
6974
</button>
7075
</div>
71-
<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}>
72-
Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle'/>
73-
</button>
7476
</div>
7577
)
7678
}
@@ -99,27 +101,29 @@ function AddSourceToken ({ config, onNext, onPrev }: WizardProps) {
99101
onNext({ ...config, token })
100102
}
101103
return (
102-
<div>
104+
<div className='max-w-4xl'>
103105
<H1>Add data source token</H1>
104-
<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>
105-
<H1>API Token</H1>
106-
<div className='max-w-xl mb-4'>
107-
<input
108-
type='password'
109-
className='text-black py-2 px-2 rounded block w-full border border-gray-800'
110-
placeholder='eyJhb...'
111-
value={token ?? ''}
112-
onChange={e => setToken(e.target.value)}
113-
required={true}
114-
/>
115-
<p className='text-xs text-red-700'>{error}</p>
106+
<div className='bg-white my-4 p-5 rounded-2xl border border-hot-red font-epilogue'>
107+
<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>
108+
<H2>API Token</H2>
109+
<div className='max-w-xl mb-4'>
110+
<input
111+
type='password'
112+
className='text-black py-2 px-2 rounded block w-full border border-gray-800'
113+
placeholder='eyJhb...'
114+
value={token ?? ''}
115+
onChange={e => setToken(e.target.value)}
116+
required={true}
117+
/>
118+
<p className='text-xs text-red-700'>{error}</p>
119+
</div>
120+
<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`}>
121+
<ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}}/> Previous
122+
</button>
123+
<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}>
124+
Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle' style={{marginTop: -4}}/>
125+
</button>
116126
</div>
117-
<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`}>
118-
<ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle'/> Previous
119-
</button>
120-
<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}>
121-
Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle'/>
122-
</button>
123127
</div>
124128
)
125129
}
@@ -134,20 +138,20 @@ function ChooseTargetSpace ({ config, onNext, onPrev }: WizardProps) {
134138
onNext({ ...config, space })
135139
}
136140
return (
137-
<div>
141+
<div className='font-epilogue'>
138142
<H1>Target space</H1>
139143
<p className='mb-8'>Choose an existing space to migrate data to.</p>
140144
<H2>Space</H2>
141-
<div className='max-w-lg mb-4 border rounded-md border-zinc-700'>
145+
<div className='max-w-lg border rounded-2xl border-hot-red bg-white mb-4'>
142146
{spaces.map(s => (
143147
<button
144148
key={s.did()}
145149
type='button'
146-
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'}`}
150+
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'}`}
147151
onClick={() => setSpace(s.did())}>
148152
<DidIcon did={s.did()} />
149153
<div className='grow overflow-hidden whitespace-nowrap text-ellipsis'>
150-
<span className='text-md font-semibold leading-5 m-0'>
154+
<span className='text-lg text-hot-red leading-5 m-0'>
151155
{s.name || 'Untitled'}
152156
</span>
153157
<span className='font-mono text-xs block'>
@@ -157,11 +161,11 @@ function ChooseTargetSpace ({ config, onNext, onPrev }: WizardProps) {
157161
</button>
158162
))}
159163
</div>
160-
<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`}>
161-
<ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle'/> Previous
164+
<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`}>
165+
<ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}}/> Previous
162166
</button>
163-
<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}>
164-
Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle'/>
167+
<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}>
168+
Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle' style={{marginTop: -4}}/>
165169
</button>
166170
</div>
167171
)
@@ -177,34 +181,36 @@ function Confirmation ({ config, onNext, onPrev }: WizardProps) {
177181
onNext(config)
178182
}
179183
return (
180-
<div>
184+
<div className='max-w-4xl'>
181185
<H1>Ready to start!</H1>
182-
<p className='mb-8'>Make sure these details are correct before starting the migration.</p>
183-
<H2>Source</H2>
184-
<div className={`bg-white/60 rounded-lg shadow-md p-8 mb-4 inline-block`} title='Web3.Storage (Old)'>
185-
<img src={config.source === 'old.web3.storage' ? '/web3storage-logo.png' : '/nftstorage-logo.png'} width='360' />
186-
</div>
187-
<H2>Target</H2>
188-
<div className='max-w-lg mb-8 border rounded-md border-zinc-700'>
189-
<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`}>
190-
<DidIcon did={space.did()} />
191-
<div className='grow overflow-hidden whitespace-nowrap text-ellipsis'>
192-
<span className='text-md font-semibold leading-5 m-0'>
193-
{space.name || 'Untitled'}
194-
</span>
195-
<span className='font-mono text-xs block'>
196-
{space.did()}
197-
</span>
186+
<div className='bg-white my-4 p-5 rounded-2xl border border-hot-red font-epilogue'>
187+
<p className='mb-8'>Make sure these details are correct before starting the migration.</p>
188+
<H2>Source</H2>
189+
<div className={`bg-white/60 rounded-lg shadow-md p-8 mb-4 inline-block`} title='Web3.Storage (Old)'>
190+
<img src={config.source === 'old.web3.storage' ? '/web3storage-logo.png' : '/nftstorage-logo.png'} width='360' />
191+
</div>
192+
<H2>Target</H2>
193+
<div className='max-w-lg border rounded-2xl border-hot-red bg-white mb-4'>
194+
<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`}>
195+
<DidIcon did={space.did()} />
196+
<div className='grow overflow-hidden whitespace-nowrap text-ellipsis'>
197+
<span className='text-lg text-hot-red leading-5 m-0'>
198+
{space.name || 'Untitled'}
199+
</span>
200+
<span className='font-mono text-xs block'>
201+
{space.did()}
202+
</span>
203+
</div>
198204
</div>
199205
</div>
200-
</div>
201206

202-
<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`}>
203-
<ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle'/> Previous
204-
</button>
205-
<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}>
206-
Start <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle'/>
207-
</button>
207+
<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`}>
208+
<ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}}/> Previous
209+
</button>
210+
<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`}>
211+
Start <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle' style={{marginTop: -4}}/>
212+
</button>
213+
</div>
208214
</div>
209215
)
210216
}

‎src/app/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@ function SpacePage (): ReactNode {
3737

3838
function Item ({space}: {space: Space}) {
3939
return (
40-
<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'>
40+
<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'>
4141
<DidIcon did={space.did()} />
4242
<div className='grow overflow-hidden whitespace-nowrap text-ellipsis'>
43-
<span className='font-epilogue text-lg font-semibold leading-5 m-0'>
43+
<span className='font-epilogue text-lg text-hot-red leading-5 m-0'>
4444
{space.name || 'Untitled'}
4545
</span>
4646
<span className='font-mono text-xs block'>

0 commit comments

Comments
 (0)