feat: primary and secondary button component

lib/pearl_web.ex

@@ -102,6 +102,7 @@ defmodule PearlWeb do
         layout: {PearlWeb.Layouts, :backoffice}
 
       import PearlWeb.Components.Avatar
+      import PearlWeb.Components.Button
       import PearlWeb.Components.EnsurePermissions
       import PearlWeb.BackofficeHelpers
 
@@ -122,6 +123,7 @@ defmodule PearlWeb do
     quote do
       use Phoenix.LiveComponent
       import PearlWeb.Components.Avatar
+      import PearlWeb.Components.Button
       unquote(html_helpers())
     end
   end

lib/pearl_web/components/button.ex

@@ -33,4 +33,111 @@ defmodule PearlWeb.Components.Button do
     </button>
     """
   end
+
+  @doc """
+  Renders a backoffice_button.
+
+  ## Examples
+
+      <.backoffice_button>Send!</.backoffice_button>
+      <.backoffice_button phx-click="go" class="ml-2">Send!</.backoffice_button>
+  """
+  attr :type, :string, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
+
+  slot :inner_block, required: true
+
+  def backoffice_button(assigns) do
+    ~H"""
+    <button
+      type={@type}
+      class={[
+        "phx-submit-loading:opacity-75 rounded-lg bg-dark text-light dark:bg-light dark:text-dark hover:bg-darkShade dark:hover:bg-lightShade/95 py-2 px-3",
+        "text-sm font-semibold leading-6 transition-colors",
+        @class
+      ]}
+      {@rest}
+    >
+      {render_slot(@inner_block)}
+    </button>
+    """
+  end
+
+  @doc """
+  Renders a primary button with icon and title.
+
+  ## Examples
+
+      <.primary_button title="Continue" />
+      <.primary_button title="Next" class="w-full" />
+      <.primary_button small />
+  """
+  attr :title, :string, default: nil
+  attr :icon, :string, default: "hero-arrow-right"
+  attr :small, :boolean, default: false
+  attr :gap, :string, default: "gap-1.5"
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled phx-click phx-disable-with phx-target)
+
+  def primary_button(assigns) do
+    ~H"""
+    <button
+      class={[
+        "flex items-center justify-center px-6 py-3",
+        if(@small, do: "w-[50px] h-[50px]", else: ["w-[139px] h-[43px]", @gap]),
+        "bg-primary text-white hover:bg-primary/80 disabled:opacity-50 disabled:cursor-not-allowed",
+        "font-normal transition-colors font-['Space_Grotesk']",
+        @class
+      ]}
+      {@rest}
+    >
+      <%= if @small do %>
+        <.icon name={@icon} class="w-6 h-6 shrink-0" />
+      <% else %>
+        <.icon name={@icon} class="w-6 h-6 shrink-0" />
+        <span class="text-base">{assigns.title}</span>
+      <% end %>
+    </button>
+    """
+  end
+
+  @doc """
+  Renders a secondary button with icon and title.
+
+  ## Examples
+
+      <.secondary_button title="Continue" />
+      <.secondary_button title="Next" icon_position="left" />
+  """
+  attr :title, :string, required: true
+  attr :icon, :string, default: "hero-arrow-left"
+  attr :icon_position, :string, default: "right", values: ["left", "right"]
+  attr :gap, :string, default: "gap-1.5"
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled phx-click phx-disable-with phx-target)
+
+  def secondary_button(assigns) do
+    ~H"""
+    <button
+      class={[
+        "flex items-center justify-center px-6 py-3",
+        @gap,
+        "bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50 disabled:cursor-not-allowed",
+        "font-normal transition-colors font-['Space_Grotesk']",
+        "w-[125px] h-[43px]",
+        @class
+      ]}
+      {@rest}
+    >
+      <%= if @icon_position == "left" do %>
+        <.icon name={@icon} class="w-6 h-6 shrink-0" />
+        <span class="text-base">{assigns.title}</span>
+      <% else %>
+        <span class="text-base">{assigns.title}</span>
+        <.icon name={@icon} class="w-6 h-6 shrink-0" />
+      <% end %>
+    </button>
+    """
+  end
 end

lib/pearl_web/components/core_components.ex

@@ -188,7 +188,7 @@ defmodule PearlWeb.CoreComponents do
         <.input field={@form[:email]} label="Email"/>
         <.input field={@form[:username]} label="Username" />
         <:actions>
-          <.button>Save</.button>
+          <.backoffice_button>Save</.backoffice_button>
         </:actions>
       </.simple_form>
   """
