feat(info): make sub-tabs more distinct looking

The info page /info/policies/* have two layers of tabs, which should be
more distinct looking to easily distinguish the two layers. This commit
fixes that by making the sub-tab selector a button group.

src/components/info/DynamicSubNav.tsx

@@ -0,0 +1,82 @@
+import { ReactElement } from "react";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import { useRouter } from "next/dist/client/router";
+import stringSimilarity from "string-similarity";
+import NextLink from "next/link";
+import { Box } from "@mui/system";
+
+export interface DynamicSubNavProps {
+  tabs: {
+    label: string;
+    href: string;
+  }[];
+}
+
+const DynamicSubNavInner = ({
+  selectedHref,
+  tabs,
+  small,
+}: {
+  selectedHref: string | null;
+  tabs: { label: string; href: string }[];
+  small?: boolean;
+}): ReactElement => (
+  <Box
+    sx={{
+      display: small ? { xs: "flex", sm: "none" } : { xs: "none", sm: "flex" },
+      justifyContent: "center",
+      my: 4,
+    }}
+  >
+    <ToggleButtonGroup
+      value={selectedHref}
+      exclusive
+      orientation={small ? "vertical" : "horizontal"}
+    >
+      {tabs.map(({ label, href }) => (
+        <ToggleButton
+          value={href}
+          tabIndex={-1}
+          selected={selectedHref === href}
+          key={href}
+          sx={{
+            p: 0,
+            borderRadius: "1rem",
+          }}
+        >
+          <NextLink
+            href={href}
+            role="tab"
+            style={{
+              color: "inherit",
+              padding: "0.5rem 0.6rem",
+              textDecoration: "none",
+            }}
+          >
+            {label}
+          </NextLink>
+        </ToggleButton>
+      ))}
+    </ToggleButtonGroup>
+  </Box>
+);
+
+export default function DynamicSubNav({ tabs }: DynamicSubNavProps) {
+  const router = useRouter();
+
+  const selectedHref =
+    tabs[
+      stringSimilarity.findBestMatch(
+        router.route,
+        tabs.map((tab) => tab.href)
+      ).bestMatchIndex
+    ]?.href ?? null;
+
+  return (
+    <>
+      <DynamicSubNavInner selectedHref={selectedHref} tabs={tabs} />
+      <DynamicSubNavInner selectedHref={selectedHref} tabs={tabs} small />
+    </>
+  );
+}

src/pages/info/policies/conditions.tsx

@@ -5,6 +5,7 @@ import { infoPageTabs, termsAndConditionsTabs } from "../../../utils/constants";
 import Head from "next/head";
 import Editor from "../../../components/info/Editor";
 import { editorData } from "../../../utils/mockData";
+import DynamicSubNav from "../../../components/info/DynamicSubNav";
 
 const Policies: NextPage = () => {
   return (
@@ -18,7 +19,7 @@ const Policies: NextPage = () => {
       </Head>
       <Card sx={{ paddingBottom: "2rem" }}>
         <DynamicNav tabs={infoPageTabs} twoRows />
-        <DynamicNav tabs={termsAndConditionsTabs} />
+        <DynamicSubNav tabs={termsAndConditionsTabs} />
         <Editor rawEditorState={editorData.conditions} />
       </Card>
     </>

src/pages/info/policies/privacy.tsx

@@ -5,6 +5,7 @@ import { infoPageTabs, termsAndConditionsTabs } from "../../../utils/constants";
 import Head from "next/head";
 import Editor from "../../../components/info/Editor";
 import { editorData } from "../../../utils/mockData";
+import DynamicSubNav from "../../../components/info/DynamicSubNav";
 
 const Terms: NextPage = () => {
   return (
@@ -18,7 +19,7 @@ const Terms: NextPage = () => {
       </Head>
       <Card sx={{ paddingBottom: "2rem" }}>
         <DynamicNav tabs={infoPageTabs} twoRows />
-        <DynamicNav tabs={termsAndConditionsTabs} />
+        <DynamicSubNav tabs={termsAndConditionsTabs} />
         <Editor rawEditorState={editorData.privacy} />
       </Card>
     </>

src/pages/info/policies/terms.tsx

@@ -5,6 +5,7 @@ import { infoPageTabs, termsAndConditionsTabs } from "../../../utils/constants";
 import Head from "next/head";
 import Editor from "../../../components/info/Editor";
 import { editorData } from "../../../utils/mockData";
+import DynamicSubNav from "../../../components/info/DynamicSubNav";
 
 const Terms: NextPage = () => {
   return (
@@ -18,7 +19,7 @@ const Terms: NextPage = () => {
       </Head>
       <Card sx={{ paddingBottom: "2rem" }}>
         <DynamicNav tabs={infoPageTabs} twoRows />
-        <DynamicNav tabs={termsAndConditionsTabs} />
+        <DynamicSubNav tabs={termsAndConditionsTabs} />
         <Editor rawEditorState={editorData.terms} />
       </Card>
     </>