Change theme to fit dark theme better

Signed-off-by: trivernis <trivernis@protonmail.com>

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": []

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,

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);
+  }
+}
+

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);
-}

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');

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),
+    primary: mat.define-palette(mat.$purple-palette, 700, 500, 800),
-    accent: mat.define-palette(mat.$green-palette),
+    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);