From e5a071cfadb5f4518a0281ad061ed5df47f0f635 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Wed, 9 Feb 2022 21:01:15 +0100
Subject: [PATCH] Fix colour theme visibility

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 mediarepo-ui/angular.json                     |  6 ++-
 .../image-viewer/image-viewer.component.scss  |  5 +++
 .../file-card/file-card.component-theme.scss  | 26 -----------
 .../file/file-card/file-card.component.scss   |  7 +++
 .../file-search.component-theme.scss          | 36 ---------------
 .../file-search/file-search.component.scss    | 20 +++++++--
 mediarepo-ui/src/colors.scss                  |  5 ++-
 .../src/material-theme-correction.scss        | 44 +++++++++++++++++++
 mediarepo-ui/src/styles.scss                  | 22 ++--------
 9 files changed, 83 insertions(+), 88 deletions(-)
 delete mode 100644 mediarepo-ui/src/app/components/shared/file/file-card/file-card.component-theme.scss
 delete mode 100644 mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component-theme.scss
 create mode 100644 mediarepo-ui/src/material-theme-correction.scss

diff --git a/mediarepo-ui/angular.json b/mediarepo-ui/angular.json
index 3b4ab61..9a21328 100644
--- a/mediarepo-ui/angular.json
+++ b/mediarepo-ui/angular.json
@@ -37,7 +37,8 @@
                         ],
                         "styles": [
                             "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
-                            "src/styles.scss"
+                            "src/styles.scss",
+                            "src/material-theme-correction.scss"
                         ],
                         "scripts": []
                     },
@@ -110,7 +111,8 @@
                         ],
                         "styles": [
                             "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
-                            "src/styles.scss"
+                            "src/styles.scss",
+                            "src/material-theme-correction.scss"
                         ],
                         "scripts": []
                     }
