Add danger variant for delete buttons

Added a new 'danger' button variant to the button component for
destructive actions like deleting equipment or sites.

Changes:
- Added 'danger' variant to button component (red background/hover)
- Updated equipment delete button to use variant="danger"
- Updated site delete button to use variant="danger"
- Removed custom red color classes in favor of standardized variant

This provides consistent styling for all delete/destructive actions
across the application while maintaining proper button base styles
(padding, rounded corners, shadow, focus ring, etc).
This commit is contained in:
Graham McIntire 2026-01-04 13:34:02 -06:00
parent 3fe3a01726
commit d209b3295a
No known key found for this signature in database
3 changed files with 4 additions and 3 deletions

View file

@ -130,12 +130,13 @@ defmodule ToweropsWeb.CoreComponents do
"""
attr :rest, :global, include: ~w(href navigate patch method download name value disabled)
attr :class, :any
attr :variant, :string, values: ~w(primary)
attr :variant, :string, values: ~w(primary danger)
slot :inner_block, required: true
def button(%{rest: rest} = assigns) do
variants = %{
"primary" => "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600",
"danger" => "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600",
nil =>
"bg-white text-zinc-900 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:ring-blue-500 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700 dark:hover:bg-zinc-700"
}

View file

@ -109,7 +109,7 @@
<.button
phx-click="delete"
data-confirm="Are you sure you want to delete this equipment? All monitoring history and alerts will be permanently deleted."
class="bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600"
variant="danger"
>
<.icon name="hero-trash" class="h-4 w-4" /> Delete Equipment
</.button>

View file

@ -39,7 +39,7 @@
<.button
phx-click="delete"
data-confirm="Are you sure you want to delete this site? This will also delete all equipment at this site."
class="bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600"
variant="danger"
>
<.icon name="hero-trash" class="h-4 w-4" /> Delete Site
</.button>