From 050108eb1952e6542f4bbc2d411aae93bcc01961 Mon Sep 17 00:00:00 2001
From: Roman Grinovski <roman.grinovski@gmail.com>
Date: Tue, 19 Sep 2023 10:52:32 +0200
Subject: [PATCH] UI feedback (#128)

* change twitter links

* rename to OpenTofu

* add contribute button
---
 docusaurus.config.js                     | 2 +-
 src/components/Button/index.tsx          | 5 +++--
 src/components/Footer/index.tsx          | 2 +-
 src/components/Hero/index.tsx            | 2 +-
 src/components/Home/index.tsx            | 2 +-
 src/components/HowToContribute/index.tsx | 8 ++++++--
 6 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index b51f94b9..5ea01c80 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -227,7 +227,7 @@ const config = {
           },
           {
             type: "custom-social-icon-link-navbar-item",
-            href: "https://twitter.com/opentforg",
+            href: "https://twitter.com/opentofuorg",
             position: "right",
             name: "twitter",
             label: "Follow us on Twitter",
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 81032e69..2f830f7d 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -6,7 +6,7 @@ type ButtonProps = Props & {
   variant: "primary" | "secondary";
 };
 
-export default function Button({ children, variant, ...rest }: ButtonProps) {
+export default function Button({ children, variant, className, ...rest }: ButtonProps) {
   const Tag = "href" in rest ? Link : "button";
   return (
     <Tag
@@ -16,7 +16,8 @@ export default function Button({ children, variant, ...rest }: ButtonProps) {
         variant === "primary" &&
           "bg-brand-500 text-gray-900 hover:bg-brand-600 border-brand-500 hover:border-brand-600-hover hover:text-gray-900",
         variant === "secondary" &&
-          "border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-50 bg-transparent hover:border-gray-900 dark:hover:border-gray-50 hover:text-gray-900 dark:hover:text-gray-50 aria-selected:border-gray-900 dark:aria-selected:border-gray-50"
+          "border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-50 bg-transparent hover:border-gray-900 dark:hover:border-gray-50 hover:text-gray-900 dark:hover:text-gray-50 aria-selected:border-gray-900 dark:aria-selected:border-gray-50",
+          className
       )}
     >
       {children}
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 2e428829..51fbe029 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -52,7 +52,7 @@ export default function Footer({ links }: FooterProps) {
         />
         <SocialIconLink
           name="twitter"
-          href="https://twitter.com/opentforg"
+          href="https://twitter.com/opentofuorg"
           label="Follow us on Twitter"
           hiddenLabel
         />
diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx
index 8eddec5d..612c0517 100644
--- a/src/components/Hero/index.tsx
+++ b/src/components/Hero/index.tsx
@@ -8,7 +8,7 @@ export default function Hero() {
     <header className="flex flex-col items-center py-10 md:py-20 px-6 md:px-16 mx-auto">
       <PatternBg />
       <Headline className="sm:max-w-2xl md:max-w-3xl lg:max-w-4xl">
-        Ensure Terraform remains truly open-source. Always.
+        Ensure OpenTofu remains truly open-source. Always.
       </Headline>
       <p className="my-6 text-xl sm:max-w-lg md:max-w-xl lg:max-w-2xl text-center text-gray-600 dark:text-gray-500">
         Previously named OpenTF, OpenTofu is a fork of Terraform that is
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index b6fb92eb..812fff04 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -10,7 +10,7 @@ import LatestNews from "../LatestNews";
 
 export default function Home({ recentPosts }) {
   return (
-    <Layout description="Ensure Terraform remains truly open-source.">
+    <Layout description="Ensure OpenTofu remains truly open-source.">
       <Hero />
       <Goals />
       <HowToContribute />
diff --git a/src/components/HowToContribute/index.tsx b/src/components/HowToContribute/index.tsx
index 7758e0c9..bcf41174 100644
--- a/src/components/HowToContribute/index.tsx
+++ b/src/components/HowToContribute/index.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import Link, { Props } from "@docusaurus/Link";
+import Link from "@docusaurus/Link";
+import Button from "../Button";
 
 // TODO enter final links once ready
 export default function HowToContribute() {
@@ -9,7 +10,7 @@ export default function HowToContribute() {
         <h2 className="text-center text-3xl md:text-5xl mb-3 md:mb-6 font-bold">
           How to use and contribute to OpenTofu?
         </h2>
-        <p className="text-gray-600 dark:text-gray-500 text-center text-base md:text-xl mb-6 md:mb-12 md:leading-relaxed">
+        <p className="text-gray-600 dark:text-gray-500 text-center text-base md:text-xl mb-3 md:mb-6 md:leading-relaxed">
           The best way to show practical support for the OpenTofu initiative is
           to contribute. This{" "}
           <Link
@@ -22,6 +23,9 @@ export default function HowToContribute() {
           submit issues, how to get involved in the discussion, how to work on
           the code, and how to contribute code changes.
         </p>
+        <Button className="mx-auto max-w-fit" variant="primary" href="https://github.com/opentffoundation/opentf/blob/main/CONTRIBUTING.md">
+          Contribute
+        </Button>
       </div>
     </section>
   );