stylize machine fields of the page

pinsisApp/src/app/edit-machine/edit-machine.component.ts

@@ -17,11 +17,7 @@ export class EditMachineComponent implements OnInit {
   }
 
   events = []
-  constructor(private _eventService: EventService) { }
+  constructor() { }
   ngOnInit() {
-    this._eventService.getEvents().subscribe(
-        res => this.events = res,
-        err => console.log(err)
-      )
   }
 }

pinsisApp/src/app/events/events.component.html

@@ -10,18 +10,19 @@
                <h3> {{machine.serial_number}} </h3>
                <button class="btn"(click)="changeButton(i)">Mais Informações</button>
                 <span class="more_text"> 
-                  <p><b>Número de Série:</b> {{machine.serial_number}}</p>
-                  <p><b>Sala: </b> {{machine.room}}</p>
-                  <p><b>Data da última manutenção:</b> {{machine.date_last_maintenance}}</p>
-                  <p><b>Data da próxima manutenção:</b> {{machine.date_next_maintenance}}</p>
-                  <p><b>Estado da máquina:</b> {{machine.Status}}</p> 
+                  <h4>Informações Gerais</h4>
+                  <p>Número de Série: {{machine.serial_number}}</p>
+                  <p>Sala: {{machine.room}}</p>
+                  <p>Data da última manutenção: {{machine.date_last_maintenance}}</p>
+                  <p>Data da próxima manutenção: {{machine.date_next_maintenance}}</p>
+                  <p>Estado da máquina: {{machine.Status}}</p> 
 
-									<p><b>Endereço:</b></p> 
-                  <p><b>Rua:</b> {{machine.address}}</p> 
-                  <p><b>Número:</b> {{machine.address_number}}</p> 
-                  <p><b>Bairro:</b> {{machine.district}}</p> 
-                  <p><b>Cidade:</b> {{machine.city}}</p> 
-                  <p><b>Estado:</b> {{machine.state}}</p> 
+                  <h4>Endereço</h4>
+                  <p>Rua: {{machine.address}}</p> 
+                  <p>Número: {{machine.address_number}}</p> 
+                  <p>Bairro: {{machine.district}}</p> 
+                  <p>Cidade: {{machine.city}}</p> 
+                  <p>Estado: {{machine.state}}</p> 
                 </span>
               </div>
           </div>

pinsisApp/src/app/events/events.component.scss

@@ -6,24 +6,26 @@
     text-align: justify;
     hyphens: auto;
     font-family: $font-default;
-    color: #000000;
+    color: $text-dark;
   
     h2 {
       font-family: $font-header;
       font-weight: bolder;
       font-size: 36px;
-      color: $text-dark;
     }
   
     h3 {
-      color: $text-dark;
       padding: 10px;
     }
 
+    h4 {
+      font-size: 22px;
+      margin-top: 30px;
+      font-weight: bolder;
+    }
+
     p {
-      color: $text-dark;
       text-indent: 30px;
-
       font-size: 18px;
       line-height: 1.41;
     }
@@ -33,11 +35,11 @@
 .btn {
     border-width: 4px;
     border-radius: 8px;
-    font-size: 18px;
-    font-family: $font-default;
     cursor: pointer;
-    display: inline-block;
     color: $text-dark;
+    display: inline-block;
+    font-size: 18px;
+    font-family: $font-default;
   }
   
 // Imagens
@@ -53,11 +55,12 @@
   
 .photos-btn {
     align-items: center;
-      background-color: #b0cfed;
+    background-color: #b0cfed;
     padding: 5px;
     border-radius: 3%;
 }
 
+//Tag para o botao "Mais informacoes"
 .more_text {
   display: none;
 }
\ No newline at end of file