style(mat-menu): apply black background to representation menu (#1118)

dasch-swiss · Jun 26, 2023 · f367394 · f367394
1 parent 76f495b
commit f367394
Show file tree

Hide file tree

Showing 11 changed files with 21 additions and 12 deletions.
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/archive/archive.component.html b/apps/dsp-app/src/app/workspace/resource/representation/archive/archive.component.html
@@ -26,7 +26,7 @@
                 <button mat-icon-button [matMenuTriggerFor]="more">
                     <mat-icon>more_vert</mat-icon>
                 </button>
-                <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                <mat-menu #more="matMenu" class="representation-menu">
                     <button
                         class="menu-content"
                         mat-menu-item

diff --git a/apps/dsp-app/src/app/workspace/resource/representation/archive/archive.component.scss b/apps/dsp-app/src/app/workspace/resource/representation/archive/archive.component.scss
@@ -5,7 +5,7 @@
     width: 100%;
 
     .container {
-        background: #292929;
+        background: $dark;
         border-radius: 8px 8px 0px 0px;
         display: flex;
         justify-content: center;

diff --git a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.html b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.html
@@ -31,7 +31,7 @@
                 <button mat-icon-button [matMenuTriggerFor]="more">
                     <mat-icon>more_vert</mat-icon>
                 </button>
-                <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                <mat-menu #more="matMenu" class="representation-menu">
                     <button
                         class="menu-content"
                         mat-menu-item

diff --git a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.scss b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.scss
@@ -5,7 +5,7 @@
     width: 100%;
 
     .container {
-        background: #292929;
+        background: $dark;
         border-radius: 8px 8px 0px 0px;
         display: flex;
         justify-content: center;

diff --git a/apps/dsp-app/src/app/workspace/resource/representation/document/document.component.html b/apps/dsp-app/src/app/workspace/resource/representation/document/document.component.html
@@ -27,7 +27,7 @@
                 <button mat-icon-button [matMenuTriggerFor]="more">
                     <mat-icon>more_vert</mat-icon>
                 </button>
-                <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                <mat-menu #more="matMenu" class="representation-menu">
                     <button
                         class="menu-content"
                         mat-menu-item

diff --git a/apps/dsp-app/src/app/workspace/resource/representation/document/document.component.scss b/apps/dsp-app/src/app/workspace/resource/representation/document/document.component.scss
@@ -23,7 +23,7 @@ $osd-height: 460px;
   .pdf-container {
     color: $bright;
     height: 90%;
-    background-color: #292929;
+    background-color: $dark;
     border-radius: 8px 8px 0px 0px;
 
     pdf-viewer {
@@ -56,7 +56,7 @@ $osd-height: 460px;
   width: 100%;
 
   .container {
-    background: #292929;
+    background: $dark;
     border-radius: 8px 8px 0px 0px;
     display: flex;
     justify-content: center;

diff --git a/.../dsp-app/src/app/workspace/resource/representation/still-image/still-image.component.html b/.../dsp-app/src/app/workspace/resource/representation/still-image/still-image.component.html
@@ -55,7 +55,7 @@
         <button mat-icon-button [matMenuTriggerFor]="more">
             <mat-icon>more_vert</mat-icon>
         </button>
-        <mat-menu #more="matMenu" class="mat-menu-custom-black">
+        <mat-menu #more="matMenu" class="representation-menu">
             <button
                 class="menu-content"
                 mat-menu-item

diff --git a/apps/dsp-app/src/app/workspace/resource/representation/text/text.component.html b/apps/dsp-app/src/app/workspace/resource/representation/text/text.component.html
@@ -25,7 +25,7 @@
                 <button mat-icon-button [matMenuTriggerFor]="more">
                     <mat-icon>more_vert</mat-icon>
                 </button>
-                <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                <mat-menu #more="matMenu" class="representation-menu">
                     <button
                         class="menu-content"
                         mat-menu-item

diff --git a/apps/dsp-app/src/app/workspace/resource/representation/text/text.component.scss b/apps/dsp-app/src/app/workspace/resource/representation/text/text.component.scss
@@ -5,7 +5,7 @@
   width: 100%;
 
   .container {
-    background: #292929;
+    background: $dark;
     border-radius: 8px 8px 0px 0px;
     display: flex;
     justify-content: center;

diff --git a/apps/dsp-app/src/app/workspace/resource/representation/video/video.component.html b/apps/dsp-app/src/app/workspace/resource/representation/video/video.component.html
@@ -87,7 +87,7 @@
             <button mat-icon-button [matMenuTriggerFor]="more">
                 <mat-icon>more_vert</mat-icon>
             </button>
-            <mat-menu #more="matMenu" class="mat-menu-custom-black">
+            <mat-menu #more="matMenu" class="representation-menu">
                 <button
                     mat-menu-item
                     class="menu-content"

diff --git a/apps/dsp-app/src/styles/_elements.scss b/apps/dsp-app/src/styles/_elements.scss
@@ -3,6 +3,7 @@
 @use "sass:math";
 @use "@material/snackbar" as snackbar;
 @use "@material/button" as button;
+@use "@material/menu-surface" as menu-surface;
 
 .fill-remaining-space {
   /* This fills the remaining space, by using flexbox.
@@ -305,7 +306,7 @@ a,
     }
 
     &.overlay {
-      background: #292929;
+      background: $dark;
     }
 
     &.vertical {
@@ -342,6 +343,14 @@ a,
   // }
 }
 
+// file representation menu styling
+.representation-menu {
+  &.mdc-menu-surface {
+    @include menu-surface.fill-color($dark);
+    @include menu-surface.ink-color($white);
+  }
+}
+
 .no-results {
   margin: 64px;
   min-width: 400px;