refactor, style: use ant design for website styling

Author: nakrovati

webdriver-ts-results/package-lock.json

@@ -4,6 +4,8 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@ant-design/icons": "^5.3.1",
+    "antd": "^5.14.2",
     "jstat": "^1.9.6",
     "plotly.js-cartesian-dist": "2.18.2",
     "react": "^18.2.0",

webdriver-ts-results/package.json

@@ -11,7 +11,8 @@
 body {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 14px;
-  margin: 10px;
+  margin: 0;
+  padding: 0.5rem;
 }
 
 a,
@@ -20,22 +21,6 @@ a:hover {
   text-decoration: none;
 }
 
-button,
-select {
-  font-size: 14px;
-}
-
-select {
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  height: 29px;
-  background: white;
-}
-
-input + label {
-  margin-left: 5px;
-}
-
 thead.dummy th {
   padding: 0;
   border: 0;
@@ -145,7 +130,8 @@ dl {
   padding: 0;
   margin-bottom: 16px;
 }
-dt {
+dt,
+.dt {
   float: left;
   width: 50px;
   padding: 0;
@@ -198,3 +184,7 @@ dd {
 .check-full-width::after {
   display: inline-block;
 }
+
+.page-container {
+  padding: 0.5rem;
+}

webdriver-ts-results/src/App.css

@@ -2,22 +2,25 @@ import "./App.css";
 import { FrameworkType, knownIssues } from "./Common";
 import ResultTable from "./components/ResultTable";
 import SelectionBar from "./components/selection/SelectionBar";
+import { List, Typography } from "antd";
 
 const KnownIssuesList = () => {
+  const data = knownIssues;
+
   return (
-    <section>
-      <h3>Known issues and notes</h3>
-      {knownIssues.map((issue) => (
-        <dl key={issue.issue.toFixed()} id={issue.issue.toFixed()}>
-          <dt>
-            <a target="_blank" rel="noopener noreferrer" href={issue.link}>
-              {issue.issue.toFixed()}
-            </a>
-          </dt>
-          <dd>{issue.text}</dd>
-        </dl>
-      ))}
-    </section>
+    <List
+      header={<div>Known issues and notes</div>}
+      bordered
+      dataSource={data}
+      renderItem={(issue) => (
+        <List.Item>
+          <Typography.Text className="dt">
+            <a href={issue.link}>{issue.issue}</a>
+          </Typography.Text>{" "}
+          {issue.text}
+        </List.Item>
+      )}
+    />
   );
 };
 
@@ -51,18 +54,21 @@ const App = () => {
       {disclaimer}
       {testEnvironmentInfo}
       <p>
-        After chrome 119 official results we&apos;ve changed a detail for the benchmark: 
-        We now open a new tab for each benchmark iteration, earlier runs reused the tab per benchmark and implementation. 
+        After chrome 119 official results we&apos;ve changed a detail for the benchmark: We now open a new tab for each
+        benchmark iteration, earlier runs reused the tab per benchmark and implementation.
       </p>
       <p>
-        Starting with chrome 118 the benchmark uses a <a href="https://github.com/krausest/js-framework-benchmark/wiki/Computation-of-the-weighted-geometric-mean">weighted geometric mean </a> to compute the overall result.
+        Starting with chrome 118 the benchmark uses a{" "}
+        <a href="https://github.com/krausest/js-framework-benchmark/wiki/Computation-of-the-weighted-geometric-mean">
+          weighted geometric mean{" "}
+        </a>{" "}
+        to compute the overall result.
       </p>
-
       <main>
         <SelectionBar showDurationSelection={true} />
         <ResultTable type={FrameworkType.KEYED} />
         <ResultTable type={FrameworkType.NON_KEYED} />
-        <KnownIssuesList></KnownIssuesList>
+        <KnownIssuesList />
       </main>
     </>
   );