Change background color to a more blueish grey

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

mediarepo-ui/src/app/app.component-theme.scss

@@ -1,40 +0,0 @@
-@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');
-    $warn-palette: map.get($color-config, 'warn');
-
-    body {
-        background-color: darken(#303030, 5);
-        color: white
-    }
-
-    .warn {
-        background-color: mat.get-color-from-palette($warn-palette);
-        color: white
-    }
-}
-
-@mixin typography($theme) {
-    // Get the typography config from the theme.
-    $typography-config: mat.get-typography-config($theme);
-
-    body {
-        font-family: mat.font-family($typography-config);
-    }
-}
-
-@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/app.component.scss

@@ -1,5 +1,16 @@
 @import "src/colors";
 
+:host, ::ng-deep body {
+    font-family: $font-family;
+    background-color: $background;
+    color: white
+}
+
+::ng-deep .warn {
+    background-color: $warn;
+    color: white
+}
+
 ::ng-deep .mat-button-wrapper > ng-icon {
     font-size: 26px;
 }
@@ -16,3 +27,4 @@
     background-color: $warn;
     color: $text;
 }
+

mediarepo-ui/src/app/components/shared/app-common/busy-dialog/busy-dialog.component.html

@@ -6,7 +6,7 @@
     {{message}}
 </div>
 <div *ngIf="this.allowCancel" class="busy-dialog-actions" mat-dialog-actions>
-    <button (click)="this.dialogRef.close(false)" mat-flat-button>
+    <button (click)="this.dialogRef.close(false)" color="primary" mat-stroked-button>
         Cancel
     </button>
 </div>

mediarepo-ui/src/app/components/shared/app-common/selectable/selectable.component.scss

@@ -1,5 +1,7 @@
+@import "src/colors";
+
 .selectable.selected {
-    background-color: #5c5c5c;
+    background-color: $background-lighter-10;
 }
 
 body {

mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.scss

@@ -45,6 +45,7 @@
     width: 100%;
     height: 100%;
     border-top: 2px solid $background-darker-05;
+    background-color: $background;
 
     .file-item {
         width: 100%;

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

@@ -85,22 +85,22 @@
     cursor: pointer;
     user-select: none;
     font-size: 1.2em;
-    transition-duration: 0.1s;
+    transition-duration: 0.2s;
     width: 100%;
     background-color: $background-lighter-05;
 
-    app-tag-item {
+    &:hover {
-        margin: auto auto auto 0.25em;
+        background-color: $background-lighter-10;
     }
-}
 
-.selectable-tag:hover {
+    &:active {
-    background-color: $background-lighter-10;
+        cursor: pointer;
-}
+        background-color: $background;
+    }
 
-.selectable-tag:active {
+    app-tag-item {
-    cursor: pointer;
+        margin: auto auto auto 0.25em;
-    background-color: $background;
+    }
 }
 
 cdk-virtual-scroll-viewport {
@@ -143,6 +143,11 @@ mat-divider {
 .tag-input-item {
     background-color: $background-lighter-10;
     border-radius: 1em;
+    transition-duration: 0.2s;
+
+    &:hover {
+        background-color: $background-lighter-15;
+    }
 }
 
 mat-form-field:focus {

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-dialog/filter-expression-list-item/filter-expression-list-item.component.scss

@@ -1,8 +1,10 @@
+@import "src/colors";
+
 mat-list {
     height: 100%;
     width: 100%;
     display: block;
-    background-color: #353535;
+    background-color: $background;
     padding: 0;
     border-radius: 0.25em;
 }
@@ -22,7 +24,7 @@ mat-list-item.or-filter-list-item {
 }
 
 .selected {
-    background-color: #5c5c5c;
+    background-color: $background-lighter-10;
 }
 
 app-selectable {
@@ -31,5 +33,5 @@ app-selectable {
 }
 
 .or-combinator {
-    color: #7dff70;
+    color: $accent-lighter-10;
 }

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

@@ -6,4 +6,8 @@
     background-color: $background-lighter-10;
     text-overflow: ellipsis;
     overflow: hidden;
+
+    &:hover {
+        background-color: $background-lighter-15;
+    }
 }

mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.ts

@@ -1,10 +1,11 @@
-import {Component, Input} from "@angular/core";
+import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
 import {Tag} from "../../../../../api/models/Tag";
 
 @Component({
     selector: "app-tag-item",
     templateUrl: "./tag-item.component.html",
-    styleUrls: ["./tag-item.component.scss"]
+    styleUrls: ["./tag-item.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TagItemComponent {
 

mediarepo-ui/src/colors.scss

@@ -22,11 +22,17 @@ $warn-chill: #fcd349;
 $text: #FFF;
 $text-darker-10: darken($text, 10%);
 
-$background: darken(#424242, 5%);
+$background: darken(#373a46, 10%);
 $background-darker-05: darken($background, 5%);
 $background-darker-10: darken($background, 10%);
 $background-lighter-05: lighten($background, 5%);
 $background-lighter-10: lighten($background, 10%);
+$background-lighter-15: lighten($background, 15%);
 
 // specifics
 $tag-namespace: $accent-lighter-10;
+
+
+// fonts
+$typography-config: mat.get-typography-config($theme);
+$font-family: mat.font-family($typography-config);

mediarepo-ui/src/material-theme-correction.scss

@@ -14,17 +14,51 @@
 }
 
 .mat-dialog-container {
-    background: $background;
+    background: $background-lighter-05;
 }
 
 .mat-drawer {
-    background: $background;
+    background: $background !important;
 }
 
 .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
     background: $background;
 }
 
+.mat-form-field-flex {
+    background: $background-lighter-05;
+}
+
+.mat-form-field-appearance-fill .mat-form-field-flex {
+    background: $background-lighter-05;
+}
+
+.mat-autocomplete-panel, mat-option, .mat-menu-panel {
+    background: $background-lighter-05;
+}
+
+button .mat-flat-button {
+    background: $background-lighter-05;
+}
+
+mat-option {
+    &.mat-selected {
+        background: $background-lighter-10 !important;
+    }
+
+    &:hover {
+        background: darken($background-lighter-10, 1%) !important;
+    }
+}
+
+mat-toolbar.mat-toolbar {
+    background: $background-darker-05;
+}
+
+.mat-card {
+    background: $background-lighter-10;
+}
+
 // scrollbar
 
 ::-webkit-scrollbar {

mediarepo-ui/src/styles.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use "@angular/material" as mat;
-@use 'src/app/app.component-theme' as app;
 
 @include mat.core();
 
@@ -25,5 +24,4 @@ $warn-palette: map.get($color-config, 'warn');
 
 
 @include mat.all-component-themes($theme);
-@include app.theme($theme);