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,9 +1,14 @@
 
 <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;">
+			<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>
@@ -33,18 +38,21 @@
 						Confirm payments?
 					</mat-slide-toggle>
 					<pre></pre>
-				<mat-form-field [style.width.%]="100">
+					<mat-form-field class="full-width" 
+									appearance="fill">
 						<mat-label>Viewing key</mat-label>
-					<input matInput placeholder="Your wallet viewing key" 
+						<textarea matInput placeholder="Your wallet viewing key" 
 								formControlName="vKey">
+						</textarea>
 					</mat-form-field>
 
 				</mat-dialog-content>
+			</div>
 
-			<mat-dialog-actions style="display: flex;
+			<div class="container" 
+			 	 style="display: flex;
 						justify-content: space-between;
-									   align-items: center;
+						align-items: center;">
-									   margin-top: 12px;">
 				<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;">
+			<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>

src/app/settings/settings.component.ts

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