From a6e3a48313092c12156afb08dd133d2e5c4cd85b Mon Sep 17 00:00:00 2001
From: itsfinniii <102350242+itsfinniii@users.noreply.github.com>
Date: Sat, 28 Mar 2026 15:55:57 +0100
Subject: [PATCH] Update FAQ list component

---
 .../web/subcomponents/QuestionList.tsx        | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/astro/src/components/web/subcomponents/QuestionList.tsx b/astro/src/components/web/subcomponents/QuestionList.tsx
index 5b8271e..85bedc1 100644
--- a/astro/src/components/web/subcomponents/QuestionList.tsx
+++ b/astro/src/components/web/subcomponents/QuestionList.tsx
@@ -8,27 +8,30 @@ export function QuestionList(props: { questions: FrequentlyAskedQuestion[]; }) {
     };
 
     return (
-        <div class="w-full">
-            { props.questions.map((question, index: number) => (
+        <div className="w-full">
+            {props.questions.map((question, index: number) => (
                 <div
-                    onClick={() => toggle(index)}
                     key={index}
-                    className={`w-full overflow-hidden border-l border-r border-t ${open === index && "bg-amber-200"} ${index !== 0 && (index + 1 !== props.questions.length) && "border-amber-300"} ${index === 0 && "rounded-t-2xl border-t border-amber-300"} ${(index + 1) === props.questions.length && "rounded-b-2xl border-b border-amber-300 shadow-md"}`}
+                    onClick={() => toggle(index)}
+                    className={`w-full overflow-hidden border-l border-r border-t cursor-pointer ${open === index ? "bg-(--ptc) text-(--ptt)" : "bg-white"} ${index === 0 ? "rounded-t-2xl border-t border-(--ptc)" : ""} ${(index + 1) === props.questions.length ? "rounded-b-2xl border-b border-(--ptc) shadow-md" : "border-(--ptc)"}`}
                 >
-                    <h4 class={`text-lg font-semibold transition py-3 px-5 select-none cursor-pointer`}>{ question.question }</h4>
+                    <h4 className="text-lg font-semibold py-3 px-5 select-none">
+                        {question.question}
+                    </h4>
+                    
                     <div
-                        className={`grid transition-all duration-300 ease-in-out ${
+                        className={`grid transition-[grid-template-rows,opacity] duration-300 ease-in-out ${
                             open === index ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                         }`}
                     >
                         <div className="overflow-hidden">
-                            <div className="px-5 py-3 bg-white text-sm text-gray-700">
+                            <div className="px-5 pb-5 text-sm text-gray-700">
                                 {question.answer}
                             </div>
                         </div>
                     </div>
                 </div>  
-            )) }
+            ))}
         </div>  
-    )
-}
+    );
+}
\ No newline at end of file