Fix colour theme visibility

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

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

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%;

mediarepo-ui/src/app/components/shared/file/file-card/file-card.component-theme.scss

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

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 {

mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component-theme.scss

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

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

mediarepo-ui/src/colors.scss

@@ -21,8 +21,9 @@ $warn-chill: #fcd349;
 $text: #FFF;
 $text-darker-10: darken($text, 10%);
 
-$background: #424242;
+$background: darken(#424242, 5%);
-$background-lighter-05: lighten($background, 4%);
+$background-darker-05: darken($background, 5%);
+$background-lighter-05: lighten($background, 5%);
 $background-lighter-10: lighten($background, 10%);
 
 // specifics

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

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