Convert re-usable components to styled-components (#1112)

extensions/ql-vscode/src/remote-queries/view/Badge.tsx

@@ -1,9 +1,29 @@
 import * as React from 'react';
+import styled from 'styled-components';
+
+const BadgeContainer = styled.span`
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding-left: 0.2em;
+`;
+
+const BadgeText = styled.span`
+  display: inline-block;
+  min-width: 1.5em;
+  padding: 0.3em;
+  border-radius: 35%;
+  font-size: x-small;
+  text-align: center;
+  background: var(--vscode-badge-background);
+  color: var(--vscode-badge-foreground);
+  border-color: var(--vscode-badge-background);
+`;
 
 const Badge = ({ text }: { text: string }) => (
-  <span className="vscode-codeql__badge-container">
+  <BadgeContainer>
-    <span className="vscode-codeql__badge">{text}</span>
+    <BadgeText>{text}</BadgeText>
-  </span>
+  </BadgeContainer>
 );
 
 export default Badge;

extensions/ql-vscode/src/remote-queries/view/DownloadButton.tsx

@@ -1,11 +1,23 @@
 import * as React from 'react';
 import * as octicons from '../../view/octicons';
+import styled from 'styled-components';
+
+const ButtonLink = styled.a`
+  display: inline-block;
+  font-size: x-small;
+  text-decoration: none;
+  cursor: pointer;
+  vertical-align: middle;
+
+  svg {
+    fill: var(--vscode-textLink-foreground);
+  }
+`;
 
 const DownloadButton = ({ text, onClick }: { text: string, onClick: () => void }) => (
-  <a className="vscode-codeql__download-button"
+  <ButtonLink onClick={onClick}>
-    onClick={onClick}>
     {octicons.download}{text}
-  </a>
+  </ButtonLink>
 );
 
 export default DownloadButton;

extensions/ql-vscode/src/remote-queries/view/DownloadSpinner.tsx

@@ -1,10 +1,20 @@
 import { Spinner } from '@primer/react';
 import * as React from 'react';
+import styled from 'styled-components';
+
+const SpinnerContainer = styled.span`
+  vertical-align: middle;
+
+  svg {
+    width: 0.8em;
+    height: 0.8em;  
+  }
+`;
 
 const DownloadSpinner = () => (
-  <span className="vscode-codeql__download-spinner">
+  <SpinnerContainer>
     <Spinner size="small" />
-  </span>
+  </SpinnerContainer>
 );
 
 export default DownloadSpinner;

extensions/ql-vscode/src/remote-queries/view/HorizontalSpace.tsx

@@ -1,7 +1,9 @@
-import * as React from 'react';
+import styled from 'styled-components';
 
-const HorizontalSpace = () => (
+const HorizontalSpace = styled.div<{ size: 1 | 2 | 3 }>`
-  <span className="vscode-codeql__horizontal-space" />
+  flex: 0 0 auto;
-);
+  display: inline-block;
+  width: ${props => 0.2 * props.size}em;
+`;
 
 export default HorizontalSpace;

extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx

@@ -69,10 +69,10 @@ const sumAnalysesResults = (analysesResults: AnalysisResults[]) =>
 
 const QueryInfo = (queryResult: RemoteQueryResult) => (
   <>
-    <VerticalSpace />
+    <VerticalSpace size={1} />
     {queryResult.totalResultCount} results in {queryResult.totalRepositoryCount} repositories
     ({queryResult.executionDuration}), {queryResult.executionTimestamp}
-    <VerticalSpace />
+    <VerticalSpace size={1} />
     <span className="vscode-codeql__query-file">{octicons.file}
       <a className="vscode-codeql__query-file-link" href="#" onClick={() => openQueryFile(queryResult)}>
         {queryResult.queryFileName}
@@ -97,7 +97,7 @@ const SummaryTitleWithResults = ({
 
   return (
     <div className="vscode-codeql__query-summary-container">
-      <SectionTitle text={`Repositories with results (${queryResult.affectedRepositoryCount}):`} />
+      <SectionTitle>Repositories with results ({queryResult.affectedRepositoryCount}):</SectionTitle>
       {
         showDownloadButton && <DownloadButton
           text="Download all"
@@ -109,7 +109,7 @@ const SummaryTitleWithResults = ({
 
 const SummaryTitleNoResults = () => (
   <div className="vscode-codeql__query-summary-container">
-    <SectionTitle text="No results found" />
+    <SectionTitle>No results found</SectionTitle>
   </div>
 );
 
@@ -128,7 +128,7 @@ const SummaryItemDownload = ({
 
   if (analysisResults.status === 'InProgress') {
     return <>
-      <HorizontalSpace />
+      <HorizontalSpace size={2} />
       <DownloadSpinner />
     </>;
   }
@@ -196,16 +196,16 @@ const Summary = ({
 
 const AnalysesResultsTitle = ({ totalAnalysesResults, totalResults }: { totalAnalysesResults: number, totalResults: number }) => {
   if (totalAnalysesResults === totalResults) {
-    return <SectionTitle text={`${totalAnalysesResults} results`} />;
+    return <SectionTitle>{totalAnalysesResults} results</SectionTitle>;
   }
 
-  return <SectionTitle text={`${totalAnalysesResults}/${totalResults} results`} />;
+  return <SectionTitle>{totalAnalysesResults}/{totalResults} results</SectionTitle>;
 };
 
 const AnalysesResultsDescription = ({ totalAnalysesResults, totalResults }: { totalAnalysesResults: number, totalResults: number }) => {
   if (totalAnalysesResults < totalResults) {
     return <>
-      <VerticalSpace />
+      <VerticalSpace size={1} />
       Some results haven&apos;t been downloaded automatically because of their size or because enough were downloaded already.
       Download them manually from the list above if you want to see them here.
     </>;
@@ -223,8 +223,7 @@ const AnalysesResults = ({ analysesResults, totalResults }: { analysesResults: A
 
   return (
     <>
-      <VerticalSpace />
+      <VerticalSpace size={2} />
-      <VerticalSpace />
       <AnalysesResultsTitle
         totalAnalysesResults={totalAnalysesResults}
         totalResults={totalResults} />
@@ -263,7 +262,7 @@ export function RemoteQueries(): JSX.Element {
   try {
     return <div>
       <ThemeProvider>
-        <ViewTitle title={queryResult.queryTitle} />
+        <ViewTitle>{queryResult.queryTitle}</ViewTitle>
         <QueryInfo {...queryResult} />
         <Summary queryResult={queryResult} analysesResults={analysesResults} />
         <AnalysesResults analysesResults={analysesResults} totalResults={queryResult.totalResultCount} />

extensions/ql-vscode/src/remote-queries/view/SectionTitle.tsx

@@ -1,7 +1,12 @@
-import * as React from 'react';
+import styled from 'styled-components';
 
-const SectionTitle = ({ text }: { text: string }) => (
+const SectionTitle = styled.h2`
-  <h2 className="vscode-codeql__section-title">{text}</h2>
+  font-size: medium;
-);
+  font-weight: 500;
+  padding: 0 0.5em 0 0;
+  margin: 0;
+  display: inline-block;
+  vertical-align: middle;
+`;
 
 export default SectionTitle;

extensions/ql-vscode/src/remote-queries/view/VerticalSpace.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
+import styled from 'styled-components';
 
-const VerticalSpace = () => (
+const VerticalSpace = styled.div<{ size: 1 | 2 | 3 }>`
-  <div className="vscode-codeql__vertical-space" />
+  flex: 0 0 auto;
-);
+  height: ${props => 0.5 * props.size}em;
+`;
 
 export default VerticalSpace;

extensions/ql-vscode/src/remote-queries/view/ViewTitle.tsx

@@ -1,7 +1,9 @@
-import * as React from 'react';
+import styled from 'styled-components';
 
-const ViewTitle = ({ title }: { title: string }) => (
+const ViewTitle = styled.h1`
-  <h1 className="vscode-codeql__view-title">{title}</h1>
+  font-size: large;
-);
+  margin-bottom: 0.5em;
+  font-weight: 500;
+`;
 
 export default ViewTitle;

extensions/ql-vscode/src/remote-queries/view/baseStyles.css

@@ -2,96 +2,3 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
     sans-serif, Apple Color Emoji, Segoe UI Emoji;
 }
-
-/* -------------------------------------------------------------------------- */
-/* SectionTitle component */
-/* -------------------------------------------------------------------------- */
-
-.vscode-codeql__section-title {
-  font-size: medium;
-  font-weight: 500;
-  padding: 0 0.5em 0 0;
-  margin: 0;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-/* -------------------------------------------------------------------------- */
-/* ViewTitle component */
-/* -------------------------------------------------------------------------- */
-
-.vscode-codeql__view-title {
-  font-size: large;
-  margin-bottom: 0.5em;
-  font-weight: 500;
-}
-
-/* -------------------------------------------------------------------------- */
-/* VerticalSpace component */
-/* -------------------------------------------------------------------------- */
-
-.vscode-codeql__vertical-space {
-  flex: 0 0 auto;
-  height: 0.5rem;
-}
-
-/* -------------------------------------------------------------------------- */
-/* HorizontalSpace component */
-/* -------------------------------------------------------------------------- */
-
-.vscode-codeql__horizontal-space {
-  flex: 0 0 auto;
-  display: inline-block;
-  width: 0.2rem;
-}
-
-/* -------------------------------------------------------------------------- */
-/* Badge component */
-/* -------------------------------------------------------------------------- */
-
-.vscode-codeql__badge-container {
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  padding-left: 0.2em;
-}
-
-.vscode-codeql__badge {
-  display: inline-block;
-  min-width: 1.5em;
-  padding: 0.3em;
-  border-radius: 35%;
-  font-size: x-small;
-  text-align: center;
-  background: var(--vscode-badge-background);
-  color: var(--vscode-badge-foreground);
-  border-color: var(--vscode-badge-background);
-}
-
-/* -------------------------------------------------------------------------- */
-/* DownloadButton component */
-/* -------------------------------------------------------------------------- */
-
-.vscode-codeql__download-button {
-  display: inline-block;
-  font-size: x-small;
-  text-decoration: none;
-  cursor: pointer;
-  vertical-align: middle;
-}
-
-.vscode-codeql__download-button svg {
-  fill: var(--vscode-textLink-foreground);
-}
-
-/* -------------------------------------------------------------------------- */
-/* DownloadSpinner component */
-/* -------------------------------------------------------------------------- */
-.vscode-codeql__download-spinner {
-  vertical-align: middle;
-}
-
-.vscode-codeql__download-spinner svg {
-  width: 0.8em;
-  height: 0.8em;
-}