styled wallet headers and transaction tables

src/components/app-pagination/AppPaginationElement.ts

@@ -10,6 +10,8 @@ class AppPaginationElement extends BaseComponentElement {
 	@attr rpp: number;
 	@attr totalItems: number;
 	@attr autoInit: string;
+	@attr tableLayout: string = 'transactions-table';
+	initial: boolean = false;
 
 	private customRenderItems: () => TemplateResult;
 	private customRenderItem: (item: any) => TemplateResult;
@@ -69,6 +71,8 @@ class AppPaginationElement extends BaseComponentElement {
 		} catch (err) {
 			this.loader?.stop?.();
 			console.error(err);
+		} finally {
+			this.initial = true;
 		}
 	};
 
@@ -94,20 +98,29 @@ class AppPaginationElement extends BaseComponentElement {
 
 		const renderItem = this.customRenderItem
 			? this.customRenderItem
-			: (item) => html`<tr>
+			: (item, iter) => html`<tr>
-					<td>${item.description}</td>
+					<td class="--left">${iter + 1 + rpp * (page - 1)}</td>
-					<td>${item.amount}</td>
+					<td class="--left">${item.description}</td>
+					<td class="balance-cell --right">
+						<span class="balance ${item.amount > 0 ? '--positive' : '--negative'}">
+							${Number(item.amount).toLocaleString('en-US', {
+								maximumFractionDigits: 2,
+								minimumFractionDigits: 2,
+							})}
+						</span>
+						<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
+					</td>
 			  </tr>`;
 
 		const renderItems = this.customRenderItems
 			? this.customRenderItems
 			: () => {
-					if (this.loader && this.loader.loading) {
+					if (this.loader && this.loader.loading && !this.initial) {
-						return html`<circle-loader></circle-loader>`;
+						return html``;
 					} else {
 						if (items?.length > 0) {
-							return html`<table>
+							return html`<table class="${this.tableLayout}">
-								${items?.map((item) => renderItem(item))}
+								${items?.map((item, iter) => renderItem(item, iter))} ${renderPagination()}
 							</table>`;
 						}
 						return html``;
@@ -118,7 +131,8 @@ class AppPaginationElement extends BaseComponentElement {
 			if (totalItems > items?.length) {
 				const pageRange = Math.ceil(totalItems / rpp);
 				return html`
-					<div>
+					<div class="paginate">
+						<div class="--footer">
 							<button
 								class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
 								app-action="click:app-pagination#pageBack"
@@ -132,11 +146,12 @@ class AppPaginationElement extends BaseComponentElement {
 								Next
 							</button>
 						</div>
+					</div>
 				`;
 			}
 		};
 
-		return html`<div>${renderItems()} ${renderPagination()}</div>`;
+		return html`<div class="app-pagination">${renderItems()}</div>`;
 	};
 }
 

src/components/wallet-header/WalletHeaderElement.ts

