Made warning icon on tabs more remarkable

jirkapok · Feb 14, 2024 · 33b9f87 · 33b9f87
1 parent 9f215cd
commit 33b9f87
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/projects/planner/src/app/diveinfo/diveinfo.component.html b/projects/planner/src/app/diveinfo/diveinfo.component.html
@@ -115,8 +115,8 @@
             </mdb-tab>
             <mdb-tab>
                 <ng-template mdbTabTitle>
-                    <span>Consumed</span> <span *ngIf="dive.notEnoughGas"
-                        class="badge badge-danger ms-2"><strong>!</strong></span>
+                    <span>Consumed</span>
+                    <fa-icon *ngIf="dive.notEnoughGas" [icon]="warnIcon" class="ms-2 fa-xl text-danger"></fa-icon>
                 </ng-template>
                 <ng-container *ngIf="dive.showResults">
                     <app-tankchart *ngFor="let tank of tanks" [tank]="tank" [showId]="isComplex" [toxicity]="toxicity">
@@ -126,10 +126,11 @@
             </mdb-tab>
             <mdb-tab>
                 <ng-template mdbTabTitle>
-                    <span>Issues</span> <span *ngIf="dive.hasErrorEvent || dive.hasWarningEvent" class="badge ms-2"
-                        [class.badge-danger]="dive.hasErrorEvent"
-                        [class.badge-warning]="!dive.hasErrorEvent && dive.hasWarningEvent"><strong>!</strong>
-                    </span>
+                    <span>Issues</span>
+                    <fa-icon *ngIf="dive.hasErrorEvent || dive.hasWarningEvent" [class.text-danger]="dive.hasErrorEvent"
+                             [class.text-warning]="!dive.hasErrorEvent && dive.hasWarningEvent"
+                             [icon]="warnIcon" class="ms-2 fa-xl">
+                    </fa-icon>
                 </ng-template>
                 <app-dive-issues></app-dive-issues>
             </mdb-tab>

diff --git a/projects/planner/src/app/diveinfo/diveinfo.component.ts b/projects/planner/src/app/diveinfo/diveinfo.component.ts
@@ -3,7 +3,7 @@ import { formatNumber } from '@angular/common';
 import { takeUntil } from 'rxjs';
 import { ClipboardService, IClipboardResponse } from 'ngx-clipboard';
 import {
-    faSlidersH, faShareFromSquare
+    faSlidersH, faShareFromSquare, faExclamationTriangle
 } from '@fortawesome/free-solid-svg-icons';
 
 import { DiveResults } from '../shared/diveresults';
@@ -23,6 +23,7 @@ import {TextConstants} from '../shared/TextConstants';
 export class DiveInfoComponent extends Streamed {
     public icon = faSlidersH;
     public iconShare = faShareFromSquare;
+    public readonly warnIcon = faExclamationTriangle;
     public toastVisible = false;
 
     constructor(

diff --git a/projects/planner/src/app/plan.tabs/plan.tabs.component.html b/projects/planner/src/app/plan.tabs/plan.tabs.component.html
@@ -3,7 +3,7 @@
         <mdb-tab *ngFor="let dive of this.schedules.dives; let i = index">
             <ng-template mdbTabTitle>
                 <div class="d-flex align-items-center">
-                    <fa-icon *ngIf="!dive.diveResult.calculated" [icon]="reloadIcon" class="me-1 fa-xl small alert-info"></fa-icon>
+                    <fa-icon *ngIf="!dive.diveResult.calculated" [icon]="reloadIcon" class="me-1 fa-xl small text-info"></fa-icon>
                     <div class="justifycontent-center">{{dive.title}}</div>
                     <button *ngIf="!schedules.empty" type="button" class="btn-close ms-2" aria-label="Close"
                         (click)="closeTab(dive)"></button>