@@ -216,36 +216,6 @@ defmodule PearlWeb.CoreComponents do
     """
   end
 
-  @doc """
-  Renders a button.
-
-  ## Examples
-
-      <.button>Send!</.button>
-      <.button phx-click="go" class="ml-2">Send!</.button>
-  """
-  attr :type, :string, default: nil
-  attr :class, :string, default: nil
-  attr :rest, :global, include: ~w(disabled form name value)
-
-  slot :inner_block, required: true
-
-  def button(assigns) do
-    ~H"""
-    <button
-      type={@type}
-      class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-dark text-light dark:bg-light dark:text-dark hover:bg-darkShade dark:hover:bg-lightShade/95 py-2 px-3",
-        "text-sm font-semibold leading-6 transition-colors",
-        @class
-      ]}
-      {@rest}
-    >
-      {render_slot(@inner_block)}
-    </button>
-    """
-  end
-
   @doc """
   Renders an input with label and error messages.
 

lib/pearl_web/components/cv_upload.ex

@@ -47,7 +47,7 @@ defmodule PearlWeb.Components.CVUpload do
           <%= if @in_app do %>
             <.action_button title="Upload" phx-disable-with="Uploading..." />
           <% else %>
-            <.button phx-disable-with="Uploading...">Upload</.button>
+            <.backoffice_button phx-disable-with="Uploading...">Upload</.backoffice_button>
           <% end %>
         </:actions>
       </.simple_form>

lib/pearl_web/live/app/badge_live/index.ex

@@ -2,7 +2,7 @@ defmodule PearlWeb.App.BadgeLive.Index do
   use PearlWeb, :app_view
 
   alias Pearl.Contest
-  import PearlWeb.Components.Badge
+  import PearlWeb.Components.{Button, Badge}
 
   @impl true
   def mount(_params, _session, socket) do

lib/pearl_web/live/app/coin_flip_live/components/room.ex

@@ -5,7 +5,7 @@ defmodule PearlWeb.App.CoinFlipLive.Components.Room do
   use PearlWeb, :component
 
   import PearlWeb.CoreComponents
-  import PearlWeb.Components.Avatar
+  import PearlWeb.Components.{Avatar, Button}
 
   attr :room, :map, required: true
   attr :current_user, :map, required: true
@@ -104,23 +104,23 @@ defmodule PearlWeb.App.CoinFlipLive.Components.Room do
           <div :if={@player_id == @room.player2_id} class="side-b-not-rotated"></div>
         </div>
       <% else %>
-        <.button
+        <.backoffice_button
           :if={@room.player1.user.id != @current_user.id}
           class="px-7 size-full rounded-none !bg-transparent !text-white"
           phx-click="join-room"
           phx-value-room_id={@room.id}
           disabled={@attendee_tokens < @room.bet}
         >
           <.icon name="hero-plus" class="size-12" />
-        </.button>
-        <.button
+        </.backoffice_button>
+        <.backoffice_button
           :if={@room.player1.user.id == @current_user.id}
           class="px-7 my-auto size-full rounded-none !bg-transparent !text-white"
           phx-click="delete-room"
           phx-value-room_id={@room.id}
         >
           <.icon name="hero-x-mark" class="size-12" />
-        </.button>
+        </.backoffice_button>
       <% end %>
     </div>
     """

lib/pearl_web/live/app/credential_live/edit.ex

@@ -3,6 +3,8 @@ defmodule PearlWeb.App.CredentialLive.Edit do
 
   alias Pearl.Accounts
 
+  import PearlWeb.Components.Button
+
   @impl true
   def mount(_params, _session, socket) do
     {:ok, socket}

lib/pearl_web/live/app/credential_live/edit.html.heex

@@ -17,9 +17,9 @@
         "Make sure you allow the use of your camera on this browser and that it isn't being used elsewhere."
       )}
     </p>
-    <.button id="permission-button" type="button">
+    <.backoffice_button id="permission-button" type="button">
       {gettext("Request Permission")}
-    </.button>
+    </.backoffice_button>
   </div>
 </.page>
 

lib/pearl_web/live/auth/components/user_profile_settings.html.heex

@@ -86,9 +86,9 @@
           <%= if @in_app? do %>
             <.action_button title="Save Profile" class="w-full" />
           <% else %>
-            <.button class="w-full">
+            <.backoffice_button class="w-full">
               Save Profile
-            </.button>
+            </.backoffice_button>
           <% end %>
         </div>
       </div>

lib/pearl_web/live/auth/user_confirmation_instructions_live.ex

@@ -3,6 +3,8 @@ defmodule PearlWeb.UserConfirmationInstructionsLive do
 
   alias Pearl.Accounts
 
+  import PearlWeb.Components.Button
+
   def render(assigns) do
     ~H"""
     <div class="mx-auto max-w-sm">
