Move all ResultTablesHeader styles to styled-components

Author: koesie10

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

@@ -18,6 +18,43 @@ interface Props {
   selectedTable: string;
 }
 
+const Container = styled.span`
+  display: flex;
+  padding: 0.5em 0;
+  align-items: center;
+  top: 0;
+  background-color: var(--vscode-editorGutter-background);
+  position: sticky;
+  z-index: 1;
+`;
+
+const PaginationButton = styled.button`
+  padding: 0.3rem;
+  margin: 0.2rem;
+  border: 0;
+  font-size: large;
+  color: var(--vscode-editor-foreground);
+  background-color: var(--vscode-editorGutter-background);
+  cursor: pointer;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+const PageNumberInput = styled.input`
+  border-radius: 0;
+  padding: 0.3rem;
+  margin: 0.2rem;
+  width: 2rem;
+  color: var(--vscode-editor-foreground);
+  border: 0;
+  border-bottom: 1px solid var(--vscode-editor-foreground);
+  background-color: var(--vscode-editorGutter-background);
+  outline: none;
+`;
+
 const OpenQueryLink = styled(TextButton)`
   text-decoration: none;
 `;
@@ -110,9 +147,9 @@ export function ResultTablesHeader(props: Props) {
   }, [queryPath]);
 
   return (
-    <span className="vscode-codeql__table-selection-pagination">
-      <button onClick={prevPageHandler}>&#xab;</button>
-      <input
+    <Container>
+      <PaginationButton onClick={prevPageHandler}>&#xab;</PaginationButton>
+      <PageNumberInput
         type="number"
         size={3}
         value={selectedPage}
@@ -123,16 +160,16 @@ export function ResultTablesHeader(props: Props) {
         onKeyDown={onKeyDownHandler}
       />
       <span>/&nbsp;{numPages}</span>
-      <button value=">" onClick={nextPageHandler}>
+      <PaginationButton value=">" onClick={nextPageHandler}>
         &#xbb;
-      </button>
+      </PaginationButton>
       <div className={tableHeaderItemClassName}>{queryName}</div>
       <div className={tableHeaderItemClassName}>
         <OpenQueryLink onClick={openQueryHandler}>
           Open {basename(queryPath)}
         </OpenQueryLink>
       </div>
-    </span>
+    </Container>
   );
 }
 

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

@@ -11,16 +11,6 @@
   justify-content: space-between;
 }
 
-.vscode-codeql__table-selection-pagination {
-  display: flex;
-  padding: 0.5em 0;
-  align-items: center;
-  top: 0;
-  background-color: var(--vscode-editorGutter-background);
-  position: sticky;
-  z-index: 1;
-}
-
 .vscode-codeql__table-selection-header-item {
   padding-left: 2em;
 }
@@ -29,35 +19,6 @@
   border: 0;
 }
 
-.vscode-codeql__table-selection-pagination button {
-  padding: 0.3rem;
-  margin: 0.2rem;
-  border: 0;
-  font-size: large;
-  color: var(--vscode-editor-foreground);
-  background-color: var(--vscode-editorGutter-background);
-  cursor: pointer;
-  opacity: 0.8;
-}
-
-.vscode-codeql__table-selection-pagination button:hover {
-  opacity: 1;
-}
-
-.vscode-codeql__table-selection-pagination input[type="number"] {
-  border-radius: 0;
-  padding: 0.3rem;
-  margin: 0.2rem;
-  width: 2rem;
-  border-radius: 0;
-  color: var(--vscode-editor-foreground);
-  border: 0;
-  border-bottom: 1px solid var(--vscode-editor-foreground);
-  background-color: var(--vscode-editorGutter-background);
-  border-radius: 0;
-  outline: none;
-}
-
 .vscode-codeql__result-table-alert-extras {
   display: inline-block;
   text-align: left;
@@ -244,3 +205,7 @@ td.vscode-codeql__path-index-cell {
   font-size: 14px;
   text-align: center;
 }
+
+.vscode-codeql__result-table-location-link {
+  text-decoration: none;
+}