From a2732f42c73270cd7a5ee5b00ff0e9f404525ff4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?=
 <sebastien.a-andre@external.total.com>
Date: Wed, 13 Jan 2021 16:14:02 +0100
Subject: [PATCH] Update styles

---
 .../skydivelogs-app/src/app/app.component.css |  4 +
 .../src/app/app.component.html                | 21 +++--
 .../list-of-images.component.html             | 75 ++++++++-------
 .../user-profile/user-profile.component.html  | 91 ++++++++++---------
 4 files changed, 101 insertions(+), 90 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/app.component.css b/Front/skydivelogs-app/src/app/app.component.css
index c20ccd9..8742655 100644
--- a/Front/skydivelogs-app/src/app/app.component.css
+++ b/Front/skydivelogs-app/src/app/app.component.css
@@ -50,3 +50,7 @@
   margin-top: 20px;
   margin-bottom: 20px;
 }
+
+.mat-icon {
+  margin-right: 15px;
+}
\ No newline at end of file
diff --git a/Front/skydivelogs-app/src/app/app.component.html b/Front/skydivelogs-app/src/app/app.component.html
index b47d292..b82e1a3 100644
--- a/Front/skydivelogs-app/src/app/app.component.html
+++ b/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>
diff --git a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
index d377c76..83f676d 100644
--- a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
@@ -1,40 +1,39 @@
-<div style="display: flex; flex-direction: row;">
-  <div style="width: 40%;">
-    <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"
-          (change)="onFileChanged($event)" />
-      </p>
-      <p>
-        <mat-form-field>
-          <mat-label>Comment about the image</mat-label>
-          <input matInput type="text" formControlName="comment" />
-        </mat-form-field>
-      </p>
+<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"
+        (change)="onFileChanged($event)" />
+    </p>
+    <p>
+      <mat-form-field>
+        <mat-label>Comment about the image</mat-label>
+        <input matInput type="text" formControlName="comment" />
+      </mat-form-field>
+    </p>
 
-      <button mat-button color="warn" type="submit">
-        <mat-icon>file_upload</mat-icon>
-        Upload image
-      </button>
-      <label>{{ imageError }}</label>
-    </form>
-  </div>
-  <div style="width: 40%;">
-    <table mat-table [dataSource]="dataSourceTable">
-      <ng-container matColumnDef="comment">
-        <th mat-header-cell *matHeaderCellDef>Name</th>
-        <td mat-cell *matCellDef="let element">{{element.comment}}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="data">
-        <th mat-header-cell *matHeaderCellDef>Image</th>
-        <td mat-cell *matCellDef="let element"><img src="{{element.data}}" alt="toto"></td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-
-    <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
-  </div>
+    <button mat-button color="warn" type="submit">
+      <mat-icon>file_upload</mat-icon>
+      Upload image
+    </button>
+    <label>{{ imageError }}</label>
+  </form>
+</div>
+
+<div *ngIf="resultsLength > 0">
+  <table mat-table [dataSource]="dataSourceTable">
+    <ng-container matColumnDef="comment">
+      <th mat-header-cell *matHeaderCellDef>Name</th>
+      <td mat-cell *matCellDef="let element">{{element.comment}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="data">
+      <th mat-header-cell *matHeaderCellDef>Image</th>
+      <td mat-cell *matCellDef="let element"><img src="{{element.data}}" alt="toto"></td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+
+  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 </div>
diff --git a/Front/skydivelogs-app/src/app/user-profile/user-profile.component.html b/Front/skydivelogs-app/src/app/user-profile/user-profile.component.html
index ab68605..4cc4014 100644
--- a/Front/skydivelogs-app/src/app/user-profile/user-profile.component.html
+++ b/Front/skydivelogs-app/src/app/user-profile/user-profile.component.html
@@ -1,45 +1,52 @@
-<div class="content">
-  <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
-    <p>
-      <mat-form-field>
-        <mat-label>Login</mat-label>
-        <input matInput type="text" formControlName="login" readonly />
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>Firstname</mat-label>
-        <input matInput type="text" formControlName="firstName" />
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>Lastname</mat-label>
-        <input matInput type="text" formControlName="lastName" />
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>E-mail</mat-label>
-        <input matInput type="text" formControlName="email" />
-      </mat-form-field>
-    </p>
+<div class="content" style="display: flex; flex-direction: row;">
 
-    <p>
-      <mat-form-field>
-        <mat-label>Current password</mat-label>
-        <input matInput type="text" formControlName="currentPassword" />
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>New password</mat-label>
-        <input matInput type="text" formControlName="newPassword" />
-      </mat-form-field>
-    </p>
+  <fieldset style="width: 50%;">
+    <legend>Profile</legend>
+    <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
+      <p>
+        <mat-form-field>
+          <mat-label>Login</mat-label>
+          <input matInput type="text" formControlName="login" readonly />
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <mat-label>Firstname</mat-label>
+          <input matInput type="text" formControlName="firstName" />
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <mat-label>Lastname</mat-label>
+          <input matInput type="text" formControlName="lastName" />
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <mat-label>E-mail</mat-label>
+          <input matInput type="text" formControlName="email" />
+        </mat-form-field>
+      </p>
+  
+      <p>
+        <mat-form-field>
+          <mat-label>Current password</mat-label>
+          <input matInput type="text" formControlName="currentPassword" />
+        </mat-form-field>
+      </p>
+      <p>
+        <mat-form-field>
+          <mat-label>New password</mat-label>
+          <input matInput type="text" formControlName="newPassword" />
+        </mat-form-field>
+      </p>
+  
+      <button type="submit" mat-raised-button color="accent">Update my profile</button>
+    </form>
+  </fieldset>
 
-    <button type="submit" mat-raised-button color="accent">Update my profile</button>
-  </form>
-
-  <app-list-of-images></app-list-of-images>
+  <fieldset style="width: 50%;">
+    <legend>Images</legend>
+    <app-list-of-images></app-list-of-images>
+  </fieldset>
 </div>