Fix punishment tag colors and avatar image size

frontend/src/app/bans/details/details.component.html

@@ -20,11 +20,23 @@
       <section class="columnSection center">
         <ng-container *ngIf="punishment">
           <div>
-            <span class="tag tagInfo tagActive">{{ this.historyFormat.getType(punishment) }}</span>
+            <span class="tag tagInfo"
+                  [ngClass]="{
+                        'tagPermanent': this.historyFormat.isPermanent(punishment),
+                        'tagExpired': !this.historyFormat.isPermanent(punishment)
+                      }">
+              {{ this.historyFormat.getType(punishment) }}
+            </span>
           </div>
           <div>
             <span
-              class="tag tagInfo tagPermanent">{{ this.historyFormat.isActive(punishment) ? 'Active' : 'Inactive' }}</span>
+              class="tag tagInfo"
+              [ngClass]="{
+                    'tagActive': this.historyFormat.isActive(punishment),
+                    'tagInactive': !this.historyFormat.isActive(punishment)
+                  }">
+              {{ this.historyFormat.isActive(punishment) ? 'Active' : 'Inactive' }}
+            </span>
           </div>
         </ng-container>
       </section>
@@ -34,7 +46,7 @@
             <ng-container *ngIf="punishment">
               <div class="playerContainer">
                 <h2>Player</h2>
-                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.uuid)"
+                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.uuid, '150')"
                      width="150"
                      height="150"
                      alt="{{punishment.username}}'s Minecraft skin"
@@ -49,7 +61,7 @@
             <ng-container *ngIf="punishment">
               <div class="playerContainer">
                 <h2>Moderator</h2>
-                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.punishedByUuid)"
+                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.punishedByUuid, '150')"
                      width="150"
                      height="150"
                      alt="{{punishment.punishedBy}}'s Minecraft skin"

frontend/src/app/bans/details/details.component.scss

@@ -49,12 +49,20 @@ h3 {
 
 .tagActive {
   color: #FFFFFF;
-  background-color: #EE5555 /*Should be #F79720 if Inactive*/
-;
+  background-color: #EE5555;
+}
+
+.tagInactive {
+  color: #FFFFFF;
+  background-color: #F79720;
 }
 
 .tagPermanent {
   color: #FFFFFF;
-  background-color: #EE5555 /*Should be #777777 if Expired*/
-;
+  background-color: #EE5555;
+}
+
+.tagExpired {
+  color: #FFFFFF;
+  background-color: #777777
 }

frontend/src/app/bans/details/details.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {HistoryService, PunishmentHistory} from '../../../api';
-import {NgIf, NgOptimizedImage} from '@angular/common';
+import {NgClass, NgIf, NgOptimizedImage} from '@angular/common';
 import {RemoveTrailingPeriodPipe} from '../../util/RemoveTrailingPeriodPipe';
 import {HistoryFormatService} from '../history-format.service';
 import {ActivatedRoute, RouterLink} from '@angular/router';
@@ -14,7 +14,8 @@ import {HeaderComponent} from '../../header/header.component';
     NgOptimizedImage,
     RemoveTrailingPeriodPipe,
     HeaderComponent,
-    RouterLink
+    RouterLink,
+    NgClass
   ],
   templateUrl: './details.component.html',
   styleUrl: './details.component.scss'

frontend/src/app/bans/history-format.service.ts

@@ -22,9 +22,19 @@ export class HistoryFormatService {
   }
 
   public isActive(entry: PunishmentHistory): boolean {
+    if (entry.removedBy !== null) {
+      return false;
+    }
+    if (entry.expiryTime <= 0) {
+      return true;
+    }
     return entry.expiryTime > Date.now();
   }
 
+  public isPermanent(entry: PunishmentHistory): boolean {
+    return entry.expiryTime <= 0;
+  }
+
   public getType(entry: PunishmentHistory): string {
     return entry.type.charAt(0).toUpperCase() + entry.type.slice(1);
   }
@@ -48,11 +58,11 @@ export class HistoryFormatService {
     }) + " " + suffix;
   }
 
-  public getAvatarUrl(entry: string): string {
+  public getAvatarUrl(entry: string, size: string = '25'): string {
     let uuid = entry.replace('-', '');
     if (uuid === 'C') {
       uuid = "f78a4d8dd51b4b3998a3230f2de0c670"
     }
-    return `https://crafatar.com/avatars/${uuid}?size=25&overlay`;
+    return `https://crafatar.com/avatars/${uuid}?size=${size}&overlay`;
   }
 }