Modifications du style des boutons et

des formulaires

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

@@ -1,5 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button mat-button (click)="openDialogToAdd()" class="btn btn-primary">Add a aircraft</button>
+  <button mat-button (click)="openDialogToAdd()" mat-button>Add a aircraft</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">

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

@@ -1,5 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button mat-button (click)="openDialogToAdd()" class="btn btn-primary">Add a drop zone</button>
+  <button mat-button (click)="openDialogToAdd()" mat-button>Add a drop zone</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="isfavorite">

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts

@@ -73,6 +73,9 @@ export class ListOfDzsComponent implements OnInit {
   }
 
   openDialogToAdd() {
-    this.dialog.open(NewDropZoneComponent);
+    this.dialog.open(NewDropZoneComponent, {
+      height: "400px",
+      width: "600px"
+    });
   }
 }

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

@@ -1,5 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button mat-button (click)="openDialogToAdd()" class="btn btn-primary">Add a gear</button>
+  <button mat-button (click)="openDialogToAdd()" mat-button>Add a gear</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">

Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button mat-button (click)="openDialogToAdd()" class="btn btn-primary">Add a jump type</button>
+  <button mat-button (click)="openDialogToAdd()" mat-button>Add a jump type</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">

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

@@ -18,7 +18,7 @@
         {{ '{' }}8,15{{ '}' }})</div>
     </div>
   </div>
-  <button [disabled]="loading" class="btn btn-primary">
+  <button [disabled]="loading" mat-button>
     <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
     Login
   </button>

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

@@ -1,8 +1,18 @@
-label {
+/* label {
   display: inline-block;
   width: 150px;
 }
 
 input[type="text"] {
   width: 200px;
+} */
+
+
+
+mat-form-field.mat-form-field {
+  font-size: 16px;
+}
+
+mat-label {
+  color: #424242;
 }

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

@@ -3,5 +3,5 @@
     <label for="aircraftName">Aircraft name</label>
     <input id="aircraftName" type="text" formControlName="aircraftName" class="form-control">
   </p>
-  <button class="button" type="submit" class="btn btn-primary">Add</button>
+  <button type="submit" mat-button>Add</button>
 </form>

Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.css

@@ -1,4 +1,4 @@
-label {
+/* label {
   display: inline-block;
   width: 150px;
 }
@@ -13,4 +13,14 @@ input[type="email"] {
 
 textarea {
   width: 200px;
+} */
+
+
+
+mat-form-field.mat-form-field {
+  font-size: 16px;
+}
+
+mat-label {
+  color: #424242;
 }

Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html

@@ -1,27 +1,31 @@
 <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
-  <p class="form-group">
+  <mat-form-field>
-    <label for="dzName">Dropzone name</label>
+    <mat-label>Dropzone name</mat-label>
-    <input id="dzName" type="text" formControlName="dzName" class="form-control">
+    <input matInput formControlName="dzName">
-  </p>
+  </mat-form-field>
-  <p class="form-group">
+  <br>
-    <label for="gps">GPS</label>
+  <mat-form-field>
-    <input id="gps" type="text" formControlName="gps" class="form-control">
+    <mat-label>GPS</mat-label>
-  </p>
+    <input matInput formControlName="gps">
-  <p class="form-group">
+  </mat-form-field>
-    <label for="address">Address</label>
+  <br>
-    <textarea id="address" formControlName="address" placeholder="Address of the DZ" class="form-control"></textarea>
+  <mat-form-field>
-  </p>
+    <mat-label>Address</mat-label>
-  <p class="form-group">
+    <textarea matInput formControlName="address" placeholder="Address of the DZ"></textarea>
-    <label for="contactMail">Mail of contact</label>
+  </mat-form-field>
-    <input id="contactMail" type="text" formControlName="contactMail" class="form-control">
+  <br>
-  </p>
+  <mat-form-field>
-  <p class="form-group">
+    <mat-label>Mail of contact</mat-label>
-    <label for="isDz">Is a dropzone</label>
+    <input matInput formControlName="contactMail">
-    <input id="isDz" type="checkbox" formControlName="isDz" class="form-control">
+  </mat-form-field>
-  </p>
+  <br>
-  <p class="form-group">
+  <mat-form-field>
-    <label for="isTunnel">Is a tunnel</label>
+    <mat-checkbox formControlName="isDz">Is a dropzone</mat-checkbox>
-    <input id="isTunnel" type="checkbox" formControlName="isTunnel" class="form-control">
+  </mat-form-field>
-  </p>
+  <br>
-  <button class="button" type="submit" class="btn btn-primary">Add</button>
+  <mat-form-field>
+    <mat-checkbox formControlName="isTunnel">Is a tunnel</mat-checkbox>
+  </mat-form-field>
+  <br>
+  <button type="submit" mat-button>Add</button>
 </form>

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

@@ -1,8 +1,17 @@
-label {
+/* label {
   display: inline-block;
   width: 150px;
 }
 
 input[type="text"] {
   width: 200px;
+} */
+
+
+mat-form-field.mat-form-field {
+  font-size: 16px;
+}
+
+mat-label {
+  color: #424242;
 }

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

@@ -28,5 +28,5 @@
     <input id="reserveCanopy" type="text" formControlName="reserveCanopy" class="form-control">
   </p>
 
-  <button class="button" type="submit" class="btn btn-primary">Add</button>
+  <button mat-button type="submit">Add</button>
 </form>

Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.css

@@ -1,4 +1,4 @@
-label {
+/* label {
   display: inline-block;
   width: 150px;
 }
@@ -6,3 +6,13 @@ label {
 input[type="text"] {
   width: 200px;
 }
+
+ */
+
+mat-form-field.mat-form-field {
+  font-size: 16px;
+}
+
+mat-label {
+  color: #424242;
+}

Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html

@@ -3,5 +3,5 @@
     <label for="jumptypeName">Jump type name</label>
     <input id="jumptypeName" type="text" formControlName="jumptypeName" class="form-control">
   </p>
-  <button class="button" type="submit" class="btn btn-primary">Add</button>
+  <button type="submit" mat-button>Add</button>
 </form>

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

@@ -95,7 +95,7 @@
   </mat-form-field>
 
   <br />
-  <button class="btn btn-primary" *ngIf="isValidatedForm()">Submit</button>
+  <button mat-button *ngIf="isValidatedForm()">Submit</button>
 </form>
 
 <ng-template #loading>