KST-23: add nicer history order toggle button

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

@@ -13,3 +13,7 @@
 .trash-icon:hover {
     color: hsl(0, 100%, 40%);
 }
+
+.ordering-arrow {
+    color: gray;
+}
\ No newline at end of file

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

@@ -82,13 +82,13 @@
         Története
       </h5>
       <div>
-        <button class='btn mt-auto' *ngIf='currentHistoryOrderState === historyOrderState.Descending && service.history.length >=2'
+        <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Descending && service.history.length >=2'
                 (click)='toggleHistoryOrder(historyOrderState.Ascending)'>
-          ↑
+          <fa-icon [icon]='faArrowUp' class="ordering-arrow"></fa-icon>
         </button>
         <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Ascending && service.history.length >= 2'
                 (click)='toggleHistoryOrder(historyOrderState.Descending)'>
-          ↓
+          <fa-icon [icon]='faArrowDown' class="ordering-arrow"></fa-icon>
         </button>
         <button class='btn btn-link' *ngIf='isLoggedIn'
                 (click)='updateState(serviceDetailComponentState.CREATE_HISTORY)'>

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

@@ -5,7 +5,7 @@ import { faCheckCircle,
          faTrashAlt,
          faPlusSquare
         } from '@fortawesome/free-regular-svg-icons';
-import { faCaretLeft } from '@fortawesome/free-solid-svg-icons';
+import { faCaretLeft, faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Service } from '../../models/service.model';
 import { ServicesService } from '../../services/services.service';
@@ -68,6 +68,14 @@ export class ServiceDetailComponent implements OnInit {
    * ADD icon
    */
   faPlusSquare = faPlusSquare;
+  /**
+   * ARROW UP icon
+   */
+  faArrowUp = faArrowUp;
+  /**
+   * ARROW DOWN icon
+   */
+  faArrowDown = faArrowDown;
   /**
    * Current service that is displayed
    */