feat(api-history): better styles, remove pr number

electron · Jul 9, 2024 · 6d2032c · 6d2032c
1 parent a5d30f1
commit 6d2032c
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 27 deletions.
diff --git a/src/components/ApiHistoryTable.module.scss b/src/components/ApiHistoryTable.module.scss
@@ -14,8 +14,59 @@
     }
   }
 
-  table {
+  & > div > div {
+    border-top: 0;
+    padding-top: 0;
     margin-top: 0.5rem;
+  }
+
+  table {
+    font-size: 1rem;
     margin-bottom: 0;
+
+    tr {
+      background-color: var(--ifm-table-background);
+    }
+
+    td {
+      pre {
+        text-align: center;
+        margin: 0;
+        padding: 0.5rem;
+      }
+
+      &:nth-child(1) > a:not(:first-child) > pre {
+        margin-top: 0.5rem;
+      }
+
+      &:nth-child(2) {
+        width: 100%;
+        text-align: center;
+
+        code {
+          line-height: normal;
+          padding: 0.1rem 0.4rem;
+        }
+
+        p {
+          font-size: inherit;
+          text-align: left;
+        }
+
+        pre {
+          font-weight: bold;
+          letter-spacing: 0.04rem;
+          color: var(--ifm-badge-color);
+
+          &.api-added {
+            background-color: var(--api-history-added);
+          }
+
+          &.api-deprecated {
+            background-color: var(--api-history-deprecated);
+          }
+        }
+      }
+    }
   }
 }
diff --git a/src/components/ApiHistoryTable.tsx b/src/components/ApiHistoryTable.tsx
@@ -27,8 +27,6 @@ function generateTableRow(
   prUrl: string,
   changes?: string
 ) {
-  const prNumber = prUrl.split('/').at(-1);
-
   const allVersions: Array<string> = [];
 
   const release = prReleaseVersions?.release;
@@ -40,31 +38,26 @@ function generateTableRow(
   // Sort by major version number e.g. 30.0.0 -> 30 in descending order i.e. 30, 29, ...
   allVersions.sort((a, b) => Number(b.split('.')[0]) - Number(a.split('.')[0]));
 
-  const formattedVersions = allVersions.map((version, index, array) => {
-    const isNotLastPortInArray = index !== array.length - 1;
-    if (isNotLastPortInArray) {
-      return (
-        <>
-          <pre key={version}>{version}</pre>
-          <br></br>
-        </>
-      );
-    }
-
-    return <pre key={version}>{version}</pre>;
+  const formattedVersions = allVersions.map((version) => {
+    return (
+      <a key={version} href={prUrl} target="_blank" rel="noopener noreferrer">
+        <pre>{version}</pre>
+      </a>
+    );
   });
 
   return (
     <tr>
       <td>{formattedVersions || <pre>None</pre>}</td>
-      <td>
-        <a href={prUrl} target="_blank" rel="noopener noreferrer">
-          <pre>#{prNumber}</pre>
-        </a>
-      </td>
       <td>
         {/* TODO: Set allowed markdown elements */}
-        {changes ? <ReactMarkdown>{changes}</ReactMarkdown> : <pre>{type}</pre>}
+        {changes ? (
+          <ReactMarkdown>{changes}</ReactMarkdown>
+        ) : (
+          <pre className={styles[type.toLowerCase().split(' ').join('-')]}>
+            {type}
+          </pre>
+        )}
       </td>
     </tr>
   );
@@ -112,18 +105,20 @@ const ApiHistoryTable = (props: ApiHistoryTableProps) => {
     }) ?? []),
   ];
 
+  // TODO: Remove PR column, just link to PR on version hover
   return (
     <Details
       className={styles['api-history']}
       summary={<summary>History</summary>}
     >
       <table>
-        <tr>
-          <th>Version(s)</th>
-          <th>PR</th>
-          <th>Changes</th>
-        </tr>
-        {apiHistoryChangeRows}
+        <thead>
+          <tr>
+            <th>Version(s)</th>
+            <th>Changes</th>
+          </tr>
+        </thead>
+        <tbody>{apiHistoryChangeRows}</tbody>
       </table>
     </Details>
   );

diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -34,6 +34,12 @@
   --electron-inline-code: var(--electron-color-secondary-mid);
   --ifm-navbar-item-padding-horizontal: 8px;
 
+  --api-history-added: var(--ifm-color-success-lighter);
+  --api-history-deprecated: var(--ifm-color-danger-light);
+  // These have better contrast if desired
+  // --api-history-added: var(--ifm-color-success-light);
+  // --api-history-deprecated: var(--ifm-color-danger-dark);
+
   // docusaurus variables
   --ifm-hover-overlay: rgba(162, 236, 251, 0.2);
   --ifm-link-color: var(--electron-color-mid);
@@ -90,6 +96,8 @@
   // custom vars
   --electron-heading: var(--ifm-color-primary-lightest);
   --electron-inline-code: var(--electron-color-secondary-light);
+  --api-history-added: var(--ifm-color-success-darker);
+  --api-history-deprecated: var(--ifm-color-danger-darkest);
 }
 
 .hero {