Merge pull request #1950 from cprussin/add-legal-footer-links

feat(staking): add legal links to footer & tos page

Author: cprussin

apps/staking/src/app/terms-of-service/page.tsx

@@ -0,0 +1 @@
+export { TermsOfService as default } from "../../components/TermsOfService";

apps/staking/src/components/Footer/index.tsx

@@ -38,33 +38,61 @@ export const Footer = ({
 }: Omit<HTMLAttributes<HTMLElement>, "children">) => (
   <footer
     className={clsx(
-      "text-xs font-light sm:sticky sm:bottom-0 lg:px-4",
+      "text-xs font-light lg:sticky lg:bottom-0 lg:px-4",
       className,
     )}
     {...props}
   >
     <div className="border-t border-neutral-600/50 bg-pythpurple-800 lg:border-x">
-      <MaxWidth className="flex h-48 flex-col items-center justify-between overflow-hidden py-8 sm:h-16 sm:flex-row sm:gap-10 lg:-mx-4">
-        <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-4 md:gap-8">
-          <Link href="https://www.pyth.network" target="_blank">
-            <Logo className="h-10 sm:h-8" />
+      <MaxWidth className="flex h-48 flex-col items-center justify-between overflow-hidden pb-4 pt-8 text-center lg:-mx-4 lg:h-16 lg:flex-row lg:gap-10 lg:py-0">
+        <div className="flex flex-col items-center gap-2 lg:flex-row lg:gap-8">
+          <Link
+            href="https://www.pyth.network"
+            target="_blank"
+            className="focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400"
+          >
+            <Logo className="h-10 lg:h-8" />
             <span className="sr-only">Pyth homepage</span>
           </Link>
           <div>© 2024 Pyth Data Association</div>
         </div>
-        <div className="relative flex h-full items-center sm:-right-3">
-          {SOCIAL_LINKS.map(({ name, icon: Icon, href }) => (
+        <div className="flex flex-col items-center gap-6 lg:flex-row-reverse lg:gap-8 xl:gap-16">
+          <div className="relative flex h-full items-center lg:-right-3">
+            {SOCIAL_LINKS.map(({ name, icon: Icon, href }) => (
+              <Link
+                target="_blank"
+                href={href}
+                key={name}
+                className="grid h-full place-content-center px-3 transition hover:text-pythpurple-400 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400"
+                rel="noreferrer"
+              >
+                <Icon className="size-4" />
+                <span className="sr-only">{name}</span>
+              </Link>
+            ))}
+          </div>
+          <div className="flex flex-row gap-1 xl:gap-4">
             <Link
+              className="-my-1 px-2 py-1 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400"
               target="_blank"
-              href={href}
-              key={name}
-              className="grid h-full place-content-center px-3 hover:text-pythpurple-400"
-              rel="noreferrer"
+              href="https://pythdataassociation.com/privacy-policy"
             >
-              <Icon className="size-4" />
-              <span className="sr-only">{name}</span>
+              Privacy Policy
             </Link>
-          ))}
+            <Link
+              className="-my-1 px-2 py-1 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400"
+              target="_blank"
+              href="https://pythdataassociation.com/terms-of-use"
+            >
+              Terms of Use
+            </Link>
+            <Link
+              className="-my-1 px-2 py-1 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400"
+              href="/terms-of-service"
+            >
+              Terms of Service
+            </Link>
+          </div>
         </div>
       </MaxWidth>
     </div>

apps/staking/src/components/Header/index.tsx

@@ -5,6 +5,7 @@ import { CurrentStakeAccount } from "./current-stake-account";
 import { HelpMenu } from "./help-menu";
 import Logo from "./logo.svg";
 import Logomark from "./logomark.svg";
+import { Link } from "../Link";
 import { MaxWidth } from "../MaxWidth";
 import { WalletButton } from "../WalletButton";
 
@@ -15,8 +16,13 @@ export const Header = ({
   <header className={clsx("sticky top-0 w-full lg:px-4", className)} {...props}>
     <div className="border-b border-neutral-600/50 bg-pythpurple-800 lg:border-x">
       <MaxWidth className="flex h-header items-center justify-between gap-2 lg:-mx-4">
-        <Logo className="hidden max-h-full py-4 text-pythpurple-100 sm:block" />
-        <Logomark className="max-h-full py-4 text-pythpurple-100 sm:hidden" />
+        <Link
+          href="/"
+          className="-mx-2 h-[calc(var(--header-height)_-_0.5rem)] rounded-sm p-2 text-pythpurple-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400"
+        >
+          <Logo className="hidden h-full sm:block" />
+          <Logomark className="h-full sm:hidden" />
+        </Link>
         <div className="flex flex-none flex-row items-stretch gap-4 sm:gap-8">
           <CurrentStakeAccount />
           <WalletButton className="flex-none" />