Merge pull request #3108 from github/koesie10/compare-styled

Switch to styled-components for compare components

Author: koesie10

extensions/ql-vscode/src/view/compare/Compare.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { useState, useEffect } from "react";
+import { styled } from "styled-components";
 
 import {
   ToCompareViewMessage,
@@ -11,6 +12,18 @@ import CompareTable from "./CompareTable";
 
 import "../results/resultsView.css";
 
+const Header = styled.div`
+  display: flex;
+`;
+
+const HeaderTitle = styled.div`
+  margin: 0 1.5rem;
+`;
+
+const Message = styled.div`
+  padding: 1.5rem;
+`;
+
 export function Compare(_: Record<string, never>): JSX.Element {
   const [comparison, setComparison] = useState<SetComparisonsMessage | null>(
     null,
@@ -49,20 +62,20 @@ export function Compare(_: Record<string, never>): JSX.Element {
   try {
     return (
       <>
-        <div className="vscode-codeql__compare-header">
-          <div className="vscode-codeql__compare-header-item">Comparing:</div>
+        <Header>
+          <HeaderTitle>Comparing:</HeaderTitle>
           <CompareSelector
             availableResultSets={comparison.commonResultSetNames}
             currentResultSetName={comparison.currentResultSetName}
             updateResultSet={(newResultSetName: string) =>
               vscode.postMessage({ t: "changeCompare", newResultSetName })
             }
           />
-        </div>
+        </Header>
         {hasRows ? (
           <CompareTable comparison={comparison}></CompareTable>
         ) : (
-          <div className="vscode-codeql__compare-message">{message}</div>
+          <Message>{message}</Message>
         )}
       </>
     );

extensions/ql-vscode/src/view/compare/CompareTable.tsx

@@ -17,6 +17,15 @@ const OpenButton = styled(TextButton)`
   padding: 0;
 `;
 
+const Table = styled.table`
+  margin: 20px 0;
+  width: 100%;
+
+  & > tbody {
+    vertical-align: top;
+  }
+`;
+
 export default function CompareTable(props: Props) {
   const comparison = props.comparison;
   const result = props.comparison.result!;
@@ -29,7 +38,7 @@ export default function CompareTable(props: Props) {
   }
 
   return (
-    <table className="vscode-codeql__compare-body">
+    <Table>
       <thead>
         <tr>
           <td>
@@ -74,6 +83,6 @@ export default function CompareTable(props: Props) {
           </td>
         </tr>
       </tbody>
-    </table>
+    </Table>
   );
 }

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

@@ -168,27 +168,6 @@ td.vscode-codeql__path-index-cell {
   opacity: 0.6;
 }
 
-.vscode-codeql__compare-header {
-  display: flex;
-}
-
-.vscode-codeql__compare-header-item {
-  margin: 0 1.5rem;
-}
-
-.vscode-codeql__compare-message {
-  padding: 1.5rem;
-}
-
-.vscode-codeql__compare-body {
-  margin: 20px 0;
-  width: 100%;
-}
-
-.vscode-codeql__compare-body > tbody {
-  vertical-align: top;
-}
-
 .vscode-codeql__empty-query-message {
   height: 300px;
   display: flex;