fix(web): convert <Button> picker cards to native <button> (UI audit #5)
The @bytelyst/ui Button primitive applies whitespace-nowrap + fixed
h-{size} which collapses multi-line stacked content (Pattern A in
docs/ui/UI_AUDIT.md). Affected sites use Button as a card-shaped
option/action picker with stacked title + description spans.
Converted to native <button> + new .card-button utility class:
- StrategyWizard:188 — risk style picker (3 cards)
- StrategyWizard:342 — trading hours picker
- SimpleView:1009 — "new short-term buy plan" card
- SimpleView:1028 — "manage existing holding" card
- MyStrategiesTab:153 — diagnostic accordion toggle
Adds layout-fixes.css §25 .card-button — resets button defaults,
preserves focus-visible ring tied to --bl-focus-ring/--bl-accent.
Skipped: ChatControl:543 (FAB) — single-icon child, not affected.
Generated with [Devin](https://cli.devin.ai/docs)
Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Devin
parent
1807dc0d30
commit
67c9ecb589
@ -185,12 +185,11 @@ export const StrategyWizard: React.FC<{
|
||||
const isLocked = !isFeatureAllowed(tier, 'risk_style', style.id);
|
||||
return (
|
||||
<div key={style.id} className="relative">
|
||||
<Button
|
||||
<button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
disabled={isLocked}
|
||||
onClick={() => setState({ ...state, riskStyle: style })}
|
||||
className={`${optionBaseClass} ${isLocked ? 'cursor-not-allowed opacity-40 grayscale' : 'hover:scale-[1.01] active:scale-[0.99]'
|
||||
className={`card-button ${optionBaseClass} ${isLocked ? 'cursor-not-allowed opacity-40 grayscale' : 'hover:scale-[1.01] active:scale-[0.99]'
|
||||
} ${state.riskStyle?.id === style.id
|
||||
? optionSelectedClass
|
||||
: optionIdleClass
|
||||
@ -213,7 +212,7 @@ export const StrategyWizard: React.FC<{
|
||||
<p className="text-sm leading-relaxed text-[var(--muted-foreground)]">{style.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</button>
|
||||
{isLocked && (
|
||||
<div className="absolute top-4 right-4 text-[9px] font-black uppercase text-amber-500/80 tracking-tighter bg-amber-500/10 px-2 py-0.5 rounded border border-amber-500/20">
|
||||
Pro/Elite Only
|
||||
@ -339,12 +338,11 @@ export const StrategyWizard: React.FC<{
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{(['24/7', 'London + New York', 'Asia only'] as const).map(option => (
|
||||
<Button
|
||||
<button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
key={option}
|
||||
onClick={() => setState({ ...state, hours: option })}
|
||||
className={`rounded-2xl border-2 p-6 text-left transition-all ${state.hours === option
|
||||
className={`card-button rounded-2xl border-2 p-6 text-left transition-all ${state.hours === option
|
||||
? optionSelectedClass
|
||||
: optionIdleClass
|
||||
}`}
|
||||
@ -362,7 +360,7 @@ export const StrategyWizard: React.FC<{
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
@ -493,3 +493,36 @@
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Section 25 — card-button utility (UI audit Pattern A)
|
||||
Use on a native <button> when you need a button-shaped CARD with stacked
|
||||
block content. The @bytelyst/ui Button primitive has whitespace-nowrap +
|
||||
fixed h-{size} that collapses multi-line content. This class restores the
|
||||
focus ring + reset behavior without those constraints.
|
||||
--------------------------------------------------------------------------- */
|
||||
.card-button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
height: auto;
|
||||
transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
|
||||
}
|
||||
.card-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.card-button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--bl-bg-canvas, #0b0f17),
|
||||
0 0 0 4px var(--bl-focus-ring, var(--bl-accent, #5A8CFF));
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
@ -150,10 +150,10 @@ const ActiveStrategyCard: React.FC<{
|
||||
|
||||
{/* 5. Health Diagnostic (Education Layer) */}
|
||||
<div style={{ marginBottom: '32px' }}>
|
||||
<Button
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onToggleExpand(profile.id)}
|
||||
variant="ghost"
|
||||
className="card-button"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '16px',
|
||||
@ -190,7 +190,7 @@ const ActiveStrategyCard: React.FC<{
|
||||
<p style={{ fontSize: '11px', color: 'var(--bl-warning)', margin: 0, fontStyle: 'italic', fontWeight: 600 }}>{explanation.recommendation}</p>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 6. Action */}
|
||||
|
||||
@ -1006,15 +1006,14 @@ export function SimpleView() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<Button
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
dispatch({ type: 'clear-feedback' });
|
||||
dispatch({ type: 'set-selected-holding-trade-id', value: null });
|
||||
updateDraft('side', 'buy');
|
||||
}}
|
||||
variant="ghost"
|
||||
className={`h-auto justify-start rounded-[1.25rem] border px-5 py-5 text-left transition ${
|
||||
className={`card-button h-auto justify-start rounded-[1.25rem] border px-5 py-5 text-left transition ${
|
||||
draft.side === 'buy'
|
||||
? 'border-[var(--primary)] bg-[var(--accent-soft)]'
|
||||
: 'border-[var(--border)] bg-[var(--card-elevated)]'
|
||||
@ -1024,8 +1023,8 @@ export function SimpleView() {
|
||||
<div className="text-sm font-bold text-[var(--foreground)]">New short-term buy plan</div>
|
||||
<div className="mt-2 text-sm font-normal leading-6 text-[var(--muted-foreground)]">Arm a dip-buy trigger and let the app manage the profit exit after fill.</div>
|
||||
</div>
|
||||
</Button>
|
||||
<Button
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
dispatch({ type: 'clear-feedback' });
|
||||
@ -1035,8 +1034,7 @@ export function SimpleView() {
|
||||
updateDraft('side', 'sell');
|
||||
}
|
||||
}}
|
||||
variant="ghost"
|
||||
className={`h-auto justify-start rounded-[1.25rem] border px-5 py-5 text-left transition ${
|
||||
className={`card-button h-auto justify-start rounded-[1.25rem] border px-5 py-5 text-left transition ${
|
||||
draft.side === 'sell'
|
||||
? 'border-[var(--primary)] bg-[var(--accent-soft)]'
|
||||
: 'border-[var(--border)] bg-[var(--card-elevated)]'
|
||||
@ -1046,7 +1044,7 @@ export function SimpleView() {
|
||||
<div className="text-sm font-bold text-[var(--foreground)]">Manage an existing holding</div>
|
||||
<div className="mt-2 text-sm font-normal leading-6 text-[var(--muted-foreground)]">Choose a filled holding and place it back under managed profit-taking.</div>
|
||||
</div>
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user