FFFF refactor(ui): extend <.button> with danger/ghost variants and migrate primary action sites by mwoods79 · Pull Request #155 · huddlz-hq/huddlz · GitHub
[go: up one dir, main page]
Skip to content

refactor(ui): extend <.button> with danger/ghost variants and migrate primary action sites #155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mwoods79 merged 1 commit into from
May 2, 2026
Merged

refactor(ui): extend <.button> with danger/ghost variants and migrate primary action sites #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 29 additions & 4 deletions lib/huddlz_web/components/core_components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,22 +102,45 @@ defmodule HuddlzWeb.CoreComponents do
<.button navigate={~p"/"}>Home</.button>
"""
attr :rest, :global, include: ~w(href navigate patch method disabled)
attr :variant, :string, values: ~w(primary)
attr :variant, :string, values: ~w(primary danger ghost)
attr :size, :string, values: ~w(sm md), default: "md"
attr :class, :any, default: nil, doc: "extra classes appended to the variant defaults"
slot :inner_block, required: true

def button(%{rest: rest} = assigns) do
variants = %{
"primary" => "bg-primary text-primary-content border border-primary btn-neon",
"danger" => "bg-error text-error-content border border-error btn-neon",
"ghost" =>
"bg-transparent text-primary border-0 hover:underline normal-case tracking-normal font-body",
nil => "bg-transparent text-primary border border-primary/40 btn-neon hover:bg-primary/10"
}

assigns = assign(assigns, :class, Map.fetch!(variants, assigns[:variant]))
sizes = %{
"sm" => "px-3 py-1 text-xs",
"md" => "px-5 py-2 text-sm"
}

ghost_sizes = %{"sm" => "text-xs", "md" => "text-sm"}

size_class =
case assigns[:variant] do
"ghost" -> Map.fetch!(ghost_sizes, assigns.size)
_ -> Map.fetch!(sizes, assigns.size)
end

assign 8000 s =
assigns
|> assign(:variant_class, Map.fetch!(variants, assigns[:variant]))
|> assign(:size_class, size_class)

if rest[:href] || rest[:navigate] || rest[:patch] do
~H"""
<.link
class={[
"inline-flex items-center justify-center gap-2 px-5 py-2 text-sm font-medium tracking-wide uppercase font-display",
"inline-flex items-center justify-center gap-2 font-medium tracking-wide uppercase font-display",
@size_class,
@variant_class,
@class
]}
{@rest}
Expand All @@ -129,7 +152,9 @@ defmodule HuddlzWeb.CoreComponents do
~H"""
<button
class={[
"inline-flex items-center justify-center gap-2 px-5 py-2 text-sm font-medium tracking-wide uppercase font-display",
"inline-flex items-center justify-center gap-2 font-medium tracking-wide uppercase font-display",
@size_class,
@variant_class,
@class
]}
{@rest}
Expand Down
22 changes: 6 additions & 16 deletions lib/huddlz_web/live/admin_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,19 +94,12 @@ defmodule HuddlzWeb.AdminLive do
placeholder="Search users by email..."
class="flex-1 border border-base-300 px-4 py-2.5 bg-base-100 text-sm focus:border-primary focus:ring-1 focus:ring-primary/30 transition-colors"
/>
<button
type="submit"
class="px-5 py-2.5 bg-primary text-primary-content text-sm font-medium btn-neon"
>
<.button type="submit" variant="primary">
Search
</button>
<button
type="button"
phx-click="clear_search"
class="px-5 py-2.5 border border-base-300 text-sm font-medium hover:border-primary/30 transition-colors"
>
</.button>
<.button type="button" phx-click="clear_search">
Clear
</button>
</.button>
</div>
</form>

Expand Down Expand Up @@ -150,12 +143,9 @@ defmodule HuddlzWeb.AdminLive do
<option value="user" selected={user.role == :user}>User</option>
<option value="admin" selected={user.role == :admin}>Admin</option>
</select>
<button
type="submit"
class="px-3 py-1 bg-primary text-primary-content text-xs font-medium btn-neon transition-all"
>
<.button type="submit" variant="primary" size="sm">
Update
</button>
</.button>
</form>
</td>
</tr>
Expand Down
8 changes: 5 additions & 3 deletions lib/huddlz_web/live/auth_live/register.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,15 @@ defmodule HuddlzWeb.AuthLive.Register do
placeholder="First and Last Name"
autocomplete="name"
/>
<button
<.button
type="button"
phx-click="generate_display_name"
class="text-xs text-primary hover:underline font-medium inline-flex items-center gap-1 mt-1"
variant="ghost"
size="sm"
class="mt-1"
>
<.icon name="hero-arrow-path" class="h-4 w-4" /> Generate Random Name
</button>
</.button>
</div>

<div>
Expand Down
14 changes: 4 additions & 10 deletions lib/huddlz_web/live/huddl_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,12 +277,9 @@ defmodule HuddlzWeb.HuddlLive do
This Month
</option>
</select>
<button
type="submit"
class="h-12 px-6 bg-primary text-primary-content font-medium btn-neon active:scale-[0.98] transition-all"
>
<.button type="submit" variant="primary" class="h-12 px-6">
Search
</button>
</.button>
</div>
<div class="flex flex-wrap items-end gap-2 mt-2">
<div class="flex-grow min-w-[200px]">
Expand Down Expand Up @@ -343,12 +340,9 @@ defmodule HuddlzWeb.HuddlLive do
{@location_text} · {@distance_miles} mi
</span>
<% end %>
<button
phx-click="clear_filters"
class="text-xs text-primary hover:underline font-medium"
>
<.button phx-click="clear_filters" variant="ghost" size="sm">
Clear all
</button>
</.button>
</div>
<% end %>
</div>
Expand Down
6 changes: 3 additions & 3 deletions lib/huddlz_web/live/huddl_live/show.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,13 @@ defmodule HuddlzWeb.HuddlLive.Show do
>
<.icon name="hero-pencil" class="h-4 w-4" /> Edit Huddl
</.link>
<button
<.button
phx-click="delete_huddl"
data-confirm="Are you sure you want to delete this huddl?"
class="px-4 py-2 text-sm font-medium bg-error text-error-content btn-neon transition-all inline-flex items-center gap-1.5"
variant="danger"
>
<.icon name="hero-trash" class="h-4 w-4" /> Delete Huddl
</button>
</.button>
<% end %>
<%= if @current_user && @huddl.status == :upcoming do %>
<%= if @has_rsvped do %>
Expand Down
Loading
0