fix(simple): restore form contrast
This commit is contained in:
root
parent
90e733b46c
commit
9021df19ad
@ -473,13 +473,13 @@ export function SimpleView() {
|
||||
</header>
|
||||
|
||||
<div className="grid gap-8 xl:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
|
||||
<section className="rounded-[2rem] border border-white/8 bg-[#0b0d10] p-6 shadow-[0_30px_80px_rgba(0,0,0,0.35)]">
|
||||
<section className="rounded-[2rem] border border-black/10 bg-zinc-50 p-6 shadow-[0_30px_80px_rgba(0,0,0,0.16)]">
|
||||
<div className="mb-6 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-black uppercase tracking-tight text-white">
|
||||
<h2 className="text-lg font-black uppercase tracking-tight text-zinc-950">
|
||||
{editingSetupId ? 'Edit setup' : 'New setup'}
|
||||
</h2>
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-zinc-500">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-zinc-600">
|
||||
Saved trigger workflow, not an immediate broker order
|
||||
</p>
|
||||
</div>
|
||||
@ -494,7 +494,7 @@ export function SimpleView() {
|
||||
setMessage(null);
|
||||
setError(null);
|
||||
}}
|
||||
className="rounded-full border border-white/10 px-4 py-2 text-xs font-bold uppercase tracking-[0.2em] text-zinc-400 hover:border-white/20 hover:text-white"
|
||||
className="rounded-full border border-black/10 bg-white px-4 py-2 text-xs font-bold uppercase tracking-[0.2em] text-zinc-700 hover:border-black/20 hover:text-zinc-950"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
@ -503,7 +503,7 @@ export function SimpleView() {
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<label className="space-y-2">
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-500">Symbol</span>
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700">Symbol</span>
|
||||
<input
|
||||
value={draft.symbol}
|
||||
onChange={(e) => setDraft((prev) => ({
|
||||
@ -512,16 +512,16 @@ export function SimpleView() {
|
||||
currentMarketPrice: '',
|
||||
}))}
|
||||
placeholder="AAPL"
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-white outline-none transition focus:border-[#71f6a8]/60"
|
||||
className="w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-zinc-950 outline-none transition placeholder:text-zinc-400 focus:border-[#2f9e62]"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2">
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-500">Setup type</span>
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700">Setup type</span>
|
||||
<select
|
||||
value={draft.side}
|
||||
onChange={(e) => updateDraft('side', e.target.value as SimpleSide)}
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-white outline-none transition focus:border-[#71f6a8]/60"
|
||||
className="w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-zinc-950 outline-none transition focus:border-[#2f9e62]"
|
||||
>
|
||||
<option value="buy">Buy the dip + profit exit</option>
|
||||
<option value="sell">Sell existing Simple holding at profit</option>
|
||||
@ -531,17 +531,17 @@ export function SimpleView() {
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]">
|
||||
<label className="space-y-2">
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-500">Market price (auto-fetched)</span>
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700">Market price (auto-fetched)</span>
|
||||
<input
|
||||
value={draft.currentMarketPrice}
|
||||
readOnly
|
||||
className="w-full rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-white/90 outline-none"
|
||||
className="w-full rounded-2xl border border-black/10 bg-zinc-100 px-4 py-3 text-zinc-800 outline-none"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleLoadMarketPrice()}
|
||||
className="self-end rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-xs font-black uppercase tracking-[0.2em] text-zinc-300 hover:border-white/20 hover:text-white disabled:opacity-50"
|
||||
className="self-end rounded-2xl border border-black/10 bg-white px-4 py-3 text-xs font-black uppercase tracking-[0.2em] text-zinc-700 hover:border-black/20 hover:text-zinc-950 disabled:opacity-50"
|
||||
disabled={loadingPrice || !normalizedSymbol}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
@ -560,69 +560,69 @@ export function SimpleView() {
|
||||
value={draft.side === 'sell' && matchingHolding ? String(matchingHolding.size) : draft.quantity}
|
||||
onChange={(e) => updateDraft('quantity', e.target.value)}
|
||||
readOnly={draft.side === 'sell' && !!matchingHolding}
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-white outline-none transition focus:border-[#71f6a8]/60 read-only:bg-white/[0.03] read-only:text-zinc-300"
|
||||
className="w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-zinc-950 outline-none transition placeholder:text-zinc-400 focus:border-[#2f9e62] read-only:bg-zinc-100 read-only:text-zinc-700"
|
||||
placeholder="10"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2">
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-500">Notes</span>
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700">Notes</span>
|
||||
<input
|
||||
value={draft.notes}
|
||||
onChange={(e) => updateDraft('notes', e.target.value)}
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-white outline-none transition focus:border-[#71f6a8]/60"
|
||||
className="w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-zinc-950 outline-none transition placeholder:text-zinc-400 focus:border-[#2f9e62]"
|
||||
placeholder="Optional context"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{draft.side === 'buy' && (
|
||||
<div className="grid gap-4 rounded-[1.75rem] border border-white/8 bg-white/[0.02] p-5 md:grid-cols-[0.55fr_0.45fr]">
|
||||
<div className="grid gap-4 rounded-[1.75rem] border border-black/10 bg-white p-5 md:grid-cols-[0.55fr_0.45fr]">
|
||||
<div className="space-y-3">
|
||||
<p className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-500">Drop trigger</p>
|
||||
<p className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700">Drop trigger</p>
|
||||
<select
|
||||
value={draft.dropMode}
|
||||
onChange={(e) => updateDraft('dropMode', e.target.value as TriggerMode)}
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-white outline-none transition focus:border-[#71f6a8]/60"
|
||||
className="w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-zinc-950 outline-none transition focus:border-[#2f9e62]"
|
||||
>
|
||||
<option value="dollar">Dollar drop from current market</option>
|
||||
<option value="percent">Percent drop from current market</option>
|
||||
</select>
|
||||
</div>
|
||||
<label className="space-y-3">
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-500">
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700">
|
||||
{draft.dropMode === 'dollar' ? 'Drop amount ($)' : 'Drop amount (%)'}
|
||||
</span>
|
||||
<input
|
||||
value={draft.dropValue}
|
||||
onChange={(e) => updateDraft('dropValue', e.target.value)}
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-white outline-none transition focus:border-[#71f6a8]/60"
|
||||
className="w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-zinc-950 outline-none transition placeholder:text-zinc-400 focus:border-[#2f9e62]"
|
||||
placeholder={draft.dropMode === 'dollar' ? '5.00' : '8'}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 rounded-[1.75rem] border border-white/8 bg-white/[0.02] p-5 md:grid-cols-[0.55fr_0.45fr]">
|
||||
<div className="grid gap-4 rounded-[1.75rem] border border-black/10 bg-white p-5 md:grid-cols-[0.55fr_0.45fr]">
|
||||
<div className="space-y-3">
|
||||
<p className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-500">Profit exit</p>
|
||||
<p className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700">Profit exit</p>
|
||||
<select
|
||||
value={draft.profitMode}
|
||||
onChange={(e) => updateDraft('profitMode', e.target.value as TriggerMode)}
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-white outline-none transition focus:border-[#71f6a8]/60"
|
||||
className="w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-zinc-950 outline-none transition focus:border-[#2f9e62]"
|
||||
>
|
||||
<option value="dollar">Dollar gain from purchase</option>
|
||||
<option value="percent">Percent gain from purchase</option>
|
||||
</select>
|
||||
</div>
|
||||
<label className="space-y-3">
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-500">
|
||||
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700">
|
||||
{draft.profitMode === 'dollar' ? 'Profit target ($)' : 'Profit target (%)'}
|
||||
</span>
|
||||
<input
|
||||
value={draft.profitValue}
|
||||
onChange={(e) => updateDraft('profitValue', e.target.value)}
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3 text-white outline-none transition focus:border-[#71f6a8]/60"
|
||||
className="w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-zinc-950 outline-none transition placeholder:text-zinc-400 focus:border-[#2f9e62]"
|
||||
placeholder={draft.profitMode === 'dollar' ? '7.50' : '10'}
|
||||
/>
|
||||
</label>
|
||||
@ -641,7 +641,7 @@ export function SimpleView() {
|
||||
)}
|
||||
|
||||
{previewText && (
|
||||
<div className="rounded-[1.75rem] border border-[#71f6a8]/15 bg-[#0a1710] px-5 py-4 text-sm text-zinc-200">
|
||||
<div className="rounded-[1.75rem] border border-[#71f6a8]/20 bg-[#eefbf3] px-5 py-4 text-sm text-zinc-900">
|
||||
{previewText}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user