KST-23: make service details container prettier

src/app/core/service-detail/service-detail.component.css

+.check-icon {
+    color: green;
+}
+  
+.times-icon {
+    color: red;
+}
\ No newline at end of file

src/app/core/service-detail/service-detail.component.html

@@ -56,14 +56,33 @@
             </form>
           </div>
         </div>
-        <div>
-          neve: {{service.name}}
+        <div class="container">
+          <div class="row mb-3">
+            <div class="col-sm-2 col-lg-1">
+              <b>Név:</b>
+            </div>
+            <div class="w-30"></div>
+            <div class="col-sm-10 col-lg-11">
+              {{service.name}}
+            </div>
+          </div>
+          <div class="row mb-3">
+            <div class="col-sm-2 col-lg-1">
+              <b>Leírás:</b>
+            </div>
+            <div class="col-sm-10 col-lg-11">
+              {{service.description}}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-2 col-lg-1">
+              <b>Státusz:</b>
+            </div>
+            <div class="col-sm-10 col-lg-11">
+              <fa-icon *ngIf='service.isOkay' [icon]='faCheckCircle' class='check-icon'></fa-icon>
+              <fa-icon *ngIf='!service.isOkay' [icon]='faTimesCircle' class='times-icon'></fa-icon>
             </div>
-        <div>
-          leiras: {{service.description}}
           </div>
-        <div>
-          jelenleg rendben van-e: {{service.isOkay ? "Igen" : "Nem"}}
         </div>
       </div>
       <app-loader *ngIf='isLoading'></app-loader>

src/app/core/service-detail/service-detail.component.ts

 import { Component, OnInit } from '@angular/core';
+import { faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons';
 import { faCaretLeft } from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Service } from '../../models/service.model';
@@ -38,6 +39,14 @@ export enum HistoryOrderState {
   styleUrls: ['./service-detail.component.css'],
 })
 export class ServiceDetailComponent implements OnInit {
+  /**
+   * OK icon
+   */
+  faCheckCircle = faCheckCircle;
+  /**
+   * NOT OK icon
+   */
+  faTimesCircle = faTimesCircle;
   /**
    * Fontawesome left arrow icon
    */