From 29218b0e385e8189cb415a0ec5243dbe9b036c1c Mon Sep 17 00:00:00 2001
From: seccodesmith <admin@seccodesmith.pl>
Date: Tue, 27 May 2025 13:52:14 +0200
Subject: [PATCH] feat: add Accordion styling and integrate into Contact page

---
 src/assets/styles/Accordion.scss      | 41 +++++++++++++++++++++++++++
 src/assets/styles/Contact.module.scss | 40 --------------------------
 src/pages/Contact.tsx                 |  9 +++---
 3 files changed, 46 insertions(+), 44 deletions(-)
 create mode 100644 src/assets/styles/Accordion.scss

diff --git a/src/assets/styles/Accordion.scss b/src/assets/styles/Accordion.scss
new file mode 100644
index 0000000..06876e0
--- /dev/null
+++ b/src/assets/styles/Accordion.scss
@@ -0,0 +1,41 @@
+@use './variables.scss' as *;
+
+/* Accordion styling */
+.accordion-button {
+    background-color: $card-bg !important;
+    color: $text-light !important;
+    border-color: $card-border !important;
+    box-shadow: none !important;
+    padding: 1rem 1.25rem;
+    font-family: 'Cinzel', serif;
+}
+
+.accordion-button:not(.collapsed) {
+    color: $accent-fire !important;
+}
+
+.accordion-button:focus {
+    border-color: $accent-fire !important;
+    box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25) !important;
+}
+
+.accordion-button::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6400'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
+}
+
+.accordion-item {
+    background-color: transparent;
+    border: none;
+    margin-bottom: 1rem;
+}
+
+.accordion-body {
+    background-color: $card-bg;
+    border: 1px solid $card-border;
+    border-top: none;
+    color: $text-ash;
+    padding: 1.25rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    border-bottom-left-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+}
\ No newline at end of file
diff --git a/src/assets/styles/Contact.module.scss b/src/assets/styles/Contact.module.scss
index c5695e9..0ce08ef 100644
--- a/src/assets/styles/Contact.module.scss
+++ b/src/assets/styles/Contact.module.scss
@@ -156,46 +156,6 @@
     filter: grayscale(90%) invert(92%) hue-rotate(180deg);
 }
 
-/* Accordion styling */
-.accordionButton {
-    background-color: $card-bg !important;
-    color: $text-light !important;
-    border-color: $card-border !important;
-    box-shadow: none !important;
-    padding: 1rem 1.25rem;
-    font-family: 'Cinzel', serif;
-}
-
-.accordionButton:not(.collapsed) {
-    color: $accent-fire !important;
-}
-
-.accordionButton:focus {
-    border-color: $accent-fire !important;
-    box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25) !important;
-}
-
-.accordionButton::after {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6400'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
-}
-
-.accordionItem {
-    background-color: transparent;
-    border: none;
-    margin-bottom: 1rem;
-}
-
-.accordionBody {
-    background-color: $card-bg;
-    border: 1px solid $card-border;
-    border-top: none;
-    color: $text-ash;
-    padding: 1.25rem;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    border-bottom-left-radius: 0.375rem;
-    border-bottom-right-radius: 0.375rem;
-}
-
 /* Binary background effect */
 .binaryLine {
     position: absolute;
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 42574f5..07f9c0a 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -1,6 +1,7 @@
 import { PageHeader } from '../components/PageHeader';
 import { ContactForm } from '../components/ContactForm';
 import style from '@styles/Contact.module.scss';
+import '@styles/Accordion.scss';
 
 import { contactData } from '../data/contactData'
 import type { ContactProps } from '../untils/ContactProps';
@@ -98,10 +99,10 @@ export const Contact = () => {
               <div className="accordion" id="faqAccordion">
                 {
                   data.questionsAndAnswers.map((item, index) => (
-                    <div className={`accordion-item ${style.accordionItem}`} key={index}>
-                      <h2 className={`accordion-header ${style.accordionHeader}`} id={`heading${index}`}>
+                    <div className={`accordion-item`} key={index}>
+                      <h2 className={`accordion-header`} id={`heading${index}`}>
                         <button
-                          className={`accordion-button collapsed ${style.accordionButton}`}
+                          className={`accordion-button collapsed`}
                           type="button"
                           data-bs-toggle="collapse"
                           data-bs-target={`#collapse${index}`}
@@ -117,7 +118,7 @@ export const Contact = () => {
                         aria-labelledby={`heading${index}`}
                         data-bs-parent="#faqAccordion"
                       >
-                        <div className={`accordion-body ${style.accordionBody}`}>
+                        <div className={`accordion-body`}>
                           {item.answer}
                         </div>
                       </div>