style: translate fieldtypes and payment as button

lib/mv_web/live/components/payment_filter_component.ex

@@ -44,7 +44,7 @@ defmodule MvWeb.Components.PaymentFilterComponent do
       <button
         type="button"
         class={[
-          "btn btn-ghost gap-2",
+          "btn gap-2",
           @paid_filter && "btn-active"
         ]}
         phx-click="toggle_dropdown"

lib/mv_web/live/custom_field_live/index_component.ex

@@ -14,20 +14,19 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
 
   @impl true
   def render(assigns) do
+    assigns = assign(assigns, :field_type_label, &MvWeb.Translations.FieldTypes.label/1)
+
     ~H"""
     <div id={@id}>
-      <.header>
-        {gettext("Custom Fields")}
-        <:subtitle>
-          {gettext("These will appear in addition to other data when adding new members.")}
-        </:subtitle>
-        <:actions>
-          <.button variant="primary" phx-click="new_custom_field" phx-target={@myself}>
+    <.form_section title={gettext("Custom Fields")}>
+      <div class="flex">
+        <p class="text-sm text-base-content/70">{gettext("These will appear in addition to other data when adding new members.")}</p>
+        <div class="ml-auto">
+          <.button class="ml-auto" variant="primary" phx-click="new_custom_field" phx-target={@myself}>
             <.icon name="hero-plus" /> {gettext("New Custom field")}
           </.button>
-        </:actions>
-      </.header>
-
+        </div>
+      </div>
       <%!-- Show form when creating or editing --%>
       <div :if={@show_form} class="mb-8">
         <.live_component
@@ -55,14 +54,14 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
         <:col :let={{_id, custom_field}} label={gettext("Name")}>{custom_field.name}</:col>
 
         <:col :let={{_id, custom_field}} label={gettext("Value Type")}>
-          {custom_field.value_type}
+          {@field_type_label.(custom_field.value_type)}
         </:col>
 
         <:col :let={{_id, custom_field}} label={gettext("Description")}>
           {custom_field.description}
         </:col>
 
-        <:col :let={{_id, custom_field}} label={gettext("Show in Overview")}>
+        <:col :let={{_id, custom_field}} label={gettext("Show in overview")} class="max-w-[9.375rem] text-center">
           <span :if={custom_field.show_in_overview} class="badge badge-success">
             {gettext("Yes")}
           </span>
@@ -72,17 +71,22 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
         </:col>
 
         <:action :let={{_id, custom_field}}>
-          <.link phx-click={
-            JS.push("edit_custom_field", value: %{id: custom_field.id}, target: @myself)
-          }>
-            {gettext("Edit")}
-          </.link>
+          <.icon_button
+            icon="hero-pencil"
+            label={gettext("Edit custom field")}
+            size="sm"
+            phx-click={JS.push("edit_custom_field", value: %{id: custom_field.id}, target: @myself)}
+          />
         </:action>
 
         <:action :let={{_id, custom_field}}>
-          <.link phx-click={JS.push("prepare_delete", value: %{id: custom_field.id}, target: @myself)}>
-            {gettext("Delete")}
-          </.link>
+          <.icon_button
+            icon="hero-trash"
+            label={gettext("Delete custom field")}
+            size="sm"
+            class="btn-error"
+            phx-click={JS.push("prepare_delete", value: %{id: custom_field.id}, target: @myself)}
+          />
         </:action>
       </.table>
 
@@ -149,7 +153,8 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
             </button>
           </div>
         </div>
-      </dialog>
+        </dialog>
+      </.form_section>
     </div>
     """
   end

lib/mv_web/translations/field_types.ex

@@ -0,0 +1,21 @@
+defmodule MvWeb.Translations.FieldTypes do
+  @moduledoc """
+  Helper module to dynamically translate field types.
+
+  ## Features
+  - Can be used in templates to dynamically translate technical field type words to human friendly text
+
+  ## Example
+  assigns = assign(assigns, :field_type_label, &MvWeb.Translations.FieldTypes.label/1)
+  In template:
+  <%= @field_type_label.(custom_field.value_type) %>
+  """
+  use Gettext, backend: MvWeb.Gettext
+
+  @spec label(atom()) :: String.t()
+  def label(:string), do: gettext("Text")
+  def label(:integer), do: gettext("Number")
+  def label(:boolean), do: gettext("Yes/No-Selection")
+  def label(:date), do: gettext("Date")
+  def label(:email), do: gettext("E-Mail")
+end