@@ -14,9 +16,9 @@ defmodule PearlWeb.UserConfirmationInstructionsLive do
       <.simple_form for={@form} id="resend_confirmation_form" phx-submit="send_instructions">
         <.input field={@form[:email]} type="email" placeholder="Email" required />
         <:actions>
-          <.button phx-disable-with="Sending..." class="w-full">
+          <.backoffice_button phx-disable-with="Sending..." class="w-full">
             Resend confirmation instructions
-          </.button>
+          </.backoffice_button>
         </:actions>
       </.simple_form>
 

lib/pearl_web/live/backoffice/attendee_live/index.ex

@@ -2,8 +2,7 @@ defmodule PearlWeb.Backoffice.AttendeeLive.Index do
   alias Pearl.Accounts
   use PearlWeb, :backoffice_view
 
-  import PearlWeb.Components.Table
-  import PearlWeb.Components.TableSearch
+  import PearlWeb.Components.{Table, TableSearch, Button}
 
   on_mount {PearlWeb.StaffRoles,
             index: %{"attendees" => ["show"]}, edit: %{"attendees" => ["edit"]}}

lib/pearl_web/live/backoffice/attendee_live/index.html.heex

@@ -6,21 +6,21 @@
           user={@current_user}
           permissions={%{"attendees" => ["show_leaderboard"]}}
         >
-          <.button>
+          <.backoffice_button>
             <span class="flex flex-row items-center gap-2">
               <.icon name="hero-trophy" class="w-5 h-5" />
               <span class="hidden sm:block">{gettext("Leaderboard")}</span>
             </span>
-          </.button>
+          </.backoffice_button>
         </.ensure_permissions>
       </.link>
       <.link patch={~p"/downloads/attendees"} target="_blank">
-        <.button>
+        <.backoffice_button>
           <span class="flex flex-row items-center gap-2">
             <.icon name="hero-cloud-arrow-down" class="w-5 h-5" />
             <span class="hidden sm:block">{gettext("Export attendees")}</span>
           </span>
-        </.button>
+        </.backoffice_button>
       </.link>
       <.table_search
         id="attendees-table-name-search"

lib/pearl_web/live/backoffice/attendee_live/ineligible_live/form_component.ex

@@ -2,7 +2,7 @@ defmodule PearlWeb.Backoffice.AttendeeLive.IneligibleLive.FormComponent do
   use PearlWeb, :live_component
 
   alias Pearl.Accounts
-  import PearlWeb.Components.Forms
+  import PearlWeb.Components.{Forms, Button}
 
   @impl true
   def render(assigns) do
@@ -21,9 +21,9 @@ defmodule PearlWeb.Backoffice.AttendeeLive.IneligibleLive.FormComponent do
         >
           <.field field={@form[:ineligible]} label="Ineligible" type="switch" />
           <:actions>
-            <.button phx-disable-with="Saving...">
+            <.backoffice_button phx-disable-with="Saving...">
               {gettext("Save Eligibility")}
-            </.button>
+            </.backoffice_button>
           </:actions>
         </.simple_form>
       </.page>

lib/pearl_web/live/backoffice/attendee_live/show.ex

@@ -3,6 +3,8 @@ defmodule PearlWeb.Backoffice.AttendeeLive.Show do
 
   alias Pearl.Accounts
 
+  import PearlWeb.Components.Button
+
   on_mount {PearlWeb.StaffRoles,
             show: %{"attendees" => ["show"]}, edit: %{"attendees" => ["edit"]}}
 

lib/pearl_web/live/backoffice/attendee_live/show.html.heex

@@ -3,24 +3,24 @@
     <div class="flex flex-row gap-x-4">
       <.ensure_permissions user={@current_user} permissions={%{"attendees" => ["edit"]}}>
         <.link patch={~p"/dashboard/attendees/#{@attendee.id}/edit/tokens"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-currency-euro" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
         <.link patch={~p"/dashboard/attendees/#{@attendee.id}/edit/eligibility"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-shield-exclamation" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
         <.link patch={~p"/dashboard/attendees/#{@attendee.id}/redeem"}>
-          <.button>
+          <.backoffice_button>
             <.icon name="hero-check-badge" class="w-5 h-5" />
-          </.button>
+          </.backoffice_button>
         </.link>
       </.ensure_permissions>
-      <.button>
+      <.backoffice_button>
         <.icon name="hero-flag" class="w-5 h-5" />
-      </.button>
+      </.backoffice_button>
     </div>
   </:actions>
   <div class="flex flex-col items-center gap-4 w-full sm:w-fit py-8">