ui: comprehensive button styling audit - convert all text-styled actions to proper buttons

Fixed 10 text-styled action buttons across 7 files:

Agent Management:
- Delete Agent buttons (2x) → danger variant
- View Setup links (already fixed) → secondary variant

Organization Settings:
- Remove Member button → danger variant

Admin Pages:
- Edit Overrides button → secondary variant
- Delete Organization button → danger variant
- Remove IP/CIDR button → danger variant
- Delete User button → danger variant

Device Management:
- Delete Backup button → danger variant

All action buttons now use proper .button component with appropriate
variants (danger for destructive actions, secondary for neutral actions).
This provides consistent visual hierarchy and makes destructive actions
more clearly identifiable.
This commit is contained in:
Graham McIntire 2026-03-09 15:32:42 -05:00
parent c94ac6e650
commit 4e3f732f21
No known key found for this signature in database
6 changed files with 24 additions and 24 deletions

View file

@ -95,15 +95,15 @@
</:col>
<:col :let={org} label="">
<div class="flex items-center gap-3">
<button
<.button
id={"edit-overrides-#{org.id}"}
phx-click="edit_overrides"
phx-value-id={org.id}
class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
variant="secondary"
>
{t_admin("Edit")}
</button>
<button
</.button>
<.button
phx-click="delete_org"
phx-value-id={org.id}
data-confirm={
@ -111,10 +111,10 @@
"Are you sure? This will delete all sites, device, and data for this organization."
)
}
class="text-sm text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300"
variant="danger"
>
{t("Delete")}
</button>
</.button>
</div>
</:col>
</.table>

View file

@ -108,14 +108,14 @@
{ToweropsWeb.TimeHelpers.format_date(entry.inserted_at, @timezone)}
</:col>
<:col :let={entry} label="">
<button
<.button
phx-click="remove_whitelist"
phx-value-id={entry.id}
data-confirm={t("Remove this IP/CIDR from the allowlist?")}
class="text-sm text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300"
variant="danger"
>
{t("Remove")}
</button>
</.button>
</:col>
</.table>
<% end %>

View file

@ -28,15 +28,15 @@
{t("Impersonate")}
</button>
</form>
<button
<.button
phx-click="delete_user"
phx-value-id={user.id}
data-confirm={t("Are you sure you want to delete this user?")}
disabled={user.is_superuser}
class="text-sm text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 disabled:text-gray-400 disabled:cursor-not-allowed"
variant="danger"
>
{t("Delete")}
</button>
</.button>
</div>
</:col>
</.table>

View file

@ -150,7 +150,7 @@
>
{t("View Setup")}
</.button>
<button
<.button
type="button"
phx-click="delete_agent"
phx-value-id={agent.id}
@ -159,10 +159,10 @@
"Are you sure you want to delete this agent? All device assignments will be removed, and devices will fall back to site/organization defaults or cloud polling."
)
}
class="text-sm font-medium text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
variant="danger"
>
{t("Delete")}
</button>
</.button>
</div>
<% else %>
<span class="text-xs text-gray-500 dark:text-gray-400">Disabled</span>
@ -266,7 +266,7 @@
>
{t("View Setup")}
</.button>
<button
<.button
type="button"
phx-click="delete_agent"
phx-value-id={agent.id}
@ -275,10 +275,10 @@
"Are you sure you want to delete this cloud poller? This will affect all organizations using it."
)
}
class="text-sm font-medium text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
variant="danger"
>
{t("Delete")}
</button>
</.button>
</div>
<% else %>
<span class="text-xs text-gray-500 dark:text-gray-400">Disabled</span>

View file

@ -2090,7 +2090,7 @@
<.icon name="hero-arrow-down-tray" class="h-4 w-4" /> Download
</button>
<%= if ToweropsWeb.Permissions.owner?(@current_scope) do %>
<button
<.button
phx-click="delete_backup"
phx-value-id={backup.id}
data-confirm={
@ -2098,10 +2098,10 @@
"Are you sure you want to delete this backup? This action cannot be undone."
)
}
class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
variant="danger"
>
<.icon name="hero-trash" class="h-4 w-4" /> Delete
</button>
</.button>
<% end %>
</div>
</td>

View file

@ -840,15 +840,15 @@
</option>
</select>
</form>
<button
<.button
type="button"
phx-click="remove_member"
phx-value-user-id={member.user_id}
data-confirm={t("Remove this member from the organization?")}
class="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
variant="danger"
>
{t("Remove")}
</button>
</.button>
</div>
<% end %>
</td>