fix: Improve the look of the error view (#2001)

- Add a little blur to overlays, so they're easier to read when on top
of complex backgrounds
- Change the colour and transparency level of the error background

Author: mofojed

packages/components/scss/new_variables.scss

@@ -54,4 +54,4 @@ $ant-thickness: 1px;
 $focus-bg-transparency: 12%;
 $hover-bg-transparency: 14%;
 $active-bg-transparency: 28%;
-$exception-transparency: 13%;
+$exception-transparency: 28%;

packages/components/scss/util.scss

@@ -71,6 +71,10 @@
   @return color-mix-opacity('negative', $i);
 }
 
+@function negative-down-bg-opacity($i: 100) {
+  @return color-mix-opacity('negative-down-bg', $i);
+}
+
 @function black-opacity($i: 100) {
   @return color-mix-opacity('black', $i);
 }

packages/components/src/ErrorView.scss

@@ -4,7 +4,7 @@
   position: relative;
   color: $danger;
   border-radius: $border-radius;
-  background-color: negative-opacity($exception-transparency);
+  background-color: negative-down-bg-opacity($exception-transparency);
   display: flex;
   flex-direction: column;
   flex-grow: 0;

packages/components/src/LoadingOverlay.scss

@@ -2,7 +2,7 @@
 
 $iris-panel-message-font-size: 1.2rem;
 $iris-panel-icon-font-size: 64px;
-$iris-panel-scrim-bg: black-opacity(10);
+$iris-panel-scrim-bg: bg-opacity(80);
 
 .iris-panel-message-overlay {
   text-align: center;
@@ -30,4 +30,5 @@ $iris-panel-scrim-bg: black-opacity(10);
 
 .iris-panel-scrim-background {
   background: $iris-panel-scrim-bg;
+  backdrop-filter: blur(2px);
 }

packages/dashboard-core-plugins/src/panels/ChartPanel.scss

@@ -2,7 +2,7 @@
 
 $chart-panel-disconnected-opacity: 0.18;
 $overlay-message-font-size: 1.2rem;
-$overlay-scrim-bg: black-opacity(50);
+$overlay-scrim-bg: bg-opacity(80);
 $overlay-content-max-width: 450px;
 
 .iris-chart-panel {
@@ -24,6 +24,7 @@ $overlay-content-max-width: 450px;
 
 .chart-panel-overlay {
   background-color: $overlay-scrim-bg;
+  backdrop-filter: blur(1px);
   position: absolute;
   top: 0;
   bottom: 0;