Update styles

Front/skydivelogs-app/src/app/app.component.css

@@ -50,3 +50,7 @@
   margin-top: 20px;
   margin-bottom: 20px;
 }
+
+.mat-icon {
+  margin-right: 15px;
+}

Front/skydivelogs-app/src/app/app.component.html

@@ -11,16 +11,6 @@
         </svg>
         <h2 style="display: inline;">{{ title }}</h2>
       </div>
-      <div>
-        <a routerLink="/user" routerLinkActive="active" skipLocationChange>
-          <mat-icon aria-hidden="false" aria-label="User account">account_box</mat-icon>
-          <h2 style="display: inline;" *ngIf="currentUser">{{ this.currentUser.firstName }}
-            {{ this.currentUser.lastName }}</h2>
-        </a>
-        <a *ngIf="currentUser" (click)="logout()" style="cursor: pointer; margin-left:15px;">
-          <mat-icon aria-hidden="false" aria-label="To logout">logout</mat-icon>
-        </a>
-      </div>
     </div>
 
     <nav class="navigation" [ngClass]="{'side-menu-active': showMenu}">
@@ -60,6 +50,17 @@
           <a routerLink="/gears" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
             gears</a>
         </li>
+        <li *ngIf="currentUser">
+          <hr class="splitter">
+          <mat-icon aria-hidden="false" aria-label="User account">account_box</mat-icon>
+          <a routerLink="/user" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>
+            {{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
+          </a>
+        </li>
+        <li *ngIf="currentUser">
+          <mat-icon aria-hidden="false" aria-label="To logout">logout</mat-icon>
+          <span (click)="logout()" style="cursor: pointer;">Logout</span>
+        </li>
       </ul>
     </nav>
   </header>

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html

@@ -1,5 +1,4 @@
-<div style="display: flex; flex-direction: row;">
-  <div style="width: 40%;">
+<div>
   <form [formGroup]="imgForm" (ngSubmit)="onSubmit(imgForm.value)" autocomplete="off" style="padding: 10px;">
     <p>
       <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image"
@@ -18,8 +17,9 @@
     </button>
     <label>{{ imageError }}</label>
   </form>
-  </div>
-  <div style="width: 40%;">
+</div>
+
+<div *ngIf="resultsLength > 0">
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="comment">
       <th mat-header-cell *matHeaderCellDef>Name</th>
@@ -36,5 +36,4 @@
   </table>
 
   <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
-  </div>
 </div>

Front/skydivelogs-app/src/app/user-profile/user-profile.component.html

@@ -1,4 +1,7 @@
-<div class="content">
+<div class="content" style="display: flex; flex-direction: row;">
+
+  <fieldset style="width: 50%;">
+    <legend>Profile</legend>
     <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
       <p>
         <mat-form-field>
@@ -40,6 +43,10 @@
   
       <button type="submit" mat-raised-button color="accent">Update my profile</button>
     </form>
+  </fieldset>
 
+  <fieldset style="width: 50%;">
+    <legend>Images</legend>
     <app-list-of-images></app-list-of-images>
+  </fieldset>
 </div>