transnet/investor-flow
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: confluence autocomplete editable + consistent styling

Browse Source 
- Remove value prop from SymbolAutocomplete (was making input read-only)
- Use inputClassName with app design tokens (bg-surface-sunken, border-line,
  rounded-lg) to match SymbolHeader and other pages
- Make symbol input, watchlist input, and rack select all use same
  border/radius/padding/font-size tokens
- Both panels now consistent with each other and the rest of the app
This commit is contained in:
Investor Flow Build
2026-08-11 22:53:54 -04:00
parent 0afc5b6f6e
commit 470a9a27e1
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/ConfluencePanel.tsx
+5 -3
View File
@@ -118,22 +118,24 @@ export function ConfluencePanel() {
{/* Header */}
<div className="flex flex-wrap items-end gap-4">
<div className="w-48">
<div>
<label className="block text-xs text-fg-muted mb-1">Symbol</label>
<div className="relative w-48">
<SymbolAutocomplete
onPick={pickSymbol}
onSubmitRaw={(raw) => pickSymbol(raw.toUpperCase())}
value={symbol}
placeholder="Search symbol…"
ariaLabel="Select symbol for slot picture"
inputClassName="w-full bg-surface-sunken border border-line rounded-lg px-3 py-1.5 text-xs text-fg placeholder:text-fg-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
/>
</div>
</div>
<div>
<label className="block text-xs text-fg-muted mb-1">Rack</label>
<select
value={rackId ?? ''}
onChange={(e) => setSelectedRackId(e.target.value || null)}
className="rounded bg-bg-secondary border border-fg-muted/20 px-2 py-1.5 text-sm text-fg min-w-[180px]"
className="rounded-lg bg-surface-sunken border border-line px-3 py-1.5 text-xs text-fg min-w-[180px] focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
>
{racks.system.map((r) => (
<option key={r.id} value={r.id}>{r.name}</option>
app/src/components/CorridorPanel.tsx
+6 -4
View File
@@ -176,16 +176,18 @@ export function CorridorPanel() {
{/* Header: symbol + watchlist */}
<div className="flex flex-wrap items-end gap-4">
<div className="w-48">
<div>
<label className="block text-xs text-fg-muted mb-1">Symbol</label>
<div className="relative w-48">
<SymbolAutocomplete
onPick={pickSymbol}
onSubmitRaw={(raw) => pickSymbol(raw.toUpperCase())}
value={symbol}
placeholder="Search symbol…"
ariaLabel="Select symbol for corridor"
inputClassName="w-full bg-surface-sunken border border-line rounded-lg px-3 py-1.5 text-xs text-fg placeholder:text-fg-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
/>
</div>
</div>
<div>
<label className="block text-xs text-fg-muted mb-1">Watchlist</label>
<div className="flex items-center gap-2">
@@ -194,13 +196,13 @@ export function CorridorPanel() {
value={addInput}
onChange={(e) => setAddInput(e.target.value.toUpperCase().trim())}
placeholder="TICKER"
className="w-28 rounded bg-bg-secondary border border-fg-muted/20 px-2 py-1.5 text-sm text-fg"
className="w-28 rounded-lg bg-surface-sunken border border-line px-3 py-1.5 text-xs text-fg placeholder:text-fg-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
maxLength={12}
onKeyDown={(e) => { if (e.key === 'Enter') addToWatchlist(); }}
/>
<button
onClick={addToWatchlist}
className="rounded bg-bg-secondary border border-fg-muted/30 px-3 py-1.5 text-xs text-fg hover:border-fg-muted/60"
className="rounded-lg bg-surface-sunken border border-line px-3 py-1.5 text-xs text-fg hover:border-accent transition-colors"
>
Add
</button>