Skip to content

Fondo con profundidad institucional, dropdown opaco, historial mobile sin truncar #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
quequeo merged 1 commit into from
Mar 16, 2026
Merged

Fondo con profundidad institucional, dropdown opaco, historial mobile sin truncar #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/components/ui/Select.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,8 @@ export const Select = ({
<div
role="listbox"
aria-labelledby={id}
className="absolute left-0 right-0 mt-2 max-h-64 overflow-auto rounded-lg border border-border-dark bg-dark-card z-50"
className="absolute left-0 right-0 mt-2 max-h-64 overflow-auto rounded-lg border border-[rgba(101,167,165,0.22)] bg-[#15191b] z-50"
style={{ boxShadow: '0 12px 30px rgba(0, 0, 0, 0.35)' }}
>
{items.map((opt) => {
const isSelected = String(opt?.value) === String(value);
Expand All @@ -132,8 +133,10 @@ export const Select = ({
role="option"
aria-selected={isSelected}
onClick={() => selectValue(opt?.value)}
className={`w-full px-4 py-2.5 text-sm text-left hover:bg-accent-dim ${
isSelected ? 'bg-primary/10 text-text-primary font-semibold' : 'text-text-muted'
className={`w-full px-4 py-2.5 text-sm text-left transition-colors hover:bg-[rgba(101,167,165,0.10)] hover:text-white ${
isSelected
? 'bg-[rgba(101,167,165,0.10)] text-text-primary font-semibold'
: 'text-white/[0.88]'
}`}
>
{normalizeLabel(opt?.label)}
Expand Down
5 changes: 4 additions & 1 deletion src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@

@layer base {
body {
background: #0d0f10;
background:
radial-gradient(circle at 20% 0%, rgba(101, 167, 165, 0.05) 0%, rgba(101, 167, 165, 0) 40%),
radial-gradient(circle at 80% 100%, rgba(101, 167, 165, 0.03) 0%, rgba(101, 167, 165, 0) 35%),
#0f1113;
color: #e8e8e8;
font-family:
'Montserrat',
Expand Down
136 changes: 81 additions & 55 deletions src/pages/HistoryPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,24 @@ export const HistoryPage = () => {
return base;
};

const movementLabelMobile = (row) => {
const base = translateMovement(row?.movement);
const m = normalize(row?.movement);

if (m === 'trading_fee' && row?.tradingFeeSource === 'WITHDRAWAL') {
const feePct = formatFeePercentage(row?.tradingFeePercentage);
const line1 = `${base}${feePct ? ` (${feePct})` : ''}`;
const withdrawalAmount = Number(row?.tradingFeeWithdrawalAmount);
const line2 =
Number.isFinite(withdrawalAmount) && withdrawalAmount > 0
? `sobre retiro ${formatCurrency(withdrawalAmount)}`
: null;
return { line1, line2 };
}

return { line1: movementLabel(row), line2: null };
};

const shouldShowStatusPill = (movement) => {
const m = normalize(movement);
return (
Expand Down Expand Up @@ -400,68 +418,76 @@ export const HistoryPage = () => {
<>
{/* Mobile cards */}
<div data-testid="history-mobile" className="md:hidden space-y-3">
{mobileVisibleRows.map((row, idx) => (
<div key={`${row.code}-${row.date}-${idx}`} className="winbit-card--compact">
<div className="flex items-start justify-between gap-3 mb-1">
<div className="min-w-0">
<div className="flex items-center gap-2 min-w-0">
<div className="text-sm font-semibold text-text-primary truncate">
{movementLabel(row)}
{mobileVisibleRows.map((row, idx) => {
const mobileLabel = movementLabelMobile(row);
return (
<div key={`${row.code}-${row.date}-${idx}`} className="winbit-card--compact">
<div className="flex items-start justify-between gap-3 mb-1">
<div className="min-w-0">
<div className="flex items-center gap-2 min-w-0 flex-wrap">
<div className="text-sm font-semibold text-text-primary leading-snug">
{mobileLabel.line1}
{mobileLabel.line2 && (
<span className="block text-xs font-normal text-text-muted mt-0.5">
{mobileLabel.line2}
</span>
)}
</div>
{movementCompletedIcon(row)}
{shouldShowStatusPill(row?.movement) && row?.status ? (
<span
className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold whitespace-nowrap ${statusPillClass(
row.status,
)}`}
>
{translateStatus(row.status, row?.movement)}
</span>
) : null}
</div>
{movementCompletedIcon(row)}
{shouldShowStatusPill(row?.movement) && row?.status ? (
<span
className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold whitespace-nowrap ${statusPillClass(
row.status,
)}`}
>
{translateStatus(row.status, row?.movement)}
</span>
) : null}
<div className="text-xs text-text-muted mt-1">{formatDate(row.date)}</div>
</div>
<div className="text-xs text-text-muted mt-1">{formatDate(row.date)}</div>
</div>

<div className="shrink-0 text-right">
<div
className={`text-base font-bold ${
displayAmount(row) > 0
? 'text-success'
: displayAmount(row) < 0
? 'text-error'
: 'text-text-primary'
}`}
>
{displayAmount(row) > 0 ? '+' : ''}
{formatCurrency(displayAmount(row))}
<div className="shrink-0 text-right">
<div
className={`text-base font-bold ${
displayAmount(row) > 0
? 'text-success'
: displayAmount(row) < 0
? 'text-error'
: 'text-text-primary'
}`}
>
{displayAmount(row) > 0 ? '+' : ''}
{formatCurrency(displayAmount(row))}
</div>
</div>
</div>
</div>

<div className="mt-2 text-[13px] text-text-muted flex items-center gap-2">
<span>Balance:</span>
<span className="font-medium text-text-primary">
{row.previousBalance !== null ? formatCurrency(row.previousBalance) : '-'}
</span>
<svg
className="w-3 h-3 text-text-dim"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M14 5l7 7m0 0l-7 7m7-7H3"
/>
</svg>
<span className="font-medium text-text-primary">
{row.newBalance !== null ? formatCurrency(row.newBalance) : '-'}
</span>
<div className="mt-2 text-[13px] text-text-muted flex items-center gap-2">
<span>Balance:</span>
<span className="font-medium text-text-primary">
{row.previousBalance !== null ? formatCurrency(row.previousBalance) : '-'}
</span>
<svg
className="w-3 h-3 text-text-dim"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M14 5l7 7m0 0l-7 7m7-7H3"
/>
</svg>
<span className="font-medium text-text-primary">
{row.newBalance !== null ? formatCurrency(row.newBalance) : '-'}
</span>
</div>
</div>
</div>
))}
);
})}
</div>

{shouldPaginateMobile ? (
Expand Down
Loading