Settings component reformated >> Link to Xero button

src/app/header/header.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar color="primary">
 	<span align="center">
-		<img class="logo" src="/assets/logo-new-white.png" height="40px" />
+		<img class="logo" src="/assets/logo-new-white_01.png" height="40px" />
 	</span>
 	<span class="spacer"></span>
 	<span align="center">

src/app/login/login.component.html

@@ -1,6 +1,6 @@
 <div align="center" class="text">
 	<mat-card class="coolcard">
-		<img src="/assets/logo-new-white.png" height="120px" />
+		<img src="/assets/logo-new-white_01.png" height="120px" />
 	<p class="text">Last block seen: <span class="numbers">{{ heightUpdate | async }}</span></p>
 	</mat-card>
 </div>

src/app/settings/settings.component.css

@@ -23,3 +23,8 @@
 .mat-slide-toggle-content {
 	font-family: 'Spartan', sans-serif;
 }
+
+.full-width {
+  width: 100%;
+}
+

src/app/settings/settings.component.html

@@ -1,50 +1,58 @@
 
 <div class="settings-title">Settings</div>
 
-<div class="container" style="margin-top: 10px;">
+<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">
+		<mat-tab label="Main" style="height: 400px;">
-			<mat-dialog-content [formGroup]="settingsForm">
+			<div class="container" style="margin-bottom:  20px;">
-				<mat-form-field  class="settings-field" [style.width.%]="100">
+				<mat-dialog-content [formGroup]="settingsForm">
-					<mat-label>Name</mat-label>
+					<mat-form-field  class="settings-field" [style.width.%]="100">
-					<input matInput 
+						<mat-label>Name</mat-label>
-						   width="100%"
+						<input matInput 
-						   placeholder="Name" 
+							   width="100%"
-						   formControlName="name">
+							   placeholder="Name" 
-				</mat-form-field>
+							   formControlName="name">
-				<mat-form-field [style.width.%]="100" >
+					</mat-form-field>
-					<mat-label>Currency</mat-label>
+					<mat-form-field [style.width.%]="100" >
-					<mat-select formControlName="currency">
+						<mat-label>Currency</mat-label>
-						<mat-option *ngFor="let coin of coins" 
+						<mat-select formControlName="currency">
-								[value]="coin.symbol">
+							<mat-option *ngFor="let coin of coins" 
-							{{coin.label}}
+									[value]="coin.symbol">
-						</mat-option>
+								{{coin.label}}
-					</mat-select>
+							</mat-option>
-				</mat-form-field>
+						</mat-select>
-				<mat-slide-toggle formControlName="useZats" 
+					</mat-form-field>
-								  class="settings-toggle"
+					<mat-slide-toggle formControlName="useZats" 
-								  (change)="onChange($event)">
+									  class="settings-toggle"
-					Use zatoshis?
+									  (change)="onChange($event)">
-				</mat-slide-toggle>
+						Use zatoshis?
-				<pre></pre>
+					</mat-slide-toggle>
-				<mat-slide-toggle formControlName="useVKey" 
+					<pre></pre>
-								  class="settings-toggle"
+					<mat-slide-toggle formControlName="useVKey" 
-								  (change)="onChangeVKeyOn($event)">
+									  class="settings-toggle"
-					Confirm payments?
+									  (change)="onChangeVKeyOn($event)">
-				</mat-slide-toggle>
+						Confirm payments?
-				<pre></pre>
+					</mat-slide-toggle>
-				<mat-form-field [style.width.%]="100">
+					<pre></pre>
-					<mat-label>Viewing key</mat-label>
+					<mat-form-field class="full-width" 
-					<input matInput placeholder="Your wallet viewing key" 
+									appearance="fill">
-									formControlName="vKey">
+						<mat-label>Viewing key</mat-label>
-				</mat-form-field>
+						<textarea matInput placeholder="Your wallet viewing key" 
+								formControlName="vKey">
+						</textarea>
+					</mat-form-field>
 
-			</mat-dialog-content>
+				</mat-dialog-content>
+			</div>
 
-			<mat-dialog-actions style="display: flex;
+			<div class="container" 
-									   justify-content: space-between;
+			 	 style="display: flex;
-									   align-items: center;
+						justify-content: space-between;
-									   margin-top: 12px;">
+						align-items: center;">
 				<button mat-raised-button 
 						(click)="close()">
 					Cancel
@@ -54,12 +62,26 @@
 						(click)="save()">
 					Save
 				</button>
-			</mat-dialog-actions>
+			</div>
+			<div style="height: 20px;
+						margin-top: 10px;">
+			</div>			
 		</mat-tab>
-		<mat-tab label="Advanced">
+		<mat-tab label="Advanced"
-			<a mat-raised-button color="primary" href="{{this.xeroLink}}">
+				 style="align-items: center;">
-				Link to Xero
+			<div style="height: 20px;
-			</a>
+						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>

src/app/settings/settings.component.ts

@@ -69,6 +69,7 @@ export class SettingsComponent implements OnInit {
 	}
 
 	ngOnInit() {
+	      this.settingsForm.get('vKey')!.disable();
 	}
 
 	safeURL(s: string){