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:
parent
c94ac6e650
commit
4e3f732f21
6 changed files with 24 additions and 24 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue