From 8ace57d2a8b165bf9f9ceccc8167fbd9233f16ed Mon Sep 17 00:00:00 2001
From: Alex Lion <dev@alexandrelion.com>
Date: Mon, 2 Feb 2026 18:30:58 +0000
Subject: [PATCH] Refactor buttons to use DaisyUI system and add gradient style

- Add custom btn-gradient utility for cyan-to-purple gradient buttons
- Update all buttons to use DaisyUI classes (btn-primary, btn-outline, btn-secondary, etc.)
- Apply gradient style to "Create an event" and "Join" buttons only
- Increase grid card height to h-96 and adjust panel position for better content visibility

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 assets/css/app.css                            |  9 ++++++++
 .../live/event_live/event_card_component.ex   | 22 +++++++++----------
 .../live/event_live/index.html.heex           | 14 ++++++------
 lib/claper_web/live/event_live/join.html.heex |  2 +-
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index f5e2aa5..c9d6589 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -12,6 +12,15 @@
   @apply rounded-full !font-display text-small-body;
 }
 
+@utility btn-gradient {
+  background: linear-gradient(to bottom right, var(--color-cyan-500, #06b6d4), var(--color-primary-500, #8611ed));
+  border: none;
+  color: white;
+  &:hover {
+    background: linear-gradient(to bottom right, var(--color-cyan-600, #0891b2), var(--color-primary-600, #6b0dbe));
+  }
+}
+
 @utility input {
   @apply rounded-full focus:outline-none focus-within:outline-none focus:border-2 focus-within:border-2 !font-display text-small-body transition-all;
 }
diff --git a/lib/claper_web/live/event_live/event_card_component.ex b/lib/claper_web/live/event_live/event_card_component.ex
index f327945..868196b 100644
--- a/lib/claper_web/live/event_live/event_card_component.ex
+++ b/lib/claper_web/live/event_live/event_card_component.ex
@@ -26,7 +26,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
     ~H"""
     <div
       id={"event-#{@event.uuid}"}
-      class="group relative bg-white border border-gray-200 rounded-2xl overflow-hidden hover:shadow-lg transition-shadow duration-200 h-80"
+      class="group relative bg-white border border-gray-200 rounded-2xl overflow-hidden hover:shadow-lg transition-shadow duration-200 h-96"
       x-data="{showActions: false, showJoinMenu: false}"
       @mouseenter="showActions = true"
       @mouseleave="showActions = false; showJoinMenu = false"
@@ -84,7 +84,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
     <!-- Sliding Bottom Panel -->
       <div
         class="absolute bottom-0 left-0 right-0 bg-white transition-transform duration-300 ease-out z-20"
-        x-bind:class="showActions ? 'translate-y-0' : 'translate-y-16'"
+        x-bind:class="showActions ? 'translate-y-0' : 'translate-y-12'"
       >
         <!-- Card Body (Title, Code, Menu) -->
         <div class="p-2 border-t border-gray-200">
@@ -138,7 +138,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
             <button
               @click="showJoinMenu = !showJoinMenu"
               @click.away="showJoinMenu = false"
-              class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-primary-500 text-white rounded-full font-bold hover:bg-primary-600 transition"
+              class="btn btn-primary w-full"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -225,7 +225,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
             }
             phx-value-id={@event.uuid}
             phx-click="terminate"
-            class="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-gray-100 text-gray-700 rounded-full font-bold hover:bg-gray-200 transition"
+            class="btn btn-outline flex-1"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -259,7 +259,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
         <div :if={Event.finished?(@event)} class="px-2 pb-2">
           <a
             href={~p"/events/#{@event.uuid}/stats"}
-            class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-primary-500 text-white rounded-full font-bold hover:bg-primary-600 transition"
+            class="btn btn-primary w-full"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -361,7 +361,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
                 <button
                   @click="showJoinMenu = !showJoinMenu"
                   @click.away="showJoinMenu = false"
-                  class="flex items-center justify-center gap-2 px-4 py-2 bg-primary-500 text-white rounded-full font-bold text-sm hover:bg-primary-600 transition"
+                  class="btn btn-primary btn-sm"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -448,7 +448,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
                 }
                 phx-value-id={@event.uuid}
                 phx-click="terminate"
-                class="flex items-center justify-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-bold text-sm hover:bg-gray-200 transition"
+                class="btn btn-outline btn-sm"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -476,7 +476,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
             <%= if Event.finished?(@event) do %>
               <a
                 href={~p"/events/#{@event.uuid}/stats"}
-                class="flex items-center justify-center gap-2 px-4 py-2 bg-primary-500 text-white rounded-full font-bold text-sm hover:bg-primary-600 transition"
+                class="btn btn-primary btn-sm"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -607,7 +607,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
                 <button
                   @click="showJoinMenu = !showJoinMenu"
                   @click.away="showJoinMenu = false"
-                  class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-primary-500 text-white rounded-full font-bold hover:bg-primary-600 transition"
+                  class="btn btn-primary w-full"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -694,7 +694,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
                 }
                 phx-value-id={@event.uuid}
                 phx-click="terminate"
-                class="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-gray-100 text-gray-700 rounded-full font-bold hover:bg-gray-200 transition"
+                class="btn btn-outline flex-1"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -722,7 +722,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
             <%= if Event.finished?(@event) do %>
               <a
                 href={~p"/events/#{@event.uuid}/stats"}
-                class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-primary-500 text-white rounded-full font-bold hover:bg-primary-600 transition"
+                class="btn btn-primary w-full"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
diff --git a/lib/claper_web/live/event_live/index.html.heex b/lib/claper_web/live/event_live/index.html.heex
index 1ac751f..e9a7daf 100644
--- a/lib/claper_web/live/event_live/index.html.heex
+++ b/lib/claper_web/live/event_live/index.html.heex
@@ -62,7 +62,7 @@
             <button
               type="submit"
               phx_disable_with="Loading..."
-              class="mt-5 w-full px-6 text-white py-3 rounded-full tracking-wide font-bold focus:outline-hidden bg-primary-500 hover:bg-primary-600 transition"
+              class="btn btn-primary w-full mt-5"
             >
               {gettext("Create")}
             </button>
@@ -207,7 +207,7 @@
 <!-- Quick Event Button -->
           <button
             phx-click="toggle-quick-create"
-            class="flex items-center gap-2 px-4 py-3 border border-secondary-500 text-secondary-500 rounded-full font-bold hover:bg-secondary-50 transition"
+            class="btn btn-outline btn-secondary"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -227,7 +227,7 @@
 <!-- Create Event Button -->
           <.link
             href={~p"/events/new"}
-            class="flex items-center gap-2 px-4 py-3 bg-primary-500 text-white rounded-full font-bold hover:bg-primary-600 transition"
+            class="btn btn-gradient"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -302,7 +302,7 @@
         <div class="flex justify-center my-8">
           <button
             phx-click="load-more"
-            class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-bold rounded-full text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition"
+            class="btn btn-soft btn-primary"
           >
             {gettext("Load more")}
           </button>
@@ -329,7 +329,7 @@
           <p class="text-xl text-gray-400">{gettext("Create your first event")}</p>
           <.link
             href={~p"/events/new"}
-            class="inline-flex items-center gap-2 mt-4 px-6 py-3 bg-primary-500 text-white rounded-full font-bold hover:bg-primary-600 transition"
+            class="btn btn-gradient mt-4"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -354,7 +354,7 @@
       <div class="flex flex-col gap-2.5">
         <button
           phx-click="toggle-quick-create"
-          class="w-full flex items-center justify-center gap-2 h-12 px-4 border border-secondary-500 text-secondary-500 rounded-full font-bold hover:bg-secondary-50 transition"
+          class="btn btn-outline btn-secondary w-full"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -372,7 +372,7 @@
         </button>
         <.link
           href={~p"/events/new"}
-          class="w-full flex items-center justify-center gap-2 h-12 px-4 bg-primary-500 text-white rounded-full font-bold hover:bg-primary-600 transition"
+          class="btn btn-gradient w-full"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/lib/claper_web/live/event_live/join.html.heex b/lib/claper_web/live/event_live/join.html.heex
index 4c20b43..773b841 100644
--- a/lib/claper_web/live/event_live/join.html.heex
+++ b/lib/claper_web/live/event_live/join.html.heex
@@ -72,7 +72,7 @@
       </div>
 
       <div class="mt-10">
-        <button type="submit" id="submit" class="btn btn-primary w-full">
+        <button type="submit" id="submit" class="btn btn-gradient w-full">
           {gettext("Join")}
         </button>
         <img src="/images/loading.gif" id="loading" class="hidden h-12 mx-auto" />