Improve button consistency

docusaurus.config.js

@@ -129,9 +129,9 @@ const config = {
             className: "header-slack-link",
           },
           {
+            type: "custom-button-navbar-item",
             label: "Support Us",
-            to: "https://github.com/opentffoundation/manifesto",
-            className: "bg-brand px-6 py-3 hover:text-white",
+            href: "https://github.com/opentffoundation/manifesto",
             position: "right",
           },
         ],

src/components/Button/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import clsx from "clsx";
+import Link, { Props } from "@docusaurus/Link";
+
+type ButtonProps = Props & {
+  variant: "primary" | "secondary";
+};
+
+export default function Button({ children, variant, ...rest }: ButtonProps) {
+  return (
+    <Link
+      {...rest}
+      className={clsx(
+        "border font-semibold text-white h-12 px-6 flex items-center hover:no-underline transition-colors",
+        variant === "primary" &&
+          "bg-primary-base hover:bg-primary-hover border-primary-base hover:border-primary-hover hover:text-white",
+        variant === "secondary" &&
+          "border-gray-700 bg-transparent hover:border-white hover:text-white"
+      )}
+    >
+      {children}
+    </Link>
+  );
+}

src/components/ButtonNavbarItem/index.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Button from "../Button";
+
+type ButtonNavbarItemProps = {
+  label: string;
+  href: string;
+};
+
+export default function ButtonNavbarItem({
+  label,
+  href,
+}: ButtonNavbarItemProps) {
+  return (
+    <Button variant="primary" href={href}>
+      {label}
+    </Button>
+  );
+}

src/components/Hero/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Link from "@docusaurus/Link";
+import Button from "../Button";
 
 export default function Hero() {
   return (
@@ -33,18 +33,12 @@ export default function Hero() {
         will be managed by an independent Foundation.
       </p>
       <div className="flex gap-4 pt-6">
-        <Link
-          href="/manifesto"
-          className="border border-white/20 font-semibold text-white h-12 px-6 flex items-center hover:no-underline hover:border-brand transition-colors"
-        >
+        <Button variant="secondary" href="/manifesto">
           Read Manifesto
-        </Link>
-        <Link
-          href="/support"
-          className="bg-brand  font-semibold text-white h-12 px-6 flex items-center hover:no-underline hover:text-white hover:bg-brand/80 transition-colors"
-        >
+        </Button>
+        <Button variant="primary" href="/support">
           Support Us
-        </Link>
+        </Button>
       </div>
     </header>
   );

src/components/LatestNews/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Logo from "./big-logo.svg";
+import Button from "../Button";
 
 export default function LatestNews() {
   return (
@@ -12,7 +13,7 @@ export default function LatestNews() {
           <div className="bg-dark2 w-full flex justify-center py-20 px-16">
             <Logo />
           </div>
-          <div className="flex flex-col gap-2">
+          <div className="flex flex-col gap-2 items-start">
             <span className="text-[#A965FF] font-bold">Aug 25, 2023</span>
             <h4 className="text-3xl font-bold text-[#E7E9EC]">
               OpenTF Announces Fork of Terraform
@@ -22,12 +23,9 @@ export default function LatestNews() {
               to all their core products, including Terraform, to the Business
               Source License (BSL).
             </p>
-            <a
-              className="text-center border border-[#505661] md:self-start font-bold text-white h-12 px-6 flex items-center hover:no-underline"
-              href="https://opentf.org/announcement"
-            >
+            <Button variant="secondary" href="https://opentf.org/announcement">
               Read More
-            </a>
+            </Button>
           </div>
         </div>
       </div>

src/components/Supporters/index.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import supporters from "../../../supporters.json";
 import Link from "@docusaurus/Link";
+import Button from "../Button";
 
 type SupporterTypeProps = {
   children: React.ReactNode;
@@ -104,19 +105,12 @@ export default function Supporters() {
         </tbody>
       </table>
       <div className="flex gap-6 justify-center">
-        <button
-          type="button"
-          className="border text-white h-12 px-6 flex items-center hover:no-underline border-white/20"
-          onClick={() => setShowAll((value) => !value)}
-        >
+        <Button variant="secondary" href="/supporters">
           {showAll ? "Show Less" : "Show More"}
-        </button>
-        <Link
-          href="/support"
-          className="bg-brand text-white h-12 px-6 flex items-center hover:no-underline hover:text-white hover:bg-brand/80 transition-colors"
-        >
+        </Button>
+        <Button variant="primary" href="/support">
           Support Us
-        </Link>
+        </Button>
       </div>
     </section>
   );

src/theme/NavbarItem/ComponentTypes.js

@@ -1,7 +1,10 @@
 import ComponentTypes from "@theme-original/NavbarItem/ComponentTypes";
 import GitHubStarsNavbarItem from "@site/src/components/GitHubStarsNavbarItem";
 
+import ButtonNavbarItem from "@site/src/components/ButtonNavbarItem";
+
 export default {
   ...ComponentTypes,
   "custom-github-stars-navbar-item": GitHubStarsNavbarItem,
+  "custom-button-navbar-item": ButtonNavbarItem,
 };

tailwind.config.js

@@ -4,6 +4,13 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        primary: {
+          base: "#933EFF",
+          hover: "#7732D0",
+        },
+        gray: {
+          700: "#505661",
+        },
         brand: "#933EFF",
         brandMuted: "#AA4EE7",
         brandLight: "#AA67FF",