From df437a6cec1d3f2df2a5bbf532f9e4e6ff3734b4 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sat, 6 Nov 2021 09:56:08 +0100
Subject: [PATCH] Change theme to fit dark theme better

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 mediarepo-ui/angular.json                     |  4 +--
 mediarepo-ui/src/app/app.module.ts            |  2 --
 .../file-gallery-entry.component-theme.scss   | 27 +++++++++++++++++++
 .../file-gallery-entry.component.scss         |  4 ---
 .../file-grid-entry.component-theme.scss      |  1 -
 mediarepo-ui/src/styles.scss                  |  6 +++--
 6 files changed, 33 insertions(+), 11 deletions(-)
 create mode 100644 mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss

diff --git a/mediarepo-ui/angular.json b/mediarepo-ui/angular.json
index 9aad8ca..8320a9e 100644
--- a/mediarepo-ui/angular.json
+++ b/mediarepo-ui/angular.json
@@ -35,7 +35,7 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/ngx-lightbox/lightbox.css",
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -104,7 +104,7 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.scss"
             ],
             "scripts": []
diff --git a/mediarepo-ui/src/app/app.module.ts b/mediarepo-ui/src/app/app.module.ts
index 820afba..ce93bac 100644
--- a/mediarepo-ui/src/app/app.module.ts
+++ b/mediarepo-ui/src/app/app.module.ts
@@ -22,7 +22,6 @@ import {FileGridEntryComponent} from './components/file-grid/file-grid-entry/fil
 import {MatProgressBarModule} from "@angular/material/progress-bar";
 import {MatPaginatorModule} from "@angular/material/paginator";
 import {ScrollingModule} from "@angular/cdk/scrolling";
-import {LightboxModule} from "ngx-lightbox";
 import {MatChipsModule} from "@angular/material/chips";
 import {MatIconModule} from "@angular/material/icon";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
@@ -86,7 +85,6 @@ import {TagItemComponent} from './components/tag-item/tag-item.component';
     MatProgressBarModule,
     MatPaginatorModule,
     ScrollingModule,
-    LightboxModule,
     MatChipsModule,
     MatIconModule,
     MatAutocompleteModule,
diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss b/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss
new file mode 100644
index 0000000..93954f3
--- /dev/null
+++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss
@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
+@mixin color($theme) {
+  $color-config: mat.get-color-config($theme);
+  $primary-palette: map.get($color-config, 'primary');
+
+  div.image-wrapper.selected {
+    background-color: mat.get-color-from-palette($primary-palette, 'darker');
+  }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  $color-config: mat.get-color-config($theme);
+  @if $color-config != null {
+    @include color($theme);
+  }
+
+  $typography-config: mat.get-typography-config($theme);
+  @if $typography-config != null {
+    @include typography($theme);
+  }
+}
+
diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.scss b/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.scss
index 57c7b26..66cc04f 100644
--- a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.scss
+++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.scss
@@ -14,7 +14,3 @@ app-content-aware-image {
   cursor: pointer;
   user-select: none;
 }
-
-.image-wrapper.selected {
-  background-color: darken(dimgrey, 5);
-}
diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme.scss b/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme.scss
index 23a0b11..497545e 100644
--- a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme.scss
+++ b/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme.scss
@@ -4,7 +4,6 @@
 @mixin color($theme) {
   $color-config: mat.get-color-config($theme);
   $primary-palette: map.get($color-config, 'primary');
-  $warn-palette: map.get($color-config, 'warn');
 
   mat-card.selected {
     background-color: mat.get-color-from-palette($primary-palette, 'darker');
diff --git a/mediarepo-ui/src/styles.scss b/mediarepo-ui/src/styles.scss
index ec9e664..dfcb9d4 100644
--- a/mediarepo-ui/src/styles.scss
+++ b/mediarepo-ui/src/styles.scss
@@ -3,13 +3,14 @@
 @use 'src/app/app.component-theme' as app;
 @use 'src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme' as file-grid-entry;
 @use 'src/app/components/file-search/file-search.component-theme' as file-search;
+@use "src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component-theme" as gallery-entry;
 
 @include mat.core();
 
 $theme: mat.define-dark-theme((
   color: (
-    primary: mat.define-palette(mat.$deep-purple-palette),
-    accent: mat.define-palette(mat.$green-palette),
+    primary: mat.define-palette(mat.$purple-palette, 700, 500, 800),
+    accent: mat.define-palette(mat.$green-palette, A200, A100, A400),
     warn: mat.define-palette(mat.$red-palette),
     background: mat.define-palette(mat.$blue-grey-palette)
   ),
@@ -22,3 +23,4 @@ $theme: mat.define-dark-theme((
 @include app.theme($theme);
 @include file-grid-entry.theme($theme);
 @include file-search.theme($theme);
+@include gallery-entry.theme($theme);