diff --git a/mediarepo-ui/src/app/components/shared/file/content-viewer/image-viewer/image-viewer.component.scss b/mediarepo-ui/src/app/components/shared/file/content-viewer/image-viewer/image-viewer.component.scss
index 5dbd2ae..3becdb3 100644
--- a/mediarepo-ui/src/app/components/shared/file/content-viewer/image-viewer/image-viewer.component.scss
+++ b/mediarepo-ui/src/app/components/shared/file/content-viewer/image-viewer/image-viewer.component.scss
@@ -1,3 +1,8 @@
+@import "src/colors";
+
+.image-full-view-inner {
+    background-color: $background-darker-05;
+}
 
 .image-drag-container, .image-scale-container {
     height: 100%;
diff --git a/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component-theme.scss b/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component-theme.scss
deleted file mode 100644
index 83f1083..0000000
--- a/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component-theme.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@use 'sass:map';
-@use '../../../../../../node_modules/@angular/material/index' as mat;
-
-@mixin color($theme) {
-    $color-config: mat.get-color-config($theme);
-    $primary-palette: map.get($color-config, 'primary');
-
-    mat-card.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/shared/file/file-card/file-card.component.scss b/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.scss
index 8ae08df..1f93450 100644
--- a/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.scss
+++ b/mediarepo-ui/src/app/components/shared/file/file-card/file-card.component.scss
@@ -1,8 +1,15 @@
+@import "src/colors";
+
 mat-card {
     height: calc(100% - 32px);
     width: calc(100% - 32px);
     user-select: none;
     cursor: pointer;
+    background: $background-lighter-05;
+}
+
+mat-card.selected {
+    background: $primary-darker-10;
 }
 
 mat-card-content {
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component-theme.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component-theme.scss
deleted file mode 100644
index 282dde1..0000000
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component-theme.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@use 'sass:map';
-@use '../../../../../../node_modules/@angular/material/index' as mat;
-
-@mixin color($theme) {
-    $color-config: mat.get-color-config($theme);
-    $primary-palette: map.get($color-config, 'primary');
-    $warn-palette: map.get($color-config, 'warn');
-
-    .tag-input-item {
-        background-color: dimgrey;
-        border-radius: 1em;
-    }
-
-    mat-form-field:focus {
-        background-color: dimgrey;
-    }
-
-    #sort-button {
-        background-color: darken(dimgrey, 5);
-    }
-}
-
-@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/shared/sidebar/file-search/file-search.component.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
index 2c19341..4ece189 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
@@ -1,3 +1,5 @@
+@import "src/colors";
+
 .full-width {
     width: auto;
     min-width: 100%;
@@ -7,7 +9,6 @@
     width: calc(100% - 64px);
     height: 2.7em;
     padding: 0.5em 0;
-    box-shadow: 0 0 1em 0.1em rgba(0, 0, 0, 0.05) inset;
     overflow-x: auto;
     overflow-y: hidden;
 }
@@ -93,12 +94,12 @@
 }
 
 .selectable-tag:hover {
-    background-color: darken(dimgrey, 10);
+    background-color: $background-lighter-05;
 }
 
 .selectable-tag:active {
     cursor: pointer;
-    background-color: darken(dimgrey, 5);
+    background-color: $background-lighter-10;
 }
 
 cdk-virtual-scroll-viewport {
@@ -137,3 +138,16 @@ mat-divider {
     margin-left: 1em;
     margin-right: 1em;
 }
+
+.tag-input-item {
+    background-color: $background-lighter-10;
+    border-radius: 1em;
+}
+
+mat-form-field:focus {
+    background-color: dimgrey;
+}
+
+#sort-button {
+    background-color: $background-lighter-10;
+}
diff --git a/mediarepo-ui/src/colors.scss b/mediarepo-ui/src/colors.scss
index e8403cc..57e6bc3 100644
--- a/mediarepo-ui/src/colors.scss
+++ b/mediarepo-ui/src/colors.scss
@@ -21,8 +21,9 @@ $warn-chill: #fcd349;
 $text: #FFF;
 $text-darker-10: darken($text, 10%);
 
-$background: #424242;
-$background-lighter-05: lighten($background, 4%);
+$background: darken(#424242, 5%);
+$background-darker-05: darken($background, 5%);
+$background-lighter-05: lighten($background, 5%);
 $background-lighter-10: lighten($background, 10%);
 
 // specifics
diff --git a/mediarepo-ui/src/material-theme-correction.scss b/mediarepo-ui/src/material-theme-correction.scss
new file mode 100644
index 0000000..171ee2b
--- /dev/null
+++ b/mediarepo-ui/src/material-theme-correction.scss
@@ -0,0 +1,44 @@
+@import "colors";
+
+.mat-form-field.mat-focused .mat-form-field-label {
+    color: $primary-lighter-30;
+}
+
+.mat-input-element {
+    caret-color: $primary-lighter-20;
+}
+
+.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
+    background: rgba(255, 255, 255, 0.05);
+    color: $primary-lighter-20;
+}
+
+.mat-dialog-container {
+    background: $background;
+}
+
+.mat-drawer {
+    background: $background;
+}
+
+.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
+    background: $background;
+}
+
+// scrollbar
+
+::-webkit-scrollbar {
+    width: 15px;
+    height: 15px;
+    background: $background-darker-05;
+}
+
+::-webkit-scrollbar-thumb {
+    background: $primary-darker-10;
+    border-radius: 1px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: $primary;
+    border-radius: 5px;
+}
diff --git a/mediarepo-ui/src/styles.scss b/mediarepo-ui/src/styles.scss
index 9dab08d..11a2bfa 100644
--- a/mediarepo-ui/src/styles.scss
+++ b/mediarepo-ui/src/styles.scss
@@ -1,14 +1,12 @@
 @use 'sass:map';
 @use "@angular/material" as mat;
 @use 'src/app/app.component-theme' as app;
-@use 'app/components/shared/file/file-card/file-card.component-theme' as file-card;
-@use 'app/components/shared/sidebar/file-search/file-search.component-theme' as file-search;
 
 @include mat.core();
 
 $theme: mat.define-dark-theme((
     color: (
-        primary: mat.define-palette(mat.$purple-palette, 700, 500, 800),
+        primary: mat.define-palette(mat.$purple-palette, 500, 300, 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)
@@ -18,28 +16,14 @@ $theme: mat.define-dark-theme((
     )
 ));
 
+
 $color-config: mat.get-color-config($theme);
 $primary-palette: map.get($color-config, 'primary');
 $accent-pallette: map.get($color-config, 'accent');
 $background-pallette: map.get($color-config, 'background');
 $warn-palette: map.get($color-config, 'warn');
 
-::-webkit-scrollbar {
-    width: 15px;
-    height: 15px;
-    background: #272727;
-}
-
-::-webkit-scrollbar-thumb {
-    background: mat.get-color-from-palette($primary-palette, 'darker');
-    border-radius: 1px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: mat.get-color-from-palette($primary-palette);
-}
 
 @include mat.all-component-themes($theme);
 @include app.theme($theme);
-@include file-card.theme($theme);
-@include file-search.theme($theme);
+