From 7de099acc91a5e46e43a1191efeab3952c29182b Mon Sep 17 00:00:00 2001
From: mokelgit <maym2018@gmail.com>
Date: Thu, 30 May 2024 09:01:59 -0400
Subject: [PATCH] adjusted notes/subheading on fundamentals

---
 app/(layout)/fundamentals/[metric]/layout.tsx | 35 ++++++-------------
 components/layout/QuestionAnswer.tsx          | 15 ++++++--
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/app/(layout)/fundamentals/[metric]/layout.tsx b/app/(layout)/fundamentals/[metric]/layout.tsx
index c111eeec..a115470e 100644
--- a/app/(layout)/fundamentals/[metric]/layout.tsx
+++ b/app/(layout)/fundamentals/[metric]/layout.tsx
@@ -203,33 +203,10 @@ export default async function Layout({
                 </a>
               </p>
             </div>
-          ) : pageData.title === "Transaction Costs" ? (
-            <div className="flex flex-col sm:flex-row space-x-1">
-              <span className="inline-flex gap-x-1">
-                <div>
-                  {pageData.description} Check out our new
-                  <a
-                    href="https://fees.growthepie.xyz/"
-                    target="_blank"
-                    className="underline mx-0.5"
-                  >
-                    fees page
-                  </a>
-                  for a more detailed view.
-                </div>
-              </span>
-            </div>
           ) : (
             pageData.description
           )}
-          {pageData.note && (
-            <div className="text-xs">
-              <span className="font-semibold text-forest-200 dark:text-forest-400">
-                Note:{" "}
-              </span>
-              {pageData.note}
-            </div>
-          )}
+
           {pageData.tags && (
             <div className="flex items-center mt-[5px]">
               {pageData.tags.map((tag, i) => (
@@ -253,6 +230,16 @@ export default async function Layout({
           className="rounded-3xl bg-forest-50 dark:bg-forest-900 px-[63px] py-[23px] flex flex-col"
           question={`What does ${pageData.title} tell you?`}
           answer={pageData.why}
+          note={
+            pageData.note && (
+              <div className="text-xs">
+                <span className="font-semibold text-forest-200 dark:text-forest-400">
+                  Note:{" "}
+                </span>
+                {pageData.note}
+              </div>
+            )
+          }
           startOpen
         />
       </Container>
diff --git a/components/layout/QuestionAnswer.tsx b/components/layout/QuestionAnswer.tsx
index fb9561f1..51fb9404 100644
--- a/components/layout/QuestionAnswer.tsx
+++ b/components/layout/QuestionAnswer.tsx
@@ -7,11 +7,13 @@ import { useElementSizeObserver } from "@/hooks/useElementSizeObserver";
 export default function QuestionAnswer({
   question,
   answer,
+  note,
   className = "",
   startOpen = false,
 }: {
   question: string | React.ReactNode;
   answer: string | React.ReactNode;
+  note?: string | React.ReactNode;
   className?: string;
   startOpen?: boolean;
 }) {
@@ -26,10 +28,11 @@ export default function QuestionAnswer({
         onClick={() => setOpen(!open)}
       >
         <div className="flex w-[13px] h-[13px] items-center justify-center">
-
           <Icon
             icon="feather:arrow-right-circle"
-            className={`w-[13px] h-[13px] transform rotate-0 transition-transform duration-300 ${open ? "rotate-90" : "rotate-0"}`}
+            className={`w-[13px] h-[13px] transform rotate-0 transition-transform duration-300 ${
+              open ? "rotate-90" : "rotate-0"
+            }`}
           />
         </div>
         <div className="font-semibold text-sm leading-snug">{question}</div>
@@ -44,6 +47,14 @@ export default function QuestionAnswer({
           {answer}
         </div>
       </div>
+      <div
+        className={`transition-height duration-300 overflow-hidden text-base`}
+        style={{
+          height: open ? 25 : 0,
+        }}
+      >
+        {note && <div className="pt-[10px]">{note}</div>}
+      </div>
     </div>
   );
 }