zgo/src/app/settings/settings.component.html

<div class="settings-title">Settings</div>

<div class="container" 
	 style="margin-top: 10px;
			height: 430px;
			margin-left: 10px;
			margin-right: 10px;">
	<mat-tab-group mat-tab-align-tabs="start">
		<mat-tab label="Main" style="height: 400px;">
			<div class="container" style="margin-bottom:  20px;">
				<mat-dialog-content [formGroup]="settingsForm">
					<mat-form-field  class="settings-field" [style.width.%]="100">
						<mat-label>Name</mat-label>
						<input matInput 
							   width="100%"
							   placeholder="Name" 
							   formControlName="name">
					</mat-form-field>
					<mat-form-field [style.width.%]="100" >
						<mat-label>Currency</mat-label>
						<mat-select formControlName="currency">
							<mat-option *ngFor="let coin of coins" 
									[value]="coin.symbol">
								{{coin.label}}
							</mat-option>
						</mat-select>
					</mat-form-field>
					<mat-slide-toggle formControlName="useZats" 
									  class="settings-toggle"
									  (change)="onChange($event)">
						Use zatoshis?
					</mat-slide-toggle>
					<pre></pre>
					<mat-slide-toggle formControlName="useVKey" 
									  class="settings-toggle"
									  (change)="onChangeVKeyOn($event)">
						Confirm payments?
					</mat-slide-toggle>
					<pre></pre>
					<mat-form-field class="full-width" 
									appearance="fill">
						<mat-label>Viewing key</mat-label>
						<textarea matInput placeholder="Your wallet viewing key" 
								formControlName="vKey">
						</textarea>
					</mat-form-field>

				</mat-dialog-content>
			</div>

			<div class="container" 
			 	 style="display: flex;
						justify-content: space-between;
						align-items: center;">
				<button mat-raised-button 
						(click)="close()">
					Cancel
				</button>
				<button mat-raised-button 
						color="primary" 
						(click)="save()">
					Save
				</button>
			</div>
			<div style="height: 20px;
						margin-top: 10px;">
			</div>			
		</mat-tab>
		<mat-tab label="Advanced"
				 style="align-items: center;">
			<div style="height: 20px;
						margin-top: 10px;">
			</div>			
			<div class="container" 
			     style="height: 300;">
			    <p  style="text-align:center">
					<a mat-raised-button   	 
					   color="primary" 
					   href="{{this.xeroLink}}">
						Link to Xero
					</a>
				</p>
			</div>	
		</mat-tab>
	</mat-tab-group>
</div>