thesn/solisting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: filter highlight, nav alignment, button centering, listing title, dashboard listing name

Browse Source
This commit is contained in:
thesn10
2026-06-25 19:59:03 +02:00
parent b18bdefcc0
commit ca1c0b1cd8
7 changed files with 42 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/components/CreateListingForm.tsx
View File

@@ -87,6 +87,9 @@ function CurrencyToggle({
}) {
const active = (on: boolean): React.CSSProperties => ({
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: 11,
borderRadius: 10,
fontSize: 13,

4
app/src/components/Dashboard.tsx
View File

@@ -168,7 +168,7 @@ export function Dashboard() {
>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<span style={{ fontWeight: 600, fontSize: 15 }}>
{l.data.metadataUri || abbrev(l.address)}
Listing #{String(l.data.listingId)}
</span>
<Badge color={sc.color} bg={sc.bg}>
{l.data.isActive ? 'Active' : 'Inactive'}
@@ -182,7 +182,7 @@ export function Dashboard() {
fontFamily: 'var(--font-mono)',
}}
>
#{String(l.data.listingId)} · {fmtSol(l.data.price)} · {avail}/
{abbrev(l.address)} · {fmtSol(l.data.price)} · {avail}/
{String(l.data.quantity)} avail · {String(l.data.quantityReserved)} pending
</div>
</div>

4
app/src/components/EscrowsTable.tsx
View File

@@ -82,8 +82,8 @@ export function EscrowsTable() {
borderRadius: 7,
fontSize: 12.5,
fontWeight: 600,
color: filter === f.key ? 'var(--tx)' : 'var(--mut)',
background: filter === f.key ? 'var(--bg2)' : 'transparent',
color: filter === f.key ? '#0b0613' : 'var(--mut)',
background: filter === f.key ? 'linear-gradient(135deg,var(--acc),var(--acc2))' : 'transparent',
border: 'none',
cursor: 'pointer',
whiteSpace: 'nowrap',

10
app/src/components/ListingDetail.tsx
View File

@@ -54,16 +54,22 @@ export function ListingDetail({ pk, walletAddress, onUpdate, onClose, onPlaceOrd
LISTING ACCOUNT · #{String(d.listingId)}
</div>
<h1 style={{ margin: 0, fontSize: 26, fontWeight: 700, letterSpacing: '-.02em' }}>
{d.metadataUri || abbrev(pk)}
{abbrev(pk)}
</h1>
</div>
<Badge color={sc.color} bg={sc.bg}>{d.isActive ? 'Active' : 'Inactive'}</Badge>
</div>
{d.metadataUri && (
<p style={{ margin: '0 0 24px', fontSize: 14, color: 'var(--mut)', maxWidth: 620, lineHeight: 1.55 }}>
<a href={d.metadataUri} target="_blank" rel="noreferrer" style={{ color: 'var(--acc2light)' }}>{d.metadataUri}</a>
</p>
)}
<div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 18, alignItems: 'start', marginBottom: 24 }}>
{/* Left: account fields */}
<div style={{ background: 'var(--bg2)', border: '1px solid var(--bd)', borderRadius: 'var(--radius)', padding: '8px 22px 16px' }}>
<div style={{ fontSize: 11, letterSpacing: '.13em', color: 'var(--mut)', fontWeight: 600, padding: '14px 0 4px' }}>ACCOUNT FIELDS</div>
<FieldRow label="Address"><MonoChip value={abbrev(pk)} onCopy={() => navigator.clipboard.writeText(pk)} /></FieldRow>
<FieldRow label="Listing ID"><span style={{ fontSize: 13.5, fontWeight: 600 }}>#{String(d.listingId)}</span></FieldRow>
<FieldRow label="Seller"><MonoChip value={abbrev(d.seller)} onCopy={() => navigator.clipboard.writeText(d.seller)} onClick={() => router.push(`/search?q=${d.seller}`)} /></FieldRow>
<FieldRow label="Price"><span style={{ fontSize: 13.5, fontWeight: 600 }}>{fmtListingPrice()}</span></FieldRow>
@@ -137,7 +143,7 @@ export function ListingDetail({ pk, walletAddress, onUpdate, onClose, onPlaceOrd
<Button variant="danger" onClick={onClose}>Close Listing</Button>
</div>
)}
{canPlace && <Button onClick={onPlaceOrder}>Place Order</Button>}
{canPlace && <Button style={{ width: '100%', padding: 11 }} onClick={onPlaceOrder}>Place Order</Button>}
{!walletAddress && <div style={{ fontSize: 13, color: 'var(--mut)', lineHeight: 1.5 }}>Connect a wallet to place an order or manage this listing.</div>}
{walletAddress && !isSeller && !canPlace && <div style={{ fontSize: 13, color: 'var(--mut)', lineHeight: 1.5 }}>No actions available — listing is inactive or out of stock.</div>}
</div>

30
app/src/components/ListingsTable.tsx
View File

@@ -59,15 +59,27 @@ export function ListingsTable() {
style={{ height: 38, width: 220, padding: '0 13px', background: 'var(--bg3)', border: '1px solid var(--bd)', borderRadius: 10, fontSize: 13, fontFamily: 'var(--font-mono)', outline: 'none' }}
/>
<div style={{ display: 'flex', background: 'var(--bg3)', border: '1px solid var(--bd)', borderRadius: 10, padding: 3 }}>
{FILTERS.map((f) => (
<button
key={f.key}
onClick={() => setFilter(f.key)}
style={{ padding: '6px 13px', borderRadius: 7, fontSize: 12.5, fontWeight: 600, color: filter === f.key ? 'var(--tx)' : 'var(--mut)', background: filter === f.key ? 'var(--bg2)' : 'transparent' }}
>
{f.label}
</button>
))}
{FILTERS.map((f) => {
const active = filter === f.key
return (
<button
key={f.key}
onClick={() => setFilter(f.key)}
style={{
padding: '6px 13px',
borderRadius: 7,
fontSize: 12.5,
fontWeight: 600,
color: active ? '#0b0613' : 'var(--mut)',
background: active ? 'linear-gradient(135deg,var(--acc),var(--acc2))' : 'transparent',
border: 'none',
cursor: 'pointer',
}}
>
{f.label}
</button>
)
})}
</div>
</div>
</div>

3
app/src/components/Nav.tsx
View File

@@ -147,6 +147,9 @@ export function Nav() {
})}
</div>
{/* Spacer — pushes right-side controls to the edge */}
<div style={{ flex: 1 }} />
{/* Network picker */}
<div ref={netRef} style={{ position: 'relative', flexShrink: 0 }}>
<button

3
app/src/components/ui/Button.tsx
View File

@@ -36,6 +36,9 @@ export function Button({ variant = 'primary', children, style, disabled, ...rest
{...rest}
disabled={disabled}
style={{
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: '11px 18px',
borderRadius: 'var(--radius)',
fontWeight: 700,