@@ -11,6 +11,7 @@ class WalletHeaderElement extends BaseComponentElement {
 	@attr nextMonth: number;
 	@attr currency: string;
 	@attr custom: string;
+	initial: boolean = false;
 
 	fetchFunc: Function = () => {};
 	constructor() {
@@ -38,20 +39,26 @@ class WalletHeaderElement extends BaseComponentElement {
 		} catch (err) {
 			this.loader?.stop?.();
 			console.error(err);
+		} finally {
+			this.initial = true;
 		}
 	};
 
 	render = (): TemplateResult => {
 		const { currentBalance, currency, lastMonth, nextMonth } = this;
 
-		const renderItem = (header, balance, currency) => html`<div>
+		const renderItem = (header, balance, currency) => html`<div class="header-item">
-			<div>${header}</div>
+			<div class="--header">${header}</div>
-			<div><span>${balance}</span><span>${currency}</span></div>
+			<div class="--content">
+				<span class="--balance ${balance > 0 ? '--positive' : '--negative'}"
+					>${Number(balance).toLocaleString('en-US', { maximumFractionDigits: 2, minimumFractionDigits: 2 })}</span
+				><span class="--currency">(${currency})</span>
+			</div>
 		</div>`;
 
 		const renderHeader = () => {
-			if (this.loader && this.loader.loading) {
+			if (this.loader && this.loader.loading && !this.initial) {
-				return html`<circle-loader></circle-loader>`;
+				return html``;
 			}
 			return html`${renderItem('Last Month', lastMonth, currency)}${renderItem(
 				'Current Balance',
@@ -60,7 +67,7 @@ class WalletHeaderElement extends BaseComponentElement {
 			)}${renderItem('Next Month', nextMonth, currency)}`;
 		};
 
-		return html`<div>${renderHeader()}</div>`;
+		return html`<div class="wallet-header">${renderHeader()}</div>`;
 	};
 }
 

src/pages/transaction-create/TransactionCreateElement.ts

@@ -65,6 +65,7 @@ class TransactionCreateElement extends BasePageElement {
 
 			if (response?.id) {
 				this.appMain.triggerWalletUpdate();
+				this.appMain.pushToast('success', 'Transaction created successfully!');
 				this.routerService.goTo('/history', {
 					walletId: response.id,
 				});

src/pages/wallet-create/WalletCreateElement.ts

@@ -48,6 +48,7 @@ class WalletCreateElement extends BasePageElement {
 
 			if (response?.id) {
 				this.appMain.triggerWalletUpdate();
+				this.appMain.pushToast('success', 'Wallet created successfully!');
 				this.routerService.goTo('/wallet/:walletId', {
 					walletId: response.id,
 				});

src/styles/app-pagination/app-pagination.scss

@@ -0,0 +1,57 @@
+app-pagination {
+	.app-pagination {
+		table.transactions-table {
+			margin: 0 0 3em 0;
+			padding: 0;
+			width: 100%;
+			background-color: $gray-09;
+			border: 1px solid $gray-09;
+			border-radius: 4px;
+			display: block;
+			tr {
+				background-color: $gray-07;
+				padding: 4px 12px;
+				border-radius: 4px;
+				display: grid;
+				grid-template-columns: auto 1fr auto;
+				margin: 6px 8px;
+				td,
+				th {
+					margin: 0 12px;
+					overflow: hidden; // Or flex might break
+					list-style: none;
+					&.--left {
+						text-align: left;
+					}
+					&.--right {
+						text-align: right;
+					}
+					&.balance-cell {
+						.balance {
+							display: inline;
+							&.--positive {
+								color: $green-01;
+							}
+							&.--negative {
+								color: $red-01;
+							}
+						}
+						.currency {
+							display: inline;
+							color: $gray-10;
+						}
+					}
+				}
+			}
+			.paginate {
+				position: relative;
+				height: 33px;
+				margin-bottom: 7px;
+				.--footer {
+					position: absolute;
+					right: 7px;
+				}
+			}
+		}
+	}
+}

src/styles/app-pagination/index.scss

@@ -0,0 +1 @@
+@import './app-pagination.scss';

src/styles/core/button.scss

@@ -24,14 +24,15 @@
 
 	&:disabled,
 	&.disabled,
-    &[aria-disabled="true"] {
+	&[aria-disabled='true'] {
 		cursor: default;
 		background-position: 0 0;
+		background-color: $gray-08 !important;
 	}
 
 	&:active,
 	&.selected,
-    &[aria-selected="true"] {
+	&[aria-selected='true'] {
 		background-image: none;
 	}
 
@@ -106,7 +107,7 @@
 	}
 
 	&:disabled,
-    &[aria-disabled="true"] {
+	&[aria-disabled='true'] {
 		color: $gray-08;
 		cursor: default;
 
@@ -137,16 +138,16 @@
 				background-color: nth($value, 1);
 				color: nth($value, 2);
 				&:hover {
-                    @if ($color == "black") {
+					@if ($color == 'black') {
 						background-color: lighten(nth($value, 1), 20%);
 						color: nth($value, 2);
-                    } @else if ($color == "white") {
+					} @else if ($color == 'white') {
 						background-color: darken(nth($value, 1), 20%);
 						color: nth($value, 2);
-                    } @else if ($color == "yellow") {
+					} @else if ($color == 'yellow') {
 						background-color: darken(nth($value, 1), 10%);
 						color: lighten(nth($value, 2), 5%);
-                    } @else if (str-index($color, "light")) {
+					} @else if (str-index($color, 'light')) {
 						background-color: darken(nth($value, 1), 20%);
 						color: lighten(nth($value, 2), 5%);
 					} @else {

src/styles/main.scss

@@ -11,3 +11,5 @@
 @import './app-dropdown/index.scss';
 @import './input-field/index.scss';
 @import './toast-portal/index.scss';
+@import './wallet-header/index.scss';
+@import './app-pagination/index.scss';

src/styles/toast-portal/toast-portal.scss

@@ -26,7 +26,17 @@ toast-portal {
 					background-color: $gray-07;
 					border: 1px solid $gray-08;
 				}
-				.toast-text {
+				&.--success {
+					background-color: $green-07;
+					border: 1px solid $green-08;
+				}
+				&.--error {
+					background-color: $red-07;
+					border: 1px solid $red-08;
+				}
+				&.--warning {
+					background-color: $yellow-07;
+					border: 1px solid $yellow-08;
 				}
 			}
 		}

src/styles/wallet-header/index.scss

@@ -0,0 +1 @@
+@import './wallet-header.scss';

src/styles/wallet-header/wallet-header.scss

@@ -0,0 +1,44 @@
+wallet-header {
+	.wallet-header {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		justify-items: center;
+		gap: 15px 10px;
+		.header-item {
+			display: inline;
+			grid: 1;
+			width: 250px;
+			height: 132px;
+			background-color: $black;
+			border: 1px solid $black;
+			border-radius: 3px;
+			.--header {
+				margin: 5px auto;
+				width: 100%;
+				text-align: center;
+				text-transform: uppercase;
+				font-size: 20px;
+				color: $gray-04;
+			}
+			.--content {
+				.--balance {
+					display: block;
+					font-size: 30px;
+					text-align: center;
+					margin: 22px 0 4px 0;
+					&.--positive {
+						color: $green-01;
+					}
+					&.--negative {
+						color: $red-01;
+					}
+				}
+				.--currency {
+					display: block;
+					text-align: center;
+					color: $gray-08;
+				}
+			}
+		}
+	}
+}