fix(portal): Reduce button sizes in live_table to xs (#4945)

- Updates buttons in tables to size `xs` so they are a bit easier on the eyes and fixes #4938 - Makes "Save" button placement consistent - Reduces count of Actors list in `Edit actors` for group page because it pushes the `Save` button below the fold and it was confusing some users because it wasn't obvious they needed to save the selection.
firezone · May 10, 2024 · 1536b12 · 1536b12
1 parent 65acd36
commit 1536b12
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 21 deletions.
diff --git a/elixir/apps/web/lib/web/components/form_components.ex b/elixir/apps/web/lib/web/components/form_components.ex
@@ -476,10 +476,11 @@ defmodule Web.FormComponents do
   """
   slot :inner_block, required: true
   attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
+  attr :size, :string, default: "md", doc: "The size of the button"
 
   def delete_button(assigns) do
     ~H"""
-    <.button style="danger" icon="hero-trash-solid" {@rest}>
+    <.button style="danger" size={@size} icon="hero-trash-solid" {@rest}>
       <%= render_slot(@inner_block) %>
     </.button>
     """

diff --git a/elixir/apps/web/lib/web/components/table_components.ex b/elixir/apps/web/lib/web/components/table_components.ex
@@ -96,13 +96,12 @@ defmodule Web.TableComponents do
           render = render_slot(action, @mapper.(@row))
           not_empty_render?(render)
         end) %>
-      <td
-        :if={@actions != [] and show_actions?}
-        class="px-4 py-3 flex space-x-1 items-center justify-end"
-      >
-        <span :for={action <- @actions}>
-          <%= render_slot(action, @mapper.(@row)) %>
-        </span>
+      <td :if={@actions != [] and show_actions?} class="px-4 py-3">
+        <div class="flex space-x-1 items-center justify-end">
+          <span :for={action <- @actions}>
+            <%= render_slot(action, @mapper.(@row)) %>
+          </span>
+        </div>
       </td>
     </tr>
     """

diff --git a/elixir/apps/web/lib/web/live/actors/groups.ex b/elixir/apps/web/lib/web/live/actors/groups.ex
@@ -109,6 +109,7 @@ defmodule Web.Actors.EditGroups do
               <div class="flex justify-end">
                 <.button
                   :if={member?(@current_group_ids, group, @added, @removed)}
+                  size="xs"
                   phx-click={:remove_group}
                   phx-value-id={group.id}
                   phx-value-name={group.name}
@@ -117,6 +118,7 @@ defmodule Web.Actors.EditGroups do
                 </.button>
                 <.button
                   :if={not member?(@current_group_ids, group, @added, @removed)}
+                  size="xs"
                   phx-click={:add_group}
                   phx-value-id={group.id}
                   phx-value-name={group.name}
@@ -126,9 +128,11 @@ defmodule Web.Actors.EditGroups do
               </div>
             </:col>
           </.live_table>
-          <.button class="m-4" data-confirm={confirm_message(@added, @removed)} phx-click="submit">
-            Save
-          </.button>
+          <div class="flex justify-end">
+            <.button class="m-4" data-confirm={confirm_message(@added, @removed)} phx-click="submit">
+              Save
+            </.button>
+          </div>
         </div>
       </:content>
     </.section>

diff --git a/elixir/apps/web/lib/web/live/actors/show.ex b/elixir/apps/web/lib/web/live/actors/show.ex
@@ -241,6 +241,7 @@ defmodule Web.Actors.Show do
           <:action :let={identity}>
             <.button
               :if={identity_has_email?(identity)}
+              size="xs"
               icon="hero-envelope"
               phx-click="send_welcome_email"
               phx-value-id={identity.id}
@@ -251,12 +252,10 @@ defmodule Web.Actors.Show do
           <:action :let={identity}>
             <.delete_button
               :if={identity.created_by != :provider}
+              size="xs"
               phx-click="delete_identity"
               data-confirm="Are you sure you want to delete this identity?"
               phx-value-id={identity.id}
-              class={[
-                "block w-full py-2 px-4 hover:bg-neutral-100"
-              ]}
             >
               Delete
             </.delete_button>
@@ -363,12 +362,10 @@ defmodule Web.Actors.Show do
           </:col>
           <:action :let={token}>
             <.delete_button
+              size="xs"
               phx-click="revoke_token"
               data-confirm="Are you sure you want to revoke this token?"
               phx-value-id={token.id}
-              class={[
-                "block w-full py-2 px-4 hover:bg-gray-100"
-              ]}
             >
               Revoke
             </.delete_button>

diff --git a/elixir/apps/web/lib/web/live/groups/edit_actors.ex b/elixir/apps/web/lib/web/live/groups/edit_actors.ex
@@ -25,7 +25,7 @@ defmodule Web.Groups.EditActors do
         )
         |> assign_live_table("actors",
           query_module: Actors.Actor.Query,
-          limit: 25,
+          limit: 10,
           sortable_fields: [
             {:actors, :name}
           ],
@@ -117,13 +117,15 @@ defmodule Web.Groups.EditActors do
             <:col :let={actor} class="w-1/6">
               <.button
                 :if={member?(@current_member_ids, actor, @added, @removed)}
+                size="xs"
                 phx-click={:remove_actor}
                 phx-value-id={actor.id}
               >
                 <.icon name="hero-minus" class="h-3.5 w-3.5 mr-2" /> Remove
               </.button>
               <.button
                 :if={not member?(@current_member_ids, actor, @added, @removed)}
+                size="xs"
                 phx-click={:add_actor}
                 phx-value-id={actor.id}
               >
@@ -132,9 +134,11 @@ defmodule Web.Groups.EditActors do
             </:col>
           </.live_table>
 
-          <.button class="m-4" data-confirm={confirm_message(@added, @removed)} phx-click="submit">
-            Save
-          </.button>
+          <div class="flex justify-end">
+            <.button class="m-4" data-confirm={confirm_message(@added, @removed)} phx-click="submit">
+              Save
+            </.button>
+          </div>
         </div>
       </:content>
     </.section>

diff --git a/elixir/apps/web/lib/web/live/settings/api_clients/show.ex b/elixir/apps/web/lib/web/live/settings/api_clients/show.ex
@@ -147,6 +147,7 @@ defmodule Web.Settings.ApiClients.Show do
           </:col>
           <:action :let={token}>
             <.delete_button
+              size="xs"
               phx-click="revoke_token"
               data-confirm="Are you sure you want to revoke this token?"
               phx-value-id={token.id}