From 3236c9b7acb53e9468f09c1e57a99d79bb953774 Mon Sep 17 00:00:00 2001
From: Mike Bender <mikebender@deephaven.io>
Date: Mon, 13 May 2024 11:00:26 -0400
Subject: [PATCH] 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
---
 packages/components/scss/new_variables.scss                | 2 +-
 packages/components/scss/util.scss                         | 4 ++++
 packages/components/src/ErrorView.scss                     | 2 +-
 packages/components/src/LoadingOverlay.scss                | 3 ++-
 packages/dashboard-core-plugins/src/panels/ChartPanel.scss | 3 ++-
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/components/scss/new_variables.scss b/packages/components/scss/new_variables.scss
index 3e7aefe7cf..a8b445af77 100644
--- a/packages/components/scss/new_variables.scss
+++ b/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%;
diff --git a/packages/components/scss/util.scss b/packages/components/scss/util.scss
index 87279367b7..0efaede7af 100644
--- a/packages/components/scss/util.scss
+++ b/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);
 }
diff --git a/packages/components/src/ErrorView.scss b/packages/components/src/ErrorView.scss
index c0c290d693..fd6a7ced0d 100644
--- a/packages/components/src/ErrorView.scss
+++ b/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;
diff --git a/packages/components/src/LoadingOverlay.scss b/packages/components/src/LoadingOverlay.scss
index f6ce309fa1..95be76e241 100644
--- a/packages/components/src/LoadingOverlay.scss
+++ b/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);
 }
diff --git a/packages/dashboard-core-plugins/src/panels/ChartPanel.scss b/packages/dashboard-core-plugins/src/panels/ChartPanel.scss
index 6b9f522adf..edb663ab34 100644
--- a/packages/dashboard-core-plugins/src/panels/ChartPanel.scss
+++ b/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;