diff --git a/frontend/src/app/components/library-overview/library-overview.component.scss b/frontend/src/app/components/library-overview/library-overview.component.scss
new file mode 100644
index 0000000..2782144
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/src/app/components/library-overview/library-overview.component.ts b/frontend/src/app/components/library-overview/library-overview.component.ts
index 2242242..69af14b 100644
--- a/frontend/src/app/components/library-overview/library-overview.component.ts
+++ b/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 {
diff --git a/frontend/src/app/services/games.service.spec.ts b/frontend/src/app/services/games.service.spec.ts
new file mode 100644
index 0000000..56cb16f
--- /dev/null
+++ b/frontend/src/app/services/games.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GamesService } from './games.service';
+
+describe('GamesService', () => {
+ let service: GamesService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(GamesService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/frontend/src/app/services/library.service.spec.ts b/frontend/src/app/services/library.service.spec.ts
new file mode 100644
index 0000000..057415e
--- /dev/null
+++ b/frontend/src/app/services/library.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LibraryService } from './library.service';
+
+describe('LibraryService', () => {
+ let service: LibraryService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(LibraryService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/frontend/src/app/services/library.service.ts b/frontend/src/app/services/library.service.ts
index 4e70956..e0cd2b5 100644
--- a/frontend/src/app/services/library.service.ts
+++ b/frontend/src/app/services/library.service.ts
@@ -1,9 +1,6 @@
import {Injectable} from '@angular/core';
-import {GamesApi} from "../api/GamesApi";
import {HttpClient, HttpResponse} from "@angular/common/http";
import {Observable} from "rxjs";
-import {DetectedGameDto} from "../models/dtos/DetectedGameDto";
-import {GameOverviewDto} from "../models/dtos/GameOverviewDto";
import {LibraryApi} from "../api/LibraryApi";
@Injectable({
diff --git a/frontend/src/app/theme/default-theme.scss b/frontend/src/app/theme/default-theme.scss
index 4689a23..93993e4 100644
--- a/frontend/src/app/theme/default-theme.scss
+++ b/frontend/src/app/theme/default-theme.scss
@@ -1,8 +1,6 @@
@use '@angular/material' as mat;
@import "@angular/material/theming";
-@include mat.core();
-
$custom-theme-primary: mat.define-palette(mat.$green-palette);
$custom-theme-accent: mat.define-palette(mat.$grey-palette, A200, A100, A400);
$custom-theme-warn: mat.define-palette(mat.$red-palette);
@@ -14,5 +12,3 @@ $custom-theme: mat.define-dark-theme((
warn: $custom-theme-warn
)
));
-
-@include mat.all-component-themes($custom-theme);
diff --git a/frontend/src/index.html b/frontend/src/index.html
index b3b6eb5..f245f86 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -8,7 +8,7 @@
-
+
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 53727c7..c5842ad 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,37 +1,18 @@
-
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
-// Plus imports for other components in your app.
+// Plus imports for other components in your app.
+@import "src/app/theme/default-theme";
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$frontend-primary: mat.define-palette(mat.$indigo-palette);
-$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
-$frontend-warn: mat.define-palette(mat.$red-palette);
-
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$frontend-theme: mat.define-light-theme((
- color: (
- primary: $frontend-primary,
- accent: $frontend-accent,
- warn: $frontend-warn,
- )
-));
-
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
-@include mat.all-component-themes($frontend-theme);
+@include mat.all-component-themes($custom-theme);
/* You can add global styles to this file, and also import other style files */