Updated styling of frontend

frontend/src/app/components/library-overview/library-overview.component.css

@@ -1,16 +0,0 @@
-.fullscreen-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.15);
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.content {
-  padding: 16px;
-}

frontend/src/app/components/library-overview/library-overview.component.html

@@ -4,8 +4,16 @@
     <h2>Loading library...</h2>
   </div>
 
-  <div fxLayout="row" fxLayoutAlign="center center" *ngIf="!this.loading && this.detectedGames.length === 0">
-    <h2>Your game library is empty!</h2>
+  <div *ngIf="!this.loading && this.detectedGames.length === 0" fxFlex fxLayout="column" fxLayoutAlign="center center" style="height: calc(100vh - 64px)">
+    <div class="library-management-hint" fxLayout="column" fxLayoutAlign="start end">
+      <mat-icon fontSet="material-icons-outlined">north_east</mat-icon>
+      <p>Use the library management to scan your file system for games</p>
+    </div>
+
+    <div fxLayout="column" fxLayoutAlign="center center">
+      <mat-icon fontSet="material-icons-outlined" color="primary" style="font-size: 128px; height: 128px; width: 128px;">videogame_asset_off</mat-icon>
+      <h1>Your game library is empty!</h1>
+    </div>
   </div>
 
   <div class="content" fxLayout="row" fxFlexFill="100" *ngIf="!this.loading && this.detectedGames.length > 0">

frontend/src/app/components/library-overview/library-overview.component.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@import '../../theme/default-theme';
+
+.fullscreen-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.library-management-hint {
+
+  @include mat.elevation(16);
+
+  $config: mat.get-color-config($custom-theme);
+  $background: map.get($config, background);
+  position: absolute;
+  right: 56px;
+  top: 72px;
+  width: 250px;
+  border-radius: 6px;
+  background: mat.get-color-from-palette($background, app-bar);
+  border-color: mat.get-color-from-palette($background, app-bar);
+  border-style: solid;
+  color: white;
+
+  p {
+    padding: 0 12px 12px 16px;
+   }
+}
+
+.content {
+  padding: 16px;
+}

frontend/src/app/components/library-overview/library-overview.component.ts

@@ -5,7 +5,7 @@ import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
 @Component({
   selector: 'app-gameserver-list',
   templateUrl: './library-overview.component.html',
-  styleUrls: ['./library-overview.component.css']
+  styleUrls: ['./library-overview.component.scss']
 })
 export class LibraryOverviewComponent implements AfterViewInit {