Skip to content

Commit baf3060

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Enhance Transaction History layout for more efficient space usage
Co-authored-by: 0xrinegade <[email protected]>
1 parent fea238c commit baf3060

File tree

2 files changed

+215
-46
lines changed

2 files changed

+215
-46
lines changed

‎src/components/profile/TransactionHistory.js‎

Lines changed: 62 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -159,117 +159,133 @@ const TransactionHistory = ({ transactions }) => {
159159
</div>
160160

161161
{paginatedTransactions.length === 0 ? (
162-
<div className="no-transactions">
163-
{searchQuery || filter !== 'all'
164-
? 'No transactions match your filters.'
165-
: 'No transactions found.'}
162+
<div className="ascii-form-message no-transactions">
163+
<span className="message-icon">[!]</span>
164+
<span className="message-text">
165+
{searchQuery || filter !== 'all'
166+
? 'NO TRANSACTIONS MATCH YOUR FILTERS'
167+
: 'NO TRANSACTIONS FOUND'}
168+
</span>
166169
</div>
167170
) : (
168171
<>
169-
<div className="transactions-table">
172+
<div className="ascii-form-table transactions-table">
170173
<div className="table-header">
171174
<div
172175
className={`col type ${sortBy === 'type' ? 'sorted' : ''}`}
173176
onClick={() => handleSortChange('type')}
174177
>
175-
Type{getSortIndicator('type')}
178+
TYPE{getSortIndicator('type')}
176179
</div>
177180
<div
178181
className={`col amount ${sortBy === 'amount' ? 'sorted' : ''}`}
179182
onClick={() => handleSortChange('amount')}
180183
>
181-
Amount{getSortIndicator('amount')}
184+
AMOUNT{getSortIndicator('amount')}
182185
</div>
183186
<div
184187
className={`col fiat ${sortBy === 'fiat' ? 'sorted' : ''}`}
185188
onClick={() => handleSortChange('fiat')}
186189
>
187-
Fiat{getSortIndicator('fiat')}
190+
FIAT{getSortIndicator('fiat')}
188191
</div>
189192
<div
190193
className={`col status ${sortBy === 'status' ? 'sorted' : ''}`}
191194
onClick={() => handleSortChange('status')}
192195
>
193-
Status{getSortIndicator('status')}
196+
STATUS{getSortIndicator('status')}
194197
</div>
195198
<div
196199
className={`col date ${sortBy === 'date' ? 'sorted' : ''}`}
197200
onClick={() => handleSortChange('date')}
198201
>
199-
Date{getSortIndicator('date')}
202+
DATE{getSortIndicator('date')}
200203
</div>
201204
<div className="col actions">
202-
Actions
205+
ACTION
203206
</div>
204207
</div>
205208

206209
{paginatedTransactions.map(transaction => (
207210
<div key={transaction.id} className="table-row">
208211
<div className={`col type ${transaction.type.toLowerCase()}`}>
209-
{transaction.type}
212+
<span className="type-badge">{transaction.type.toUpperCase()}</span>
210213
</div>
211214
<div className="col amount">
212-
{transaction.solAmount.toFixed(2)} SOL
215+
<span className="amount-value">{transaction.solAmount.toFixed(2)}</span>
216+
<span className="amount-unit">SOL</span>
213217
</div>
214218
<div className="col fiat">
215-
{transaction.fiatAmount.toFixed(2)} {transaction.fiatCurrency}
219+
<span className="fiat-value">{transaction.fiatAmount.toFixed(2)}</span>
220+
<span className="fiat-currency">{transaction.fiatCurrency}</span>
216221
</div>
217222
<div className={`col status status-${transaction.status.toLowerCase().replace(/\s+/g, '-')}`}>
218-
{transaction.status}
223+
<span className="status-badge">{transaction.status.toUpperCase()}</span>
219224
</div>
220225
<div className="col date">
221226
{transaction.createdAt}
222227
</div>
223228
<div className="col actions">
224229
<button
225-
className="button button-ghost button-sm"
230+
className="button button-ghost button-xs"
226231
onClick={() => alert(`View details for transaction ${transaction.id}`)}
227232
aria-label={`View details for transaction ${transaction.id}`}
228233
>
229-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
230-
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
231-
</svg>
234+
VIEW
232235
</button>
233236
</div>
234237
</div>
235238
))}
236239
</div>
237240

238241
{totalPages > 1 && (
239-
<div className="pagination">
240-
<button
241-
className="pagination-button"
242-
disabled={page === 1}
243-
onClick={() => setPage(page - 1)}
244-
aria-label="Previous page"
245-
>
246-
&laquo;
247-
</button>
242+
<div className="ascii-form-inline pagination">
243+
<div className="ascii-field-inline">
244+
<button
245+
className="pagination-button"
246+
disabled={page === 1}
247+
onClick={() => setPage(page - 1)}
248+
aria-label="Previous page"
249+
>
250+
← PREV
251+
</button>
252+
</div>
248253

249-
<span className="pagination-info">
250-
Page {page} of {totalPages}
251-
</span>
254+
<div className="ascii-field-inline">
255+
<span className="pagination-info">
256+
PAGE {page} OF {totalPages}
257+
</span>
258+
</div>
252259

253-
<button
254-
className="pagination-button"
255-
disabled={page === totalPages}
256-
onClick={() => setPage(page + 1)}
257-
aria-label="Next page"
258-
>
259-
&raquo;
260-
</button>
260+
<div className="ascii-field-inline">
261+
<button
262+
className="pagination-button"
263+
disabled={page === totalPages}
264+
onClick={() => setPage(page + 1)}
265+
aria-label="Next page"
266+
>
267+
NEXT →
268+
</button>
269+
</div>
261270
</div>
262271
)}
263272
</>
264273
)}
265274

266-
<div className="transaction-actions">
267-
<button className="button button-outline button-sm">
268-
Export Transactions
269-
</button>
270-
<button className="button button-ghost button-sm">
271-
View All
272-
</button>
275+
<div className="ascii-form-actions ascii-form-actions-spread">
276+
<div className="ascii-form-actions-left">
277+
<button className="button button-outline button-sm">
278+
Export Transactions
279+
</button>
280+
<button className="button button-ghost button-sm">
281+
View All
282+
</button>
283+
</div>
284+
<div className="ascii-form-actions-right">
285+
<span className="results-count">
286+
{filteredTransactions.length} transaction{filteredTransactions.length !== 1 ? 's' : ''}
287+
</span>
288+
</div>
273289
</div>
274290
</div>
275291
);

