Update design of main form

https://www.bugherd.com/t/lSWo85GZpjJBQRO9xAcjWQ
openaustralia · Jun 5, 2024 · b092d59 · b092d59
1 parent a91a0d5
commit b092d59
Showing 1 changed file with 26 additions and 25 deletions.
diff --git a/app/views/_tailwind/applications/_address_search_form.html.erb b/app/views/_tailwind/applications/_address_search_form.html.erb
@@ -5,11 +5,9 @@
   <%= form_with url: address_applications_path, method: :get, class: "gap-4 flex flex-col items-center" do |form| %>
     <%# Not using a heading here so that we don't mess up the heading order on different pages. %>
     <%# TODO: There's probably something simpler and more sensible we should do here %>
-    <div class="text-3xl font-bold text-center text-white sm:text-4xl font-display">Application Search</div>
-    <p class="text-2xl text-center text-white">
-      Find me applications within <%= meters_in_words(Alert::DEFAULT_RADIUS) %> of:
-    </p>
-    <%= form.label :q, "Street address", class: "sr-only" %>
+    <div class="max-w-xl text-3xl font-bold text-center text-white sm:text-4xl font-display">
+      Find applications within <%= meters_in_words(Alert::DEFAULT_RADIUS) %> of:
+    </div>
     <div class="flex flex-col items-center w-full gap-4" x-data="{
       loading: false,
       address: '',
@@ -24,26 +22,29 @@
         this.loading = false;
       }
     }">
-      <%# TODO: Do we want this to show the little red cross like other form fields on error? %>
-      <%= form.text_field :q,
-                          value: q,
-                          placeholder: "e.g. 1 Sowerby St, Goulburn, NSW 2580",
-                          class: class_names("text-2xl", "text-navy", "w-full", "px-4", "py-3", "sm:py-4", "placeholder-shown:truncate", "focus:ring-4", "focus:ring-sun-yellow", "border-error-red" => error),
-                          required: "required",
-                          autofocus: true,
-                          "x-data" => "{ async initAutocomplete() {
-                                           const { Autocomplete } = await google.maps.importLibrary('places');
-                                           new Autocomplete($el, {componentRestrictions: {country: 'au'}, types: ['address']})}
-                                       }",
-                          "x-init" => "initAutocomplete()",
-                          "x-model.fill" => "address" %>
-      <% if error %>
-        <%# TODO: Add color to tailwind config %>
-        <%# TODO: This is the only box in the whole design with rounded corners. Huh? %>
-        <p class="text-error-red bg-[#E8CDCD] w-full text-center py-4 text-2xl px-4 rounded-lg">
-          <%= error %>
-        </p>
-      <% end %>
+      <div class="flex flex-col w-full gap-2">
+        <%= form.label :q, "Street address", class: "text-white font-bold text-2xl self-start" %>
+        <%# TODO: Do we want this to show the little red cross like other form fields on error? %>
+        <%= form.text_field :q,
+                            value: q,
+                            placeholder: "e.g. 1 Sowerby St, Goulburn, NSW 2580",
+                            class: class_names("text-2xl", "text-navy", "w-full", "px-4", "py-3", "sm:py-4", "placeholder-shown:truncate", "focus:ring-4", "focus:ring-sun-yellow", "border-error-red" => error),
+                            required: "required",
+                            autofocus: true,
+                            "x-data" => "{ async initAutocomplete() {
+                                            const { Autocomplete } = await google.maps.importLibrary('places');
+                                            new Autocomplete($el, {componentRestrictions: {country: 'au'}, types: ['address']})}
+                                        }",
+                            "x-init" => "initAutocomplete()",
+                            "x-model.fill" => "address" %>
+        <% if error %>
+          <%# TODO: Add color to tailwind config %>
+          <%# TODO: This is the only box in the whole design with rounded corners. Huh? %>
+          <p class="text-error-red bg-[#E8CDCD] w-full text-center py-4 text-2xl px-4 rounded-lg">
+            <%= error %>
+          </p>
+        <% end %>
+      </div>
       <%= button_tag type: "button", class: "text-white sm:text-xl inline focus:text-navy focus:outline-none focus:bg-sun-yellow", "@click": "geolocate($event)", "x-bind:disabled": "loading" do %>
         <%# TODO: Fix occasional clipping of icon problem %>
         <span class="inline-block mr-2 align-middle">