lib/mv_web/live/import_live.ex

@@ -92,7 +92,13 @@ defmodule MvWeb.ImportLive do
     <Layouts.app flash={@flash} current_user={@current_user} club_name={@club_name}>
       <%= if Authorization.can?(@current_user, :create, Mv.Membership.Member) do %>
         <%!-- CSV Import Section --%>
-        <.form_section title={gettext("Import Members (CSV)")}>
+        <.header>
+        {gettext("Import Members (CSV)")}
+        <:subtitle>
+          {gettext("Import members from CSV files.")}
+        </:subtitle>
+      </.header>
+        <.form_section title={gettext("Datei auswählen")}>
           <Components.custom_fields_notice {assigns} />
           <Components.template_links {assigns} />
           <Components.import_form {assigns} />

lib/mv_web/live/import_live/components.ex

@@ -20,12 +20,12 @@ defmodule MvWeb.ImportLive.Components do
   """
   def custom_fields_notice(assigns) do
     ~H"""
-    <div role="note" class="alert alert-info mb-4">
+    <div role="note" class="alert alert-info mb-4 w-xl">
       <.icon name="hero-information-circle" class="size-5" aria-hidden="true" />
       <div>
         <p class="text-sm mb-2">
           {gettext(
-            "Use the data field name as the CSV column header in your file. Data fields must exist in Mila before importing, so they must be listed in the list of member data (like e-mail or first name). Unknown data field columns will be ignored with a warning."
+            "Use the data field name as the CSV column header in your file. Data fields must exist in Mila before importing, because unknown data field columns will be ignored. Groups and membership fees are not supported for import."
           )}
         </p>
         <p class="text-sm">
@@ -48,7 +48,7 @@ defmodule MvWeb.ImportLive.Components do
   def template_links(assigns) do
     ~H"""
     <div class="mb-4">
-      <p class="text-sm text-base-content/70 mb-2">
+      <p class="mb-2">
         {gettext("Download CSV templates:")}
       </p>
       <ul class="list-disc list-inside space-y-1">
@@ -88,22 +88,20 @@ defmodule MvWeb.ImportLive.Components do
       phx-submit="start_import"
       data-testid="csv-upload-form"
     >
-      <div class="form-control">
-        <label for="csv_file" class="label">
-          <span class="label-text">
-            {gettext("CSV File")}
-          </span>
+      <fieldset class="mb-2 fieldset w-md">
+        <label for="csv_file">
+          <span class="mb-1 label">{gettext("CSV File")}</span>
         </label>
         <.live_file_input
           upload={@uploads.csv_file}
           id="csv_file"
-          class="file-input file-input-bordered w-full"
+          class="file-input file-input-bordered"
           aria-describedby="csv_file_help"
         />
-        <p class="label-text-alt mt-1" id="csv_file_help">
+        <p class="text-sm text-base-content/60 mt-2" id="csv_file_help">
           {gettext("CSV files only, maximum %{size} MB", size: @csv_import_max_file_size_mb)}
         </p>
-      </div>
+      </fieldset>
 
       <.button
         type="submit"