NIFI-12912 snackbar bug (#8528)

Removed unnecessary rules and class. The snackbars will be styled by Angular Material. Improved get-color-on-surface helper function. This closes #8528
apache · Mar 18, 2024 · f5e44a9 · f5e44a9
1 parent 12fc2f8
commit f5e44a9
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 26 deletions.
diff --git a/...nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss b/...nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss
@@ -25,36 +25,16 @@
 
     // Get the color palette from the color-config.
     $primary-palette: map.get($color-config, 'primary');
-    $accent-palette: map.get($color-config, 'accent');
-    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
     $canvas-accent-palette: map.get($canvas-color-config, 'accent');
 
     // Get hues from palette
-    $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter);
     $primary-palette-default: mat.get-color-from-palette($primary-palette, default);
-    $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
-    $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
     $canvas-accent-palette-default: mat.get-color-from-palette($canvas-accent-palette, default);
 
     .splash {
         background-color: $primary-palette-default;
     }
 
-    // https://github.com/angular/components/issues/11426
-    .nifi-snackbar .mdc-snackbar__surface {
-        background-color: $primary-palette-lighter !important;
-    }
-
-    // https://github.com/angular/components/issues/11426
-    .nifi-snackbar .mat-mdc-snack-bar-label {
-        color: $canvas-primary-palette-A200 !important;
-    }
-
-    // https://github.com/angular/components/issues/11426
-    .nifi-snackbar .mat-mdc-button:not(:disabled) .mdc-button__label {
-        color: $accent-palette-default;
-    }
-
     .fa.fa-check.complete {
         color: $canvas-accent-palette-default;
     }

diff --git a/...i-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/error/error.effects.ts b/...i-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/error/error.effects.ts
@@ -50,7 +50,7 @@ export class ErrorEffects {
                 ofType(ErrorActions.snackBarError),
                 map((action) => action.error),
                 tap((error) => {
-                    this.snackBar.open(error, 'Dismiss', { panelClass: 'nifi-snackbar', duration: 30000 });
+                    this.snackBar.open(error, 'Dismiss', { duration: 30000 });
                 })
             ),
         { dispatch: false }

diff --git a/...undle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss b/...undle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
@@ -175,7 +175,6 @@
     $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default');
     $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
 
-    $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
     $accent-palette-lighter: mat.get-color-from-palette($accent-palette, 'lighter');
 
     $warn-palette-lighter: mat.get-color-from-palette($warn-palette, lighter);
@@ -190,9 +189,15 @@
     $on-surface: utils.get-on-surface($canvas-color-config);
     $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
 
+    // Because snackbars have different surface colors, we need to make sure the action color has enough contrast.
+    $is-dark: map.get($color-config, is-dark);
+    $snack-surface: if($is-dark, #d9d9d9, #333333);
+    $snack-action-color: utils.get-color-on-surface($color-config, $snack-surface, 'accent');
+
     * {
         // Tailwind sets a default that doesn't shift with light and dark themes
         border-color: $on-surface-lighter;
+        --mat-snack-bar-button-color: #{$snack-action-color};
     }
 
     .cdk-drag-disabled {

diff --git a/...work-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/utils.scss b/...work-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/utils.scss
@@ -81,14 +81,11 @@
 }
 
 @function get-color-on-surface($theme, $surface: #ffffff, $palette: 'primary') {
-    // Check to see if it's a dark theme
-    $is-dark: map.get($theme, is-dark);
     $color-config: mat.get-color-config($theme);
     $color-palette: map.get($theme, $palette);
 
     $default: mat.get-color-from-palette($color-palette, default);
-    $high-contrast: mat.get-color-from-palette($color-palette, if($is-dark, lighter, darker));
-
+    $high-contrast: mat.get-color-from-palette($color-palette, if(luminosity($default) > luminosity($surface), lighter, darker));
     $on-surface: ensure-contrast($default, $surface, $high-contrast);
 
     @return $on-surface;