refactor: /about uses Card, minor cleanups

src/pages/about.tsx

@@ -1,7 +1,9 @@
+import { NextPage } from "next";
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import gfm from "remark-gfm";
 
+import { Card } from "../web/display/Card";
 import { Layout } from "../web/display/Layout";
 
 const readmeMarkdownText = `# About
@@ -26,16 +28,16 @@ Also note that, whatever other redeeming features they might have, prediction ma
 
 `;
 
-export default function About() {
+const AboutPage: NextPage = () => {
   return (
     <Layout page="about">
-      <div className="px-2 py-2 bg-white rounded-md shadow place-content-stretch flex-grow place-self-center">
-        <ReactMarkdown
-          remarkPlugins={[gfm]}
-          children={readmeMarkdownText}
-          className="m-5"
-        />
-      </div>
+      <Card highlightOnHover={false}>
+        <div className="p-4">
+          <ReactMarkdown remarkPlugins={[gfm]} children={readmeMarkdownText} />
+        </div>
+      </Card>
     </Layout>
   );
-}
+};
+
+export default AboutPage;

src/pages/tools.tsx

@@ -1,3 +1,4 @@
+import { NextPage } from "next";
 import Link from "next/link";
 import React from "react";
 
@@ -45,7 +46,7 @@ const ToolCard: React.FC<Tool> = (tool) => {
   }
 };
 
-export default function Tools({ lastUpdated }) {
+const ToolsPage: NextPage = () => {
   let tools: Tool[] = [
     {
       title: "Search",
@@ -87,9 +88,11 @@ export default function Tools({ lastUpdated }) {
     <Layout page="tools">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mb-8 place-content-stretch">
         {tools.map((tool, i) => (
-          <ToolCard {...tool} key={`tool-${i}`} />
+          <ToolCard {...tool} key={i} />
         ))}
       </div>
     </Layout>
   );
-}
+};
+
+export default ToolsPage;

src/web/display/Card.tsx

@@ -2,12 +2,20 @@ const CardTitle: React.FC = ({ children }) => (
   <div className="text-gray-800 text-lg font-medium">{children}</div>
 );
 
-type CardType = React.FC & {
+interface Props {
+  highlightOnHover?: boolean;
+}
+
+type CardType = React.FC<Props> & {
   Title: typeof CardTitle;
 };
 
-export const Card: CardType = ({ children }) => (
-  <div className="h-full px-4 py-3 bg-white hover:bg-gray-100 rounded-md shadow">
+export const Card: CardType = ({ children, highlightOnHover = true }) => (
+  <div
+    className={`h-full px-4 py-3 bg-white rounded-md shadow ${
+      highlightOnHover ? "hover:bg-gray-100" : ""
+    }`}
+  >
     {children}
   </div>
 );