fix(ui): polish portfolio operations tables
This commit is contained in:
parent
31d8932067
commit
3375dfcfce
@ -1800,23 +1800,33 @@ body {
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.positions-tab {
|
||||
.positions-tab,
|
||||
.history-tab {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.positions-tab .tab-header {
|
||||
.positions-tab .tab-header,
|
||||
.history-tab > div:first-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.positions-tab .tab-header h2,
|
||||
.positions-tab h3 {
|
||||
.positions-tab h3,
|
||||
.history-tab h2,
|
||||
.history-tab h3 {
|
||||
color: var(--foreground) !important;
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
.positions-tab .tab-header p,
|
||||
.history-tab p,
|
||||
.positions-tab .text-gray-400,
|
||||
.positions-tab .text-gray-500 {
|
||||
.positions-tab .text-gray-500,
|
||||
.history-tab .text-gray-400,
|
||||
.history-tab .text-gray-500 {
|
||||
color: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
@ -1844,36 +1854,173 @@ body {
|
||||
}
|
||||
|
||||
.positions-section,
|
||||
.orders-section {
|
||||
.orders-section,
|
||||
.history-tab {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.positions-tab .table-container {
|
||||
.positions-tab section,
|
||||
.positions-tab header,
|
||||
.history-tab section {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.positions-section > .flex,
|
||||
.orders-section > .flex {
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.positions-tab .table-container,
|
||||
.history-tab .table-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: auto !important;
|
||||
border-color: var(--border) !important;
|
||||
background: var(--card) !important;
|
||||
box-shadow: 0 14px 38px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.positions-tab .pro-table {
|
||||
.positions-tab .pro-table,
|
||||
.history-tab .pro-table {
|
||||
min-width: 980px;
|
||||
color: var(--foreground);
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.positions-tab .pro-table thead tr {
|
||||
.positions-tab .pro-table thead tr,
|
||||
.history-tab .pro-table thead tr {
|
||||
background: var(--muted) !important;
|
||||
}
|
||||
|
||||
.positions-tab .pro-table th {
|
||||
.positions-tab .pro-table th,
|
||||
.history-tab .pro-table th {
|
||||
color: var(--muted-foreground) !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.positions-tab .pro-table td {
|
||||
.positions-tab .pro-table td,
|
||||
.history-tab .pro-table td {
|
||||
color: var(--foreground);
|
||||
border-color: var(--border) !important;
|
||||
}
|
||||
|
||||
.positions-tab .pro-table td > span[class*="px-"],
|
||||
.history-tab .pro-table td > span[class*="px-"] {
|
||||
display: inline-flex;
|
||||
min-height: 24px;
|
||||
align-items: center;
|
||||
border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border)) !important;
|
||||
border-radius: 999px !important;
|
||||
background: color-mix(in oklab, var(--accent-soft) 38%, var(--card)) !important;
|
||||
color: var(--foreground) !important;
|
||||
padding: 0 8px !important;
|
||||
font-size: 10px !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: 0 !important;
|
||||
text-transform: none !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.positions-tab .pro-table tbody tr,
|
||||
.history-tab .pro-table tbody tr {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.positions-tab .pro-table tbody tr:hover,
|
||||
.history-tab .pro-table tbody tr:hover {
|
||||
background: color-mix(in oklab, var(--accent-soft) 35%, transparent) !important;
|
||||
}
|
||||
|
||||
.positions-tab .text-white,
|
||||
.positions-tab .text-gray-200,
|
||||
.positions-tab .text-gray-300,
|
||||
.history-tab .text-white,
|
||||
.history-tab .text-gray-200,
|
||||
.history-tab .text-gray-300 {
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.positions-tab .text-zinc-400,
|
||||
.positions-tab .text-zinc-500,
|
||||
.positions-tab .text-zinc-600,
|
||||
.positions-tab .text-zinc-700,
|
||||
.history-tab .text-zinc-400,
|
||||
.history-tab .text-zinc-500,
|
||||
.history-tab .text-zinc-600,
|
||||
.history-tab .text-zinc-700 {
|
||||
color: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
.truth-pill,
|
||||
.portfolio-row-action {
|
||||
display: inline-flex;
|
||||
min-height: 26px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in oklab, var(--muted) 60%, var(--card));
|
||||
color: var(--muted-foreground);
|
||||
padding: 0 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.truth-pill.reconciled {
|
||||
border-color: color-mix(in oklab, var(--bl-success) 28%, var(--border));
|
||||
background: var(--bl-success-muted);
|
||||
color: var(--bl-success);
|
||||
}
|
||||
|
||||
.truth-pill.exchange {
|
||||
border-color: color-mix(in oklab, var(--bl-info) 28%, var(--border));
|
||||
background: var(--bl-info-muted);
|
||||
color: var(--bl-info);
|
||||
}
|
||||
|
||||
.truth-pill.db,
|
||||
.truth-pill.unknown {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.portfolio-row-action {
|
||||
min-height: 30px !important;
|
||||
border-radius: 999px !important;
|
||||
padding-inline: 10px !important;
|
||||
font-size: 10px !important;
|
||||
font-weight: 800 !important;
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.positions-tab > header {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.positions-tab .tab-header p {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.positions-tab .rounded-xl.border {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.positions-section > .flex,
|
||||
.orders-section > .flex {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.positions-tab .pro-table,
|
||||
.history-tab .pro-table {
|
||||
min-width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet should keep the side navigation. Only true phone widths use footer nav. */
|
||||
@media (min-width: 561px) and (max-width: 1023px) {
|
||||
.dashboard-shell {
|
||||
|
||||
@ -1509,15 +1509,19 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
|
||||
<td className="px-6 py-4 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
{pos.source === 'BOT' && pos.profileId && pos.tradeId && onManageHolding && (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => onManageHolding(pos, pos.planEntryId ? 'open-plan' : 'create-exit-plan')}
|
||||
className="px-2 py-1 bg-sky-500/10 hover:bg-sky-500/20 text-sky-300 border border-sky-500/20 rounded text-[10px] font-bold uppercase transition-colors"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="portfolio-row-action"
|
||||
>
|
||||
{pos.planEntryId ? 'Open Plan' : 'Create Exit Plan'}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{pos.source === 'BOT' && (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
if (!confirm(`Are you sure you want to CLOSE ${pos.symbol}?`)) return;
|
||||
try {
|
||||
@ -1544,10 +1548,12 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
|
||||
alert(`Error: ${e.message}`);
|
||||
}
|
||||
}}
|
||||
className="px-2 py-1 bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20 rounded text-[10px] font-bold uppercase transition-colors"
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
className="portfolio-row-action"
|
||||
>
|
||||
Square Off
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user