Merge pull request #1154 from naymspace/feature/design-improvements

minor design improvements in multi select

Author: Flo0807

lib/backpex/fields/has_many.ex

@@ -161,20 +161,23 @@ defmodule Backpex.Fields.HasMany do
                 {@prompt}
               </p>
 
-              <div :for={{label, value} <- @selected} class="badge badge-sm badge-primary pointer-events-auto pr-0">
+              <div
+                :for={{label, value} <- @selected}
+                class="badge badge-sm badge-soft badge-primary pointer-events-auto pr-0"
+              >
                 <span>{label}</span>
                 <label
                   class="flex cursor-pointer items-center pr-2"
                   role="button"
                   for={"has-many-#{@name}-checkbox-value-#{value}"}
                   aria-label={Backpex.__({"Unselect %{label}", %{label: label}}, @live_resource)}
                 >
-                  <Backpex.HTML.CoreComponents.icon name="hero-x-mark" class="text-primary-content size-4" />
+                  <Backpex.HTML.CoreComponents.icon name="hero-x-mark" class="size-4 scale-105 hover:scale-110" />
                 </label>
               </div>
             </div>
           </label>
-          <Form.error :for={msg <- @errors}>{msg}</Form.error>
+          <Form.error :for={msg <- @errors} class="mt-1">{msg}</Form.error>
           <div tabindex="0" class="dropdown-content z-[1] menu bg-base-100 rounded-box w-full overflow-y-auto shadow">
             <div class="max-h-72 p-2">
               <input

lib/backpex/fields/multi_select.ex

@@ -128,16 +128,10 @@ defmodule Backpex.Fields.MultiSelect do
     ~H"""
     <div class={[@live_action in [:index, :resource_action] && "truncate"]}>
       {if @selected_labels == [], do: raw("&mdash;")}
-
-      <div class={["flex", @live_action == :show && "flex-wrap"]}>
-        <.intersperse :let={item} enum={@selected_labels}>
-          <:separator>
-            ,&nbsp;
-          </:separator>
-          <p>
-            {HTML.pretty_value(item)}
-          </p>
-        </.intersperse>
+      <div class="space-x-1">
+        <div :for={item <- @selected_labels} class="badge badge-sm badge-soft badge-primary">
+          <span>{HTML.pretty_value(item)}</span>
+        </div>
       </div>
     </div>
     """

lib/backpex/html/form.ex

@@ -282,7 +282,7 @@ defmodule Backpex.HTML.Form do
             {@prompt}
           </p>
 
-          <div :for={{label, value} <- @selected} class="badge badge-sm badge-primary pointer-events-auto pr-0">
+          <div :for={{label, value} <- @selected} class="badge badge-sm badge-soft badge-primary pointer-events-auto pr-0">
             {label}
             <div
               class="flex cursor-pointer items-center pr-2"
@@ -292,7 +292,7 @@ defmodule Backpex.HTML.Form do
               phx-target={@event_target}
               aria-label={Backpex.__({"Unselect %{label}", %{label: label}}, @live_resource)}
             >
-              <Backpex.HTML.CoreComponents.icon name="hero-x-mark" class="text-primary-content size-4 scale-110" />
+              <Backpex.HTML.CoreComponents.icon name="hero-x-mark" class="size-4 scale-105 hover:scale-110" />
             </div>
           </div>
         </div>