[styling bug] Fleet UI: Update live query disabled warning styling (#…

…17929)

changes/17927-fix-styling-for-live-query-disabled-warning

@@ -0,0 +1 @@
+- UI fix: styling of live query disabled warning

frontend/pages/queries/edit/EditQueryPage.tsx

@@ -14,11 +14,14 @@ import {
   ICreateQueryRequestBody,
   ISchedulableQuery,
 } from "interfaces/schedulable_query";
+import { IConfig } from "interfaces/config";
 
 import QuerySidePanel from "components/side_panels/QuerySidePanel";
 import MainContent from "components/MainContent";
 import SidePanelContent from "components/SidePanelContent";
 import CustomLink from "components/CustomLink";
+import BackLink from "components/BackLink";
+import InfoBanner from "components/InfoBanner";
 
 import useTeamIdParam from "hooks/useTeamIdParam";
 
@@ -28,9 +31,7 @@ import PATHS from "router/paths";
 import debounce from "utilities/debounce";
 import deepDifference from "utilities/deep_difference";
 
-import BackLink from "components/BackLink";
-import EditQueryForm from "pages/queries/edit/components/EditQueryForm";
-import { IConfig } from "interfaces/config";
+import EditQueryForm from "./components/EditQueryForm";
 
 interface IEditQueryPageProps {
   router: InjectedRouter;
@@ -304,19 +305,15 @@ const EditQueryPage = ({
     }
 
     return (
-      <div className={`${baseClass}__warning`}>
-        <div className={`${baseClass}__message`}>
-          <p>
-            Fleet is unable to run a live query. Refresh the page or log in
-            again. If this keeps happening please{" "}
-            <CustomLink
-              url="https://github.com/fleetdm/fleet/issues/new/choose"
-              text="file an issue"
-              newTab
-            />
-          </p>
-        </div>
-      </div>
+      <InfoBanner color="yellow">
+        Fleet is unable to run a live query. Refresh the page or log in again.
+        If this keeps happening please{" "}
+        <CustomLink
+          url="https://github.com/fleetdm/fleet/issues/new/choose"
+          text="file an issue"
+          newTab
+        />
+      </InfoBanner>
     );
   };
 

frontend/pages/queries/edit/_styles.scss

@@ -1,22 +1,6 @@
 .edit-query-page {
   @include page;
 
-  &__warning {
-    padding: $pad-medium;
-    font-size: $x-small;
-    color: $core-fleet-black;
-    background-color: #fff0b9;
-    border: 1px solid #f2c94c;
-    border-radius: $border-radius;
-    margin: 0;
-    margin-top: $pad-large;
-
-    p {
-      margin: 0;
-      line-height: 20px;
-    }
-  }
-
   .ace_content {
     min-height: 500px !important;
   }