Use fluxon components for remaining inputs

lib/music_library_web/components/add_record_component.ex

@@ -21,16 +21,14 @@ defmodule MusicLibraryWeb.AddRecordComponent do
         phx-submit="search"
         class="px-4"
       >
-        <.input
+        <Fluxon.Components.Input.input
           id={:mb_query}
           name={:mb_query}
           field={@form[:mb_query]}
-          type="text"
+          type="search"
           label={gettext("Search for a record")}
-          prompt={gettext("Search for a record")}
           phx-debounce="500"
-          autocorrect="off"
-          autocapitalize="none"
+          autocomplete="off"
           autofocus
         />
       </.simple_form>

lib/music_library_web/components/record_components.ex

@@ -197,15 +197,15 @@ defmodule MusicLibraryWeb.RecordComponents do
   def search_form(assigns) do
     ~H"""
     <form class="w-full sm:w-1/3" for={@query} phx-submit="search" phx-change="search">
-      <.input
+      <Fluxon.Components.Input.input
         type="search"
+        size="sm"
         id={:query}
         name={:query}
         value={@query}
         placeholder={gettext("Search")}
         phx-debounce="500"
-        autocorrect="off"
-        autocapitalize="none"
+        autocomplete="off"
       />
     </form>
     """

lib/music_library_web/controllers/session_html/new.html.heex

@@ -9,22 +9,12 @@
       <div class="relative -space-y-px rounded-md shadow-xs">
         <div>
           <label for="password" class="sr-only">{gettext("Password")}</label>
-          <input
+          <Fluxon.Components.Input.input
             id="password"
             name="password"
             type="password"
             autocomplete="current-password"
             required
-            class={[
-              "relative block w-full rounded-md border-0 py-1.5",
-              "sm:text-sm sm:leading-6",
-              "ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
-              "text-zinc-900 dark:text-zinc-200",
-              "dark:bg-zinc-800",
-              "ring-zinc-200 dark:ring-zinc-400",
-              "placeholder:text-zinc-400 dark:placeholder:text-zinc-400",
-              "focus:ring-zinc-400 dark:focus:ring-zinc-300"
-            ]}
             placeholder="Password"
           />
         </div>

lib/music_library_web/live/collection_live/index.html.heex

@@ -2,7 +2,7 @@
   <header class="gap-6 mb-2">
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
       <.search_form query={@record_list_params.query} />
-      <nav class="mt-2 isolate inline-flex rounded-md shadow-xs">
+      <nav class="isolate inline-flex rounded-md shadow-xs">
         <.link
           class={[
             "relative inline-flex items-center rounded-l-md",
@@ -41,7 +41,7 @@
         patch={order_path(@record_list_params, :purchase)}
         class={[
           "relative inline-flex items-center rounded-l-md",
-          "px-3 py-2 text-xs sm:text-sm font-semibold",
+          "px-3 py-2 text-sm font-semibold",
           "ring-1 ring-inset focus:z-10",
           "bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 ring-zinc-300",
           @record_list_params.order == :purchase && "!bg-zinc-100 dark:!bg-zinc-700"