From f30d92a66cfd21a686d4f6e3280a9853b0e148e8 Mon Sep 17 00:00:00 2001
From: Damian Stasik <920747+damianstasik@users.noreply.github.com>
Date: Mon, 4 Sep 2023 13:52:30 +0200
Subject: [PATCH] Clean up FAQ section

---
 src/components/Accordion/Item.tsx   |  2 +-
 src/components/Accordion/index.tsx  |  2 +-
 src/components/Button/index.tsx     | 12 +++++++-----
 src/components/FAQ/index.tsx        |  9 ++++++++-
 src/components/Hero/index.tsx       |  2 +-
 src/components/LatestNews/index.tsx |  5 ++++-
 src/components/Supporters/index.tsx |  2 +-
 tailwind.config.js                  |  5 +++++
 8 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/Accordion/Item.tsx b/src/components/Accordion/Item.tsx
index c1405e76..4edfac31 100644
--- a/src/components/Accordion/Item.tsx
+++ b/src/components/Accordion/Item.tsx
@@ -20,7 +20,7 @@ const AccordionItem = ({ summary, open, children }: AccordionItemProps) => {
   return (
     <details
       ref={detailsRef}
-      className="accordion-item group text-lg"
+      className="accordion-item group text-lg border-b border-gray-150"
       open={open}
     >
       <summary
diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
index 1bbd82e3..e5431e9f 100644
--- a/src/components/Accordion/index.tsx
+++ b/src/components/Accordion/index.tsx
@@ -5,7 +5,7 @@ type AccordionProps = {
 };
 
 const Accordion = ({ children }: AccordionProps) => {
-  return <section className="grid grid-cols-1 divide-y">{children}</section>;
+  return <section className="flex flex-col">{children}</section>;
 };
 
 export default Accordion;
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 198ef43c..1a8da9f1 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -3,7 +3,7 @@ import clsx from "clsx";
 import Link, { Props } from "@docusaurus/Link";
 
 type ButtonProps = Props & {
-  variant: "primary" | "secondary";
+  variant: "primary" | "secondaryOnDark" | "secondaryOnLight";
 };
 
 export default function Button({ children, variant, ...rest }: ButtonProps) {
@@ -11,11 +11,13 @@ export default function Button({ children, variant, ...rest }: ButtonProps) {
     <Link
       {...rest}
       className={clsx(
-        "border font-semibold text-white h-12 px-6 flex items-center hover:no-underline transition-colors",
+        "border font-semibold 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"
+          "bg-primary-base text-white hover:bg-primary-hover border-primary-base hover:border-primary-hover hover:text-white",
+        variant === "secondaryOnDark" &&
+          "border-gray-700 text-gray-100 bg-transparent hover:border-white hover:text-gray-100",
+        variant === "secondaryOnLight" &&
+          "border-gray-150 text-gray-900 bg-transparent hover:border-gray-900 hover:text-gray-900"
       )}
     >
       {children}
diff --git a/src/components/FAQ/index.tsx b/src/components/FAQ/index.tsx
index a23e7b37..5b339bc5 100644
--- a/src/components/FAQ/index.tsx
+++ b/src/components/FAQ/index.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 import Accordion from "../Accordion";
 import AccordionItem from "../Accordion/Item";
+import Button from "../Button";
 
 export default function FAQ() {
   return (
-    <section className="text-[#0C192B] flex flex-col justify-center w-full bg-light2 py-10 md:py-20 px-6">
+    <section className="text-gray-900 flex flex-col justify-center w-full bg-gray-50 py-10 md:py-20 px-6">
       <div className="w-full max-w-4xl mx-auto">
         <h3 className="text-center text-3xl md:text-5xl font-bold mb-6 md:mb-12">
           Frequently Asked Questions
@@ -40,6 +41,12 @@ export default function FAQ() {
             future, and isn’t subhect to the whims of a singe vendor.
           </AccordionItem>
         </Accordion>
+
+        <div className="flex justify-center mt-6">
+          <Button variant="secondaryOnLight" href="/faqs">
+            Show More
+          </Button>
+        </div>
       </div>
     </section>
   );
diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx
index 060dfecb..845236ae 100644
--- a/src/components/Hero/index.tsx
+++ b/src/components/Hero/index.tsx
@@ -33,7 +33,7 @@ export default function Hero() {
         will be managed by an independent Foundation.
       </p>
       <div className="flex gap-4 pt-6">
-        <Button variant="secondary" href="/manifesto">
+        <Button variant="secondaryOnDark" href="/manifesto">
           Read Manifesto
         </Button>
         <Button variant="primary" href="/support">
diff --git a/src/components/LatestNews/index.tsx b/src/components/LatestNews/index.tsx
index eaeb9713..eef4b032 100644
--- a/src/components/LatestNews/index.tsx
+++ b/src/components/LatestNews/index.tsx
@@ -23,7 +23,10 @@ export default function LatestNews() {
               to all their core products, including Terraform, to the Business
               Source License (BSL).
             </p>
-            <Button variant="secondary" href="https://opentf.org/announcement">
+            <Button
+              variant="secondaryOnDark"
+              href="https://opentf.org/announcement"
+            >
               Read More
             </Button>
           </div>
diff --git a/src/components/Supporters/index.tsx b/src/components/Supporters/index.tsx
index 94fc5327..91e00c0f 100644
--- a/src/components/Supporters/index.tsx
+++ b/src/components/Supporters/index.tsx
@@ -104,7 +104,7 @@ export default function Supporters() {
         </tbody>
       </table>
       <div className="flex gap-6 justify-center">
-        <Button variant="secondary" href="/supporters">
+        <Button variant="secondaryOnDark" href="/supporters">
           Show More
         </Button>
         <Button variant="primary" href="/support">
diff --git a/tailwind.config.js b/tailwind.config.js
index 51467060..f2f2786e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,12 @@ module.exports = {
           hover: "#7732D0",
         },
         gray: {
+          900: "#1B1D20",
           700: "#505661",
+          600: "#6A7382",
+          150: "#DADEE3",
+          100: "#E7E9EC",
+          50: "#F9F9F9",
         },
         brand: "#933EFF",
         brandMuted: "#AA4EE7",