‎src/styles/ascii-theme.css‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1249,4 +1249,157 @@ html, body {
12491249
padding: 4px;
12501250
margin-bottom: 4px;
12511251
}
1252+
}
1253+
1254+
/* Transaction History Specific Styles */
1255+
.transaction-history .ascii-form-table {
1256+
margin: var(--spacing-4) 0;
1257+
}
1258+
1259+
.transaction-history .table-header {
1260+
font-weight: bold;
1261+
text-transform: uppercase;
1262+
font-size: var(--font-size-xs);
1263+
letter-spacing: 0.5px;
1264+
}
1265+
1266+
.transaction-history .table-row {
1267+
border-bottom: 1px solid var(--ascii-neutral-300);
1268+
}
1269+
1270+
.transaction-history .table-row:hover {
1271+
background-color: var(--ascii-neutral-100);
1272+
}
1273+
1274+
.transaction-history .col {
1275+
padding: var(--spacing-2) var(--spacing-3);
1276+
font-size: var(--font-size-sm);
1277+
}
1278+
1279+
.transaction-history .type-badge,
1280+
.transaction-history .status-badge {
1281+
padding: var(--spacing-1) var(--spacing-2);
1282+
background-color: var(--ascii-neutral-200);
1283+
border: 1px solid var(--ascii-neutral-400);
1284+
font-size: var(--font-size-xs);
1285+
font-weight: bold;
1286+
}
1287+
1288+
.transaction-history .amount-value,
1289+
.transaction-history .fiat-value {
1290+
font-weight: bold;
1291+
margin-right: var(--spacing-1);
1292+
}
1293+
1294+
.transaction-history .amount-unit,
1295+
.transaction-history .fiat-currency {
1296+
font-size: var(--font-size-xs);
1297+
color: var(--ascii-neutral-600);
1298+
}
1299+
1300+
.transaction-history .pagination {
1301+
margin: var(--spacing-4) 0;
1302+
justify-content: center;
1303+
}
1304+
1305+
.transaction-history .pagination-info {
1306+
font-size: var(--font-size-sm);
1307+
font-weight: bold;
1308+
margin: 0 var(--spacing-3);
1309+
}
1310+
1311+
.transaction-history .pagination-button {
1312+
font-family: 'Courier New', Courier, monospace !important;
1313+
border: 1px solid var(--ascii-neutral-400);
1314+
background-color: var(--ascii-white);
1315+
color: var(--ascii-neutral-800);
1316+
padding: var(--spacing-1) var(--spacing-2);
1317+
font-size: var(--font-size-xs);
1318+
font-weight: bold;
1319+
cursor: pointer;
1320+
}
1321+
1322+
.transaction-history .pagination-button:disabled {
1323+
background-color: var(--ascii-neutral-200);
1324+
color: var(--ascii-neutral-500);
1325+
cursor: not-allowed;
1326+
}
1327+
1328+
.transaction-history .pagination-button:hover:not(:disabled) {
1329+
background-color: var(--ascii-neutral-100);
1330+
}
1331+
1332+
.ascii-form-message {
1333+
display: flex;
1334+
align-items: center;
1335+
justify-content: center;
1336+
gap: var(--spacing-3);
1337+
padding: var(--spacing-5);
1338+
background-color: var(--ascii-neutral-100);
1339+
border: 1px solid var(--ascii-neutral-400);
1340+
margin: var(--spacing-4) 0;
1341+
font-size: var(--font-size-sm);
1342+
font-weight: bold;
1343+
}
1344+
1345+
.ascii-form-message .message-icon {
1346+
font-size: var(--font-size-lg);
1347+
color: var(--ascii-neutral-600);
1348+
}
1349+
1350+
.ascii-form-actions-right {
1351+
display: flex;
1352+
align-items: center;
1353+
gap: var(--spacing-3);
1354+
}
1355+
1356+
.results-count {
1357+
font-size: var(--font-size-sm);
1358+
color: var(--ascii-neutral-600);
1359+
font-style: italic;
1360+
}
1361+
1362+
/* Button size variant for extra compact buttons */
1363+
.button-xs {
1364+
padding: var(--spacing-1) var(--spacing-2);
1365+
font-size: var(--font-size-xs);
1366+
font-weight: bold;
1367+
text-transform: uppercase;
1368+
}
1369+
1370+
/* Enhanced mobile responsive improvements for transaction history */
1371+
@media (max-width: 768px) {
1372+
.transaction-history .ascii-form-filters {
1373+
flex-direction: column;
1374+
gap: var(--spacing-2);
1375+
}
1376+
1377+
.transaction-history .ascii-form-filters .ascii-field {
1378+
width: 100%;
1379+
}
1380+
1381+
.transaction-history .ascii-form-table .table-header,
1382+
.transaction-history .ascii-form-table .table-row {
1383+
flex-direction: column;
1384+
align-items: stretch;
1385+
}
1386+
1387+
.transaction-history .ascii-form-table .col {
1388+
display: flex;
1389+
justify-content: space-between;
1390+
padding: var(--spacing-1) var(--spacing-3);
1391+
border-bottom: 1px solid var(--ascii-neutral-300);
1392+
}
1393+
1394+
.transaction-history .ascii-form-table .col::before {
1395+
content: attr(data-label);
1396+
font-weight: bold;
1397+
text-transform: uppercase;
1398+
font-size: var(--font-size-xs);
1399+
}
1400+
1401+
.transaction-history .pagination {
1402+
flex-direction: column;
1403+
gap: var(--spacing-2);
1404+
}
12521405
}

0 commit comments

Comments
 (0)