Basic styling and markup restructuring (part 2)

src/RunnersMeet.Client/src/app/tracks/track-create/track-create.component.html

@@ -1,13 +1,12 @@
 <h1>Upload a GPX File to create a new Track</h1>
-<form class="" #uploadForm="ngForm" (ngSubmit)="uploadFile(uploadForm)">
-	<p>
+<form class="vertical-form" #uploadForm="ngForm" (ngSubmit)="uploadFile(uploadForm)">
+	<div class="form-field">
 		<input #uploadField class="hidden" type="file" name="trackFile" (change)="fileSelectionChange($event)" />
-		<button pButton class="p-button-secondary" icon="pi pi-paperclip" (click)="uploadField.click()">Choose GPX File</button>
-	</p>
-	<p>
-		<span class="p-float-label">
-			<input type="text" pInputText disabled [value]="fileName" placeholder="File Name">
-		</span>
-	</p>
-	<button type="submit" pButton [disabled]="!file">Upload</button>
+		<p-button label="Choose GPX File" icon="pi pi-paperclip" styleClass="p-button-secondary" (click)="uploadField.click()"></p-button>
+		<input type="text" pInputText disabled [value]="fileName" placeholder="File Name">
+	</div>
+
+	<div class="button-group">
+		<button type="submit" pButton [disabled]="!file">Upload</button>
+	</div>
 </form>