refactor: use core components

lib/mv_web/live/components/member_filter_component.ex

@@ -64,11 +64,11 @@ defmodule MvWeb.Components.MemberFilterComponent do
       phx-key="Escape"
       phx-target={@myself}
     >
-      <button
+      <.button
         type="button"
-        tabindex="0"
+        variant="secondary"
         class={[
-          "btn gap-2",
+          "gap-2",
           (@cycle_status_filter || map_size(@group_filters) > 0 ||
              active_boolean_filters_count(@boolean_filters) > 0) &&
             "btn-active"
@@ -104,7 +104,7 @@ defmodule MvWeb.Components.MemberFilterComponent do
         >
           {@member_count}
         </span>
-      </button>
+      </.button>
       
     <!--
         NOTE: We use a div panel instead of ul.menu/li structure to avoid DaisyUI menu styles
@@ -318,22 +318,24 @@ defmodule MvWeb.Components.MemberFilterComponent do
           
     <!-- Footer -->
           <div class="mt-4 flex justify-between pt-3 border-t border-base-200">
-            <button
+            <.button
               type="button"
+              variant="neutral"
+              size="sm"
               phx-click="reset_filters"
               phx-target={@myself}
-              class="btn btn-sm"
             >
-              {gettext("Reset")}
-            </button>
-            <button
+              {gettext("Clear filters")}
+            </.button>
+            <.button
               type="button"
+              variant="primary"
+              size="sm"
               phx-click="close_dropdown"
               phx-target={@myself}
-              class="btn btn-primary btn-sm"
             >
               {gettext("Close")}
-            </button>
+            </.button>
           </div>
         </form>
       </div>

lib/mv_web/live/components/sort_header_component.ex

@@ -19,25 +19,28 @@ defmodule MvWeb.Components.SortHeaderComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="tooltip tooltip-bottom" data-tip={aria_sort(@field, @sort_field, @sort_order)}>
-      <button
-        type="button"
-        aria-label={aria_sort(@field, @sort_field, @sort_order)}
-        class="btn btn-ghost select-none"
-        phx-click="sort"
-        phx-value-field={@field}
-        data-testid={@field}
-      >
-        {@label}
-        <%= if @sort_field == @field do %>
-          <.icon name={if @sort_order == :asc, do: "hero-chevron-up", else: "hero-chevron-down"} />
-        <% else %>
-          <.icon
-            name="hero-chevron-up-down"
-            class="opacity-40"
-          />
-        <% end %>
-      </button>
+    <div>
+      <.tooltip content={aria_sort(@field, @sort_field, @sort_order)} position="bottom">
+        <.button
+          type="button"
+          variant="ghost"
+          aria-label={aria_sort(@field, @sort_field, @sort_order)}
+          class="select-none"
+          phx-click="sort"
+          phx-value-field={@field}
+          data-testid={@field}
+        >
+          {@label}
+          <%= if @sort_field == @field do %>
+            <.icon name={if @sort_order == :asc, do: "hero-chevron-up", else: "hero-chevron-down"} />
+          <% else %>
+            <.icon
+              name="hero-chevron-up-down"
+              class="opacity-40"
+            />
+          <% end %>
+        </.button>
+      </.tooltip>
     </div>
     """
   end