Stylizacja, zmiana mapy zasięgu

src/islands/RangeForm.jsx

@@ -22,9 +22,6 @@ export default function RangeForm() {
     let timeoutCity = null;
     let timeoutStreet = null;
 
-    // =====================================================
-    // AUTOCOMPLETE MIASTO
-    // =====================================================
     async function fetchCitySuggestions(q) {
         const res = await fetch(`/api/cities-autocomplete?q=${encodeURIComponent(q)}`);
         setCitySuggest(await res.json());
@@ -80,9 +77,6 @@ export default function RangeForm() {
         cityListRef.current.children[highlightIndex]?.scrollIntoView({ block: "nearest" });
     }, [highlightIndex]);
 
-    // =====================================================
-    // AUTO-MATCH MIASTO — NOWE!
-    // =====================================================
     useEffect(() => {
         if (!citySuggest.length) return;
 
@@ -98,9 +92,6 @@ export default function RangeForm() {
         }
     }, [city, citySuggest]);
 
-    // =====================================================
-    // DOSTĘPNOŚĆ ULIC
-    // =====================================================
     async function updateStreetAvailability(currentCity) {
         if (!currentCity) {
             setStreetDisabled(true);
@@ -133,9 +124,6 @@ export default function RangeForm() {
         updateStreetAvailability(city);
     }, [city]);
 
-    // =====================================================
-    // AUTOCOMPLETE ULICA
-    // =====================================================
     async function fetchStreetSuggestions(q, c) {
         const res = await fetch(
             `/api/streets-autocomplete?city=${encodeURIComponent(c)}&q=${encodeURIComponent(q)}`
@@ -194,9 +182,6 @@ export default function RangeForm() {
         streetListRef.current.children[streetHighlightIndex]?.scrollIntoView({ block: "nearest" });
     }, [streetHighlightIndex]);
 
-    // =====================================================
-    // AUTO-MATCH ULICA — NOWE!
-    // =====================================================
     useEffect(() => {
         if (!streetSuggest.length) return;
 
@@ -211,9 +196,6 @@ export default function RangeForm() {
         }
     }, [street, streetSuggest]);
 
-    // =====================================================
-    // SUBMIT
-    // =====================================================
     async function onSubmit(e) {
         e.preventDefault();
         setError("");
@@ -248,17 +230,13 @@ export default function RangeForm() {
         setLoading(false);
     }
 
-    // =====================================================
-    // RENDER
-    // =====================================================
     return (
         <form class="flex flex-col gap-2" onSubmit={onSubmit} autocomplete="off">
-
-
             {/* CITY */}
             <div class="autocomplete-wrapper">
                 <input
                     class={`f-input ${citySuggest.length ? "autocomplete-open" : ""}`}
+                    name="formCity"
                     placeholder="Wpisz miejscowość..."
                     value={city}
                     onInput={onCityInput}
@@ -295,6 +273,7 @@ export default function RangeForm() {
                             ? "W tej miejscowości nie występują"
                             : "Wpisz ulicę..."
                     }
+                    name="formStreet"
                     value={street}
                     readOnly={streetDisabled}
                     onInput={streetDisabled ? undefined : onStreetInput}
@@ -323,24 +302,23 @@ export default function RangeForm() {
             {/* NUMBER */}
             <input
                 class="f-input"
+                name="formNumber"
                 placeholder="np. 1A"
                 value={number}
                 onInput={(e) => setNumber(e.target.value)}
                 required
             />
 
-            {/* ERROR */}
             {error && (
-                <p class="text-red-600 dark:text-red-400 text-sm">{error}</p>
+                <p class="text-red-600text-lg">{error}</p>
             )}
 
-            {/* BUTTON */}
             <button
                 class="btn btn-outline"
                 disabled={loading}
             >
                 {loading ? (
-                    <span class="w-5 h-5 border-2 border-[var(--fuz-accent)] border-t-transparent rounded-full animate-spin"></span>
+                    <span class="w-5 h-5 border-2 border-[var(--f-text)] border-t-transparent rounded-full animate-spin"></span>
                 ) : (
                     "Sprawdź dostępność →"
                 )}