styling rest of page

src/common/core/Validator/Validator.ts

@@ -12,7 +12,7 @@ class Validator {
 	}
 
 	get name() {
-		return this.input?.name;
+		return this.input?.label ? this.input?.label : this.input?.name;
 	}
 
 	get error() {
@@ -69,13 +69,17 @@ class Validator {
 					}
 				}
 				if (!valid) {
-					const error = validatorErrors[rule]?.replaceAll('{- name}', firstUpper(this.name?.toString()));
+					const error = ruleArray
-					this.error = ruleArray ? validRule?.[1]?.replaceAll('{- name}', firstUpper(this.name?.toString())) : error;
+						? validRule?.[1]?.replaceAll('{- name}', firstUpper(this.name?.toString()))
+						: validatorErrors[rule]?.replaceAll('{- name}', firstUpper(this.name?.toString()));
+					if (error) {
+						this.error = error;
+					}
 				}
 				return valid;
 			});
 		const _return = validArr?.includes(false);
-		if (_return) {
+		if (!_return) {
 			this.error = null;
 		}
 		this.valid = !_return;

src/components/app-dropdown/AppDropdownElement.ts

@@ -143,6 +143,10 @@ class AppDropdownElement extends BaseComponentElement {
 
 	setOpen = (isOpen) => {
 		this.isOpen = isOpen;
+		if (!isOpen) {
+			this.validate();
+			this.update();
+		}
 	};
 
 	openDropdown = (e?) => {
@@ -152,6 +156,7 @@ class AppDropdownElement extends BaseComponentElement {
 
 	closeDropdown = (e?) => {
 		if (e?.target?.closest('app-dropdown')?.randId == this.randId) return;
+		if (!this.isOpen) return;
 		this.setOpen(false);
 	};
 
@@ -166,8 +171,8 @@ class AppDropdownElement extends BaseComponentElement {
 
 	itemSelected = (e) => {
 		const value = (e.target as HTMLSpanElement).getAttribute('data-value');
-		this.setOpen(false);
 		this.setValue(value);
+		this.setOpen(false);
 		this.appForm?.inputChange(e);
 	};
 
@@ -179,6 +184,20 @@ class AppDropdownElement extends BaseComponentElement {
 	render = () => {
 		const { label, error, errorMessage, isOpen, searchPhrase, items, selectedItem, displaykey, valuekey } = this;
 
+		const renderMessage = (label: string) => {
+			if (label) {
+				return html`<label app-action="click:app-dropdown#openDropdown">${label}${this.required ? ' (*)' : ''}</label>`;
+			}
+			return html``;
+		};
+
+		const renderError = (error: string) => {
+			if (error) {
+				return html`<div class="input-error"><span>${error}</span></div>`;
+			}
+			return html``;
+		};
+
 		const renderItem = (item) => {
 			return html` <li
 				class="dropdown-custom-listitem ${selectedItem?.[valuekey] == item[valuekey] ? '--selected' : ''}"
@@ -194,9 +213,8 @@ class AppDropdownElement extends BaseComponentElement {
 		};
 
 		return html`
-			<div>
+			<div class="app-dropdown">
-				<label>
+				${renderMessage(this.label)} ${renderError(this.error)}
-					${label ? html`<div>${label}</div>` : html``}
 				<div class="dropdown-custom">
 					<div class="dropdown-custom-top${isOpen ? ' --open' : ''}" app-action="click:app-dropdown#toggleDropdown">
 						<span class="dropdown-custom-fieldname">${selectedItem ? selectedItem[displaykey] : 'Select'}</span>
@@ -208,6 +226,7 @@ class AppDropdownElement extends BaseComponentElement {
 										class="dropdown-custom-search"
 										type="text"
 										value="${searchPhrase || ''}"
+										id="${this.randId}"
 										app-action="input:app-dropdown#phraseChange"
 										autofocus
 									/>
@@ -218,8 +237,6 @@ class AppDropdownElement extends BaseComponentElement {
 						  `
 						: html``}
 				</div>
-					${error ? html` <div class="h5 text-red">${errorMessage}</div>` : html``}
-				</label>
 			</div>
 		`;
 	};

src/components/app-form/AppFormElement.ts

@@ -115,9 +115,11 @@ class AppFormElement extends BaseComponentElement {
 	render = (): TemplateResult => {
 		const renderSubmit = (valid: boolean) => {
 			if (!valid) {
-				return html` <button type="submit" disabled>Submit</button> `;
+				return html`
+					<button class="btn btn-squared btn-primary --submit disabled" type="submit" disabled>Submit</button>
+				`;
 			}
-			return html` <button type="submit">Submit</button> `;
+			return html` <button class="btn btn-squared btn-primary --submit" type="submit">Submit</button> `;
 		};
 		const renderError = (error: string) => {
 			if (error) {
@@ -127,15 +129,24 @@ class AppFormElement extends BaseComponentElement {
 		};
 		const renderCancel = (hasCancel: boolean) => {
 			if (hasCancel) {
-				return html`<button type="button" app-action="click:app-form#goBack">Cancel</button>`;
+				return html`<button class="btn btn-squared btn-red --cancel" type="button" app-action="click:app-form#goBack">
+					Cancel
+				</button>`;
 			}
 			return html``;
 		};
 
-		return html`<form app-action="submit:app-form#onSubmit" data-target="app-form.formElement">
+		return html`
+			<div class="app-form">
+				<form app-action="submit:app-form#onSubmit" data-target="app-form.formElement">
 					<slot data-target="app-form.innerSlot"></slot>
-			${renderError(this.error)}${renderSubmit(this.isValid)}${renderCancel(isTrue(this.hasCancel))}
+					${renderError(this.error)}
-		</form>`;
+					<div class="form-buttons">
+						<div class="button-content">${renderSubmit(this.isValid)}${renderCancel(isTrue(this.hasCancel))}</div>
+					</div>
+				</form>
+			</div>
+		`;
 	};
 }
 

src/components/app-link/AppLinkElement.ts

@@ -52,9 +52,14 @@ class AppLinkElement extends BaseComponentElement {
 
 	render = (): TemplateResult => {
 		return html`${this.disabled
-			? html`<a class="btn btn-link btn-disabled" data-target="app-link.main" style="color:grey">${this.title}</a>`
+			? html`<a
+					class="btn btn-link btn-disabled${this.className ? ` ${this.className}` : ''}"
+					data-target="app-link.main"
+					style="color:grey"
+					>${this.title}</a
+			  >`
 			: html`<a
-					class="btn btn-link"
+					class="btn btn-link${this.className ? ` ${this.className}` : ''}"
 					data-target="app-link.main"
 					app-action="click:app-link#goTo"
 					href="${this.to}"

src/components/app-menu/AppMenuElement.ts

@@ -75,7 +75,6 @@ class AppMenuElement extends BaseComponentElement {
 			this.appMain.closeModal();
 		} else {
 			this.appMain.createModal('wallet-create');
-			this.appMain.pushToast(null, 'Da');
 		}
 	};
 

src/components/app-pagination/AppPaginationElement.ts

@@ -96,7 +96,6 @@ class AppPaginationElement extends BaseComponentElement {
 
 	render = (): TemplateResult => {
 		const { rpp, totalItems, page, items } = this;
-		console.log(items);
 
 		const renderItem = this.customRenderItem
 			? this.customRenderItem
@@ -139,7 +138,9 @@ class AppPaginationElement extends BaseComponentElement {
 				const pageRange = Math.ceil(totalItems / rpp);
 				return html`
 					<div class="paginate">
+						<span class="--total">${totalItems} Total Items</span>
 						<div class="--footer">
+							<span class="--pages">Page ${page} of ${pageRange}</span>
 							<button
 								class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
 								app-action="click:app-pagination#pageBack"

src/components/input-field/InputFieldElement.ts

@@ -79,9 +79,9 @@ class InputFieldElement extends BaseComponentElement {
 			return html``;
 		};
 
-		const renderError = (displayError: boolean, error: string) => {
+		const renderError = (error: string) => {
-			if (displayError) {
+			if (error) {
-				return html`<span>${error}</span>`;
+				return html`<div class="input-error"><span>${error}</span></div>`;
 			}
 			return html``;
 		};
@@ -90,6 +90,7 @@ class InputFieldElement extends BaseComponentElement {
 			return html` <input
 				type="${this.type}"
 				data-target="input-field.inp"
+				id="${this.randId}"
 				app-action="
                     input:input-field#inputChange
                     blur:input-field#validateDisplay
@@ -98,7 +99,7 @@ class InputFieldElement extends BaseComponentElement {
 		};
 
 		return html`<div class="input-main" data-target="input-field.main">
-			${renderMessage(this.label)} ${renderInput(this.type)} ${renderError(this.displayError, this.error)}
+			${renderMessage(this.label)}${renderError(this.error)} ${renderInput(this.type)}
 		</div>`;
 	};
 }

src/pages/home-page/HomePageElement.ts

@@ -42,18 +42,8 @@ class HomePageElement extends BasePageElement {
 		this.walletHeader.nextMonth = header.nextMonth || '0';
 	};
 
-	openModal = (): void => {
-		const _modal = this.appMain.appModal;
-		if (_modal) {
-			this.appMain.closeModal();
-		} else {
-			this.appMain.createModal('wallet-create');
-		}
-	};
-
 	render = (): TemplateResult => {
 		return html`
-			<button app-action="click:home-page#openModal">New Wallet</button>
 			<wallet-header
 				data-target="home-page.walletHeader"
 				data-current-balance="0"

src/pages/transaction-create/TransactionCreateElement.ts

@@ -152,7 +152,6 @@ class TransactionCreateElement extends BasePageElement {
 		};
 
 		return html`
-			<div>Create wallet</div>
 			<app-form
 				data-custom="transaction-create#onSubmit"
 				data-has-cancel="true"

src/pages/wallet-create/WalletCreateElement.ts

@@ -70,7 +70,6 @@ class WalletCreateElement extends BasePageElement {
 
 	render = (): TemplateResult => {
 		return html`
-			<div>Create wallet</div>
 			<app-form data-custom="wallet-create#onSubmit" data-has-cancel="true">
 				<input-field
 					data-type="text"

src/pages/wallet-list/WalletListElement.ts

@@ -33,15 +33,12 @@ class WalletListElement extends BasePageElement {
 		}
 	};
 
-	renderItem = (item): TemplateResult => html`<tr>
+	renderItem = (item): TemplateResult => html`<tr class="col-1">
-		<td><app-link data-to="/wallet/${item.id}">${item.name}</app-link></td>
+		<td><app-link class="wallet-item" data-to="/wallet/${item.id}">${item.name}</app-link></td>
 	</tr>`;
 
 	render = (): TemplateResult => {
-		return html`
+		return html` <app-pagination data-target="wallet-list.pagination"></app-pagination> `;
-			<div>Wallets</div>
-			<app-pagination data-target="wallet-list.pagination"></app-pagination>
-		`;
 	};
 }
 

src/pages/wallet-page/WalletPageElement.ts

@@ -114,8 +114,10 @@ class WalletPageElement extends BasePageElement {
 		const renderWallet = () => {
 			if (this.routerService?.routerState?.data?.walletId) {
 				return html`<div class="wallet-buttons">
+					<div class="button-group">
 						<button class="btn btn-squared btn-red" app-action="click:wallet-page#newExpense">New Expense</button>
 						<button class="btn btn-squared btn-green" app-action="click:wallet-page#newGain">New Gain</button>
+					</div>
 				</div>`;
 			}
 			return html``;

src/styles/app-dropdown/app-dropdown.scss

@@ -1,4 +1,5 @@
-.dropdown-custom {
+app-dropdown {
+	.dropdown-custom {
 		text-align: center;
 		text-transform: capitalize;
 		position: relative;
@@ -11,8 +12,7 @@
 			padding: 5px 0;
 			font-weight: 500;
 			font-size: 16px;
-		border: 1px solid $white;
+			border: 1px solid $gray-03;
-		border-radius: 5px;
 			&::after {
 				content: '';
 				position: absolute;
@@ -54,12 +54,12 @@
 			}
 		}
 		div.dropdown-custom-open {
-		border: 1px solid transparent;
+			border: 1px solid $gray-08;
 			position: absolute;
 			width: calc(100% - 2 * 1px);
 			border-top: none;
 			margin-top: 0 !important;
-		background-color: #fbfafa;
+			background-color: $gray-08;
 			border-bottom-right-radius: 0.2em;
 			border-bottom-left-radius: 0.2em;
 			font-size: 16px;
@@ -70,12 +70,10 @@
 				padding: 0;
 				width: calc(100% - 2 * 2px);
 				margin: 2px;
-			background-color: $white;
+				background-color: $gray-06;
-			border: 1px solid $white;
+				border: 1px solid $gray-06;
+				font-size: 11px;
 				border-radius: 0.3em;
-			&:hover {
-				border: 1px solid $white;
-			}
 			}
 			ul.dropdown-custom-list {
 				padding: 1px 0;
@@ -87,10 +85,11 @@
 				-ms-overflow-style: none;
 				scrollbar-width: none;
 				li.dropdown-custom-listitem {
+					text-align: left;
 					margin: 2px;
 					padding: 1px 0;
 					list-style-type: none;
-				color: #0e0d0d;
+					color: $white;
 					-webkit-touch-callout: none;
 					-webkit-user-select: none;
 					-khtml-user-select: none;
@@ -99,12 +98,22 @@
 					user-select: none;
 					cursor: pointer;
 					&:hover {
-					background-color: #c6d8ff;
+						background-color: $black;
 					}
 					&.--selected {
-					background-color: #d8e4ff;
+						background-color: $gray-10;
 					}
 				}
 			}
 		}
+	}
+	label {
+		cursor: pointer;
+		display: block;
+		margin: 3px 0;
+	}
+	.input-error {
+		color: $red-04;
+		margin: 3px 0;
+	}
 }

src/styles/app-form/app-form.scss

@@ -1,5 +1,5 @@
 app-form {
-    form[data-target="app-form.formElement"] {
+	form[data-target='app-form.formElement'] {
 		width: 56%;
 		margin: 0 auto;
 
@@ -16,5 +16,21 @@ app-form {
 				font-size: 16px;
 			}
 		}
+		.form-buttons {
+			.button-content {
+				button {
+					&.--submit {
+						background-color: $blue-08;
+						color: $white;
+						&:hover {
+							background-color: $blue-09;
+						}
+						&.--disabled {
+							background-color: $gray-09;
+						}
+					}
+				}
+			}
+		}
 	}
 }

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

@@ -67,9 +67,19 @@ app-pagination {
 				position: relative;
 				height: 33px;
 				margin-bottom: 7px;
+				.--total {
+					position: absolute;
+					left: 7px;
+					bottom: 9px;
+					color: $gray-05;
+				}
 				.--footer {
 					position: absolute;
 					right: 7px;
+					.--pages {
+						margin-right: 7px;
+						color: $gray-05;
+					}
 				}
 			}
 		}

src/styles/input-field/input-field.scss

@@ -1,8 +1,17 @@
 input-field {
+	label {
+		cursor: pointer;
+	}
 	input {
 		width: 100%;
 		box-sizing: border-box;
 		margin: 0;
-		padding: 0;
+		padding: 5px 0 !important;
+		border: 1px solid $gray-03;
+		border-radius: 2px;
+	}
+	.input-error {
+		color: $red-04;
+		margin: 3px 0;
 	}
 }

src/styles/layout/index.scss

@@ -1 +1,2 @@
-@import "./menu-layout.scss";
+@import './menu-layout.scss';
+@import './initial-layout.scss';

src/styles/layout/initial-layout.scss

@@ -0,0 +1,5 @@
+initial-layout {
+	[data-target='initial-layout.appPage'] {
+		margin: 0 32px;
+	}
+}

src/styles/main.scss

@@ -13,3 +13,4 @@
 @import './toast-portal/index.scss';
 @import './wallet-header/index.scss';
 @import './app-pagination/index.scss';
+@import './wallet-list/index.scss';

src/styles/modal/modal.scss

@@ -1,5 +1,5 @@
 app-modal {
-    [data-target="app-modal.modalOverlay"] {
+	[data-target='app-modal.modalOverlay'] {
 		position: fixed;
 		top: 0;
 		bottom: 0;
@@ -10,11 +10,11 @@ app-modal {
 		overflow-x: auto;
 		overflow-y: auto;
 
-        [data-target="app-modal.modalContent"] {
+		[data-target='app-modal.modalContent'] {
 			position: absolute;
 			z-index: 1005;
 			width: 960px;
-            min-height: 320px;
+			min-height: 160px;
 			max-height: 560px;
 			padding-bottom: 10px;
 			margin: 0;
@@ -22,9 +22,30 @@ app-modal {
 			left: 50%;
 			-ms-transform: translate(-50%, -50%);
 			transform: translate(-50%, -50%);
-            background: $gray-08;
+			background: $gray-05;
+			color: $black;
 			box-shadow: 1px 1px 5px -5px #868686;
 			border-radius: 3px;
+
+			.page {
+				&.--title {
+					margin-top: 4px;
+					margin-left: 4px;
+				}
+			}
+
+			app-form {
+				.app-form {
+					margin-bottom: 64px;
+					.form-buttons {
+						.button-content {
+							position: absolute;
+							left: 4px;
+							bottom: 4px;
+						}
+					}
+				}
+			}
 		}
 	}
 }

src/styles/page/page.scss

@@ -1,6 +1,6 @@
 .page {
 	&.--title {
 		font-size: 28px;
-        margin: 8px 0;
+		margin: 32px 0;
 	}
 }

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

@@ -3,6 +3,7 @@ wallet-header {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
 		justify-items: center;
+		margin: 32px 0;
 		gap: 15px 10px;
 		.header-item {
 			display: inline;
@@ -42,3 +43,13 @@ wallet-header {
 		}
 	}
 }
+
+.wallet-buttons {
+	position: relative;
+	height: 42px;
+	.button-group {
+		position: absolute;
+		top: 5px;
+		right: 0;
+	}
+}

src/styles/wallet-list/index.scss

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

src/styles/wallet-list/wallet-list.scss

@@ -0,0 +1,9 @@
+wallet-list {
+	.wallet-item {
+		color: $white !important;
+		text-decoration: none !important;
+		&:hover {
+			text-decoration: underline !important;
+		}
+	}
+}