From 84182e4f4998954bfb88a1ef65e4c183e9044131 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 8 Jun 2021 19:10:22 -0400
Subject: [PATCH] Live query error message (#1007)

* Rewrite and style live query error
---
 .../pages/queries/QueryPage/QueryPage.jsx     |  9 +++++---
 frontend/pages/queries/QueryPage/_styles.scss | 23 +++++++++++++++----
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/frontend/pages/queries/QueryPage/QueryPage.jsx b/frontend/pages/queries/QueryPage/QueryPage.jsx
index 6f1680b856..9af1f8e996 100644
--- a/frontend/pages/queries/QueryPage/QueryPage.jsx
+++ b/frontend/pages/queries/QueryPage/QueryPage.jsx
@@ -539,11 +539,14 @@ export class QueryPage extends Component {
       return false;
     }
 
-    const message = `Live query disabled due to error: ${liveQueryError}`;
-
     return (
       <WarningBanner className={`${baseClass}__warning`} shouldShowWarning>
-        {message}
+        <h2 className={`${baseClass}__warning-title`}>
+          Live query request failed
+        </h2>
+        <p>
+          <span>Error:</span> {liveQueryError}
+        </p>
       </WarningBanner>
     );
   };
diff --git a/frontend/pages/queries/QueryPage/_styles.scss b/frontend/pages/queries/QueryPage/_styles.scss
index 85880013fe..5edbce72c5 100644
--- a/frontend/pages/queries/QueryPage/_styles.scss
+++ b/frontend/pages/queries/QueryPage/_styles.scss
@@ -13,10 +13,6 @@
     min-height: 400px;
   }
 
-  &__warning {
-    margin: 0;
-  }
-
   &__content {
     display: flex;
     flex-direction: column;
@@ -24,6 +20,25 @@
     margin-bottom: $pad-medium;
   }
 
+  &__warning {
+    margin: $pad-xlarge;
+    margin-bottom: 0;
+
+    &-title {
+      font-size: $small;
+      font-weight: $bold;
+      margin: 0;
+    }
+
+    span {
+      font-weight: $bold;
+    }
+    p {
+      margin: 0;
+      margin-top: $pad-xsmall;
+    }
+  }
+
   &__observer-query-view {
     width: 90%;
     max-width: 1060px;