Switch to styled-components for EmptyQueryResultsMessage

Author: koesie10

extensions/ql-vscode/src/view/results/EmptyQueryResultsMessage.tsx

@@ -1,14 +1,28 @@
 import * as React from "react";
+import { styled } from "styled-components";
 import { sendTelemetry } from "../common/telemetry";
 
 function sendCodeQLLanguageGuidesTelemetry() {
   sendTelemetry("codeql-language-guides-link");
 }
 
+const Root = styled.div`
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Container = styled.span`
+  max-width: 80%;
+  font-size: 14px;
+  text-align: center;
+`;
+
 export function EmptyQueryResultsMessage(): JSX.Element {
   return (
-    <div className="vscode-codeql__empty-query-message">
-      <span>
+    <Root>
+      <Container>
         This query returned no results. If this isn&apos;t what you were
         expecting, and for effective query-writing tips, check out the{" "}
         <a
@@ -18,7 +32,7 @@ export function EmptyQueryResultsMessage(): JSX.Element {
           CodeQL language guides
         </a>
         .
-      </span>
-    </div>
+      </Container>
+    </Root>
   );
 }

extensions/ql-vscode/src/view/results/resultsView.css

@@ -168,19 +168,6 @@ td.vscode-codeql__path-index-cell {
   opacity: 0.6;
 }
 
-.vscode-codeql__empty-query-message {
-  height: 300px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vscode-codeql__empty-query-message > span {
-  max-width: 80%;
-  font-size: 14px;
-  text-align: center;
-}
-
 .vscode-codeql__result-table-location-link {
   text-decoration: none;
 }