diff --git a/app/views/_tailwind/applications/_address_search_form.html.erb b/app/views/_tailwind/applications/_address_search_form.html.erb index 463b2ad42..00e443aa6 100644 --- 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 %> -
Application Search
-

- Find me applications within <%= meters_in_words(Alert::DEFAULT_RADIUS) %> of: -

- <%= form.label :q, "Street address", class: "sr-only" %> +
+ Find applications within <%= meters_in_words(Alert::DEFAULT_RADIUS) %> of: +
- <%# 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? %> -

- <%= error %> -

- <% end %> +
+ <%= 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? %> +

+ <%= error %> +

+ <% end %> +
<%= 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 %>