Refactor Transactions page: spacing, mobile cards, filters, skeleton & empty states
Made-with: Cursor
This commit is contained in:
Michaël
@@ -85,7 +85,7 @@ export default function App() {
|
|||||||
<Route
|
<Route
|
||||||
path="/transactions"
|
path="/transactions"
|
||||||
element={
|
element={
|
||||||
<div className="container container--single">
|
<div className="container container--single container--transactions">
|
||||||
<main className="main main--full">
|
<main className="main main--full">
|
||||||
<TransactionsPage />
|
<TransactionsPage />
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { useState, useEffect, useMemo } from "react";
|
import { useState, useEffect, useMemo } from "react";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import { getStats, type Stats, type DepositSource } from "../api";
|
import { getStats, type Stats, type DepositSource } from "../api";
|
||||||
|
|
||||||
type TxDirection = "in" | "out";
|
type TxDirection = "in" | "out";
|
||||||
@@ -16,10 +17,17 @@ function formatSource(s: DepositSource): TxType {
|
|||||||
return s === "cashu" ? "cashu" : "lightning";
|
return s === "cashu" ? "cashu" : "lightning";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type DirectionFilter = "all" | "in" | "out";
|
||||||
|
type TypeFilter = "all" | "lightning" | "cashu";
|
||||||
|
type SortOrder = "newest" | "oldest";
|
||||||
|
|
||||||
export function TransactionsPage() {
|
export function TransactionsPage() {
|
||||||
const [stats, setStats] = useState<Stats | null>(null);
|
const [stats, setStats] = useState<Stats | null>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [directionFilter, setDirectionFilter] = useState<DirectionFilter>("all");
|
||||||
|
const [typeFilter, setTypeFilter] = useState<TypeFilter>("all");
|
||||||
|
const [sortOrder, setSortOrder] = useState<SortOrder>("newest");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
@@ -41,7 +49,6 @@ export function TransactionsPage() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const n = (v: number | undefined | null) => Number(v ?? 0).toLocaleString();
|
const n = (v: number | undefined | null) => Number(v ?? 0).toLocaleString();
|
||||||
/** Display amount: backend may have stored incoming Lightning in msats; show sats. */
|
|
||||||
const displaySats = (tx: UnifiedTx): number => {
|
const displaySats = (tx: UnifiedTx): number => {
|
||||||
const a = tx.amount_sats;
|
const a = tx.amount_sats;
|
||||||
if (tx.direction === "in" && tx.type === "lightning" && a >= 1000) return Math.floor(a / 1000);
|
if (tx.direction === "in" && tx.type === "lightning" && a >= 1000) return Math.floor(a / 1000);
|
||||||
@@ -75,68 +82,189 @@ export function TransactionsPage() {
|
|||||||
return merged.slice(0, 50);
|
return merged.slice(0, 50);
|
||||||
}, [stats]);
|
}, [stats]);
|
||||||
|
|
||||||
|
const filteredAndSorted = useMemo(() => {
|
||||||
|
let list = [...transactions];
|
||||||
|
if (directionFilter !== "all") {
|
||||||
|
list = list.filter((tx) => tx.direction === directionFilter);
|
||||||
|
}
|
||||||
|
if (typeFilter !== "all") {
|
||||||
|
list = list.filter((tx) => tx.type === typeFilter);
|
||||||
|
}
|
||||||
|
if (sortOrder === "oldest") {
|
||||||
|
list = [...list].reverse();
|
||||||
|
}
|
||||||
|
return list;
|
||||||
|
}, [transactions, directionFilter, typeFilter, sortOrder]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="transactions-page">
|
<div className="tx-page">
|
||||||
<h1 className="transactions-title">Transactions</h1>
|
{/* Desktop layout: container + hierarchy */}
|
||||||
<p className="transactions-intro">
|
<header className="tx-page-header">
|
||||||
|
<h1 className="tx-page-title">Transactions</h1>
|
||||||
|
<p className="tx-page-subtitle">
|
||||||
Incoming (deposits) and outgoing (faucet payouts). Lightning and Cashu.
|
Incoming (deposits) and outgoing (faucet payouts). Lightning and Cashu.
|
||||||
</p>
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Filters section */}
|
||||||
|
{!loading && !error && (
|
||||||
|
<div className="tx-filters">
|
||||||
|
<div className="tx-filters-row">
|
||||||
|
<div className="tx-filter-group">
|
||||||
|
<label htmlFor="tx-direction" className="tx-filter-label">Direction</label>
|
||||||
|
<select
|
||||||
|
id="tx-direction"
|
||||||
|
className="tx-filter-select"
|
||||||
|
value={directionFilter}
|
||||||
|
onChange={(e) => setDirectionFilter(e.target.value as DirectionFilter)}
|
||||||
|
>
|
||||||
|
<option value="all">All</option>
|
||||||
|
<option value="in">In</option>
|
||||||
|
<option value="out">Out</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="tx-filter-group">
|
||||||
|
<label htmlFor="tx-type" className="tx-filter-label">Type</label>
|
||||||
|
<select
|
||||||
|
id="tx-type"
|
||||||
|
className="tx-filter-select"
|
||||||
|
value={typeFilter}
|
||||||
|
onChange={(e) => setTypeFilter(e.target.value as TypeFilter)}
|
||||||
|
>
|
||||||
|
<option value="all">All</option>
|
||||||
|
<option value="lightning">Lightning</option>
|
||||||
|
<option value="cashu">Cashu</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="tx-filter-group">
|
||||||
|
<label htmlFor="tx-sort" className="tx-filter-label">Sort</label>
|
||||||
|
<select
|
||||||
|
id="tx-sort"
|
||||||
|
className="tx-filter-select"
|
||||||
|
value={sortOrder}
|
||||||
|
onChange={(e) => setSortOrder(e.target.value as SortOrder)}
|
||||||
|
>
|
||||||
|
<option value="newest">Newest first</option>
|
||||||
|
<option value="oldest">Oldest first</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Loading skeleton */}
|
||||||
{loading && (
|
{loading && (
|
||||||
<div className="transactions-loading">
|
<div className="tx-loading">
|
||||||
<div className="stats-skeleton">
|
<div className="tx-skeleton-card">
|
||||||
<div className="skeleton-line balance" />
|
<div className="tx-skeleton-line tx-skeleton-date" />
|
||||||
<div className="skeleton-line" />
|
<div className="tx-skeleton-line tx-skeleton-amount" />
|
||||||
<div className="skeleton-line" />
|
<div className="tx-skeleton-line tx-skeleton-badges" />
|
||||||
<div className="skeleton-line" />
|
<div className="tx-skeleton-line tx-skeleton-details" />
|
||||||
|
</div>
|
||||||
|
<div className="tx-skeleton-card">
|
||||||
|
<div className="tx-skeleton-line tx-skeleton-date" />
|
||||||
|
<div className="tx-skeleton-line tx-skeleton-amount" />
|
||||||
|
<div className="tx-skeleton-line tx-skeleton-badges" />
|
||||||
|
<div className="tx-skeleton-line tx-skeleton-details" />
|
||||||
|
</div>
|
||||||
|
<div className="tx-skeleton-card">
|
||||||
|
<div className="tx-skeleton-line tx-skeleton-date" />
|
||||||
|
<div className="tx-skeleton-line tx-skeleton-amount" />
|
||||||
|
<div className="tx-skeleton-line tx-skeleton-badges" />
|
||||||
|
<div className="tx-skeleton-line tx-skeleton-details" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className="transactions-error">
|
<div className="tx-error">
|
||||||
<p>{error}</p>
|
<p>{error}</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!loading && !error && (
|
{!loading && !error && (
|
||||||
<div className="transactions-box">
|
<div className="tx-card">
|
||||||
{transactions.length === 0 ? (
|
{filteredAndSorted.length === 0 ? (
|
||||||
<p className="transactions-empty">No transactions yet.</p>
|
<div className="tx-empty">
|
||||||
|
<p className="tx-empty-title">No transactions yet</p>
|
||||||
|
<p className="tx-empty-desc">
|
||||||
|
When you deposit or claim, your transactions will show up here.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<table className="transactions-table">
|
<>
|
||||||
<thead>
|
{/* Desktop: grid table */}
|
||||||
<tr>
|
<div className="tx-table-wrap">
|
||||||
<th>Date</th>
|
<div className="tx-table-header">
|
||||||
<th>Direction</th>
|
<span className="tx-th-date">Date</span>
|
||||||
<th>Type</th>
|
<span className="tx-th-direction">Direction</span>
|
||||||
<th>Amount</th>
|
<span className="tx-th-type">Type</span>
|
||||||
<th>Details</th>
|
<span className="tx-th-amount">Amount</span>
|
||||||
</tr>
|
<span className="tx-th-details">Details</span>
|
||||||
</thead>
|
</div>
|
||||||
<tbody>
|
<AnimatePresence initial={false}>
|
||||||
{transactions.map((tx, i) => (
|
{filteredAndSorted.map((tx, i) => (
|
||||||
<tr key={i}>
|
<motion.div
|
||||||
<td>{formatDate(tx.at)}</td>
|
key={`${tx.at}-${i}`}
|
||||||
<td>
|
className={`tx-table-row ${i % 2 === 1 ? "tx-table-row--alt" : ""}`}
|
||||||
<span className={`transactions-direction transactions-direction--${tx.direction}`}>
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.2, delay: i * 0.02 }}
|
||||||
|
>
|
||||||
|
<span className="tx-td-date">{formatDate(tx.at)}</span>
|
||||||
|
<span className="tx-td-direction">
|
||||||
|
<span className={`tx-badge tx-badge--direction tx-badge--${tx.direction}`}>
|
||||||
{tx.direction === "in" ? "In" : "Out"}
|
{tx.direction === "in" ? "In" : "Out"}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</span>
|
||||||
<td>
|
<span className="tx-td-type">
|
||||||
<span className={`transactions-type transactions-type--${tx.type}`}>
|
<span className={`tx-badge tx-badge--type tx-badge--${tx.type}`}>
|
||||||
{tx.type === "cashu" ? "Cashu" : "Lightning"}
|
{tx.type === "cashu" ? "Cashu" : "Lightning"}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</span>
|
||||||
<td className="transactions-amount">{n(displaySats(tx))} sats</td>
|
<span className="tx-td-amount">{n(displaySats(tx))} sats</span>
|
||||||
<td className="transactions-details">{tx.details}</td>
|
<span className="tx-td-details">{tx.details}</span>
|
||||||
</tr>
|
</motion.div>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</AnimatePresence>
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile: stacked cards */}
|
||||||
|
<div className="tx-cards-mobile">
|
||||||
|
<AnimatePresence initial={false}>
|
||||||
|
{filteredAndSorted.map((tx, i) => (
|
||||||
|
<motion.article
|
||||||
|
key={`card-${tx.at}-${i}`}
|
||||||
|
className="tx-mobile-card"
|
||||||
|
initial={{ opacity: 0, y: 8 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.25, delay: i * 0.03 }}
|
||||||
|
>
|
||||||
|
<div className="tx-mobile-row1">
|
||||||
|
<span className="tx-mobile-date">{formatDate(tx.at)}</span>
|
||||||
|
<span className="tx-mobile-amount">{n(displaySats(tx))} sats</span>
|
||||||
|
</div>
|
||||||
|
<div className="tx-mobile-row2">
|
||||||
|
<span className={`tx-badge tx-badge--direction tx-badge--${tx.direction}`}>
|
||||||
|
{tx.direction === "in" ? "In" : "Out"}
|
||||||
|
</span>
|
||||||
|
<span className={`tx-badge tx-badge--type tx-badge--${tx.type}`}>
|
||||||
|
{tx.type === "cashu" ? "Cashu" : "Lightning"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="tx-mobile-row3">
|
||||||
|
<span className="tx-mobile-details">{tx.details}</span>
|
||||||
|
</div>
|
||||||
|
</motion.article>
|
||||||
|
))}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<div className="tx-page-bottom" aria-hidden />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -238,6 +238,7 @@ body {
|
|||||||
.main { min-width: 0; }
|
.main { min-width: 0; }
|
||||||
}
|
}
|
||||||
.main--full { max-width: 800px; margin: 0 auto; }
|
.main--full { max-width: 800px; margin: 0 auto; }
|
||||||
|
.container--transactions .main--full { max-width: none; }
|
||||||
.container--single { justify-content: center; }
|
.container--single { justify-content: center; }
|
||||||
|
|
||||||
/* Site footer */
|
/* Site footer */
|
||||||
@@ -273,67 +274,142 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Transactions page */
|
/* ---- Transactions page (desktop layout) ---- */
|
||||||
.transactions-page {
|
.tx-page {
|
||||||
padding: 0 0 32px;
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 80px 32px;
|
||||||
}
|
}
|
||||||
.transactions-title {
|
.tx-page-header {
|
||||||
font-size: 1.75rem;
|
margin-bottom: 64px;
|
||||||
|
}
|
||||||
|
.tx-page-title {
|
||||||
|
font-size: 2rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
margin-bottom: 8px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
.transactions-intro {
|
.tx-page-subtitle {
|
||||||
font-size: 15px;
|
font-size: 16px;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
margin-bottom: 28px;
|
opacity: 0.9;
|
||||||
|
margin-bottom: 48px;
|
||||||
}
|
}
|
||||||
.transactions-box {
|
.tx-page-bottom {
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filters section */
|
||||||
|
.tx-filters {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.tx-filters-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.tx-filter-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.tx-filter-label {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: var(--text-soft);
|
||||||
|
}
|
||||||
|
.tx-filter-select {
|
||||||
|
min-width: 140px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
font-size: 14px;
|
||||||
background: var(--bg-card);
|
background: var(--bg-card);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: var(--radius-card);
|
border-radius: 10px;
|
||||||
padding: 24px;
|
color: var(--text);
|
||||||
box-shadow: var(--shadow);
|
cursor: pointer;
|
||||||
overflow-x: auto;
|
|
||||||
}
|
}
|
||||||
.transactions-table {
|
.tx-filter-select:focus {
|
||||||
width: 100%;
|
outline: none;
|
||||||
border-collapse: collapse;
|
border-color: var(--accent);
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
.transactions-table th,
|
|
||||||
.transactions-table td {
|
/* Transactions card (desktop) */
|
||||||
padding: 12px 16px;
|
.tx-card {
|
||||||
text-align: left;
|
background: var(--bg-card);
|
||||||
border-bottom: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 40px;
|
||||||
|
min-height: 420px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||||||
}
|
}
|
||||||
.transactions-table th {
|
|
||||||
|
/* Desktop: grid table (hidden on mobile) */
|
||||||
|
.tx-table-wrap {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.tx-table-wrap {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tx-table-header {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 180px 100px 140px 140px 1fr;
|
||||||
|
column-gap: 32px;
|
||||||
|
padding: 0 0 24px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.06em;
|
||||||
color: var(--text-soft);
|
color: var(--text-soft);
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
.transactions-table tbody tr:last-child td {
|
.tx-table-row {
|
||||||
border-bottom: none;
|
display: grid;
|
||||||
|
grid-template-columns: 180px 100px 140px 140px 1fr;
|
||||||
|
column-gap: 32px;
|
||||||
|
min-height: 72px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: background 0.15s ease;
|
||||||
}
|
}
|
||||||
.transactions-table tbody tr:hover td {
|
.tx-table-row:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.tx-table-row:hover {
|
||||||
background: var(--bg-card-hover);
|
background: var(--bg-card-hover);
|
||||||
}
|
}
|
||||||
.transactions-amount {
|
.tx-table-row--alt {
|
||||||
font-variant-numeric: tabular-nums;
|
background: rgba(255, 255, 255, 0.02);
|
||||||
color: var(--accent-soft);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
.transactions-pubkey,
|
.tx-table-row--alt:hover {
|
||||||
.transactions-details {
|
background: var(--bg-card-hover);
|
||||||
|
}
|
||||||
|
.tx-td-date {
|
||||||
|
color: var(--text-soft);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.tx-td-amount {
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent-soft);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.tx-td-details {
|
||||||
font-family: ui-monospace, monospace;
|
font-family: ui-monospace, monospace;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
.transactions-direction,
|
|
||||||
.transactions-type {
|
/* Badges (direction / type) */
|
||||||
|
.tx-badge {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
@@ -341,36 +417,142 @@ body {
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
.transactions-direction--in {
|
.tx-badge--direction.tx-badge--in {
|
||||||
background: rgba(34, 197, 94, 0.15);
|
background: rgba(34, 197, 94, 0.15);
|
||||||
color: var(--accent-soft);
|
color: var(--accent-soft);
|
||||||
}
|
}
|
||||||
.transactions-direction--out {
|
.tx-badge--direction.tx-badge--out {
|
||||||
background: rgba(249, 115, 22, 0.15);
|
background: rgba(249, 115, 22, 0.15);
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
.transactions-type--lightning {
|
.tx-badge--type.tx-badge--lightning {
|
||||||
background: rgba(251, 191, 36, 0.15);
|
background: rgba(251, 191, 36, 0.15);
|
||||||
color: #fbbf24;
|
color: #fbbf24;
|
||||||
}
|
}
|
||||||
.transactions-type--cashu {
|
.tx-badge--type.tx-badge--cashu {
|
||||||
background: rgba(168, 85, 247, 0.15);
|
background: rgba(168, 85, 247, 0.15);
|
||||||
color: #a855f7;
|
color: #a855f7;
|
||||||
}
|
}
|
||||||
.transactions-loading {
|
|
||||||
max-width: 400px;
|
/* Mobile: stacked cards (visible only on mobile) */
|
||||||
|
.tx-cards-mobile {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
.transactions-error {
|
@media (min-width: 768px) {
|
||||||
|
.tx-cards-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tx-mobile-card {
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 14px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.tx-mobile-card:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.tx-mobile-row1 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.tx-mobile-date {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-soft);
|
||||||
|
}
|
||||||
|
.tx-mobile-amount {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent-soft);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.tx-mobile-row2 {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.tx-mobile-row3 .tx-mobile-details {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-family: ui-monospace, monospace;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Empty state */
|
||||||
|
.tx-empty {
|
||||||
|
text-align: center;
|
||||||
|
padding: 48px 24px;
|
||||||
|
}
|
||||||
|
.tx-empty-title {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.tx-empty-desc {
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin: 0;
|
||||||
|
max-width: 320px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading skeleton */
|
||||||
|
.tx-loading {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.tx-skeleton-card {
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 14px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.tx-skeleton-line {
|
||||||
|
height: 14px;
|
||||||
|
background: linear-gradient(90deg, var(--border) 25%, var(--bg-card-hover) 50%, var(--border) 75%);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: skeleton-shine 1.2s ease-in-out infinite;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.tx-skeleton-line:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.tx-skeleton-date {
|
||||||
|
width: 60%;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
.tx-skeleton-amount {
|
||||||
|
width: 45%;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.tx-skeleton-badges {
|
||||||
|
width: 70%;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
.tx-skeleton-details {
|
||||||
|
width: 90%;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Error state */
|
||||||
|
.tx-error {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: var(--error-bg);
|
background: var(--error-bg);
|
||||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||||
border-radius: var(--radius-card);
|
border-radius: 14px;
|
||||||
color: var(--error);
|
color: var(--error);
|
||||||
}
|
}
|
||||||
.transactions-empty {
|
.tx-error p {
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 15px;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
@@ -2041,8 +2223,19 @@ h1 {
|
|||||||
.site-nav-link { padding: 8px 12px; font-size: 13px; }
|
.site-nav-link { padding: 8px 12px; font-size: 13px; }
|
||||||
.site-footer { padding: 20px 16px 24px; }
|
.site-footer { padding: 20px 16px 24px; }
|
||||||
.site-footer-nav { flex-wrap: wrap; justify-content: center; gap: 16px; }
|
.site-footer-nav { flex-wrap: wrap; justify-content: center; gap: 16px; }
|
||||||
.transactions-table th,
|
|
||||||
.transactions-table td { padding: 10px 12px; font-size: 13px; }
|
.tx-page {
|
||||||
|
padding: 48px 24px;
|
||||||
|
}
|
||||||
|
.tx-filters-row {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.tx-filter-select {
|
||||||
|
min-width: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: var(--space-sm) var(--space-sm) var(--space-md);
|
padding: var(--space-sm) var(--space-sm) var(--space-md);
|
||||||
@@ -2073,6 +2266,27 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
|
.tx-page {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
.tx-page-header {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.tx-page-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.tx-page-subtitle {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.tx-card {
|
||||||
|
padding: 24px 20px;
|
||||||
|
min-height: 280px;
|
||||||
|
}
|
||||||
|
.tx-page-bottom {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: 12px 12px 20px;
|
padding: 12px 12px 20px;
|
||||||
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
||||||
|
|||||||
Reference in New Issue
Block a user