Skip to content

Commit 228a7a7

Browse files
fforbeckfforbeck
committed
several fixes & enhancements
1 parent e96ad47 commit 228a7a7

File tree

17 files changed

+315
-110
lines changed

17 files changed

+315
-110
lines changed

‎packages/console/src/app/globals.css‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,44 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
/* Custom loader animations */
6+
@keyframes spin-dash {
7+
0% {
8+
stroke-dasharray: 1, 200;
9+
stroke-dashoffset: 0;
10+
}
11+
50% {
12+
stroke-dasharray: 90, 200;
13+
stroke-dashoffset: -35px;
14+
}
15+
100% {
16+
stroke-dasharray: 90, 200;
17+
stroke-dashoffset: -124px;
18+
}
19+
}
20+
21+
@keyframes pulse-dot {
22+
0%, 80%, 100% {
23+
transform: scale(0);
24+
opacity: 0.5;
25+
}
26+
40% {
27+
transform: scale(1);
28+
opacity: 1;
29+
}
30+
}
31+
32+
@keyframes pulse-scale {
33+
0%, 100% {
34+
opacity: 1;
35+
transform: scale(1);
36+
}
37+
50% {
38+
opacity: 0.5;
39+
transform: scale(0.8);
40+
}
41+
}
42+
543
@import 'react-tooltip/dist/react-tooltip.css';
644

745
:root {
@@ -110,6 +148,6 @@
110148
background-repeat: no-repeat, no-repeat;
111149
}
112150
.sidebar-professional {
113-
background: linear-gradient(180deg, #1e293b 0%, #334155 100%);
151+
background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
114152
}
115153
}

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ function ChooseSource ({ config, onNext }: WizardProps) {
6767
</button>
6868
))}
6969
</div>
70-
<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}>
70+
<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-lg whitespace-nowrap ${source ? 'hover:bg-white hover:text-hot-red' : 'opacity-10'}`} disabled={!source}>
7171
Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle' style={{marginTop: -4}} />
7272
</button>
7373
</div>
@@ -116,10 +116,10 @@ function AddSourceToken ({ config, onNext, onPrev }: WizardProps) {
116116
/>
117117
<p className='text-xs text-red-700'>{error}</p>
118118
</div>
119-
<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`}>
119+
<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-lg whitespace-nowrap hover:bg-white hover:text-hot-red`}>
120120
<ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}}/> Previous
121121
</button>
122-
<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 || checking}>
122+
<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-lg whitespace-nowrap ${token ? 'hover:bg-white hover:text-hot-red' : 'opacity-10'}`} disabled={!token || checking}>
123123
{checking
124124
? <><ArrowPathIcon className={`h-5 w-5 animate-spin inline-block mr-1 align-middle`}/>Checking...</>
125125
: <>Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle' style={{marginTop: -4}}/></>}
@@ -162,10 +162,10 @@ function ChooseTargetSpace ({ config, onNext, onPrev }: WizardProps) {
162162
</button>
163163
))}
164164
</div>
165-
<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+
<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-lg whitespace-nowrap hover:bg-white hover:text-hot-red`}>
166166
<ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}}/> Previous
167167
</button>
168-
<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+
<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-lg whitespace-nowrap ${space ? 'hover:bg-white hover:text-hot-red' : 'opacity-10'}`} disabled={!space}>
169169
Next <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle' style={{marginTop: -4}}/>
170170
</button>
171171
</div>
@@ -208,10 +208,10 @@ function Confirmation ({ config, onNext, onPrev }: WizardProps) {
208208
</div>
209209
</div>
210210

211-
<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`}>
211+
<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-lg whitespace-nowrap hover:bg-white hover:text-hot-red`}>
212212
<ChevronLeftIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}}/> Previous
213213
</button>
214-
<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`}>
214+
<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-lg whitespace-nowrap hover:bg-white hover:text-hot-red`}>
215215
Start <ChevronRightIcon className='h-5 w-5 inline-block ml-1 align-middle' style={{marginTop: -4}}/>
216216
</button>
217217
</div>

