Kontakt stylizacja

src/components/sections/SectionContact.astro

@@ -2,7 +2,7 @@
 import yaml from "js-yaml";
 import fs from "fs";
 import MapGoogle from "../maps/MapGoogle.astro";
-import "../../styles/contact.css";
+// import "../../styles/contact.css";
 
 const data = yaml.load(
     fs.readFileSync("./src/content/contact/contact.yaml", "utf8"),
@@ -11,32 +11,31 @@ const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
 const form = data.form;
 ---
 
-<section id="contact" class="fuz-section">
-    <div class="fuz-contact-grid">
+<section id="contact" class="f-section">
+    <div class="f-contact-grid">
         <!-- Lewa kolumna -->
-        <div class="space-y-6">
-            <h2 class="fuz-section-title">{data.title}</h2>
-            <div class="fuz-contact-description" set:html={data.description} />
+        <div class="f-contact-col-1">
+            <h2>{data.title}</h2>
+            <div class="f-contact-item" set:html={data.description} />
         </div>
 
         <!-- Formularz -->
-        <div class="fuz-contact-box">
-            <h2 class="fuz-section-title">{data.contactFormTitle}</h2>
-
-            <form id="contactForm" class="fuz-contact-form">
-                <div class="grid grid-cols-2 gap-4">
+        <div class="f-contact-col-2">
+            <h2>{data.contactFormTitle}</h2>
+            <form id="contactForm" class="f-contact-form">
+                <div class="f-contact-form-inner">
                     <input
                         type="text"
                         name="firstName"
                         placeholder={form.firstName.placeholder}
-                        class="fuz-input"
+                        class="f-input"
                         required
                     />
                     <input
                         type="text"
                         name="lastName"
                         placeholder={form.lastName.placeholder}
-                        class="fuz-input"
+                        class="f-input"
                         required
                     />
                 </div>
@@ -46,7 +45,7 @@ const form = data.form;
                         type="email"
                         name="email"
                         placeholder={form.email.placeholder}
-                        class="fuz-input"
+                        class="f-input"
                         required
                         autocomplete="email"
                     />
@@ -54,7 +53,7 @@ const form = data.form;
                         type="tel"
                         name="phone"
                         placeholder={form.phone.placeholder}
-                        class="fuz-input"
+                        class="f-input"
                         required
                         autocomplete="tel"
                     />
@@ -64,7 +63,7 @@ const form = data.form;
                     type="text"
                     name="subject"
                     placeholder={form.subject.placeholder}
-                    class="fuz-input"
+                    class="f-input"
                     required
                 />
 
@@ -72,16 +71,11 @@ const form = data.form;
                     name="message"
                     rows={form.message.rows}
                     placeholder={form.message.placeholder}
-                    class="fuz-input"
+                    class="f-input"
                     required></textarea>
 
-                <label class="fuz-rodo">
-                    <input
-                        type="checkbox"
-                        name="rodo"
-                        class="mt-1 h-4 w-4"
-                        required
-                    />
+                <label class="f-rodo">
+                    <input type="checkbox" name="rodo" required />
                     <span>
                         {form.rodo.label}
                         <a
@@ -92,17 +86,14 @@ const form = data.form;
                     </span>
                 </label>
 
-                <button
-                    class="btn btn-outline w-full py-3 text-lg"
-                    title={form.submit.title}
-                >
+                <button title={form.submit.title}>
                     {form.submit.label}
                 </button>
             </form>
         </div>
     </div>
 
-    <div class="fuz-contact-map-wrapper">
+    <div class="f-contact-map">
         <MapGoogle
             apiKey={apiKey}
             lat={data.lat}
@@ -115,11 +106,11 @@ const form = data.form;
             mapStyleId={data.maps.mapId}
         />
     </div>
-
-    <div id="toast" class="fuz-toast"></div>
+    <!-- TODO: Poprawić obslugę błedu wysyłania wiadomości by pojawiał sie toast i ulozyć css -->
+    <div id="toast" class="f-toast"></div>
 </section>
 
-<!-- ReCaptcha init -->
+<!-- ReCaptcha -->
 <script
     is:inline
     define:vars={{ siteKey: import.meta.env.PUBLIC_RECAPTCHA_SITE_KEY }}
@@ -132,7 +123,7 @@ const form = data.form;
     document.head.appendChild(recaptchaScript);
 </script>
 
-<!-- Formularz + toast -->
+
 <script
     is:inline
     define:vars={{
@@ -144,7 +135,7 @@ const form = data.form;
         const form = document.getElementById("contactForm");
         const toast = document.getElementById("toast");
 
-        if (!form) return; // Safety
+        if (!form) return;
 
         form.addEventListener("submit", async (e) => {
             if (!form.reportValidity()) return;
@@ -182,14 +173,9 @@ const form = data.form;
         ${message}
       </div>
     `;
-            // reset animacji
             toast.classList.remove("visible");
-            void toast.offsetWidth; // magiczny hack forcing reflow
-
-            // pokaż
+            void toast.offsetWidth;
             toast.classList.add("visible");
-
-            // ukryj po 3s
             setTimeout(() => {
                 toast.classList.remove("visible");
             }, 3000);