From 1536b124dab32a5d607489e37ee8339db367fcb0 Mon Sep 17 00:00:00 2001 From: Jamil Date: Thu, 9 May 2024 23:52:42 -0700 Subject: [PATCH] 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. --- .../apps/web/lib/web/components/form_components.ex | 3 ++- .../apps/web/lib/web/components/table_components.ex | 13 ++++++------- elixir/apps/web/lib/web/live/actors/groups.ex | 10 +++++++--- elixir/apps/web/lib/web/live/actors/show.ex | 9 +++------ elixir/apps/web/lib/web/live/groups/edit_actors.ex | 12 ++++++++---- .../web/lib/web/live/settings/api_clients/show.ex | 1 + 6 files changed, 27 insertions(+), 21 deletions(-) diff --git a/elixir/apps/web/lib/web/components/form_components.ex b/elixir/apps/web/lib/web/components/form_components.ex index 29bb65e24..13c78b554 100644 --- 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) %> """ diff --git a/elixir/apps/web/lib/web/components/table_components.ex b/elixir/apps/web/lib/web/components/table_components.ex index 68e0b0abd..a8343aade 100644 --- 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) %> - - - <%= render_slot(action, @mapper.(@row)) %> - + +
+ + <%= render_slot(action, @mapper.(@row)) %> + +
""" diff --git a/elixir/apps/web/lib/web/live/actors/groups.ex b/elixir/apps/web/lib/web/live/actors/groups.ex index 529492187..6e25929af 100644 --- 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
<.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 :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
- <.button class="m-4" data-confirm={confirm_message(@added, @removed)} phx-click="submit"> - Save - +
+ <.button class="m-4" data-confirm={confirm_message(@added, @removed)} phx-click="submit"> + Save + +
diff --git a/elixir/apps/web/lib/web/live/actors/show.ex b/elixir/apps/web/lib/web/live/actors/show.ex index efc8985f1..439db5299 100644 --- 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 @@ -363,12 +362,10 @@ defmodule Web.Actors.Show do <: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 diff --git a/elixir/apps/web/lib/web/live/groups/edit_actors.ex b/elixir/apps/web/lib/web/live/groups/edit_actors.ex index b910c02cb..3bbeec7e0 100644 --- 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,6 +117,7 @@ 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} > @@ -124,6 +125,7 @@ defmodule Web.Groups.EditActors do <.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 - <.button class="m-4" data-confirm={confirm_message(@added, @removed)} phx-click="submit"> - Save - +
+ <.button class="m-4" data-confirm={confirm_message(@added, @removed)} phx-click="submit"> + Save + +
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 index 83bb089d1..4d6a6ac29 100644 --- 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 <: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}