‎packages/console/src/app/plans/change/page.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,13 @@ function PlanSection ({ account, planID, planName, planLabel, flatFee, flatFeeAl
7979
<DefaultLoader className='h-6 w-6' />
8080
) : (
8181
isCurrentPlan ? (
82-
<button className={`inline-block border border-hot-red bg-white text-hot-red font-epilogue uppercase text-xs sm:text-sm px-4 sm:px-6 py-2 rounded-full whitespace-nowrap cursor-not-allowed opacity-75`} disabled={true}>
82+
<button className={`inline-block border border-hot-red bg-white text-hot-red font-epilogue uppercase text-xs sm:text-sm px-4 sm:px-6 py-2 rounded-lg whitespace-nowrap cursor-not-allowed opacity-75`} disabled={true}>
8383
<CheckIcon className='h-4 w-4 sm:h-5 sm:w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> Current Plan
8484
</button>
8585
) : (
8686
<button
8787
onClick={() => selectPlan(planID)}
88-
className={`inline-block bg-hot-red border border-hot-red hover:bg-white hover:text-hot-red font-epilogue text-white uppercase text-xs sm:text-sm px-4 sm:px-6 py-2 rounded-full whitespace-nowrap ${isCurrentPlan ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
88+
className={`inline-block bg-hot-red border border-hot-red hover:bg-white hover:text-hot-red font-epilogue text-white uppercase text-xs sm:text-sm px-4 sm:px-6 py-2 rounded-lg whitespace-nowrap ${isCurrentPlan ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
8989
disabled={isCurrentPlan || isLoading || isUpdatingPlan}
9090
>
9191
<RocketLaunchIcon className='h-4 w-4 sm:h-5 sm:w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> {currentPlanID && buttonText(currentPlanID, planID)}
@@ -185,7 +185,7 @@ function DelegatePlanCreateAdminSessionForm ({ className = '', account }: { clas
185185
placeholder='To Email' type='email'
186186
{...register('email')} />
187187
</label>
188-
<input className='inline-block bg-hot-red border border-hot-red hover:bg-white hover:text-hot-red font-epilogue text-white uppercase text-sm mr-2 px-6 py-2 rounded-full whitespace-nowrap cursor-pointer' type='submit' value='Delegate' />
188+
<input className='inline-block bg-white border border-hot-red hover:bg-hot-red hover:text-white font-epilogue text-hot-red uppercase text-sm mr-2 px-6 py-2 rounded-lg whitespace-nowrap cursor-pointer' type='submit' value='Delegate' />
189189
</form>
190190
)
191191
}
@@ -196,16 +196,16 @@ function CustomerPortalLink ({ did }: { did: AccountDID }) {
196196
<>
197197
{customerPortalLink ? (
198198
<div className='flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2'>
199-
<button 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' onClick={() => generateCustomerPortalLink(did)} disabled={generatingCustomerPortalLink}>
199+
<button className='inline-block bg-white border border-hot-red hover:bg-hot-red hover:text-white font-epilogue text-hot-red uppercase text-sm px-6 py-2 rounded-lg whitespace-nowrap' onClick={() => generateCustomerPortalLink(did)} disabled={generatingCustomerPortalLink}>
200200
<ArrowPathIcon className={`h-5 w-5 inline-block align-middle ${generatingCustomerPortalLink ? 'animate-spin' : ''}`} />
201201
</button>
202-
<a 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 text-center' href={customerPortalLink} target="_blank" rel="noopener noreferrer">
202+
<a className='inline-block bg-white border border-hot-red hover:bg-hot-red hover:text-white font-epilogue text-hot-red uppercase text-sm px-6 py-2 rounded-lg whitespace-nowrap text-center' href={customerPortalLink} target="_blank" rel="noopener noreferrer">
203203
Open Billing Portal
204204
<ArrowTopRightOnSquareIcon className='relative inline h-5 w-4 ml-1 -mt-1' />
205205
</a>
206206
</div>
207207
) : (
208-
<button onClick={() => generateCustomerPortalLink(did)} disabled={generatingCustomerPortalLink} 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'>
208+
<button onClick={() => generateCustomerPortalLink(did)} disabled={generatingCustomerPortalLink} className='inline-block bg-white border border-hot-red hover:bg-hot-red hover:text-white font-epilogue text-hot-red uppercase text-sm px-6 py-2 rounded-lg whitespace-nowrap'>
209209
{generatingCustomerPortalLink ? <ArrowPathIcon className='h-5 w-5 inline-block mr-1 align-middle animate-spin' style={{marginTop: -4}} /> : <LinkIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} />} Generate Link
210210
</button>
211211
)}

‎packages/console/src/app/space/[did]/layout.tsx‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,18 @@ import { PropsWithChildren } from 'react'
44
import { useW3 } from '@storacha/ui-react'
55
import { DidIcon } from '@/components/DidIcon'
66
import { Nav, NavLink } from '@/components/Nav'
7-
import { QueueListIcon, ShareIcon, CloudArrowUpIcon } from '@heroicons/react/24/outline'
7+
import { QueueListIcon, ShareIcon, CloudArrowUpIcon, ClipboardIcon } from '@heroicons/react/24/outline'
8+
9+
export function truncateDid(did: string): string {
10+
// For mobile: show did:key:first7...last7
11+
if (did.startsWith('did:key:')) {
12+
const keyPart = did.substring(8) // Remove 'did:key:'
13+
if (keyPart.length > 14) {
14+
return `did:key:${keyPart.substring(0, 7)}...${keyPart.substring(keyPart.length - 7)}`
15+
}
16+
}
17+
return did
18+
}
819

920
interface LayoutProps extends PropsWithChildren {
1021
params: {
@@ -47,9 +58,22 @@ export default function Layout ({children, params}: LayoutProps): JSX.Element {
4758
{space.access?.type === 'private' ? 'Private' : 'Public'}
4859
</span>
4960
</div>
50-
<label className='font-mono text-xs'>
51-
{space.did()}
52-
</label>
61+
<div className='flex items-center gap-2 min-w-0'>
62+
<label className='font-mono text-xs flex-1'>
63+
<span className="md:hidden">{truncateDid(space.did())}</span>
64+
<span className="hidden md:inline truncate">{space.did()}</span>
65+
</label>
66+
<button
67+
onClick={(e) => {
68+
e.stopPropagation()
69+
navigator.clipboard.writeText(space.did())
70+
}}
71+
className='p-1 hover:bg-slate-100 rounded transition-colors'
72+
title='Copy DID'
73+
>
74+
<ClipboardIcon className='w-4 h-4 text-slate-500 hover:text-slate-700' />
75+
</button>
76+
</div>
5377
</div>
5478
</div>
5579
</header>

‎packages/console/src/app/space/[did]/root/[cid]/page.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -105,18 +105,13 @@ export default function ItemPage ({ params }: PageProps): JSX.Element {
105105
</div>
106106

107107
<div className="flex items-center gap-2">
108-
109-
<button onClick={e => { e.preventDefault(); 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`}>
110-
<TrashIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> Remove
111-
</button>
112-
113108
{isPrivateSpace && (
114109
<button
115110
onClick={handleDecrypt}
116111
disabled={!canDecrypt || decryptLoading}
117-
className={`inline-block font-epilogue uppercase text-sm px-6 py-2 rounded-full whitespace-nowrap ${
112+
className={`inline-block font-epilogue uppercase text-sm px-6 py-2 rounded-lg whitespace-nowrap ${
118113
canDecrypt && !decryptLoading
119-
? 'bg-blue-600 border border-blue-600 hover:bg-white hover:text-blue-600 text-white'
114+
? 'bg-white border border-blue-600 hover:bg-blue-600 hover:text-white text-blue-600'
120115
: 'bg-gray-300 border border-gray-300 text-gray-500 cursor-not-allowed'
121116
}`}
122117
>
@@ -133,6 +128,10 @@ export default function ItemPage ({ params }: PageProps): JSX.Element {
133128
)}
134129
</button>
135130
)}
131+
132+
<button onClick={e => { e.preventDefault(); setRemoveConfirmModalOpen(true) }} className={`inline-block bg-white border border-hot-red hover:bg-hot-red hover:text-white font-epilogue text-hot-red uppercase text-sm px-6 py-2 rounded-lg whitespace-nowrap`}>
133+
<TrashIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> Remove
134+
</button>
136135
</div>
137136

138137
{isPrivateSpace && decryptError && (
@@ -206,10 +205,10 @@ function RemoveConfirmModal ({ isOpen, root, shards, onConfirm, onCancel }: Remo
206205
</p>
207206

208207
<div className='py-2 text-center'>
209-
<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}>
208+
<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-lg whitespace-nowrap ${confirmed ? 'opacity-50' : 'hover:outline'}`} disabled={confirmed}>
210209
<TrashIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> {confirmed ? 'Removing...' : 'Remove'}
211210
</button>
212-
<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}>
211+
<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-lg whitespace-nowrap ${confirmed ? 'opacity-50' : 'hover:outline'}`} disabled={confirmed}>
213212
Cancel
214213
</button>
215214
</div>

‎packages/console/src/brand.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,18 @@ import Link from 'next/link'
22

33
export const serviceName = 'w3up.web3.storage'
44
export const tosUrl = 'https://web3.storage/terms'
5-
export const StorachaLogoIcon = () => <img src='/storacha-logo.svg' />
65

7-
export const StorachaLogo = ({ className = '' }) => (
8-
<Link href='/' className={className}>
9-
<StorachaLogoIcon />
6+
export const StorachaLogoIcon = ({ className = 'h-20', darkBackground = false }: { className?: string, darkBackground?: boolean }) => (
7+
<img
8+
src='/storacha-logo.svg'
9+
alt="Storacha"
10+
className={`${className} ${darkBackground ? 'brightness-210 contrast-125' : ''}`}
11+
/>
12+
)
13+
14+
export const StorachaLogo = ({ className = '', darkBackground = false }: { className?: string, darkBackground?: boolean }) => (
15+
<Link href='/' className="inline-block">
16+
<StorachaLogoIcon className={className} darkBackground={darkBackground} />
1017
</Link>
1118
)
1219

0 commit comments

Comments
 (0)