Updated styling and components for punishment history

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

@@ -1,14 +1,15 @@
 import {Component, Input, OnChanges, OnInit} from '@angular/core';
 import {BASE_PATH, HistoryService, PunishmentHistoryInner} from '../../../api';
 import {map, Observable, shareReplay} from 'rxjs';
-import {NgForOf, NgIf} from '@angular/common';
+import {NgForOf, NgIf, NgOptimizedImage} from '@angular/common';
 import {CookieService} from 'ngx-cookie-service';
 
 @Component({
   selector: 'app-history',
   imports: [
     NgIf,
-    NgForOf
+    NgForOf,
+    NgOptimizedImage
   ],
   templateUrl: './history.component.html',
   styleUrl: './history.component.scss',
@@ -70,9 +71,13 @@ export class HistoryComponent implements OnInit, OnChanges {
     });
   }
 
+  public getType(entry: PunishmentHistoryInner) {
+    return entry.type.charAt(0).toUpperCase() + entry.type.slice(1);
+  }
+
   public getExpiredTime(entry: PunishmentHistoryInner) {
     if (entry.expiryTime === 0) {
-      return "Permanent " + entry.type.charAt(0).toUpperCase() + entry.type.slice(1);
+      return "Permanent " + this.getType(entry);
     }
     const date = new Date(entry.expiryTime);
     return date.toLocaleString(navigator.language, {