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()));
-					this.error = ruleArray ? validRule?.[1]?.replaceAll('{- name}', firstUpper(this.name?.toString())) : error;
+					const error = ruleArray
+						? 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,32 +213,30 @@ class AppDropdownElement extends BaseComponentElement {
 		};
 
 		return html`
-			<div>
-				<label>
-					${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>
-						</div>
-						${isOpen
-							? html`
-									<div class="dropdown-custom-open" data-target="app-dropdown.dropdowncontainer">
-										<input
-											class="dropdown-custom-search"
-											type="text"
-											value="${searchPhrase || ''}"
-											app-action="input:app-dropdown#phraseChange"
-											autofocus
-										/>
-										<ul class="dropdown-custom-list">
-											${renderItems(items)}
-										</ul>
-									</div>
-							  `
-							: html``}
+			<div class="app-dropdown">
+				${renderMessage(this.label)} ${renderError(this.error)}
+				<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>
 					</div>
-					${error ? html` <div class="h5 text-red">${errorMessage}</div>` : html``}
-				</label>
+					${isOpen
+						? html`
+								<div class="dropdown-custom-open" data-target="app-dropdown.dropdowncontainer">
+									<input
+										class="dropdown-custom-search"
+										type="text"
+										value="${searchPhrase || ''}"
+										id="${this.randId}"
+										app-action="input:app-dropdown#phraseChange"
+										autofocus
+									/>
+									<ul class="dropdown-custom-list">
+										${renderItems(items)}
+									</ul>
+								</div>
+						  `
+						: html``}
+				</div>
 			</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">
-			<slot data-target="app-form.innerSlot"></slot>
-			${renderError(this.error)}${renderSubmit(this.isValid)}${renderCancel(isTrue(this.hasCancel))}
-		</form>`;
+		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)}
+					<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) => {
-			if (displayError) {
-				return html`<span>${error}</span>`;
+		const renderError = (error: string) => {
+			if (error) {
+				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>
-		<td><app-link data-to="/wallet/${item.id}">${item.name}</app-link></td>
+	renderItem = (item): TemplateResult => html`<tr class="col-1">
+		<td><app-link class="wallet-item" data-to="/wallet/${item.id}">${item.name}</app-link></td>
 	</tr>`;
 
 	render = (): TemplateResult => {
-		return html`
-			<div>Wallets</div>
-			<app-pagination data-target="wallet-list.pagination"></app-pagination>
-		`;
+		return html` <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">
-					<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 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,35 +1,18 @@
-.dropdown-custom {
-	text-align: center;
-	text-transform: capitalize;
-	position: relative;
-	div.dropdown-custom-top {
+app-dropdown {
+	.dropdown-custom {
+		text-align: center;
+		text-transform: capitalize;
 		position: relative;
-		background-color: $white;
-		color: $black;
-		border-radius: 2px;
-		cursor: pointer;
-		padding: 5px 0;
-		font-weight: 500;
-		font-size: 16px;
-		border: 1px solid $white;
-		border-radius: 5px;
-		&::after {
-			content: '';
-			position: absolute;
-			right: 0;
-			margin-top: 8px;
-			margin-right: 4px;
-			width: 0;
-			height: 0;
-			border-left: 8px solid transparent;
-			border-right: 8px solid transparent;
-			border-top: 8px solid #2e2e2e;
-		}
-		&.--open {
-			border-bottom-right-radius: 0 !important;
-			border-bottom-left-radius: 0 !important;
-			border-bottom: transparent;
-			margin-bottom: 0 !important;
+		div.dropdown-custom-top {
+			position: relative;
+			background-color: $white;
+			color: $black;
+			border-radius: 2px;
+			cursor: pointer;
+			padding: 5px 0;
+			font-weight: 500;
+			font-size: 16px;
+			border: 1px solid $gray-03;
 			&::after {
 				content: '';
 				position: absolute;
@@ -40,71 +23,97 @@
 				height: 0;
 				border-left: 8px solid transparent;
 				border-right: 8px solid transparent;
-				border-bottom: 8px solid #2e2e2e;
-				border-top: none;
+				border-top: 8px solid #2e2e2e;
 			}
-		}
-		span.dropdown-custom-fieldname {
-			-webkit-touch-callout: none;
-			-webkit-user-select: none;
-			-khtml-user-select: none;
-			-moz-user-select: none;
-			-ms-user-select: none;
-			user-select: none;
-		}
-	}
-	div.dropdown-custom-open {
-		border: 1px solid transparent;
-		position: absolute;
-		width: calc(100% - 2 * 1px);
-		border-top: none;
-		margin-top: 0 !important;
-		background-color: #fbfafa;
-		border-bottom-right-radius: 0.2em;
-		border-bottom-left-radius: 0.2em;
-		font-size: 16px;
-		z-index: 1500;
-		input.dropdown-custom-search {
-			position: relative;
-			box-sizing: border-box;
-			padding: 0;
-			width: calc(100% - 2 * 2px);
-			margin: 2px;
-			background-color: $white;
-			border: 1px solid $white;
-			border-radius: 0.3em;
-			&:hover {
-				border: 1px solid $white;
+			&.--open {
+				border-bottom-right-radius: 0 !important;
+				border-bottom-left-radius: 0 !important;
+				border-bottom: transparent;
+				margin-bottom: 0 !important;
+				&::after {
+					content: '';
+					position: absolute;
+					right: 0;
+					margin-top: 8px;
+					margin-right: 4px;
+					width: 0;
+					height: 0;
+					border-left: 8px solid transparent;
+					border-right: 8px solid transparent;
+					border-bottom: 8px solid #2e2e2e;
+					border-top: none;
+				}
 			}
-		}
-		ul.dropdown-custom-list {
-			padding: 1px 0;
-			max-height: 100px;
-			overflow-y: scroll;
-			&::-webkit-scrollbar {
-				display: none;
-			}
-			-ms-overflow-style: none;
-			scrollbar-width: none;
-			li.dropdown-custom-listitem {
-				margin: 2px;
-				padding: 1px 0;
-				list-style-type: none;
-				color: #0e0d0d;
+			span.dropdown-custom-fieldname {
 				-webkit-touch-callout: none;
 				-webkit-user-select: none;
 				-khtml-user-select: none;
 				-moz-user-select: none;
 				-ms-user-select: none;
 				user-select: none;
-				cursor: pointer;
-				&:hover {
-					background-color: #c6d8ff;
+			}
+		}
+		div.dropdown-custom-open {
+			border: 1px solid $gray-08;
+			position: absolute;
+			width: calc(100% - 2 * 1px);
+			border-top: none;
+			margin-top: 0 !important;
+			background-color: $gray-08;
+			border-bottom-right-radius: 0.2em;
+			border-bottom-left-radius: 0.2em;
+			font-size: 16px;
+			z-index: 1500;
+			input.dropdown-custom-search {
+				position: relative;
+				box-sizing: border-box;
+				padding: 0;
+				width: calc(100% - 2 * 2px);
+				margin: 2px;
+				background-color: $gray-06;
+				border: 1px solid $gray-06;
+				font-size: 11px;
+				border-radius: 0.3em;
+			}
+			ul.dropdown-custom-list {
+				padding: 1px 0;
+				max-height: 100px;
+				overflow-y: scroll;
+				&::-webkit-scrollbar {
+					display: none;
 				}
-				&.--selected {
-					background-color: #d8e4ff;
+				-ms-overflow-style: none;
+				scrollbar-width: none;
+				li.dropdown-custom-listitem {
+					text-align: left;
+					margin: 2px;
+					padding: 1px 0;
+					list-style-type: none;
+					color: $white;
+					-webkit-touch-callout: none;
+					-webkit-user-select: none;
+					-khtml-user-select: none;
+					-moz-user-select: none;
+					-ms-user-select: none;
+					user-select: none;
+					cursor: pointer;
+					&:hover {
+						background-color: $black;
+					}
+					&.--selected {
+						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,20 +1,36 @@
 app-form {
-    form[data-target="app-form.formElement"] {
-        width: 56%;
-        margin: 0 auto;
+	form[data-target='app-form.formElement'] {
+		width: 56%;
+		margin: 0 auto;
 
-        input-field,
-        app-dropdown > .input-main {
-            width: 100%;
-            display: block;
-            input,
-            select {
-                width: 100%;
-                padding: 2px 0;
-                margin: 6px 0;
-                display: block;
-                font-size: 16px;
-            }
-        }
-    }
+		input-field,
+		app-dropdown > .input-main {
+			width: 100%;
+			display: block;
+			input,
+			select {
+				width: 100%;
+				padding: 2px 0;
+				margin: 6px 0;
+				display: block;
+				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,30 +1,51 @@
 app-modal {
-    [data-target="app-modal.modalOverlay"] {
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 1001;
-        background: rgba(0, 0, 0, 0.5);
-        overflow-x: auto;
-        overflow-y: auto;
+	[data-target='app-modal.modalOverlay'] {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 1001;
+		background: rgba(0, 0, 0, 0.5);
+		overflow-x: auto;
+		overflow-y: auto;
 
-        [data-target="app-modal.modalContent"] {
-            position: absolute;
-            z-index: 1005;
-            width: 960px;
-            min-height: 320px;
-            max-height: 560px;
-            padding-bottom: 10px;
-            margin: 0;
-            top: 50%;
-            left: 50%;
-            -ms-transform: translate(-50%, -50%);
-            transform: translate(-50%, -50%);
-            background: $gray-08;
-            box-shadow: 1px 1px 5px -5px #868686;
-            border-radius: 3px;
-        }
-    }
+		[data-target='app-modal.modalContent'] {
+			position: absolute;
+			z-index: 1005;
+			width: 960px;
+			min-height: 160px;
+			max-height: 560px;
+			padding-bottom: 10px;
+			margin: 0;
+			top: 50%;
+			left: 50%;
+			-ms-transform: translate(-50%, -50%);
+			transform: translate(-50%, -50%);
+			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;
-    }
+	&.--title {
+		font-size: 28px;
+		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;
+		}
+	}
+}