From c1840cddf1d9102f864f33b352f3a2c204adf322 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= <joao@lobo.is>
Date: Thu, 13 Jun 2024 16:49:59 +0100
Subject: [PATCH 01/39] feat: improve activities index

---
 .../activity_live/components/activity_card.ex | 72 +++++++++++++++++++
 .../live/activity_live/form_component.ex      |  2 +-
 lib/atomic_web/live/activity_live/index.ex    | 17 +++--
 .../live/activity_live/index.html.heex        | 67 +++--------------
 4 files changed, 93 insertions(+), 65 deletions(-)
 create mode 100644 lib/atomic_web/live/activity_live/components/activity_card.ex

diff --git a/lib/atomic_web/live/activity_live/components/activity_card.ex b/lib/atomic_web/live/activity_live/components/activity_card.ex
new file mode 100644
index 000000000..af9876127
--- /dev/null
+++ b/lib/atomic_web/live/activity_live/components/activity_card.ex
@@ -0,0 +1,72 @@
+defmodule AtomicWeb.ActivityLive.Components.ActivityCard do
+  @moduledoc false
+  use AtomicWeb, :component
+
+  import AtomicWeb.Components.{Avatar, Gradient}
+
+  attr :activity, :map, required: true, doc: "The activity to display."
+
+  def activity_card(assigns) do
+    ~H"""
+    <div class="flex flex-col justify-center rounded-lg border border-zinc-200 hover:bg-zinc-50">
+      <!-- TODO: Add almost full! Indicator -->
+      <.link navigate={Routes.activity_show_path(AtomicWeb.Endpoint, :show, @activity)}>
+        <div class="grid grid-cols-3">
+          <!-- Activity information -->
+          <div class="col-span-2 px-4 py-4 lg:px-6">
+            <div class="flex items-center justify-between">
+              <p class="text-md truncate font-medium text-zinc-900">
+                <%= @activity.title %>
+              </p>
+            </div>
+            <div class="mt-2 lg:flex lg:justify-between">
+              <div class="lg:flex lg:space-x-3">
+                <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
+                  <.icon name={:calendar} solid class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
+                  <%= if @activity.start do %>
+                    <%= pretty_display_date(@activity.start) %>
+                  <% end %>
+                </p>
+                <%= if @activity.location do %>
+                  <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
+                    <.icon name={:map_pin} solid class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
+                    <%= @activity.location && @activity.location.name %>
+                  </p>
+                <% end %>
+              </div>
+            </div>
+            <object>
+              <.link navigate={Routes.organization_show_path(AtomicWeb.Endpoint, :show, @activity.organization.id)} class="group flex max-w-min pt-2">
+                <.icon name={:building_office} solid class="mr-1.5 h-5 w-5 text-zinc-400" />
+                <span class="text-sm text-zinc-500 focus:outline-none group-hover:underline">
+                  <%= @activity.organization.name %>
+                </span>
+              </.link>
+            </object>
+            <div class="flex lg:items-center lg:justify-between">
+              <div class="flex flex-row space-x-2">
+                <%= for speaker <- @activity.speakers do %>
+                  <div class="mt-2 flex items-center">
+                    <.avatar name={speaker.name} size={:xs} color={:light_gray} class="!w-6 !h-6 mr-1.5" />
+                    <p class="text-sm text-zinc-500">
+                      <%= extract_first_last_name(speaker.name) %>
+                    </p>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          </div>
+          <!-- Activity image -->
+          <div class="h-48 object-cover">
+            <%= if @activity.image do %>
+              <img class="h-full w-full rounded-r-lg object-cover" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+            <% else %>
+              <.gradient seed={@activity.id} class="rounded-r-lg" />
+            <% end %>
+          </div>
+        </div>
+      </.link>
+    </div>
+    """
+  end
+end
diff --git a/lib/atomic_web/live/activity_live/form_component.ex b/lib/atomic_web/live/activity_live/form_component.ex
index 96237f659..dbb209172 100644
--- a/lib/atomic_web/live/activity_live/form_component.ex
+++ b/lib/atomic_web/live/activity_live/form_component.ex
@@ -106,7 +106,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
     consume_uploaded_entries(socket, :image, fn %{path: path}, entry ->
       Activities.update_activity_image(activity, %{
         "image" => %Plug.Upload{
-          content_type: entry.content_type,
+          content_type: entry.client_type,
           filename: entry.client_name,
           path: path
         }
diff --git a/lib/atomic_web/live/activity_live/index.ex b/lib/atomic_web/live/activity_live/index.ex
index 6e2bf0e18..22ae9fc9a 100644
--- a/lib/atomic_web/live/activity_live/index.ex
+++ b/lib/atomic_web/live/activity_live/index.ex
@@ -1,7 +1,8 @@
 defmodule AtomicWeb.ActivityLive.Index do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.Components.{Avatar, Button, Empty, Pagination, Tabs}
+  import AtomicWeb.Components.{Button, Empty, Pagination, Tabs}
+  import AtomicWeb.ActivityLive.Components.ActivityCard
 
   alias Atomic.Accounts
   alias Atomic.Activities
@@ -39,7 +40,9 @@ defmodule AtomicWeb.ActivityLive.Index do
   end
 
   defp list_all_activities(_socket, params) do
-    case Activities.list_activities(params, preloads: [:speakers, :activity_enrollments]) do
+    case Activities.list_activities(params,
+           preloads: [:speakers, :activity_enrollments, :organization]
+         ) do
       {:ok, {activities, meta}} ->
         %{activities: activities, meta: meta}
 
@@ -53,7 +56,7 @@ defmodule AtomicWeb.ActivityLive.Index do
       Organizations.list_organizations_followed_by_user(socket.assigns.current_user.id)
 
     case Activities.list_organizations_activities(organizations, params,
-           preloads: [:speakers, :activity_enrollments]
+           preloads: [:speakers, :activity_enrollments, :organization]
          ) do
       {:ok, {activities, meta}} ->
         %{activities: activities, meta: meta}
@@ -64,7 +67,9 @@ defmodule AtomicWeb.ActivityLive.Index do
   end
 
   defp list_upcoming_activities(_socket, params) do
-    case Activities.list_upcoming_activities(params, preloads: [:speakers, :activity_enrollments]) do
+    case Activities.list_upcoming_activities(params,
+           preloads: [:speakers, :activity_enrollments, :organization]
+         ) do
       {:ok, {activities, meta}} ->
         %{activities: activities, meta: meta}
 
@@ -75,7 +80,7 @@ defmodule AtomicWeb.ActivityLive.Index do
 
   defp list_enrolled_activities(socket, params) do
     case Activities.list_user_activities(socket.assigns.current_user.id, params,
-           preloads: [:speakers, :activity_enrollments]
+           preloads: [:speakers, :activity_enrollments, :organization]
          ) do
       {:ok, {activities, meta}} ->
         %{activities: activities, meta: meta}
@@ -86,7 +91,7 @@ defmodule AtomicWeb.ActivityLive.Index do
   end
 
   defp current_tab(_socket, params) when is_map_key(params, "tab"), do: params["tab"]
-  defp current_tab(_socket, _params), do: "all"
+  defp current_tab(_socket, _params), do: "upcoming"
 
   defp has_permissions?(socket) when not socket.assigns.is_authenticated?, do: false
 
diff --git a/lib/atomic_web/live/activity_live/index.html.heex b/lib/atomic_web/live/activity_live/index.html.heex
index a582348ef..9c6545476 100644
--- a/lib/atomic_web/live/activity_live/index.html.heex
+++ b/lib/atomic_web/live/activity_live/index.html.heex
@@ -1,14 +1,14 @@
 <.page title="Activities">
   <:actions>
-    <.button navigate={Routes.activity_new_path(@socket, :new, @current_organization)}>
+    <.button navigate={Routes.activity_new_path(@socket, :new, @current_organization)} icon={:plus}>
       <%= gettext("New") %>
     </.button>
   </:actions>
   <!-- Tabs -->
   <.tabs class="max-w-5-xl mx-auto px-4 sm:px-6 lg:px-8">
-    <.link patch="?tab=all" replace={false}>
-      <.tab active={@current_tab == "all"}>
-        <%= gettext("All") %>
+    <.link patch="?tab=upcoming" replace={false}>
+      <.tab active={@current_tab == "upcoming"}>
+        <%= gettext("Upcoming") %>
       </.tab>
     </.link>
 
@@ -18,9 +18,9 @@
       </.tab>
     </.link>
 
-    <.link patch="?tab=upcoming" replace={false}>
-      <.tab active={@current_tab == "upcoming"}>
-        <%= gettext("Upcoming") %>
+    <.link patch="?tab=all" replace={false}>
+      <.tab active={@current_tab == "all"}>
+        <%= gettext("All") %>
       </.tab>
     </.link>
 
@@ -37,59 +37,10 @@
     </div>
   <% else %>
     <div class="overflow-hidden bg-white">
-      <ul role="list" class="divide-y divide-zinc-200 overflow-auto">
+      <ul role="list" class="p-4 overflow-auto grid sm:grid-cols-2 gap-4">
         <%= for activity <- @activities do %>
           <li id={activity.id}>
-            <.link navigate={Routes.activity_show_path(@socket, :show, activity)} class="block hover:bg-zinc-50">
-              <div class="px-4 py-4 lg:px-6">
-                <div class="flex items-center justify-between">
-                  <p class="truncate text-sm font-medium text-zinc-900">
-                    <%= activity.title %>
-                  </p>
-                </div>
-                <div class="mt-2 lg:flex lg:justify-between">
-                  <div class="lg:flex lg:space-x-3">
-                    <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name={:users} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
-                      <%= Enum.count(activity.activity_enrollments) %> / <%= activity.maximum_entries %>
-                    </p>
-                    <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name={:calendar} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
-                      <%= if activity.start do %>
-                        <%= display_date(activity.start) %>
-                      <% end %>
-                    </p>
-                    <%= if activity.location do %>
-                      <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                        <.icon name={:map_pin} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
-                        <%= activity.location && activity.location.name %>
-                      </p>
-                    <% end %>
-                  </div>
-                </div>
-                <div class="flex flex-col-reverse lg:flex-row-reverse lg:items-center lg:justify-between">
-                  <%= if Activities.verify_maximum_enrollments?(activity.id) do %>
-                    <div class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name={:bell} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Open
-                    </div>
-                  <% else %>
-                    <div class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name={:bell} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Closed
-                    </div>
-                  <% end %>
-                  <div class="flex flex-row space-x-2">
-                    <%= for speaker <- activity.speakers do %>
-                      <div class="mt-2 flex items-center">
-                        <.avatar name={speaker.name} size={:xs} color={:light_gray} class="!w-6 !h-6 mr-1.5" />
-                        <p class="text-sm text-zinc-500">
-                          <%= extract_first_last_name(speaker.name) %>
-                        </p>
-                      </div>
-                    <% end %>
-                  </div>
-                </div>
-              </div>
-            </.link>
+            <.activity_card activity={activity} />
           </li>
         <% end %>
       </ul>

From cc40c0c93bfbdcd422f528bfe0d2a7e16d6796f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= <joao@lobo.is>
Date: Thu, 13 Jun 2024 17:28:25 +0100
Subject: [PATCH 02/39] feat: add enrolled count to enrolled tab in activity
 index page

---
 lib/atomic/activities.ex                      | 16 ++++++++++
 lib/atomic_web/live/activity_live/index.ex    |  9 ++++++
 .../live/activity_live/index.html.heex        | 32 +++++++++++--------
 3 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/lib/atomic/activities.ex b/lib/atomic/activities.ex
index fc917fe1b..a0326314b 100644
--- a/lib/atomic/activities.ex
+++ b/lib/atomic/activities.ex
@@ -397,6 +397,22 @@ defmodule Atomic.Activities do
     |> Flop.validate_and_run(flop, for: Activity)
   end
 
+  @doc """
+  Returns the count of activities a user has enrolled in.
+
+  ## Examples
+
+      iex> count_user_activities(user_id)
+      1
+  """
+  def count_user_activities(user_id) do
+    from(a in Activity,
+      join: e in assoc(a, :activity_enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> Repo.aggregate(:count, :id)
+  end
+
   @doc """
   Creates an enrollment.
 
diff --git a/lib/atomic_web/live/activity_live/index.ex b/lib/atomic_web/live/activity_live/index.ex
index 22ae9fc9a..8031096fe 100644
--- a/lib/atomic_web/live/activity_live/index.ex
+++ b/lib/atomic_web/live/activity_live/index.ex
@@ -22,6 +22,7 @@ defmodule AtomicWeb.ActivityLive.Index do
      |> assign(:current_tab, current_tab(socket, params))
      |> assign(:params, params)
      |> assign(:has_permissions?, has_permissions?(socket))
+     |> assign(:enrolled_count, user_activities_count(socket))
      |> assign(list_activities(socket, params))
      |> then(fn complete_socket ->
        assign(complete_socket, :empty?, Enum.empty?(complete_socket.assigns.activities))
@@ -107,4 +108,12 @@ defmodule AtomicWeb.ActivityLive.Index do
     is_map_key(socket.assigns, :current_organization) and
       not is_nil(socket.assigns.current_organization)
   end
+
+  defp user_activities_count(socket) do
+    if socket.assigns.is_authenticated? do
+      Activities.count_user_activities(socket.assigns.current_user.id)
+    else
+      0
+    end
+  end
 end
diff --git a/lib/atomic_web/live/activity_live/index.html.heex b/lib/atomic_web/live/activity_live/index.html.heex
index 9c6545476..90b8f61c0 100644
--- a/lib/atomic_web/live/activity_live/index.html.heex
+++ b/lib/atomic_web/live/activity_live/index.html.heex
@@ -1,8 +1,10 @@
 <.page title="Activities">
   <:actions>
-    <.button navigate={Routes.activity_new_path(@socket, :new, @current_organization)} icon={:plus}>
-      <%= gettext("New") %>
-    </.button>
+    <%= if @has_permissions? do %>
+      <.button navigate={Routes.activity_new_path(@socket, :new, @current_organization)} icon={:plus}>
+        <%= gettext("New") %>
+      </.button>
+    <% end %>
   </:actions>
   <!-- Tabs -->
   <.tabs class="max-w-5-xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -12,11 +14,13 @@
       </.tab>
     </.link>
 
-    <.link patch="?tab=following" replace={false}>
-      <.tab active={@current_tab == "following"}>
-        <%= gettext("Following") %>
-      </.tab>
-    </.link>
+    <%= if @is_authenticated? do %>
+      <.link patch="?tab=following" replace={false}>
+        <.tab active={@current_tab == "following"}>
+          <%= gettext("Following") %>
+        </.tab>
+      </.link>
+    <% end %>
 
     <.link patch="?tab=all" replace={false}>
       <.tab active={@current_tab == "all"}>
@@ -24,11 +28,13 @@
       </.tab>
     </.link>
 
-    <.link patch="?tab=enrolled" replace={false}>
-      <.tab active={@current_tab == "enrolled"}>
-        <%= gettext("Enrolled") %>
-      </.tab>
-    </.link>
+    <%= if @is_authenticated? do %>
+      <.link patch="?tab=enrolled" replace={false}>
+        <.tab active={@current_tab == "enrolled"} number={@enrolled_count}>
+          <%= gettext("Enrolled") %>
+        </.tab>
+      </.link>
+    <% end %>
   </.tabs>
   <!-- Activities index -->
   <%= if @empty? and @has_permissions? do %>

From 5cde7c4b55917f9b9e61e0561adc6d4412a02936 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= <joao@lobo.is>
Date: Fri, 5 Jul 2024 11:48:03 +0100
Subject: [PATCH 03/39] feat: improve activities index tabs

---
 lib/atomic/activities.ex                      | 85 ++++++++++++++++++-
 lib/atomic_web/live/activity_live/index.ex    | 30 ++++---
 .../live/activity_live/index.html.heex        | 45 ++++++----
 3 files changed, 130 insertions(+), 30 deletions(-)

diff --git a/lib/atomic/activities.ex b/lib/atomic/activities.ex
index a0326314b..e194b3145 100644
--- a/lib/atomic/activities.ex
+++ b/lib/atomic/activities.ex
@@ -398,18 +398,97 @@ defmodule Atomic.Activities do
   end
 
   @doc """
-  Returns the count of activities a user has enrolled in.
+  Returns the list of upcoming activities a user has enrolled in.
 
   ## Examples
 
-      iex> count_user_activities(user_id)
+      iex> list_upcoming_user_activities(user_id)
+      [%Activity{}, ...]
+  """
+  def list_upcoming_user_activities(user_id, params \\ %{})
+
+  def list_upcoming_user_activities(user_id, opts) when is_list(opts) do
+    from(a in Activity,
+      join: e in assoc(a, :activity_enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? > now()", a.start))
+    |> apply_filters(opts)
+    |> Repo.all()
+  end
+
+  def list_upcoming_user_activities(user_id, flop) do
+    from(a in Activity,
+      join: e in assoc(a, :activity_enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? > now()", a.start))
+    |> Flop.validate_and_run(flop, for: Activity)
+  end
+
+  def list_upcoming_user_activities(user_id, %{} = flop, opts) when is_list(opts) do
+    from(a in Activity,
+      join: e in assoc(a, :activity_enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? > now()", a.start))
+    |> apply_filters(opts)
+    |> Flop.validate_and_run(flop, for: Activity)
+  end
+
+  @doc """
+  Returns the list of past activities a user has enrolled in.
+
+  ## Examples
+
+      iex> list_past_user_activities(user_id)
+      [%Activity{}, ...]
+  """
+  def list_past_user_activities(user_id, params \\ %{})
+
+  def list_past_user_activities(user_id, opts) when is_list(opts) do
+    from(a in Activity,
+      join: e in assoc(a, :activity_enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? < now()", a.start))
+    |> apply_filters(opts)
+    |> Repo.all()
+  end
+
+  def list_past_user_activities(user_id, flop) do
+    from(a in Activity,
+      join: e in assoc(a, :activity_enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? < now()", a.start))
+    |> Flop.validate_and_run(flop, for: Activity)
+  end
+
+  def list_past_user_activities(user_id, %{} = flop, opts) when is_list(opts) do
+    from(a in Activity,
+      join: e in assoc(a, :activity_enrollments),
+      where: e.user_id == ^user_id
+    )
+    |> where([a], fragment("? < now()", a.start))
+    |> apply_filters(opts)
+    |> Flop.validate_and_run(flop, for: Activity)
+  end
+
+  @doc """
+  Returns the count of upcoming activities a user has enrolled in.
+
+  ## Examples
+
+      iex> user_upcoming_activities_count(user_id)
       1
   """
-  def count_user_activities(user_id) do
+  def user_upcoming_activities_count(user_id) do
     from(a in Activity,
       join: e in assoc(a, :activity_enrollments),
       where: e.user_id == ^user_id
     )
+    |> where([a], fragment("? > now()", a.start))
     |> Repo.aggregate(:count, :id)
   end
 
diff --git a/lib/atomic_web/live/activity_live/index.ex b/lib/atomic_web/live/activity_live/index.ex
index 8031096fe..c1d5bab90 100644
--- a/lib/atomic_web/live/activity_live/index.ex
+++ b/lib/atomic_web/live/activity_live/index.ex
@@ -22,7 +22,7 @@ defmodule AtomicWeb.ActivityLive.Index do
      |> assign(:current_tab, current_tab(socket, params))
      |> assign(:params, params)
      |> assign(:has_permissions?, has_permissions?(socket))
-     |> assign(:enrolled_count, user_activities_count(socket))
+     |> assign(:upcoming_enrolled_count, user_activities_count(socket))
      |> assign(list_activities(socket, params))
      |> then(fn complete_socket ->
        assign(complete_socket, :empty?, Enum.empty?(complete_socket.assigns.activities))
@@ -33,14 +33,14 @@ defmodule AtomicWeb.ActivityLive.Index do
     params = Map.put(params, "page_size", 6)
 
     case current_tab(socket, params) do
-      "all" -> list_all_activities(socket, params)
+      "discover" -> list_discover_activities(socket, params)
       "following" -> list_following_activities(socket, params)
-      "upcoming" -> list_upcoming_activities(socket, params)
       "enrolled" -> list_enrolled_activities(socket, params)
+      "past" -> list_past_activities(socket, params)
     end
   end
 
-  defp list_all_activities(_socket, params) do
+  defp list_discover_activities(_socket, params) do
     case Activities.list_activities(params,
            preloads: [:speakers, :activity_enrollments, :organization]
          ) do
@@ -67,8 +67,8 @@ defmodule AtomicWeb.ActivityLive.Index do
     end
   end
 
-  defp list_upcoming_activities(_socket, params) do
-    case Activities.list_upcoming_activities(params,
+  defp list_enrolled_activities(socket, params) do
+    case Activities.list_upcoming_user_activities(socket.assigns.current_user.id, params,
            preloads: [:speakers, :activity_enrollments, :organization]
          ) do
       {:ok, {activities, meta}} ->
@@ -79,8 +79,8 @@ defmodule AtomicWeb.ActivityLive.Index do
     end
   end
 
-  defp list_enrolled_activities(socket, params) do
-    case Activities.list_user_activities(socket.assigns.current_user.id, params,
+  defp list_past_activities(socket, params) do
+    case Activities.list_past_user_activities(socket.assigns.current_user.id, params,
            preloads: [:speakers, :activity_enrollments, :organization]
          ) do
       {:ok, {activities, meta}} ->
@@ -92,7 +92,7 @@ defmodule AtomicWeb.ActivityLive.Index do
   end
 
   defp current_tab(_socket, params) when is_map_key(params, "tab"), do: params["tab"]
-  defp current_tab(_socket, _params), do: "upcoming"
+  defp current_tab(_socket, _params), do: "discover"
 
   defp has_permissions?(socket) when not socket.assigns.is_authenticated?, do: false
 
@@ -111,9 +111,19 @@ defmodule AtomicWeb.ActivityLive.Index do
 
   defp user_activities_count(socket) do
     if socket.assigns.is_authenticated? do
-      Activities.count_user_activities(socket.assigns.current_user.id)
+      Activities.user_upcoming_activities_count(socket.assigns.current_user.id)
     else
       0
     end
   end
+
+  defp activities_empty_state_description(tab) do
+    case tab do
+      "following" -> gettext("The organizations you follow haven't created any activities yet.")
+      "upcoming" -> gettext("There are no upcoming activities registered.")
+      "enrolled" -> gettext("When you enroll in new activities they will show up here!")
+      "past" -> gettext("You haven't participated in any activities yet.")
+      _ -> ""
+    end
+  end
 end
diff --git a/lib/atomic_web/live/activity_live/index.html.heex b/lib/atomic_web/live/activity_live/index.html.heex
index 90b8f61c0..25300dc52 100644
--- a/lib/atomic_web/live/activity_live/index.html.heex
+++ b/lib/atomic_web/live/activity_live/index.html.heex
@@ -7,45 +7,56 @@
     <% end %>
   </:actions>
   <!-- Tabs -->
-  <.tabs class="max-w-5-xl mx-auto px-4 sm:px-6 lg:px-8">
-    <.link patch="?tab=upcoming" replace={false}>
-      <.tab active={@current_tab == "upcoming"}>
-        <%= gettext("Upcoming") %>
+  <.tabs class="overflow-scroll scrollbar-hide max-w-5-xl mx-auto px-4 sm:px-6 lg:px-8">
+    <.link patch="?tab=discover" replace={false}>
+      <.tab active={@current_tab == "discover"}>
+        <.icon name={:globe_alt} class="h-5 w-5 mr-1" />
+        <%= gettext("Discover") %>
       </.tab>
     </.link>
 
     <%= if @is_authenticated? do %>
       <.link patch="?tab=following" replace={false}>
         <.tab active={@current_tab == "following"}>
+          <.icon name={:eye} class="h-5 w-5 mr-1" />
           <%= gettext("Following") %>
         </.tab>
       </.link>
     <% end %>
 
-    <.link patch="?tab=all" replace={false}>
-      <.tab active={@current_tab == "all"}>
-        <%= gettext("All") %>
-      </.tab>
-    </.link>
-
     <%= if @is_authenticated? do %>
       <.link patch="?tab=enrolled" replace={false}>
-        <.tab active={@current_tab == "enrolled"} number={@enrolled_count}>
-          <%= gettext("Enrolled") %>
+        <.tab active={@current_tab == "enrolled"} number={@upcoming_enrolled_count}>
+          <.icon name={:ticket} class="h-5 w-5 mr-1" />
+          <%= gettext("Upcoming") %>
+        </.tab>
+      </.link>
+      <.link patch="?tab=past" replace={false}>
+        <.tab active={@current_tab == "past"}>
+          <.icon name={:clock} class="h-5 w-5 mr-1" />
+          <%= gettext("Past") %>
         </.tab>
       </.link>
     <% end %>
   </.tabs>
   <!-- Activities index -->
-  <%= if @empty? and @has_permissions? do %>
-    <div class="mt-32">
-      <.empty_state url={Routes.activity_new_path(@socket, :new, @current_organization)} placeholder="activity" />
-    </div>
+  <%= if @empty? do %>
+    <%= if @has_permissions? do %>
+      <div class="mt-32">
+        <.empty_state url={Routes.activity_new_path(@socket, :new, @current_organization)} placeholder="activity" />
+      </div>
+    <% else %>
+      <div class="text-zinc-600 mt-32 flex flex-col items-center w-full justify-center">
+        <.icon class="w-24" name={:megaphone} />
+        <p class="pt-4"><%= gettext("No activities to show.") %></p>
+        <p><%= activities_empty_state_description(@current_tab) %></p>
+      </div>
+    <% end %>
   <% else %>
     <div class="overflow-hidden bg-white">
       <ul role="list" class="p-4 overflow-auto grid sm:grid-cols-2 gap-4">
         <%= for activity <- @activities do %>
-          <li id={activity.id}>
+          <li id={activity.id} class={@current_tab == "past" && "opacity-70"}>
             <.activity_card activity={activity} />
           </li>
         <% end %>

From 1137a6c13ed7836bd7e4c326fc7d5b67c831a938 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= <joao@lobo.is>
Date: Thu, 1 Aug 2024 15:52:27 +0100
Subject: [PATCH 04/39] feat: add organization tab and useful discover tab

---
 lib/atomic/activities.ex                      | 34 +++++++++++++++++++
 lib/atomic_web/live/activity_live/index.ex    | 21 ++++++++++--
 .../live/activity_live/index.html.heex        |  9 +++++
 3 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/lib/atomic/activities.ex b/lib/atomic/activities.ex
index e194b3145..21a63d3d8 100644
--- a/lib/atomic/activities.ex
+++ b/lib/atomic/activities.ex
@@ -475,6 +475,40 @@ defmodule Atomic.Activities do
     |> Flop.validate_and_run(flop, for: Activity)
   end
 
+  @doc """
+  Returns the list of activities a user has enrolled in.
+
+  ## Examples
+
+      iex> list_user_activities(user_id)
+      [%Activity{}, ...]
+  """
+
+  def list_organization_activities(organization_id, params \\ %{})
+
+  def list_organization_activities(organization_id, opts) when is_list(opts) do
+    from(a in Activity,
+      where: a.organization_id == ^organization_id
+    )
+    |> apply_filters(opts)
+    |> Repo.all()
+  end
+
+  def list_organization_activities(organization_id, flop) do
+    from(a in Activity,
+      where: a.organization_id == ^organization_id
+    )
+    |> Flop.validate_and_run(flop, for: Activity)
+  end
+
+  def list_organization_activities(organization_id, %{} = flop, opts) when is_list(opts) do
+    from(a in Activity,
+      where: a.organization_id == ^organization_id
+    )
+    |> apply_filters(opts)
+    |> Flop.validate_and_run(flop, for: Activity)
+  end
+
   @doc """
   Returns the count of upcoming activities a user has enrolled in.
 
diff --git a/lib/atomic_web/live/activity_live/index.ex b/lib/atomic_web/live/activity_live/index.ex
index c1d5bab90..0f22fe098 100644
--- a/lib/atomic_web/live/activity_live/index.ex
+++ b/lib/atomic_web/live/activity_live/index.ex
@@ -22,6 +22,7 @@ defmodule AtomicWeb.ActivityLive.Index do
      |> assign(:current_tab, current_tab(socket, params))
      |> assign(:params, params)
      |> assign(:has_permissions?, has_permissions?(socket))
+     |> assign(:has_current_organization?, has_current_organization?(socket))
      |> assign(:upcoming_enrolled_count, user_activities_count(socket))
      |> assign(list_activities(socket, params))
      |> then(fn complete_socket ->
@@ -33,6 +34,7 @@ defmodule AtomicWeb.ActivityLive.Index do
     params = Map.put(params, "page_size", 6)
 
     case current_tab(socket, params) do
+      "organization" -> list_organization_activities(socket, params)
       "discover" -> list_discover_activities(socket, params)
       "following" -> list_following_activities(socket, params)
       "enrolled" -> list_enrolled_activities(socket, params)
@@ -40,8 +42,20 @@ defmodule AtomicWeb.ActivityLive.Index do
     end
   end
 
+  defp list_organization_activities(socket, params) do
+    case Activities.list_organization_activities(socket.assigns.current_organization.id, params,
+           preloads: [:speakers, :activity_enrollments, :organization]
+         ) do
+      {:ok, {activities, meta}} ->
+        %{activities: activities, meta: meta}
+
+      {:error, flop} ->
+        %{activities: [], meta: flop}
+    end
+  end
+
   defp list_discover_activities(_socket, params) do
-    case Activities.list_activities(params,
+    case Activities.list_upcoming_activities(params,
            preloads: [:speakers, :activity_enrollments, :organization]
          ) do
       {:ok, {activities, meta}} ->
@@ -92,7 +106,10 @@ defmodule AtomicWeb.ActivityLive.Index do
   end
 
   defp current_tab(_socket, params) when is_map_key(params, "tab"), do: params["tab"]
-  defp current_tab(_socket, _params), do: "discover"
+
+  defp current_tab(socket, _params) do
+    if has_current_organization?(socket), do: "organization", else: "discover"
+  end
 
   defp has_permissions?(socket) when not socket.assigns.is_authenticated?, do: false
 
diff --git a/lib/atomic_web/live/activity_live/index.html.heex b/lib/atomic_web/live/activity_live/index.html.heex
index 25300dc52..6b6ee6dd3 100644
--- a/lib/atomic_web/live/activity_live/index.html.heex
+++ b/lib/atomic_web/live/activity_live/index.html.heex
@@ -8,6 +8,15 @@
   </:actions>
   <!-- Tabs -->
   <.tabs class="overflow-scroll scrollbar-hide max-w-5-xl mx-auto px-4 sm:px-6 lg:px-8">
+    <%= if @is_authenticated? and @has_current_organization? do %>
+      <.link patch="?tab=organization" replace={false}>
+        <.tab active={@current_tab == "organization"}>
+          <.icon name={:globe_alt} class="h-5 w-5 mr-1" />
+          <%= @current_user.current_organization.name <> gettext("'s activities") %>
+        </.tab>
+      </.link>
+    <% end %>
+
     <.link patch="?tab=discover" replace={false}>
       <.tab active={@current_tab == "discover"}>
         <.icon name={:globe_alt} class="h-5 w-5 mr-1" />

From 9349249c8f14d1f1709d98e4291ef5cca136b133 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= <joao@lobo.is>
Date: Thu, 1 Aug 2024 17:46:48 +0100
Subject: [PATCH 05/39] feat: improve activity show layout

---
 lib/atomic_web/components/page.ex             |   4 +-
 lib/atomic_web/live/activity_live/show.ex     |   1 +
 .../live/activity_live/show.html.heex         | 106 ++++++++++++++++++
 3 files changed, 110 insertions(+), 1 deletion(-)

diff --git a/lib/atomic_web/components/page.ex b/lib/atomic_web/components/page.ex
index cb5ae06af..17b43fa51 100644
--- a/lib/atomic_web/components/page.ex
+++ b/lib/atomic_web/components/page.ex
@@ -10,6 +10,7 @@ defmodule AtomicWeb.Components.Page do
     default: false,
     doc: "Whether to show a bottom border after the page header."
 
+  slot :title_wrapper, optional: true, doc: "Slot for the title wrapper."
   slot :actions, optional: true, doc: "Slot for actions to be rendered in the page header."
   slot :inner_block, optional: true, doc: "Slot for the body content of the page."
 
@@ -20,7 +21,8 @@ defmodule AtomicWeb.Components.Page do
         <main class="relative z-0 mb-10 flex-1 overflow-y-auto focus:outline-none xl:order-last">
           <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
             <div class="my-6 flex min-w-0 flex-row items-center justify-between">
-              <h1 class="flex-1 select-none truncate text-2xl font-bold text-gray-900">
+              <%= render_slot(@title_wrapper, @title) %>
+              <h1 :if={@title_wrapper == []} class="flex-1 select-none truncate text-2xl font-bold text-gray-900">
                 <%= @title %>
               </h1>
               <%= render_slot(@actions) %>
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index b4954c33b..75a512103 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -2,6 +2,7 @@ defmodule AtomicWeb.ActivityLive.Show do
   use AtomicWeb, :live_view
 
   import AtomicWeb.Components.Avatar
+  import AtomicWeb.Components.Gradient
 
   alias Atomic.Accounts
   alias Atomic.Activities
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index dcfd5eefe..bc7549159 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -1,3 +1,108 @@
+<.page title={@activity.title}>
+  <:title_wrapper :let={title}>
+    <div>
+      <h1 class="select-none pb-2 truncate text-2xl font-bold text-gray-900">
+        <%= title %>
+      </h1>
+      <span class="flex items-center gap-2">
+        <p>
+          <%= gettext("hosted by") %>
+        </p>
+        <.link navigate={Routes.organization_show_path(@socket, :show, @activity.organization)} class="flex items-center gap-1">
+          <.avatar class="border-zinc-200 border" src={Uploaders.Logo.url({@activity.organization.logo, @activity.organization}, :original)} name={@activity.organization.name} size={:xs} type={:organization} color={:white} />
+          <%= @activity.organization.name %>
+        </.link>
+      </span>
+    </div>
+  </:title_wrapper>
+  <:actions>
+    <%= if @is_authenticated? do %>
+      <%= if not @max_enrolled? do %>
+        <.button color={:white} icon={:ticket} phx-click="enroll" disabled={@enrolled?}>
+          <%= gettext("Register") %>
+        </.button>
+      <% end %>
+      <%= if @has_permissions? do %>
+        <.button navigate={Routes.activity_edit_path(@socket, :edit, @activity.organization_id, @activity)} icon={:pencil}>
+          <%= gettext("Edit activity") %>
+        </.button>
+      <% end %>
+    <% end %>
+  </:actions>
+  <div class="flex flex-row gap-12 mx-4 max-w-5xl sm:mx-6 lg:mx-8">
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-row gap-16">
+        <!-- Date -->
+        <%= if @activity.start do %>
+          <div class="flex items-center gap-2">
+            <.icon name={:calendar} solid class="h-5 w-5 text-gray-700" />
+            <!-- One day activity -->
+            <%= if Timex.to_date(@activity.start) == Timex.to_date(@activity.finish) do %>
+              <div class="flex flex-col">
+                <p class="font-medium">
+                  <%= pretty_display_date(@activity.start) %>
+                </p>
+                <p>
+                  <%= "#{display_time(@activity.start)}-#{display_time(@activity.finish)}" %>
+                </p>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+        <!-- Capacity -->
+        <div class="flex items-center gap-2">
+          <.icon name={:user_group} solid class="h-5 w-5 text-gray-700" />
+          <p class="font-medium">
+            <%= @enrolled %> / <%= @activity.maximum_entries %>
+          </p>
+        </div>
+        <!-- Location -->
+        <%= if @activity.location do %>
+          <div class="flex items-center gap-2">
+            <.icon name={:map_pin} solid class="h-5 w-5 text-gray-700" />
+            <.link href={@activity.location.url || "https://www.google.com/maps/search/?api=1&query=#{@activity.location.name}"} target="_blank">
+              <p class="font-medium">
+                <%= @activity.location.name %>
+              </p>
+            </.link>
+          </div>
+        <% end %>
+      </div>
+      <!-- About -->
+      <div>
+        <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900">
+          <%= gettext("About") %>
+        </h2>
+        <p>
+          <%= text_to_html(@activity.description) %>
+        </p>
+      </div>
+      <!-- Speakers -->
+      <%= if @activity.speakers != [] do %>
+        <div>
+          <h2 class="mb-4 flex-1 select-none truncate text-lg font-semibold text-gray-900">
+            <%= gettext("Speakers") %>
+          </h2>
+          <%= for speaker <- @activity.speakers do %>
+            <div class="flex flex-row items-center gap-2">
+              <.avatar name={speaker.name} size={:sm} color={:light_gray} class="mr-2 inline-flex" />
+              <p><%= speaker.name %></p>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    <!-- Activity image -->
+    <div class="h-[40%] object-cover">
+      <%= if @activity.image do %>
+        <img class="h-full w-full object-cover" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+      <% else %>
+        <.gradient seed={@activity.id} />
+      <% end %>
+    </div>
+  </div>
+</.page>
+<!--
 <div class="my-4">
   <div class="bg-white">
     <div class="flex justify-between px-4 py-5 sm:px-6">
@@ -167,3 +272,4 @@
     <% end %>
   <% end %>
 </div>
+-->

From e0e7f8444632da8bad5c942445eb82de460ad32b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= <joaodlobo@gmail.com>
Date: Wed, 7 Aug 2024 14:43:34 +0100
Subject: [PATCH 06/39] fix: merge issues

---
 lib/atomic/activities.ex                           | 14 +++++++-------
 .../live/activity_live/components/activity_card.ex | 12 ------------
 lib/atomic_web/live/activity_live/index.ex         |  2 +-
 lib/atomic_web/live/activity_live/show.html.heex   | 14 --------------
 4 files changed, 8 insertions(+), 34 deletions(-)

diff --git a/lib/atomic/activities.ex b/lib/atomic/activities.ex
index d0c902b4c..01dd5bcda 100644
--- a/lib/atomic/activities.ex
+++ b/lib/atomic/activities.ex
@@ -408,7 +408,7 @@ defmodule Atomic.Activities do
 
   def list_upcoming_user_activities(user_id, opts) when is_list(opts) do
     from(a in Activity,
-      join: e in assoc(a, :activity_enrollments),
+      join: e in assoc(a, :enrollments),
       where: e.user_id == ^user_id
     )
     |> where([a], fragment("? > now()", a.start))
@@ -418,7 +418,7 @@ defmodule Atomic.Activities do
 
   def list_upcoming_user_activities(user_id, flop) do
     from(a in Activity,
-      join: e in assoc(a, :activity_enrollments),
+      join: e in assoc(a, :enrollments),
       where: e.user_id == ^user_id
     )
     |> where([a], fragment("? > now()", a.start))
@@ -427,7 +427,7 @@ defmodule Atomic.Activities do
 
   def list_upcoming_user_activities(user_id, %{} = flop, opts) when is_list(opts) do
     from(a in Activity,
-      join: e in assoc(a, :activity_enrollments),
+      join: e in assoc(a, :enrollments),
       where: e.user_id == ^user_id
     )
     |> where([a], fragment("? > now()", a.start))
@@ -447,7 +447,7 @@ defmodule Atomic.Activities do
 
   def list_past_user_activities(user_id, opts) when is_list(opts) do
     from(a in Activity,
-      join: e in assoc(a, :activity_enrollments),
+      join: e in assoc(a, :enrollments),
       where: e.user_id == ^user_id
     )
     |> where([a], fragment("? < now()", a.start))
@@ -457,7 +457,7 @@ defmodule Atomic.Activities do
 
   def list_past_user_activities(user_id, flop) do
     from(a in Activity,
-      join: e in assoc(a, :activity_enrollments),
+      join: e in assoc(a, :enrollments),
       where: e.user_id == ^user_id
     )
     |> where([a], fragment("? < now()", a.start))
@@ -466,7 +466,7 @@ defmodule Atomic.Activities do
 
   def list_past_user_activities(user_id, %{} = flop, opts) when is_list(opts) do
     from(a in Activity,
-      join: e in assoc(a, :activity_enrollments),
+      join: e in assoc(a, :enrollments),
       where: e.user_id == ^user_id
     )
     |> where([a], fragment("? < now()", a.start))
@@ -518,7 +518,7 @@ defmodule Atomic.Activities do
   """
   def user_upcoming_activities_count(user_id) do
     from(a in Activity,
-      join: e in assoc(a, :activity_enrollments),
+      join: e in assoc(a, :enrollments),
       where: e.user_id == ^user_id
     )
     |> where([a], fragment("? > now()", a.start))
diff --git a/lib/atomic_web/live/activity_live/components/activity_card.ex b/lib/atomic_web/live/activity_live/components/activity_card.ex
index af9876127..060a2b19d 100644
--- a/lib/atomic_web/live/activity_live/components/activity_card.ex
+++ b/lib/atomic_web/live/activity_live/components/activity_card.ex
@@ -43,18 +43,6 @@ defmodule AtomicWeb.ActivityLive.Components.ActivityCard do
                 </span>
               </.link>
             </object>
-            <div class="flex lg:items-center lg:justify-between">
-              <div class="flex flex-row space-x-2">
-                <%= for speaker <- @activity.speakers do %>
-                  <div class="mt-2 flex items-center">
-                    <.avatar name={speaker.name} size={:xs} color={:light_gray} class="!w-6 !h-6 mr-1.5" />
-                    <p class="text-sm text-zinc-500">
-                      <%= extract_first_last_name(speaker.name) %>
-                    </p>
-                  </div>
-                <% end %>
-              </div>
-            </div>
           </div>
           <!-- Activity image -->
           <div class="h-48 object-cover">
diff --git a/lib/atomic_web/live/activity_live/index.ex b/lib/atomic_web/live/activity_live/index.ex
index 7307af1cf..a44746b29 100644
--- a/lib/atomic_web/live/activity_live/index.ex
+++ b/lib/atomic_web/live/activity_live/index.ex
@@ -3,7 +3,7 @@ defmodule AtomicWeb.ActivityLive.Index do
 
   import AtomicWeb.Components.{Button, Empty, Pagination, Tabs}
   import AtomicWeb.ActivityLive.Components.ActivityCard
-  
+
   alias Atomic.Accounts
   alias Atomic.Activities
   alias Atomic.Organizations
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index 84955eb1f..a619affdd 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -77,20 +77,6 @@
           <%= text_to_html(@activity.description) %>
         </p>
       </div>
-      <!-- Speakers -->
-      <%= if @activity.speakers != [] do %>
-        <div>
-          <h2 class="mb-4 flex-1 select-none truncate text-lg font-semibold text-gray-900">
-            <%= gettext("Speakers") %>
-          </h2>
-          <%= for speaker <- @activity.speakers do %>
-            <div class="flex flex-row items-center gap-2">
-              <.avatar name={speaker.name} size={:sm} color={:light_gray} class="mr-2 inline-flex" />
-              <p><%= speaker.name %></p>
-            </div>
-          <% end %>
-        </div>
-      <% end %>
     </div>
     <!-- Activity image -->
     <div class="h-[40%] object-cover">

From 5c0de8adfea9e9d591d61e3924332c4e09a5dbcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= <joaodlobo@gmail.com>
Date: Fri, 9 Aug 2024 16:47:10 +0100
Subject: [PATCH 07/39] feat: activity show page

---
 lib/atomic/activities.ex                      |  58 +---
 lib/atomic/activities/enrollment.ex           |  21 ++
 lib/atomic_web/components/button.ex           |   4 +-
 lib/atomic_web/components/dropdown.ex         |  21 +-
 lib/atomic_web/components/modal.ex            |   3 +-
 .../activity_live/components/activity_card.ex |   4 +-
 lib/atomic_web/live/activity_live/show.ex     | 113 +++++--
 .../live/activity_live/show.html.heex         | 278 +++++++-----------
 lib/atomic_web/router.ex                      |   4 +
 lib/atomic_web/views/helpers.ex               |  17 --
 .../20221104160002_create_enrollments.exs     |   2 +
 priv/repo/seeds/accounts.exs                  |   5 +-
 12 files changed, 257 insertions(+), 273 deletions(-)

diff --git a/lib/atomic/activities.ex b/lib/atomic/activities.ex
index 01dd5bcda..501376e6b 100644
--- a/lib/atomic/activities.ex
+++ b/lib/atomic/activities.ex
@@ -322,27 +322,6 @@ defmodule Atomic.Activities do
     |> Repo.one()
   end
 
-  @doc """
-   Gets the user enrolled in an given activity.
-
-    ## Examples
-
-        iex> get_user_enrolled(user, activity_id)
-        %Enrollment{}
-
-        iex> get_user_enrolled(user, activity_id)
-        ** (Ecto.NoResultsError)
-  """
-  def get_user_enrolled(user, activity_id) do
-    Enrollment
-    |> where(user_id: ^user.id, activity_id: ^activity_id)
-    |> Repo.one()
-    |> case do
-      nil -> create_enrollment(activity_id, user)
-      enrollment -> enrollment
-    end
-  end
-
   @doc """
    Gets all user enrollments.
 
@@ -526,7 +505,7 @@ defmodule Atomic.Activities do
   end
 
   @doc """
-  Creates an enrollment.
+  Creates an enrollment and broadcasts .
 
   ## Examples
 
@@ -538,23 +517,15 @@ defmodule Atomic.Activities do
 
   """
   def create_enrollment(activity_id, %User{} = user) do
-    Ecto.Multi.new()
-    |> Ecto.Multi.insert(:enrollments, %Enrollment{
-      activity_id: activity_id,
-      user_id: user.id
-    })
-    |> Multi.update(:activity, fn %{enrollments: enrollment} ->
-      activity = get_activity!(enrollment.activity_id)
-
-      Activity.changeset(activity, %{enrolled: activity.enrolled + 1})
-    end)
-    |> Repo.transaction()
+    %Enrollment{}
+    |> Enrollment.changeset(%{activity_id: activity_id, user_id: user.id})
+    |> Repo.insert()
     |> case do
-      {:ok, %{enrollments: enrollment, activity: _activity}} ->
+      {:ok, enrollment} ->
         broadcast({:ok, enrollment}, :new_enrollment)
         {:ok, enrollment}
 
-      {:error, _reason, changeset, _actions} ->
+      {:error, changeset} ->
         {:error, changeset}
     end
   end
@@ -590,20 +561,15 @@ defmodule Atomic.Activities do
 
   """
   def delete_enrollment(activity_id, %User{} = user) do
-    Ecto.Multi.new()
-    |> Ecto.Multi.delete(:enrollments, get_user_enrolled(user, activity_id))
-    |> Multi.update(:activity, fn %{enrollments: _enrollment} ->
-      activity = get_activity!(activity_id)
-
-      Activity.changeset(activity, %{enrolled: activity.enrolled - 1})
-    end)
-    |> Repo.transaction()
+    get_enrollment!(activity_id, user.id)
+    |> Enrollment.changeset(%{})
+    |> Repo.delete()
     |> case do
-      {:ok, %{enrollments: _enrollment, activity: _activity}} ->
+      {:ok, _} ->
         broadcast({1, nil}, :deleted_enrollment)
-        {1, nil}
+        {:ok, nil}
 
-      {:error, _reason, changeset, _actions} ->
+      {:error, changeset} ->
         {:error, changeset}
     end
   end
diff --git a/lib/atomic/activities/enrollment.ex b/lib/atomic/activities/enrollment.ex
index 4284f7f94..959227eb3 100644
--- a/lib/atomic/activities/enrollment.ex
+++ b/lib/atomic/activities/enrollment.ex
@@ -25,6 +25,8 @@ defmodule Atomic.Activities.Enrollment do
     |> cast(attrs, @required_fields ++ @optional_fields)
     |> validate_maximum_entries()
     |> validate_required(@required_fields)
+    |> unique_constraint([:activity_id, :user_id], name: :unique_enrollments)
+    |> prepare_changes(&update_activity_enrolled/1)
   end
 
   def update_changeset(enrollment, attrs) do
@@ -43,4 +45,23 @@ defmodule Atomic.Activities.Enrollment do
       changeset
     end
   end
+
+  defp update_activity_enrolled(changeset) do
+    IO.inspect(changeset)
+
+    if activity_id = get_field(changeset, :activity_id) do
+      query = from Activity, where: [id: ^activity_id]
+      value = if changeset.action == :insert, do: 1, else: -1
+
+      case changeset.action do
+        action when action in [:insert, :delete] ->
+          changeset.repo.update_all(query, inc: [enrolled: value])
+
+        _ ->
+          changeset
+      end
+    end
+
+    changeset
+  end
 end
diff --git a/lib/atomic_web/components/button.ex b/lib/atomic_web/components/button.ex
index 12d441854..7e48737be 100644
--- a/lib/atomic_web/components/button.ex
+++ b/lib/atomic_web/components/button.ex
@@ -58,7 +58,7 @@ defmodule AtomicWeb.Components.Button do
 
   attr :rest, :global,
     include:
-      ~w(csrf_token disabled download form href hreflang method name navigate patch referrerpolicy rel replace target type value autofocus tabindex),
+      ~w(csrf_token download form href hreflang method name navigate patch referrerpolicy rel replace target type value autofocus tabindex),
     doc: "Arbitrary HTML or phx attributes."
 
   slot :inner_block, required: false, doc: "Slot for the content of the button."
@@ -83,7 +83,7 @@ defmodule AtomicWeb.Components.Button do
 
   defp render_button(assigns) do
     ~H"""
-    <button class={@class} {@rest}>
+    <button class={@class} disabled={@disabled} {@rest}>
       <%= render_content(assigns) %>
     </button>
     """
diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index eb81121d3..da7959488 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -30,12 +30,21 @@ defmodule AtomicWeb.Components.Dropdown do
       <div id={@id} class={"#{if @orientation == :down, do: "origin-top-right top-full", else: "origin-bottom-right bottom-full"} absolute right-0 z-10 mt-2 hidden w-56 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5"}>
         <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
           <%= for item <- @items do %>
-            <.link href={item.link} class="block flex items-center gap-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" method={Map.get(item, :method, "get")}>
-              <%= if item[:icon] do %>
-                <.icon solid={@icon_variant == :solid} mini={@icon_variant == :mini} name={item.icon} class="ml-2 inline-block h-5 w-5" />
-              <% end %>
-              <%= item.name %>
-            </.link>
+            <%= if Map.has_key?(item, :link) do %>
+              <.link href={item.link} class="block flex items-center gap-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem" method={Map.get(item, :method, "get")}>
+                <%= if item[:icon] do %>
+                  <.icon solid={@icon_variant == :solid} mini={@icon_variant == :mini} name={item.icon} class="ml-2 inline-block h-5 w-5" />
+                <% end %>
+                <%= item.name %>
+              </.link>
+            <% else %>
+              <button phx-click={item.event} class="block flex w-full items-center gap-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
+                <%= if item[:icon] do %>
+                  <.icon solid={@icon_variant == :solid} mini={@icon_variant == :mini} name={item.icon} class="ml-2 inline-block h-5 w-5" />
+                <% end %>
+                <%= item.name %>
+              </button>
+            <% end %>
           <% end %>
         </div>
       </div>
diff --git a/lib/atomic_web/components/modal.ex b/lib/atomic_web/components/modal.ex
index 8990f8c3f..f0d03a8aa 100644
--- a/lib/atomic_web/components/modal.ex
+++ b/lib/atomic_web/components/modal.ex
@@ -29,6 +29,7 @@ defmodule AtomicWeb.Components.Modal do
   """
   attr :id, :string, required: true
   attr :show, :boolean, default: false
+  attr :class, :string, default: ""
   attr :on_cancel, JS, default: %JS{}
   slot :inner_block, required: true
 
@@ -38,7 +39,7 @@ defmodule AtomicWeb.Components.Modal do
       <div id={"#{@id}-bg"} class="bg-zinc-50/90 fixed inset-0 transition-opacity" aria-hidden="true" />
       <div class="fixed inset-0 overflow-y-auto" aria-labelledby={"#{@id}-title"} aria-describedby={"#{@id}-description"} role="dialog" aria-modal="true" tabindex="0">
         <div class="flex min-h-full items-center justify-center">
-          <div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8">
+          <div class={"#{@class} w-full max-w-3xl p-4 sm:p-6 lg:py-8"}>
             <.focus_wrap id={"#{@id}-container"} phx-click-away={JS.exec("phx-cancel", to: "##{@id}")} class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition">
               <div class="absolute top-6 right-5">
                 <button phx-click={JS.exec("phx-cancel", to: "##{@id}")} type="button" class="-m-3 flex-none p-3 opacity-20 outline-none hover:opacity-40" aria-label={gettext("close")}>
diff --git a/lib/atomic_web/live/activity_live/components/activity_card.ex b/lib/atomic_web/live/activity_live/components/activity_card.ex
index 060a2b19d..d7e6013f7 100644
--- a/lib/atomic_web/live/activity_live/components/activity_card.ex
+++ b/lib/atomic_web/live/activity_live/components/activity_card.ex
@@ -2,7 +2,7 @@ defmodule AtomicWeb.ActivityLive.Components.ActivityCard do
   @moduledoc false
   use AtomicWeb, :component
 
-  import AtomicWeb.Components.{Avatar, Gradient}
+  import AtomicWeb.Components.Gradient
 
   attr :activity, :map, required: true, doc: "The activity to display."
 
@@ -15,7 +15,7 @@ defmodule AtomicWeb.ActivityLive.Components.ActivityCard do
           <!-- Activity information -->
           <div class="col-span-2 px-4 py-4 lg:px-6">
             <div class="flex items-center justify-between">
-              <p class="text-md truncate font-medium text-zinc-900">
+              <p class="text-md truncate font-medium text-zinc-900" title={@activity.title}>
                 <%= @activity.title %>
               </p>
             </div>
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index 9ba89575e..1f403ab69 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -1,12 +1,12 @@
 defmodule AtomicWeb.ActivityLive.Show do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.Components.Avatar
-  import AtomicWeb.Components.Gradient
+  import AtomicWeb.Components.{Avatar, Dropdown, Gradient}
 
   alias Atomic.Accounts
   alias Atomic.Activities
   alias Atomic.Activities.Enrollment
+  alias Phoenix.LiveView.JS
 
   @impl true
   def mount(%{"id" => id}, _session, socket) do
@@ -36,46 +36,53 @@ defmodule AtomicWeb.ActivityLive.Show do
   end
 
   @impl true
-  def handle_event("enroll", _payload, socket) do
+  def handle_event("confirm", _payload, socket) do
+    case socket.assigns.live_action do
+      :enroll ->
+        action_enroll(socket)
+
+      :unenroll ->
+        action_unenroll(socket)
+
+      _ ->
+        {:noreply, socket}
+    end
+  end
+
+  def action_enroll(socket) do
     case Activities.create_enrollment(socket.assigns.id, socket.assigns.current_user) do
       {:ok, %Enrollment{}} ->
         {:noreply,
          socket
-         |> put_flash(:success, "Enrolled successufully!")
-         |> assign(:enrolled?, true)}
-
-      {:error, changeset} ->
-        case is_nil(changeset.errors[:activity_id]) do
-          true -> {:noreply, socket |> put_flash(:error, "Unable to enroll")}
-          _ -> {:noreply, socket |> put_flash(:error, changeset.errors[:activity_id] |> elem(0))}
-        end
+         |> put_flash(:success, gettext("Enrolled successufully!"))
+         |> assign(:enrolled?, true)
+         |> push_patch(to: Routes.activity_show_path(socket, :show, socket.assigns.activity))}
+
+      {:error, _changeset} ->
+        {:noreply,
+         socket
+         |> put_flash(:error, gettext("Unable to enroll. Please try again later."))
+         |> push_patch(to: Routes.activity_show_path(socket, :show, socket.assigns.activity))}
     end
   end
 
-  @impl true
-  def handle_event("unenroll", _payload, socket) do
+  def action_unenroll(socket) do
     case Activities.delete_enrollment(socket.assigns.id, socket.assigns.current_user) do
-      {1, nil} ->
+      {:ok, _} ->
         {:noreply,
          socket
-         |> put_flash(:success, gettext("Unenrolled successufully!"))
-         |> assign(:enrolled?, false)}
+         |> put_flash(:success, "Unenrolled successufully!")
+         |> assign(:enrolled?, false)
+         |> push_patch(to: Routes.activity_show_path(socket, :show, socket.assigns.activity))}
 
-      {_, nil} ->
+      {:error, _changeset} ->
         {:noreply,
          socket
-         |> put_flash(:error, gettext("Unable to unenroll. Please try again."))}
+         |> put_flash(:error, gettext("Unable to unenroll. Please try again."))
+         |> push_patch(to: Routes.activity_show_path(socket, :show, socket.assigns.activity))}
     end
   end
 
-  @impl true
-  def handle_event("must-login", _payload, socket) do
-    {:noreply,
-     socket
-     |> put_flash(:error, gettext("You must be logged in to enroll in an activity."))
-     |> push_navigate(to: Routes.user_session_path(socket, :new))}
-  end
-
   @impl true
   def handle_info({event, _changes}, socket)
       when event in [:new_enrollment, :deleted_enrollment] do
@@ -111,4 +118,58 @@ defmodule AtomicWeb.ActivityLive.Show do
         socket.assigns.activity.organization_id
       )
   end
+
+  def draw_ticket_qr_code(activity, user, _socket) do
+    internal_route = "/activities/#{activity.id}/ticket/#{user.id}/confirm"
+    url = build_url() <> internal_route
+
+    url
+    |> QRCodeEx.encode()
+    |> QRCodeEx.svg(color: "#111827", width: 295, background_color: :transparent)
+  end
+
+  defp build_url do
+    if Mix.env() == :dev do
+      "http://localhost:4000"
+    else
+      "https://#{Application.fetch_env!(:atomic, AtomicWeb.Endpoint)[:url][:host]}"
+    end
+  end
+
+  defp generate_dropdown_items(is_enrolled, can_edit, activity, socket) do
+    [%{name: gettext("Share"), link: "/", icon: :share}]
+    |> append_if_true(is_enrolled, %{
+      name: gettext("Unenroll"),
+      link: Routes.activity_show_path(socket, :unenroll, activity),
+      icon: :user_minus
+    })
+    |> append_if_true(can_edit, %{
+      name: gettext("Edit"),
+      link: Routes.activity_edit_path(socket, :edit, activity.organization, activity),
+      icon: :pencil
+    })
+  end
+
+  defp append_if_true(list, true, item), do: list ++ [item]
+  defp append_if_true(list, _, _), do: list
+
+  defp display_action_goal_confirm_title(action) do
+    case action do
+      :enroll ->
+        gettext("Are you sure you want to join this activity?")
+
+      :unenroll ->
+        gettext("Are you sure you no longer want to take part in this activity?")
+    end
+  end
+
+  defp display_action_goal_confirm_description(action) do
+    case action do
+      :enroll ->
+        gettext("You can alway unenroll later if you change your mind.")
+
+      :unenroll ->
+        gettext("Beware that you will lose your spot if you unenroll.")
+    end
+  end
 end
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index a619affdd..ccf2cfc91 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -1,7 +1,7 @@
 <.page title={@activity.title}>
   <:title_wrapper :let={title}>
-    <div>
-      <h1 class="select-none pb-2 truncate text-2xl font-bold text-gray-900">
+    <div class="grid">
+      <h1 class="select-none pb-2  text-2xl font-bold text-gray-900">
         <%= title %>
       </h1>
       <span class="flex items-center gap-2">
@@ -9,29 +9,49 @@
           <%= gettext("hosted by") %>
         </p>
         <.link navigate={Routes.organization_show_path(@socket, :show, @activity.organization)} class="flex items-center gap-1">
-          <.avatar class="border-zinc-200 border" src={Uploaders.Logo.url({@activity.organization.logo, @activity.organization}, :original)} name={@activity.organization.name} size={:xs} type={:organization} color={:white} />
+          <.avatar class={@activity.organization.logo && "border-0"} src={Uploaders.Logo.url({@activity.organization.logo, @activity.organization}, :original)} name={@activity.organization.name} size={:xs} type={:organization} color={:white} />
           <%= @activity.organization.name %>
         </.link>
       </span>
     </div>
   </:title_wrapper>
   <:actions>
-    <%= if @is_authenticated? do %>
-      <%= if not @max_enrolled? do %>
-        <.button color={:white} icon={:ticket} phx-click="enroll" disabled={@enrolled?}>
+    <!-- Actions (desktop) -->
+    <div class="sm:flex hidden gap-4">
+      <%= if @is_authenticated? do %>
+        <.button :if={not @max_enrolled? and !@enrolled?} color={:white} icon={:ticket} patch={Routes.activity_show_path(@socket, :enroll, @activity)} disabled={@enrolled?}>
           <%= gettext("Register") %>
         </.button>
-      <% end %>
-      <%= if @has_permissions? do %>
-        <.button navigate={Routes.activity_edit_path(@socket, :edit, @activity.organization_id, @activity)} icon={:pencil}>
+        <.button :if={@enrolled?} patch={Routes.activity_show_path(@socket, :ticket, @activity)} color={:white} icon={:ticket}>
+          <%= gettext("Ticket") %>
+        </.button>
+        <.button :if={@has_permissions?} navigate={Routes.activity_edit_path(@socket, :edit, @activity.organization_id, @activity)} icon={:pencil}>
           <%= gettext("Edit activity") %>
         </.button>
       <% end %>
-    <% end %>
+    </div>
+    <!-- Actions (mobile) -->
+    <div class="sm:hidden block">
+      <.dropdown id="activity-actions-dropdown" items={generate_dropdown_items(@enrolled?, @has_permissions?, @activity, @socket)}>
+        <:wrapper>
+          <.button icon_variant={:solid} color={:white} icon={:ellipsis_horizontal} />
+        </:wrapper>
+      </.dropdown>
+    </div>
   </:actions>
-  <div class="flex flex-row gap-12 mx-4 max-w-5xl sm:mx-6 lg:mx-8">
-    <div class="flex flex-col gap-4">
-      <div class="flex flex-row gap-16">
+  <!-- Activity image (mobile) -->
+  <div class="sm:hidden pb-8 px-8 sm:px-6 flex w-full justify-center">
+    <div class="w-full aspect-square object-cover">
+      <%= if @activity.image do %>
+        <img class="h-full w-full object-cover rounded-xl border" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+      <% else %>
+        <.gradient class="rounded-xl" seed={@activity.id} />
+      <% end %>
+    </div>
+  </div>
+  <div class="grid grid-cols-5 gap-12 mx-4 max-w-5xl sm:mx-6 lg:mx-8">
+    <div class="sm:col-span-3 col-span-5 flex flex-col gap-4">
+      <div class="flex flex-row justify-between">
         <!-- Date -->
         <%= if @activity.start do %>
           <div class="flex items-center gap-2">
@@ -47,6 +67,7 @@
                 </p>
               </div>
             <% end %>
+            <!-- TODO: Support for multi-day activities -->
           </div>
         <% end %>
         <!-- Capacity -->
@@ -68,176 +89,95 @@
           </div>
         <% end %>
       </div>
+      <!-- Enrollment (desktop) -->
+      <%= if @enrolled? do %>
+        <div class="sm:block hidden">
+          <div class="flex flex-row items-center gap-2">
+            <.icon name={:check_badge} solid class="h-5 w-5 text-gray-700" />
+            <div>
+              <h2 class="flex-1 select-none truncate text-md font-semibold text-gray-900">
+                <%= gettext("You are going!") %>
+              </h2>
+              <p>
+                <%= gettext("If you can't go please unenroll") %>
+                <.link patch={Routes.activity_show_path(@socket, :unenroll, @activity)}>
+                  <span class="text-primary-500 underline"><%= gettext("here") %></span>.
+                </.link>
+              </p>
+            </div>
+          </div>
+        </div>
+      <% end %>
       <!-- About -->
       <div>
         <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900">
           <%= gettext("About") %>
         </h2>
-        <p>
+        <p class="flex gap-2">
           <%= text_to_html(@activity.description) %>
         </p>
       </div>
+      <!-- Action buttons (mobile) -->
+      <div class="sm:hidden block pt-8">
+        <!-- Register button -->
+        <.button :if={not @max_enrolled? and !@enrolled?} icon={:ticket} size={:lg} patch={Routes.activity_show_path(@socket, :enroll, @activity)} disabled={@enrolled?} full_width>
+          <%= gettext("Register") %>
+        </.button>
+        <!-- Ticket and unenroll buttons -->
+        <div :if={@enrolled?} class="grid grid-cols-3 gap-2">
+          <.button class="col-span-2" patch={Routes.activity_show_path(@socket, :ticket, @activity)} icon={:ticket} size={:lg} full_width>
+            <%= gettext("View ticket") %>
+          </.button>
+          <.button patch={Routes.activity_show_path(@socket, :unenroll, @activity)} color={:white} icon={:user_minus} size={:lg} full_width></.button>
+        </div>
+      </div>
     </div>
-    <!-- Activity image -->
-    <div class="h-[40%] object-cover">
+    <!-- Activity image (desktop) -->
+    <div class="sm:block hidden col-span-2 w-full object-cover">
       <%= if @activity.image do %>
-        <img class="h-full w-full object-cover" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+        <img class="h-full w-full object-cover rounded-xl border" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
       <% else %>
-        <.gradient seed={@activity.id} />
+        <.gradient class="!h-[50vh] rounded-xl border" seed={@activity.id} />
       <% end %>
     </div>
   </div>
 </.page>
-<!--
-<div class="my-4">
-  <div class="bg-white">
-    <div class="flex justify-between px-4 py-5 sm:px-6">
-      <div class="my-4 w-full items-center gap-x-4 lg:flex">
-        <div class="flex-1">
-          <h1 class="text-2xl font-bold text-zinc-900 sm:text-3xl">
-            <%= @activity.title %>
-          </h1>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-col border-t border-zinc-200 1.5xl:flex-row">
-      <div class="w-full px-4 py-5 sm:px-6">
-        <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
-          <div class="col-span-2 sm:col-span-1">
-            <dt class="font medium text-lg leading-6 text-zinc-900">
-              <%= gettext("Preview activity") %>
-            </dt>
-            <dd class="mt-1 text-sm text-zinc-600">
-              <%= gettext("Check here every detail of this activity") %>
-            </dd>
-          </div>
-
-          <div class={
-            if @has_permissions? do
-              "col-span-1"
-            else
-              "col-span-2"
-            end
-          }>
-            <dt class="text-sm font-medium text-zinc-500">
-              <%= gettext("Enrollments") %>
-            </dt>
-            <dd class="mt-1 flex text-sm text-zinc-900">
-              <div class="flex w-full">
-                <.icon name={:users} solid class="h-5 w-5 text-zinc-400" />
-                <div class="pl-2.5">
-                  <%= @enrolled %> / <%= @activity.maximum_entries %>
-                </div>
-              </div>
-            </dd>
-          </div>
-
-          <div class="col-span-2">
-            <dt class="grid grid-cols-2 items-center">
-              <div class="text-sm font-medium text-zinc-500">
-                <%= gettext("Date and location") %>
-              </div>
-            </dt>
-            <dd class="mt-1 flex flex-col gap-x-2 gap-y-4 text-sm text-zinc-900">
-              <div class="flex flex-col gap-x-2 gap-y-2 md:flex-row">
-                <div class="flex gap-x-2">
-                  <div class="text-zinc-900x inset-y-0 my-auto flex w-full gap-y-4 text-sm">
-                    <.icon name={:calendar} solid class="h-5 w-5 text-zinc-400" />
-                    <p class="block pl-1.5 max-w-6xl">
-                      <%= display_date(@activity.start) %>
-                    </p>
-                  </div>
-                </div>
-                <div class="inset-y-0 my-auto flex md:pl-3">
-                  <.icon name={:clock} solid class="h-5 w-5 text-zinc-400" />
-                  <p class="block pl-1.5 max-w-6xl">
-                    <%= display_time(@activity.start) %> - <%= display_time(@activity.finish) %>
-                  </p>
-                </div>
-                <div class="flex text-sm md:pl-3">
-                  <%= if @activity.location do %>
-                    <.icon name={:map_pin} solid class="h-5 w-5 text-zinc-400" />
-                    <.link navigate={@activity.location.url} data-confirm={gettext("Are you sure?")} class="pl-1.5 text-blue-500">
-                      <%= @activity.location.name %>
-                    </.link>
-                  <% else %>
-                    <%= if @activity.location do %>
-                      <div class="pl-1.5 text-zinc-900">
-                        <%= @activity.location.name %>
-                      </div>
-                    <% end %>
-                  <% end %>
-                </div>
-              </div>
-            </dd>
-          </div>
-          <div class="col-span-2">
-            <dt class="text-sm font-medium text-zinc-500">
-              <%= gettext("Description") %>
-            </dt>
-            <dd class="prose prose-slate mt-1 max-w-full text-sm text-zinc-900 prose-headings:underline prose-a:text-blue-500">
-              <%= @activity.description %>
-            </dd>
-          </div>
-          <div class="col-span-2">
-            <%= if @enrolled? do %>
-              <dt class="text-sm font-medium text-zinc-500">
-                <%= gettext("Your already enrolled in the activity, below is your QRCode") %>
-              </dt>
-              <dd class="mt-1 flex text-sm text-zinc-900">
-                <%= draw_qr_code(@activity, @current_user, @socket) |> raw %>
-              </dd>
-              <dd class="mt-1 flex text-sm text-zinc-900 flex-row space-x-1">
-                <span>
-                  <%= gettext("If you can't go please") %>
-                </span>
-                <button class="text-blue-500" phx-click="unenroll" phx-disable-with={gettext("Unenrolling...")} phx-throttle="0">
-                  <%= gettext("Unenroll") %>
-                </button>
-              </dd>
-            <% else %>
-              <%= if not @max_enrolled? do %>
-                <div class="flex flex-col">
-                  <dt class="text-sm font-medium text-zinc-500">
-                    <%= gettext("You are not enrolled in this activity") %>
-                  </dt>
-                  <%= if @is_authenticated? do %>
-                    <button
-                      phx-click="enroll"
-                      phx-disable-with={gettext("Enrolling...")}
-                      phx-throttle="0"
-                      class="w-fit mt-1 rounded-md bg-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500"
-                    >
-                      <%= gettext("Enroll") %>
-                    </button>
-                  <% else %>
-                    <button phx-click="must-login" class="w-fit mt-1 rounded-md bg-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500">
-                      <%= gettext("Enroll") %>
-                    </button>
-                  <% end %>
-                </div>
-              <% end %>
-            <% end %>
-          </div>
-        </dl>
-      </div>
+<!-- Ticket show modal -->
+<.modal :if={@live_action in [:ticket] and @enrolled?} class="!w-min" id="ticket-modal" show on_cancel={JS.patch(Routes.activity_show_path(@socket, :show, @activity))}>
+  <div class="w-full flex flex-col gap-2 justify-center text-center">
+    <p class="text-md font-semibold text-gray-900">
+      <%= gettext("Show this code to the staff present at the activity to register your presence.") %>
+    </p>
+    <%= draw_ticket_qr_code(@activity, @current_user, @socket) |> raw %>
+  </div>
+</.modal>
+<!-- Enrollment modal -->
+<.modal :if={@live_action in [:enroll, :unenroll]} id="action-confirm-modal" show on_cancel={JS.patch(Routes.activity_show_path(@socket, :show, @activity))}>
+  <div class="flex flex-col">
+    <h1 class="flex-1 select-none text-lg font-semibold text-gray-900">
+      <%= display_action_goal_confirm_title(@live_action) %>
+    </h1>
+    <p class="mt-4">
+      <%= display_action_goal_confirm_description(@live_action) %>
+    </p>
+    <div class="mt-8 flex flex-row">
+      <.button patch={Routes.activity_show_path(@socket, :show, @activity)} class="mr-2" size={:lg} icon={:x_circle} color={:white} full_width><%= gettext("Cancel") %></.button>
+      <.button
+        phx-click="confirm"
+        class="ml-2"
+        size={:lg}
+        icon={:check_circle}
+        color={
+          if @live_action == :unenroll do
+            :danger
+          else
+            :success
+          end
+        }
+        full_width
+      >
+        <%= gettext("Confirm") %>
+      </.button>
     </div>
   </div>
-</div>
-
-<div class="flex flex-row space-x-1">
-  <%= if @has_permissions? do %>
-    <.link patch={Routes.activity_edit_path(@socket, :edit, @activity.organization_id, @activity)} class="button">
-      <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-        <.icon name={:pencil} solid class="mr-3 w-5 h-5 text-zinc-400" /> Edit
-      </div>
-    </.link>
-    <%= link to: "#", phx_click: "delete", phx_value_id: @activity.id, data: [confirm: "Are you sure?"] do %>
-      <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-        <.icon name={:trash} solid class="mr-3 w-5 h-5 text-zinc-400" /> Delete
-      </div>
-    <% end %>
-  <% end %>
-</div>
--->
+</.modal>
diff --git a/lib/atomic_web/router.ex b/lib/atomic_web/router.ex
index 9843a8c8d..e09938874 100644
--- a/lib/atomic_web/router.ex
+++ b/lib/atomic_web/router.ex
@@ -100,6 +100,10 @@ defmodule AtomicWeb.Router do
       live "/announcements", AnnouncementLive.Index, :index
 
       live "/activities/:id", ActivityLive.Show, :show
+      live "/activities/:id/ticket", ActivityLive.Show, :ticket
+      live "/activities/:id/enroll", ActivityLive.Show, :enroll
+      live "/activities/:id/unenroll", ActivityLive.Show, :unenroll
+
       live "/organizations/:organization_id", OrganizationLive.Show, :show
       live "/announcements/:id", AnnouncementLive.Show, :show
 
diff --git a/lib/atomic_web/views/helpers.ex b/lib/atomic_web/views/helpers.ex
index 75bdce693..0f48caed2 100644
--- a/lib/atomic_web/views/helpers.ex
+++ b/lib/atomic_web/views/helpers.ex
@@ -326,23 +326,6 @@ defmodule AtomicWeb.Helpers do
     end
   end
 
-  def draw_qr_code(activity, user, _socket) do
-    internal_route = "/redeem/#{activity.id}/#{user.id}/confirm"
-    url = build_url() <> internal_route
-
-    url
-    |> QRCodeEx.encode()
-    |> QRCodeEx.svg(color: "#1F2937", width: 295, background_color: :transparent)
-  end
-
-  defp build_url do
-    if Mix.env() == :dev do
-      "http://localhost:4000"
-    else
-      "https://#{Application.fetch_env!(:atomic, AtomicWeb.Endpoint)[:url][:host]}"
-    end
-  end
-
   def build_path(current_path, params) do
     current_path
     |> URI.parse()
diff --git a/priv/repo/migrations/20221104160002_create_enrollments.exs b/priv/repo/migrations/20221104160002_create_enrollments.exs
index c1133b7ef..af0264dd0 100644
--- a/priv/repo/migrations/20221104160002_create_enrollments.exs
+++ b/priv/repo/migrations/20221104160002_create_enrollments.exs
@@ -12,5 +12,7 @@ defmodule Atomic.Repo.Migrations.CreateEnrollments do
 
       timestamps()
     end
+
+    create unique_index(:enrollments, [:activity_id, :user_id], name: :unique_enrollments)
   end
 end
diff --git a/priv/repo/seeds/accounts.exs b/priv/repo/seeds/accounts.exs
index 55bff19d9..fc7c3267c 100644
--- a/priv/repo/seeds/accounts.exs
+++ b/priv/repo/seeds/accounts.exs
@@ -4,7 +4,6 @@ defmodule Atomic.Repo.Seeds.Accounts do
   """
   alias Atomic.Accounts
   alias Atomic.Accounts.{Course, User}
-  alias Atomic.Organizations.Organization
   alias Atomic.Repo
 
   @masters File.read!("priv/fake/masters.txt") |> String.split("\n")
@@ -23,7 +22,6 @@ defmodule Atomic.Repo.Seeds.Accounts do
 
   def seed_users(characters, role) do
     courses = Repo.all(Course)
-    organizations = Repo.all(Organization)
 
     for character <- characters do
       email = (character |> String.downcase() |> String.replace(~r/\s*/, "")) <> "@mail.pt"
@@ -39,8 +37,7 @@ defmodule Atomic.Repo.Seeds.Accounts do
         "phone_number" => phone_number,
         "password" => "password1234",
         "role" => role,
-        "course_id" => Enum.random(courses).id,
-        "current_organization_id" => Enum.random(organizations).id
+        "course_id" => Enum.random(courses).id
       }
 
       case Accounts.register_user(user) do

From ed0ee8b07494ea94c788a09c13029f7254dd5838 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= <joaodlobo@gmail.com>
Date: Fri, 9 Aug 2024 21:34:01 +0100
Subject: [PATCH 08/39] refactor: activity pubsub

---
 lib/atomic/activities.ex                      | 53 +++++++++----------
 lib/atomic_web/live/activity_live/show.ex     | 29 ++++------
 .../live/activity_live/show.html.heex         |  2 +-
 3 files changed, 35 insertions(+), 49 deletions(-)

diff --git a/lib/atomic/activities.ex b/lib/atomic/activities.ex
index 501376e6b..917810e0c 100644
--- a/lib/atomic/activities.ex
+++ b/lib/atomic/activities.ex
@@ -9,6 +9,8 @@ defmodule Atomic.Activities do
   alias Atomic.Activities.Enrollment
   alias Atomic.Feed.Post
 
+  @pubsub Atomic.PubSub
+
   @doc """
   Returns the list of activities.
 
@@ -222,7 +224,7 @@ defmodule Atomic.Activities do
   end
 
   @doc """
-  Updates a activity.
+  Updates an activity and broadcasts the changes to all subscribed clients.
 
   ## Examples
 
@@ -234,10 +236,14 @@ defmodule Atomic.Activities do
 
   """
   def update_activity(%Activity{} = activity, attrs, after_save \\ &{:ok, &1}) do
-    activity
-    |> Activity.changeset(attrs)
-    |> Repo.update()
-    |> after_save(after_save)
+    result =
+      activity
+      |> Activity.changeset(attrs)
+      |> Repo.update()
+      |> after_save(after_save)
+
+    broadcast_activity_update(activity.id)
+    result
   end
 
   @doc """
@@ -505,7 +511,7 @@ defmodule Atomic.Activities do
   end
 
   @doc """
-  Creates an enrollment and broadcasts .
+  Creates an enrollment and broadcasts the activity change to all subscribed clients.
 
   ## Examples
 
@@ -522,7 +528,7 @@ defmodule Atomic.Activities do
     |> Repo.insert()
     |> case do
       {:ok, enrollment} ->
-        broadcast({:ok, enrollment}, :new_enrollment)
+        broadcast_activity_update(activity_id)
         {:ok, enrollment}
 
       {:error, changeset} ->
@@ -549,7 +555,7 @@ defmodule Atomic.Activities do
   end
 
   @doc """
-  Deletes a enrollment.
+  Deletes a enrollment and broadcasts the activity change to all subscribed clients.
 
   ## Examples
 
@@ -566,7 +572,7 @@ defmodule Atomic.Activities do
     |> Repo.delete()
     |> case do
       {:ok, _} ->
-        broadcast({1, nil}, :deleted_enrollment)
+        broadcast_activity_update(activity_id)
         {:ok, nil}
 
       {:error, changeset} ->
@@ -588,32 +594,21 @@ defmodule Atomic.Activities do
   end
 
   @doc """
-  Broadcasts an event to the pubsub.
+  Subscribes the caller to the specific activity's updates.
 
   ## Examples
 
-      iex> broadcast(:new_enrollment, enrollment)
-      {:ok, %Enrollment{}}
-
-      iex> broadcast(:deleted_enrollment, nil)
-      {:ok, nil}
-
+      iex> subscribe_to_activity_update(activity_id)
+      :ok
   """
-  def subscribe(topic) when topic in ["new_enrollment", "deleted_enrollment"] do
-    Phoenix.PubSub.subscribe(Atomic.PubSub, topic)
+  def subscribe_to_activity_update(activity_id) do
+    Phoenix.PubSub.subscribe(@pubsub, topic(activity_id))
   end
 
-  defp broadcast({:error, _reason} = error, _event), do: error
+  defp topic(activity_id), do: "activity:#{activity_id}"
 
-  defp broadcast({:ok, %Enrollment{} = enrollment}, event)
-       when event in [:new_enrollment] do
-    Phoenix.PubSub.broadcast!(Atomic.PubSub, "new_enrollment", {event, enrollment})
-    {:ok, enrollment}
-  end
-
-  defp broadcast({number, nil}, event)
-       when event in [:deleted_enrollment] do
-    Phoenix.PubSub.broadcast!(Atomic.PubSub, "deleted_enrollment", {event, nil})
-    {number, nil}
+  defp broadcast_activity_update(activity_id) do
+    activity = get_activity!(activity_id)
+    Phoenix.PubSub.broadcast(@pubsub, topic(activity_id), activity)
   end
 end
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index 1f403ab69..c1acb8785 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -11,8 +11,7 @@ defmodule AtomicWeb.ActivityLive.Show do
   @impl true
   def mount(%{"id" => id}, _session, socket) do
     if connected?(socket) do
-      Activities.subscribe("new_enrollment")
-      Activities.subscribe("deleted_enrollment")
+      Activities.subscribe_to_activity_update(id)
     end
 
     {:ok, socket |> assign(:id, id)}
@@ -84,23 +83,15 @@ defmodule AtomicWeb.ActivityLive.Show do
   end
 
   @impl true
-  def handle_info({event, _changes}, socket)
-      when event in [:new_enrollment, :deleted_enrollment] do
-    {:noreply, reload(socket, action: event)}
-  end
-
-  defp reload(socket, action: :new_enrollment) do
-    socket
-    |> assign(:enrolled, socket.assigns.enrolled + 1)
-    |> assign(:enrolled?, maybe_put_enrolled(socket))
-    |> assign(:max_enrolled?, Activities.verify_maximum_enrollments?(socket.assigns.id))
-  end
-
-  defp reload(socket, action: :deleted_enrollment) do
-    socket
-    |> assign(:enrolled, socket.assigns.enrolled - 1)
-    |> assign(:enrolled?, maybe_put_enrolled(socket))
-    |> assign(:max_enrolled?, Activities.verify_maximum_enrollments?(socket.assigns.id))
+  def handle_info(updated_activity, socket) do
+    {:noreply,
+     socket
+     |> assign(
+       :activity,
+       Map.put(updated_activity, :organization, socket.assigns.activity.organization)
+     )
+     |> assign(:enrolled?, maybe_put_enrolled(socket))
+     |> assign(:max_enrolled?, updated_activity.enrolled >= updated_activity.maximum_entries)}
   end
 
   defp maybe_put_enrolled(socket) when not socket.assigns.is_authenticated?, do: false
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index ccf2cfc91..3f562039b 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -74,7 +74,7 @@
         <div class="flex items-center gap-2">
           <.icon name={:user_group} solid class="h-5 w-5 text-gray-700" />
           <p class="font-medium">
-            <%= @enrolled %> / <%= @activity.maximum_entries %>
+            <%= @activity.enrolled %> / <%= @activity.maximum_entries %>
           </p>
         </div>
         <!-- Location -->

From 05df35bd51b876606b3f6bf9b7cf23103055d7e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= <joaodlobo@gmail.com>
Date: Fri, 9 Aug 2024 22:24:36 +0100
Subject: [PATCH 09/39] fix: enrollment limit issues

---
 lib/atomic/activities.ex                  |  2 +-
 lib/atomic/activities/enrollment.ex       |  8 ++++++--
 lib/atomic_web/live/activity_live/show.ex | 13 ++++++++++++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/lib/atomic/activities.ex b/lib/atomic/activities.ex
index 917810e0c..0aedc2ae3 100644
--- a/lib/atomic/activities.ex
+++ b/lib/atomic/activities.ex
@@ -568,7 +568,7 @@ defmodule Atomic.Activities do
   """
   def delete_enrollment(activity_id, %User{} = user) do
     get_enrollment!(activity_id, user.id)
-    |> Enrollment.changeset(%{})
+    |> Enrollment.delete_changeset()
     |> Repo.delete()
     |> case do
       {:ok, _} ->
diff --git a/lib/atomic/activities/enrollment.ex b/lib/atomic/activities/enrollment.ex
index 959227eb3..46640d87d 100644
--- a/lib/atomic/activities/enrollment.ex
+++ b/lib/atomic/activities/enrollment.ex
@@ -35,6 +35,12 @@ defmodule Atomic.Activities.Enrollment do
     |> validate_required(@required_fields)
   end
 
+  def delete_changeset(enrollment, attrs \\ %{}) do
+    enrollment
+    |> cast(attrs, @required_fields ++ @optional_fields)
+    |> prepare_changes(&update_activity_enrolled/1)
+  end
+
   defp validate_maximum_entries(changeset) do
     activity_id = get_field(changeset, :activity_id)
     activity = Activities.get_activity!(activity_id)
@@ -47,8 +53,6 @@ defmodule Atomic.Activities.Enrollment do
   end
 
   defp update_activity_enrolled(changeset) do
-    IO.inspect(changeset)
-
     if activity_id = get_field(changeset, :activity_id) do
       query = from Activity, where: [id: ^activity_id]
       value = if changeset.action == :insert, do: 1, else: -1
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index c1acb8785..ac3a15f10 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -84,6 +84,8 @@ defmodule AtomicWeb.ActivityLive.Show do
 
   @impl true
   def handle_info(updated_activity, socket) do
+    max_enrolled? = updated_activity.enrolled >= updated_activity.maximum_entries
+
     {:noreply,
      socket
      |> assign(
@@ -91,7 +93,16 @@ defmodule AtomicWeb.ActivityLive.Show do
        Map.put(updated_activity, :organization, socket.assigns.activity.organization)
      )
      |> assign(:enrolled?, maybe_put_enrolled(socket))
-     |> assign(:max_enrolled?, updated_activity.enrolled >= updated_activity.maximum_entries)}
+     |> assign(:max_enrolled?, max_enrolled?)
+     |> maybe_close_modal(max_enrolled? and socket.assigns.live_action == :enroll)}
+  end
+
+  defp maybe_close_modal(socket, condition) do
+    if condition do
+      push_patch(socket, to: Routes.activity_show_path(socket, :show, socket.assigns.activity))
+    else
+      socket
+    end
   end
 
   defp maybe_put_enrolled(socket) when not socket.assigns.is_authenticated?, do: false

From 67b39dcbb55fbb82add98bf75a524e4b37a89c17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= <joaodlobo@gmail.com>
Date: Sun, 8 Sep 2024 18:48:37 +0100
Subject: [PATCH 10/39] feat: add map

---
 lib/atomic_web/components/map.ex              |  2 +-
 lib/atomic_web/live/activity_live/show.ex     |  2 +-
 .../live/activity_live/show.html.heex         | 26 ++++++++-----------
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/lib/atomic_web/components/map.ex b/lib/atomic_web/components/map.ex
index a88c037d4..046708ea2 100644
--- a/lib/atomic_web/components/map.ex
+++ b/lib/atomic_web/components/map.ex
@@ -33,7 +33,7 @@ defmodule AtomicWeb.Components.Map do
 
   defp map_static(assigns) do
     ~H"""
-    <.link href={"https://www.google.com/maps/search/?api=1&query=#{@location}"} target="_blank" class="select-none overflow-hidden" style={"height: #{@height}px; width: #{generate_width(assigns)}"}>
+    <.link href={"https://www.google.com/maps/search/?api=1&query=#{@location}"} target="_blank" class="flex select-none overflow-hidden" style={"height: #{@height}px; width: #{generate_width(assigns)}"}>
       <iframe width={generate_width(assigns)} height={@height + 300} src={generate_request(assigns)} frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="border:0; margin-top: -150px;" class="pointer-events-none"></iframe>
     </.link>
     """
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index ac3a15f10..45aea997f 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -1,7 +1,7 @@
 defmodule AtomicWeb.ActivityLive.Show do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.Components.{Avatar, Dropdown, Gradient}
+  import AtomicWeb.Components.{Avatar, Dropdown, Gradient, Map}
 
   alias Atomic.Accounts
   alias Atomic.Activities
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index 3f562039b..ac6a2db2b 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -51,7 +51,7 @@
   </div>
   <div class="grid grid-cols-5 gap-12 mx-4 max-w-5xl sm:mx-6 lg:mx-8">
     <div class="sm:col-span-3 col-span-5 flex flex-col gap-4">
-      <div class="flex flex-row justify-between">
+      <div class="flex flex-row gap-16 justify-between sm:justify-normal">
         <!-- Date -->
         <%= if @activity.start do %>
           <div class="flex items-center gap-2">
@@ -77,17 +77,6 @@
             <%= @activity.enrolled %> / <%= @activity.maximum_entries %>
           </p>
         </div>
-        <!-- Location -->
-        <%= if @activity.location do %>
-          <div class="flex items-center gap-2">
-            <.icon name={:map_pin} solid class="h-5 w-5 text-gray-700" />
-            <.link href={@activity.location.url || "https://www.google.com/maps/search/?api=1&query=#{@activity.location.name}"} target="_blank">
-              <p class="font-medium">
-                <%= @activity.location.name %>
-              </p>
-            </.link>
-          </div>
-        <% end %>
       </div>
       <!-- Enrollment (desktop) -->
       <%= if @enrolled? do %>
@@ -113,9 +102,16 @@
         <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900">
           <%= gettext("About") %>
         </h2>
-        <p class="flex gap-2">
+        <div class="flex flex-col gap-2">
           <%= text_to_html(@activity.description) %>
-        </p>
+        </div>
+      </div>
+      <!-- Location -->
+      <div :if={@activity.location}>
+        <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900">
+          <%= gettext("Location") %>
+        </h2>
+        <.map location={@activity.location.name} />
       </div>
       <!-- Action buttons (mobile) -->
       <div class="sm:hidden block pt-8">
@@ -135,7 +131,7 @@
     <!-- Activity image (desktop) -->
     <div class="sm:block hidden col-span-2 w-full object-cover">
       <%= if @activity.image do %>
-        <img class="h-full w-full object-cover rounded-xl border" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+        <img class="max-h-fit w-full object-cover rounded-xl border" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
       <% else %>
         <.gradient class="!h-[50vh] rounded-xl border" seed={@activity.id} />
       <% end %>

From b454d160544867ad0a6abb54360f89680e6ab95e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= <joao@lobo.is>
Date: Mon, 9 Sep 2024 23:57:49 +0100
Subject: [PATCH 11/39] feat: improve location schema

---
 lib/atomic/location/location.ex                    |  6 +++---
 lib/atomic_web/components/map.ex                   |  6 ++++--
 .../live/activity_live/form_component.html.heex    |  2 +-
 lib/atomic_web/live/activity_live/show.html.heex   | 14 ++++++++++++--
 lib/atomic_web/live/partner_live/form_component.ex |  3 ++-
 priv/repo/seeds/feed.exs                           |  2 +-
 priv/repo/seeds/organizations.exs                  |  5 +++--
 priv/repo/seeds/partners.exs                       |  7 +------
 8 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/lib/atomic/location/location.ex b/lib/atomic/location/location.ex
index 3b6234f43..ec6d229ee 100644
--- a/lib/atomic/location/location.ex
+++ b/lib/atomic/location/location.ex
@@ -4,14 +4,14 @@ defmodule Atomic.Location do
   """
   use Atomic.Schema
 
-  @required_fields ~w(name)a
-  @optional_fields ~w(url)a
+  @required_fields ~w(name address)a
+  @optional_fields ~w()a
 
   @derive Jason.Encoder
   @primary_key false
   embedded_schema do
     field :name, :string
-    field :url, :string
+    field :address, :string
   end
 
   def changeset(location, attrs) do
diff --git a/lib/atomic_web/components/map.ex b/lib/atomic_web/components/map.ex
index 046708ea2..55a2131ed 100644
--- a/lib/atomic_web/components/map.ex
+++ b/lib/atomic_web/components/map.ex
@@ -23,6 +23,8 @@ defmodule AtomicWeb.Components.Map do
     default: false,
     doc: "If true, the map will be interactive and show controls"
 
+  attr :class, :string, doc: "Additional classes to be added to the map"
+
   def map(assigns) do
     if assigns[:controls] do
       map_interactive(assigns)
@@ -33,7 +35,7 @@ defmodule AtomicWeb.Components.Map do
 
   defp map_static(assigns) do
     ~H"""
-    <.link href={"https://www.google.com/maps/search/?api=1&query=#{@location}"} target="_blank" class="flex select-none overflow-hidden" style={"height: #{@height}px; width: #{generate_width(assigns)}"}>
+    <.link href={"https://www.google.com/maps/search/?api=1&query=#{@location}"} target="_blank" class={"#{@class} flex select-none overflow-hidden"} style={"height: #{@height}px; width: #{generate_width(assigns)}"}>
       <iframe width={generate_width(assigns)} height={@height + 300} src={generate_request(assigns)} frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="border:0; margin-top: -150px;" class="pointer-events-none"></iframe>
     </.link>
     """
@@ -41,7 +43,7 @@ defmodule AtomicWeb.Components.Map do
 
   defp map_interactive(assigns) do
     ~H"""
-    <iframe width={generate_width(assigns)} height={@height} src={generate_request(assigns)} frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
+    <iframe width={generate_width(assigns)} height={@height} src={generate_request(assigns)} class={@class} frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
     """
   end
 
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 6ba98a7b4..797d03eea 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -41,7 +41,7 @@
             </div>
 
             <div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
-              <.field type="url" field={fl[:url]} label="URL" placeholder="Choose an URL" />
+              <.field type="text" field={fl[:address]} label="Address" placeholder="Address" required />
             </div>
           </.inputs_for>
         </div>
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index ac6a2db2b..a1fe21db9 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -50,7 +50,7 @@
     </div>
   </div>
   <div class="grid grid-cols-5 gap-12 mx-4 max-w-5xl sm:mx-6 lg:mx-8">
-    <div class="sm:col-span-3 col-span-5 flex flex-col gap-4">
+    <div class="sm:col-span-3 col-span-5 flex flex-col gap-6">
       <div class="flex flex-row gap-16 justify-between sm:justify-normal">
         <!-- Date -->
         <%= if @activity.start do %>
@@ -111,7 +111,17 @@
         <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900">
           <%= gettext("Location") %>
         </h2>
-        <.map location={@activity.location.name} />
+        <div class="pb-4">
+          <p>
+            <%= @activity.location.name %>
+          </p>
+          <p class="text-sm text-gray-600">
+            <%= @activity.location.address %>
+          </p>
+        </div>
+        <figure class="border rounded-xl">
+          <.map location={@activity.location.address} class="rounded-xl" />
+        </figure>
       </div>
       <!-- Action buttons (mobile) -->
       <div class="sm:hidden block pt-8">
diff --git a/lib/atomic_web/live/partner_live/form_component.ex b/lib/atomic_web/live/partner_live/form_component.ex
index 1e9402213..d3e8867a9 100644
--- a/lib/atomic_web/live/partner_live/form_component.ex
+++ b/lib/atomic_web/live/partner_live/form_component.ex
@@ -17,7 +17,8 @@ defmodule AtomicWeb.PartnerLive.FormComponent do
             <.field type="text" help_text={gettext("A brief description of the partner")} field={f[:description]} placeholder="Description" required />
             <.field type="textarea" help_text={gettext("Benefits of the partnership")} field={f[:benefits]} placeholder="Benefits" required />
             <.inputs_for :let={location_form} field={f[:location]}>
-              <.field field={location_form[:name]} label="Address" type="text" placeholder="Address" help_text={gettext("Address of the partner")} required />
+              <.field field={location_form[:name]} label="Location name" type="text" placeholder="Name" help_text={gettext("Location name")} required />
+              <.field field={location_form[:address]} label="Address" type="text" placeholder="Address" help_text={gettext("Address of the partner")} required />
             </.inputs_for>
             <h2 class="mt-8 mb-2 w-full border-b pb-2 text-lg font-semibold text-gray-900"><%= gettext("Socials") %></h2>
             <div class="grid w-full gap-x-4 sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4">
diff --git a/priv/repo/seeds/feed.exs b/priv/repo/seeds/feed.exs
index cdc2a161f..25ce9a84a 100644
--- a/priv/repo/seeds/feed.exs
+++ b/priv/repo/seeds/feed.exs
@@ -56,7 +56,7 @@ defmodule Atomic.Repo.Seeds.Feed do
       description: Faker.Lorem.paragraph(),
       start: build_start_date(i),
       finish: build_finish_date(i),
-      location: location,
+      location: %{name: Faker.Company.name(), address: Faker.Address.street_address()},
       minimum_entries: Enum.random(1..10),
       maximum_entries: Enum.random(11..20),
       organization_id: organization_id,
diff --git a/priv/repo/seeds/organizations.exs b/priv/repo/seeds/organizations.exs
index 2aaf5fea8..cab299283 100644
--- a/priv/repo/seeds/organizations.exs
+++ b/priv/repo/seeds/organizations.exs
@@ -27,8 +27,9 @@ defmodule Atomic.Repo.Seeds.Organizations do
       description:
         "O CeSIUM é um grupo de estudantes voluntários, que tem como objetivo representar e promover o curso de Engenharia Informática 💾 na UMinho 🎓",
       location: %{
-        name: "Departamento de Informática, Campus de Gualtar, Universidade do Minho",
-        url: "https://cesium.di.uminho.pt"
+        name: "Departamento de Informática, Universidade do Minho",
+        address:
+          "Departamento de Informática, UMinho, Campus de Gualtar, 4710-057 Braga, Portugal"
       }
     }
     |> Repo.insert!()
diff --git a/priv/repo/seeds/partners.exs b/priv/repo/seeds/partners.exs
index 0d50bb0bd..e76e359df 100644
--- a/priv/repo/seeds/partners.exs
+++ b/priv/repo/seeds/partners.exs
@@ -18,11 +18,6 @@ defmodule Atomic.Repo.Seeds.Partners do
   def seed_partners do
     organizations = Repo.all(Organization)
 
-    location = %{
-      name: Faker.Address.city(),
-      url: Faker.Internet.url()
-    }
-
     socials = %{
       instagram: Faker.Internet.slug(),
       facebook: Faker.Internet.slug(),
@@ -40,7 +35,7 @@ defmodule Atomic.Repo.Seeds.Partners do
           description: Enum.join(Faker.Lorem.paragraphs(2), "\n"),
           benefits: Enum.join(Faker.Lorem.paragraphs(5), "\n"),
           organization_id: organization.id,
-          location: location,
+          location: %{name: Faker.Company.name(), address: Faker.Address.street_address()},
           socials: socials
         })
         |> Repo.insert!()

From d79339560cf798c78819e561caae9d9196c6d72c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= <joao@lobo.is>
Date: Thu, 12 Sep 2024 20:13:18 +0100
Subject: [PATCH 12/39] feat: participant avatars

---
 lib/atomic/activities.ex                      | 16 +++++++++++++
 lib/atomic_web/components/map.ex              |  2 +-
 lib/atomic_web/live/activity_live/show.ex     |  2 +-
 .../live/activity_live/show.html.heex         | 23 ++++++++++++++++++-
 priv/repo/seeds/enrollments.exs               |  2 +-
 priv/repo/seeds/feed.exs                      |  2 +-
 6 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/lib/atomic/activities.ex b/lib/atomic/activities.ex
index 0aedc2ae3..3368f2b3b 100644
--- a/lib/atomic/activities.ex
+++ b/lib/atomic/activities.ex
@@ -345,6 +345,22 @@ defmodule Atomic.Activities do
     |> Repo.all()
   end
 
+  @doc """
+  Returns the list of participants in an activity.
+
+  ## Examples
+
+      iex> list_activity_participants(activity_id)
+      [%Enrollment{}, ...]
+  """
+  def list_activity_participants(id) do
+    from(u in User,
+      join: e in assoc(u, :enrollments),
+      where: e.activity_id == ^id
+    )
+    |> Repo.all()
+  end
+
   @doc """
   Returns the list of activities a user has enrolled in.
 
diff --git a/lib/atomic_web/components/map.ex b/lib/atomic_web/components/map.ex
index 55a2131ed..8256335dc 100644
--- a/lib/atomic_web/components/map.ex
+++ b/lib/atomic_web/components/map.ex
@@ -36,7 +36,7 @@ defmodule AtomicWeb.Components.Map do
   defp map_static(assigns) do
     ~H"""
     <.link href={"https://www.google.com/maps/search/?api=1&query=#{@location}"} target="_blank" class={"#{@class} flex select-none overflow-hidden"} style={"height: #{@height}px; width: #{generate_width(assigns)}"}>
-      <iframe width={generate_width(assigns)} height={@height + 300} src={generate_request(assigns)} frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="border:0; margin-top: -150px;" class="pointer-events-none"></iframe>
+      <iframe width={generate_width(assigns)} height={@height + 300} src={generate_request(assigns)} frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="border:0; margin-top: -150px;" class="pointer-events-none" tabindex="-1"></iframe>
     </.link>
     """
   end
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index 45aea997f..93a01b3d0 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -26,7 +26,7 @@ defmodule AtomicWeb.ActivityLive.Show do
      |> assign(:page_title, "#{activity.title}")
      |> assign(:current_page, :activities)
      |> assign(:activity, activity)
-     |> assign(:enrolled, activity.enrolled)
+     |> assign(:participants, Activities.list_activity_participants(id))
      |> assign(:enrolled?, maybe_put_enrolled(socket))
      |> assign(:max_enrolled?, Activities.verify_maximum_enrollments?(id))
      |> then(fn complete_socket ->
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index a1fe21db9..ed8306b38 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -138,13 +138,34 @@
         </div>
       </div>
     </div>
-    <!-- Activity image (desktop) -->
     <div class="sm:block hidden col-span-2 w-full object-cover">
+      <!-- Activity image (desktop) -->
       <%= if @activity.image do %>
         <img class="max-h-fit w-full object-cover rounded-xl border" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
       <% else %>
         <.gradient class="!h-[50vh] rounded-xl border" seed={@activity.id} />
       <% end %>
+      <!-- Activity participants (desktop) -->
+      <div :if={@activity.enrolled > 0} class="pt-4">
+        <h2 class="mb-2 flex-1 select-none truncate text-md font-semibold text-gray-900">
+          <%= gettext("%{enrolled} Going", enrolled: @activity.enrolled) %>
+        </h2>
+        <.avatar_group
+          size={:xs}
+          items={
+            @participants
+            |> Enum.take(6)
+            |> Enum.map(fn p -> %{name: p.name} end)
+            |> then(fn avatars ->
+              if length(@participants) > 6 do
+                Enum.concat(avatars, [%{name: "+#{length(@participants) - 6}", auto_generate_initials: false}])
+              else
+                avatars
+              end
+            end)
+          }
+        />
+      </div>
     </div>
   </div>
 </.page>
diff --git a/priv/repo/seeds/enrollments.exs b/priv/repo/seeds/enrollments.exs
index 9a8f37abf..3898293a3 100644
--- a/priv/repo/seeds/enrollments.exs
+++ b/priv/repo/seeds/enrollments.exs
@@ -18,7 +18,7 @@ defmodule Atomic.Repo.Seeds.Enrollments do
         activities = Repo.all(Activity)
 
         for user <- users do
-          for _ <- 1..Enum.random(1..2) do
+          for _ <- 1..Enum.random(2..6) do
             Activities.create_enrollment(
               Enum.random(activities).id,
               user
diff --git a/priv/repo/seeds/feed.exs b/priv/repo/seeds/feed.exs
index 25ce9a84a..1bd3f18ec 100644
--- a/priv/repo/seeds/feed.exs
+++ b/priv/repo/seeds/feed.exs
@@ -60,7 +60,7 @@ defmodule Atomic.Repo.Seeds.Feed do
       minimum_entries: Enum.random(1..10),
       maximum_entries: Enum.random(11..20),
       organization_id: organization_id,
-      enrolled: Enum.random(0..10)
+      enrolled: 0
     }
     |> Activities.create_activity_with_post()
     |> case do

From 2f6821c5d4484ae18be4c2c0323d031b6392b0d2 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Fri, 27 Sep 2024 15:55:01 +0100
Subject: [PATCH 13/39] feat: add page component to edit page

---
 lib/atomic_web/components/forms.ex            | 59 +++++++++++--------
 .../live/activity_live/edit.html.heex         |  8 ++-
 .../activity_live/form_component.html.heex    | 58 +++++++++++-------
 lib/atomic_web/live/activity_live/show.ex     | 16 +++--
 .../live/activity_live/show.html.heex         |  2 +-
 5 files changed, 90 insertions(+), 53 deletions(-)

diff --git a/lib/atomic_web/components/forms.ex b/lib/atomic_web/components/forms.ex
index 2b224f0f9..e4bf7ab62 100644
--- a/lib/atomic_web/components/forms.ex
+++ b/lib/atomic_web/components/forms.ex
@@ -52,7 +52,7 @@ defmodule AtomicWeb.Components.Forms do
 
   attr :errors, :list,
     default: [],
-    doc: "A list of erros to be displayed. If not provided, it will be generated."
+    doc: "A list of errors to be displayed. If not provided, it will be generated."
 
   attr :checked, :any, doc: "The checked flag for checkboxes and checkboxes groups."
 
@@ -82,6 +82,8 @@ defmodule AtomicWeb.Components.Forms do
   attr :class, :string, default: nil, doc: "The class to be added to the input."
   attr :wrapper_class, :string, default: nil, doc: "The wrapper div class."
   attr :label_class, :string, default: nil, doc: "Extra class for the label."
+  attr :error_class, :string, default: nil, doc: "Extra error class for the input."
+  attr :error_label_class, :string, default: nil, doc: "Extra class for the error message."
   attr :help_text, :string, default: nil, doc: "Context/help for the input."
 
   attr :required, :boolean,
@@ -113,16 +115,16 @@ defmodule AtomicWeb.Components.Forms do
       assign_new(assigns, :checked, fn -> HTML.Form.normalize_value("checkbox", value) end)
 
     ~H"""
-    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
+    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class} error_class={@error_class}>
       <label class={["atomic-checkbox-label", @label_class]}>
         <input type="hidden" name={@name} value="false" />
-        <input type="checkbox" id={@id} name={@name} value="true" checked={@checked} required={@required} class={["atomic-checkbox", @class]} {@rest} />
+        <input type="checkbox" id={@id} name={@name} value="true" checked={@checked} required={@required} class={["atomic-checkbox", @class, @errors != [] && @error_class]} {@rest} />
         <div class={[@required && "atomic-label--required"]}>
           <%= @label %>
         </div>
       </label>
 
-      <.field_error :for={msg <- @errors}><%= msg %></.field_error>
+      <.field_error :for={msg <- @errors} class={@error_label_class}><%= msg %></.field_error>
       <.field_help_text help_text={@help_text} />
     </.field_wrapper>
     """
@@ -130,17 +132,17 @@ defmodule AtomicWeb.Components.Forms do
 
   def field(%{type: "select"} = assigns) do
     ~H"""
-    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
+    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class} error_class={@error_class}>
       <.field_label required={@required} for={@id} class={@label_class}>
         <%= @label %>
       </.field_label>
 
-      <select id={@id} name={@name} class={["atomic-select", @class]} multiple={@multiple} required={@required} {@rest}>
+      <select id={@id} name={@name} class={["atomic-select", @class, @errors != [] && @error_class]} multiple={@multiple} required={@required} {@rest}>
         <option :if={@prompt} value=""><%= @prompt %></option>
         <%= HTML.Form.options_for_select(@options, @selected || @value) %>
       </select>
 
-      <.field_error :for={msg <- @errors}><%= msg %></.field_error>
+      <.field_error :for={msg <- @errors} class={@error_label_class}><%= msg %></.field_error>
       <.field_help_text help_text={@help_text} />
     </.field_wrapper>
     """
@@ -153,9 +155,9 @@ defmodule AtomicWeb.Components.Forms do
         <%= @label %>
       </.field_label>
 
-      <textarea id={@id} name={@name} class={["atomic-text-input", @class]} rows={@rows} required={@required} {@rest}><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
+      <textarea id={@id} name={@name} class={["atomic-text-input", @class, @errors != [] && @error_class]} rows={@rows} required={@required} {@rest}><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
 
-      <.field_error :for={msg <- @errors}><%= msg %></.field_error>
+      <.field_error :for={msg <- @errors} class={@error_label_class}><%= msg %></.field_error>
       <.field_help_text help_text={@help_text} />
     </.field_wrapper>
     """
@@ -166,11 +168,11 @@ defmodule AtomicWeb.Components.Forms do
       assign_new(assigns, :checked, fn -> HTML.Form.normalize_value("checkbox", value) end)
 
     ~H"""
-    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
+    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class} error_class={@error_class}>
       <label class={["atomic-switch-label", @label_class]}>
         <input type="hidden" name={@name} value="false" />
         <label class="atomic-switch">
-          <input type="checkbox" id={@id} name={@name} value="true" checked={@checked} required={@required} class={["sr-only peer", @class]} {@rest} />
+          <input type="checkbox" id={@id} name={@name} value="true" checked={@checked} required={@required} class={["sr-only peer", @class, @errors != [] && @error_class]} {@rest} />
 
           <span class="atomic-switch__fake-input"></span>
           <span class="atomic-switch__fake-input-bg"></span>
@@ -178,7 +180,7 @@ defmodule AtomicWeb.Components.Forms do
         <div><%= @label %></div>
       </label>
 
-      <.field_error :for={msg <- @errors}><%= msg %></.field_error>
+      <.field_error :for={msg <- @errors} class={@error_label_class}><%= msg %></.field_error>
       <.field_help_text help_text={@help_text} />
     </.field_wrapper>
     """
@@ -199,7 +201,7 @@ defmodule AtomicWeb.Components.Forms do
       end)
 
     ~H"""
-    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
+    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class} error_class={@error_class}>
       <.field_label required={@required} for={@id} class={@label_class}>
         <%= @label %>
       </.field_label>
@@ -209,7 +211,8 @@ defmodule AtomicWeb.Components.Forms do
         "atomic-checkbox-group",
         @group_layout == "row" && "atomic-checkbox-group--row",
         @group_layout == "col" && "atomic-checkbox-group--col",
-        @class
+        @class,
+        @errors != [] && @error_class
       ]}>
         <%= for {label, value} <- @options do %>
           <label class="atomic-checkbox-label">
@@ -227,7 +230,7 @@ defmodule AtomicWeb.Components.Forms do
         <% end %>
       </div>
 
-      <.field_error :for={msg <- @errors}><%= msg %></.field_error>
+      <.field_error :for={msg <- @errors} class={@error_label_class}><%= msg %></.field_error>
       <.field_help_text help_text={@help_text} />
     </.field_wrapper>
     """
@@ -237,7 +240,7 @@ defmodule AtomicWeb.Components.Forms do
     assigns = assign_new(assigns, :checked, fn -> nil end)
 
     ~H"""
-    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
+    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class} error_class={@error_class}>
       <.field_label required={@required} for={@id} class={@label_class}>
         <%= @label %>
       </.field_label>
@@ -246,7 +249,8 @@ defmodule AtomicWeb.Components.Forms do
         "atomic-radio-group",
         @group_layout == "row" && "atomic-radio-group--row",
         @group_layout == "col" && "atomic-radio-group--col",
-        @class
+        @class,
+        @errors != [] && @error_class
       ]}>
         <input type="hidden" name={@name} value="" />
         <%= for {label, value} <- @options do %>
@@ -265,7 +269,7 @@ defmodule AtomicWeb.Components.Forms do
         <% end %>
       </div>
 
-      <.field_error :for={msg <- @errors}><%= msg %></.field_error>
+      <.field_error :for={msg <- @errors} class={@error_label_class}><%= msg %></.field_error>
       <.field_help_text help_text={@help_text} />
     </.field_wrapper>
     """
@@ -279,17 +283,24 @@ defmodule AtomicWeb.Components.Forms do
 
   # All other inputs: text, datetime-local, url, password, etc.
   def field(assigns) do
-    assigns = assign(assigns, class: [assigns.class, get_class_for_type(assigns.type)])
+    assigns =
+      assign(assigns,
+        class: [
+          assigns.class,
+          get_class_for_type(assigns.type),
+          assigns.errors != [] && assigns.error_class
+        ]
+      )
 
     ~H"""
-    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class}>
+    <.field_wrapper errors={@errors} name={@name} class={@wrapper_class} error_class={@error_class}>
       <.field_label required={@required} for={@id} class={@label_class}>
         <%= @label %>
       </.field_label>
 
       <input type={@type} name={@name} id={@id} value={Phoenix.HTML.Form.normalize_value(@type, @value)} class={@class} required={@required} {@rest} />
 
-      <.field_error :for={msg <- @errors}><%= msg %></.field_error>
+      <.field_error :for={msg <- @errors} class={@error_label_class}><%= msg %></.field_error>
       <.field_help_text help_text={@help_text} />
     </.field_wrapper>
     """
@@ -297,13 +308,14 @@ defmodule AtomicWeb.Components.Forms do
 
   attr :class, :string, default: nil
   attr :errors, :list, default: []
+  attr :error_class, :string, default: nil
   attr :name, :string
   attr :rest, :global
   slot :inner_block, required: true
 
   defp field_wrapper(assigns) do
     ~H"""
-    <div phx-feedback-for={@name} {@rest} class={[@class, "atomic-form-field-wrapper", @errors != [] && "atomic-form-field-wrapper--error"]}>
+    <div phx-feedback-for={@name} {@rest} class={[@class, "atomic-form-field-wrapper", @errors != [] && !@error_class && "atomic-form-field-wrapper--error"]}>
       <%= render_slot(@inner_block) %>
     </div>
     """
@@ -323,11 +335,12 @@ defmodule AtomicWeb.Components.Forms do
     """
   end
 
+  attr :class, :string, default: nil
   slot :inner_block, required: true
 
   defp field_error(assigns) do
     ~H"""
-    <p class="atomic-form-field-error">
+    <p class={["atomic-form-field-error", @class]}>
       <%= render_slot(@inner_block) %>
     </p>
     """
diff --git a/lib/atomic_web/live/activity_live/edit.html.heex b/lib/atomic_web/live/activity_live/edit.html.heex
index e90ac2e2b..89e3a9456 100644
--- a/lib/atomic_web/live/activity_live/edit.html.heex
+++ b/lib/atomic_web/live/activity_live/edit.html.heex
@@ -1,3 +1,5 @@
-<div id="atomic-edit">
-  <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={@activity.id} title={@page_title} action={@live_action} activity={@activity} current_organization={@current_organization} return_to={Routes.activity_show_path(@socket, :show, @activity)} />
-</div>
+<.page title="Edit Activity">
+  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+    <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={@activity.id} title={@page_title} action={@live_action} activity={@activity} current_organization={@current_organization} return_to={Routes.activity_show_path(@socket, :show, @activity)} />
+  </div>
+</.page>
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 797d03eea..a10334cf2 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -1,58 +1,74 @@
 <div>
   <.form id="activity-form" for={@form} phx-change="validate" phx-submit="save" phx-target={@myself}>
-    <div class="relative py-5 border-b border-gray-200 sm:py-6">
-      <div class="flex flex-col gap-y-3 lg:self-end">
-        <div class="w-full">
-          <.field type="text" field={@form[:title]} placeholder="Choose a title" required />
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-col-reverse xl:flex-row">
+    <div class="flex flex-col gap-8 xl:flex-row">
       <div class="w-full xl:w-1/3">
         <.live_component module={ImageUploader} id="uploader" uploads={@uploads} target={@myself} />
       </div>
 
       <div class="flex flex-col">
-        <div class="flex pt-6 flex-col md:flex-row justify-center md:justify-start">
-          <div class="flex flex-col gap-y-1">
-            <.field type="datetime-local" field={@form[:start]} label="Starting date" required />
+        <div class="flex flex-col">
+          <div class="w-full">
+            <.field
+              type="text"
+              field={@form[:title]}
+              label_class="hidden"
+              wrapper_class="!bg-white"
+              autocomplete="off"
+              error_class="text-danger-600 placeholder-danger-700"
+              error_label_class="text-danger-700"
+              class="border-none focus:ring-0 shadow-none font-bold text-3xl !bg-white p-0"
+              placeholder="Activity Title"
+              required
+            />
           </div>
-
-          <div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
-            <.field type="datetime-local" field={@form[:finish]} label="Ending date" required />
+        </div>
+        <div class="flex w-full">
+          <div class="justify-top flex flex-col items-center pt-3">
+            <div class="size-3 bg-primary-600 m-1 rounded-full" />
+            <div class="border-l-primary-600 h-[3.25rem] border-l border-dashed" />
+            <div class="size-3 border-primary-600 m-1 rounded-full border" />
+          </div>
+          <div class="flex w-full flex-col">
+            <div class="text-nowrap flex items-baseline justify-between gap-y-1 p-1 pl-3">
+              <span>Start</span>
+              <.field type="datetime-local" field={@form[:start]} label_class="hidden" error_label_class="hidden" required />
+            </div>
+            <div class="text-nowrap flex items-baseline justify-between gap-y-1 p-1 pl-3">
+              <span>End</span>
+              <.field type="datetime-local" field={@form[:finish]} label_class="hidden" error_label_class="hidden" required />
+            </div>
           </div>
         </div>
 
-        <div class="flex mt-4 flex-col md:flex-row justify-center md:justify-start">
+        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
           <div class="flex flex-col gap-y-1">
             <.field type="number" field={@form[:minimum_entries]} label="Minimum entries" placeholder="Choose minimum entries" required />
           </div>
 
-          <div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
+          <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
             <.field type="number" field={@form[:maximum_entries]} label="Maximum entries" placeholder="Choose maximum entries" required />
           </div>
         </div>
 
-        <div class="flex mt-4 flex-col md:flex-row justify-center md:justify-start">
+        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
           <.inputs_for :let={fl} field={@form[:location]}>
             <div class="flex flex-col gap-y-1">
               <.field type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
             </div>
 
-            <div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
+            <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
               <.field type="text" field={fl[:address]} label="Address" placeholder="Address" required />
             </div>
           </.inputs_for>
         </div>
 
-        <div class="flex-grow mt-4">
+        <div class="mt-4 flex-grow">
           <.field type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
         </div>
       </div>
     </div>
 
-    <div class="flex-grow mt-4">
+    <div class="mt-4 flex-grow">
       <div class="flex justify-center lg:justify-end">
         <.button type="submit" phx-disable-with="Saving...">Save</.button>
       </div>
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index 93a01b3d0..d12068b88 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -28,6 +28,7 @@ defmodule AtomicWeb.ActivityLive.Show do
      |> assign(:activity, activity)
      |> assign(:participants, Activities.list_activity_participants(id))
      |> assign(:enrolled?, maybe_put_enrolled(socket))
+     |> assign(:enrollment_id, maybe_put_enrollment_id(socket))
      |> assign(:max_enrolled?, Activities.verify_maximum_enrollments?(id))
      |> then(fn complete_socket ->
        assign(complete_socket, :has_permissions?, has_permissions?(complete_socket))
@@ -105,6 +106,12 @@ defmodule AtomicWeb.ActivityLive.Show do
     end
   end
 
+  defp maybe_put_enrollment_id(socket) when not socket.assigns.is_authenticated?, do: nil
+
+  defp maybe_put_enrollment_id(socket) do
+    Activities.get_enrollment!(socket.assigns.id, socket.assigns.current_user.id)
+  end
+
   defp maybe_put_enrolled(socket) when not socket.assigns.is_authenticated?, do: false
 
   defp maybe_put_enrolled(socket) do
@@ -121,13 +128,12 @@ defmodule AtomicWeb.ActivityLive.Show do
       )
   end
 
-  def draw_ticket_qr_code(activity, user, _socket) do
-    internal_route = "/activities/#{activity.id}/ticket/#{user.id}/confirm"
-    url = build_url() <> internal_route
+  def draw_ticket_qr_code(enrollment_id) do
+    enrollment_id = enrollment_id.id
 
-    url
+    enrollment_id
     |> QRCodeEx.encode()
-    |> QRCodeEx.svg(color: "#111827", width: 295, background_color: :transparent)
+    |> QRCodeEx.svg(color: "#111827", width: 200, background_color: :transparent)
   end
 
   defp build_url do
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index ed8306b38..2b90eeefb 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -175,7 +175,7 @@
     <p class="text-md font-semibold text-gray-900">
       <%= gettext("Show this code to the staff present at the activity to register your presence.") %>
     </p>
-    <%= draw_ticket_qr_code(@activity, @current_user, @socket) |> raw %>
+    <%= draw_ticket_qr_code(@enrollment_id) |> raw %>
   </div>
 </.modal>
 <!-- Enrollment modal -->

From f179cba5447ee169b9b7607dcf9b3e3bb1b64a4a Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Sat, 25 Jan 2025 00:17:36 +0000
Subject: [PATCH 14/39] feat: add modal for description field in activities
 form

---
 lib/atomic_web/components/page.ex             |  2 +-
 .../live/activity_live/form_component.ex      | 10 +++++
 .../activity_live/form_component.html.heex    | 45 ++++++++++++++-----
 .../live/activity_live/new.html.heex          |  8 ++--
 lib/atomic_web/live/activity_live/show.ex     |  2 +-
 .../live/user_live/form_component.html.heex   |  2 +-
 6 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/lib/atomic_web/components/page.ex b/lib/atomic_web/components/page.ex
index 17b43fa51..f38303cc8 100644
--- a/lib/atomic_web/components/page.ex
+++ b/lib/atomic_web/components/page.ex
@@ -18,7 +18,7 @@ defmodule AtomicWeb.Components.Page do
     ~H"""
     <div class="flex min-h-full flex-col items-stretch justify-between lg:flex-row">
       <div class={"#{if @bottom_border, do: 'border-b', else: ''} min-h-[100vh] flex w-full flex-col bg-white lg:flex-row lg:border-r"}>
-        <main class="relative z-0 mb-10 flex-1 overflow-y-auto focus:outline-none xl:order-last">
+        <main class="relative z-50 mb-10 flex-1 overflow-y-auto focus:outline-none xl:order-last">
           <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
             <div class="my-6 flex min-w-0 flex-row items-center justify-between">
               <%= render_slot(@title_wrapper, @title) %>
diff --git a/lib/atomic_web/live/activity_live/form_component.ex b/lib/atomic_web/live/activity_live/form_component.ex
index ec6eb3176..6045f0a5c 100644
--- a/lib/atomic_web/live/activity_live/form_component.ex
+++ b/lib/atomic_web/live/activity_live/form_component.ex
@@ -6,6 +6,8 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
 
   import AtomicWeb.Components.Forms
 
+  alias Phoenix.LiveView.JS
+
   @impl true
   def update(%{activity: activity} = assigns, socket) do
     changeset = Activities.change_activity(activity)
@@ -14,6 +16,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
      socket
      |> assign(assigns)
      |> assign_form(changeset)
+     |> assign(:modal, false)
      |> allow_upload(:image, accept: Uploaders.Post.extension_whitelist(), max_entries: 1)}
   end
 
@@ -41,6 +44,13 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
     {:noreply, cancel_upload(socket, :image, ref)}
   end
 
+  @impl true
+  def handle_event("toggle_description_modal", _, socket) do
+    {:noreply,
+     socket
+     |> assign(:modal, not socket.assigns.modal)}
+  end
+
   defp save_activity(socket, :new, activity_params) do
     case Activities.create_activity_with_post(activity_params, &consume_image_data(socket, &1)) do
       {:ok, _activity} ->
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index a10334cf2..7967204c1 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -40,15 +40,23 @@
           </div>
         </div>
 
-        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
-          <div class="flex flex-col gap-y-1">
-            <.field type="number" field={@form[:minimum_entries]} label="Minimum entries" placeholder="Choose minimum entries" required />
-          </div>
-
-          <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
-            <.field type="number" field={@form[:maximum_entries]} label="Maximum entries" placeholder="Choose maximum entries" required />
+        <.button class="flex flex-col items-start px-2 py-2 rounded-lg bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+          <div class="w-full">
+            <.field
+              type="text"
+              field={@form[:description]}
+              label="Description"
+              readonly
+              required
+              label_class="text-left cursor-pointer"
+              wrapper_class="m-0"
+              autocomplete="off"
+              error_class="text-danger-600 placeholder-danger-700"
+              error_label_class="text-danger-700"
+              class="border-none focus:ring-0 shadow-none text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900"
+            />
           </div>
-        </div>
+        </.button>
 
         <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
           <.inputs_for :let={fl} field={@form[:location]}>
@@ -62,9 +70,26 @@
           </.inputs_for>
         </div>
 
-        <div class="mt-4 flex-grow">
-          <.field type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
+        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
+          <div class="flex flex-col gap-y-1">
+            <.field type="number" field={@form[:minimum_entries]} label="Minimum entries" placeholder="Choose minimum entries" required />
+          </div>
+
+          <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
+            <.field type="number" field={@form[:maximum_entries]} label="Maximum entries" placeholder="Choose maximum entries" required />
+          </div>
         </div>
+
+        <.modal :if={@modal} class="" id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
+          <div class="mt-4 flex-grow">
+            <.field class="min-h-10 resize-none" type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
+            <div class="w-full flex justify-end">
+              <.button class="text" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+                <span><%= gettext("Done") %></span>
+              </.button>
+            </div>
+          </div>
+        </.modal>
       </div>
     </div>
 
diff --git a/lib/atomic_web/live/activity_live/new.html.heex b/lib/atomic_web/live/activity_live/new.html.heex
index bd9884938..79ed87b78 100644
--- a/lib/atomic_web/live/activity_live/new.html.heex
+++ b/lib/atomic_web/live/activity_live/new.html.heex
@@ -1,3 +1,5 @@
-<div id="atomic-new">
-  <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={:new} title={@page_title} action={@live_action} activity={@activity} current_organization={@current_organization} return_to={Routes.activity_index_path(@socket, :index)} />
-</div>
+<.page title="New Activity" id="atomic-new">
+  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+    <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={:new} title={@page_title} action={@live_action} activity={@activity} current_organization={@current_organization} return_to={Routes.activity_index_path(@socket, :index)} />
+  </div>
+</.page>
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index d12068b88..122d0f663 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -37,7 +37,7 @@ defmodule AtomicWeb.ActivityLive.Show do
 
   @impl true
   def handle_event("confirm", _payload, socket) do
-    case socket.assigns.live_action do
+    case socket.assigns.llive_actionive_action do
       :enroll ->
         action_enroll(socket)
 
diff --git a/lib/atomic_web/live/user_live/form_component.html.heex b/lib/atomic_web/live/user_live/form_component.html.heex
index a4748b331..20344e73b 100644
--- a/lib/atomic_web/live/user_live/form_component.html.heex
+++ b/lib/atomic_web/live/user_live/form_component.html.heex
@@ -8,6 +8,6 @@
     <%= select(f, :course_id, @courses) %>
     <%= label(f, :profile_picture) %>
     <.live_file_input upload={@uploads.profile_picture} />
-    <%= submit("Save", phx_disable_with: "Saving...") %>
+    <%= submit("Save", phx_disable_with: "Saving...") %> Jonas
   </.form>
 </div>

From 40f9f890c0550968a913f97d55d009bb452b170a Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Sun, 26 Jan 2025 18:41:28 +0000
Subject: [PATCH 15/39] feat: implement description dynamic button and minor
 layout improvements

---
 lib/atomic_web/components/page.ex             |  2 +-
 lib/atomic_web/components/sidebar.ex          |  2 +-
 .../live/activity_live/form_component.ex      | 20 +++++++---
 .../activity_live/form_component.html.heex    | 40 +++++++++++--------
 4 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/lib/atomic_web/components/page.ex b/lib/atomic_web/components/page.ex
index f38303cc8..715b94dc9 100644
--- a/lib/atomic_web/components/page.ex
+++ b/lib/atomic_web/components/page.ex
@@ -18,7 +18,7 @@ defmodule AtomicWeb.Components.Page do
     ~H"""
     <div class="flex min-h-full flex-col items-stretch justify-between lg:flex-row">
       <div class={"#{if @bottom_border, do: 'border-b', else: ''} min-h-[100vh] flex w-full flex-col bg-white lg:flex-row lg:border-r"}>
-        <main class="relative z-50 mb-10 flex-1 overflow-y-auto focus:outline-none xl:order-last">
+        <main class="relative z-0 lg:z-40 mb-10 flex-1 overflow-y-auto focus:outline-none xl:order-last">
           <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
             <div class="my-6 flex min-w-0 flex-row items-center justify-between">
               <%= render_slot(@title_wrapper, @title) %>
diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index 083ac4b49..3cf33a3b0 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -43,7 +43,7 @@ defmodule AtomicWeb.Components.Sidebar do
           <.sidebar_dropdown current_user={@current_user} orientation={:down} />
         </div>
       </div>
-      <div id="sidebar-overlay" class="fixed inset-0 z-40 hidden cursor-pointer bg-black bg-opacity-50" phx-click={hide_mobile_sidebar()}></div>
+      <div id="sidebar-overlay" class="fixed inset-0 z-50 hidden cursor-pointer bg-black bg-opacity-50" phx-click={hide_mobile_sidebar()}></div>
       <!-- Sidebar Panel -->
       <div id="mobile-sidebar" class="fixed inset-0 z-50 hidden w-64" role="dialog" aria-modal="true">
         <div class="fixed inset-0 flex w-fit">
diff --git a/lib/atomic_web/live/activity_live/form_component.ex b/lib/atomic_web/live/activity_live/form_component.ex
index 6045f0a5c..e5db5cd46 100644
--- a/lib/atomic_web/live/activity_live/form_component.ex
+++ b/lib/atomic_web/live/activity_live/form_component.ex
@@ -9,25 +9,36 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
   alias Phoenix.LiveView.JS
 
   @impl true
-  def update(%{activity: activity} = assigns, socket) do
+  def update(%{activity: activity, action: action} = assigns, socket) do
     changeset = Activities.change_activity(activity)
+    initial_description = case action do
+      :new -> false
+      _ -> true
+    end
 
     {:ok,
      socket
      |> assign(assigns)
      |> assign_form(changeset)
      |> assign(:modal, false)
+     |> assign(:has_description?, initial_description)
      |> allow_upload(:image, accept: Uploaders.Post.extension_whitelist(), max_entries: 1)}
   end
 
   @impl true
   def handle_event("validate", %{"activity" => activity_params}, socket) do
+    description = Map.get(activity_params, "description", "")
+    has_description = is_nil(description) ||  String.trim(description) == ""
+
     changeset =
       socket.assigns.activity
       |> Activities.change_activity(activity_params)
       |> Map.put(:action, :validate)
 
-    {:noreply, assign_form(socket, changeset)}
+      {:noreply,
+      socket
+      |> assign(:has_description?, not has_description)
+      |> assign_form(changeset)}
   end
 
   @impl true
@@ -46,9 +57,8 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
 
   @impl true
   def handle_event("toggle_description_modal", _, socket) do
-    {:noreply,
-     socket
-     |> assign(:modal, not socket.assigns.modal)}
+    {:noreply, socket
+      |> assign(:modal, not socket.assigns.modal)}
   end
 
   defp save_activity(socket, :new, activity_params) do
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 7967204c1..f82f5000c 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -23,32 +23,40 @@
           </div>
         </div>
         <div class="flex w-full">
-          <div class="justify-top flex flex-col items-center pt-3">
+          <div class="justify-top flex flex-col items-center pt-3 hidden sm:block">
             <div class="size-3 bg-primary-600 m-1 rounded-full" />
             <div class="border-l-primary-600 h-[3.25rem] border-l border-dashed" />
             <div class="size-3 border-primary-600 m-1 rounded-full border" />
           </div>
           <div class="flex w-full flex-col">
-            <div class="text-nowrap flex items-baseline justify-between gap-y-1 p-1 pl-3">
+            <div class="text-nowrap flex flex-col sm:flex-row items-baseline justify-between gap-y-1 p-1 pl-3">
               <span>Start</span>
-              <.field type="datetime-local" field={@form[:start]} label_class="hidden" error_label_class="hidden" required />
+              <div class="w-full sm:w-56">
+                <.field class="w-full sm:w-56 atomic-button atomic-button--primary-outline text-gray-900" type="datetime-local" field={@form[:start]} label_class="hidden" error_label_class="hidden" required />
+              </div>
             </div>
-            <div class="text-nowrap flex items-baseline justify-between gap-y-1 p-1 pl-3">
+            <div class="text-nowrap flex flex-col sm:flex-row items-baseline justify-between gap-y-1 p-1 pl-3">
               <span>End</span>
-              <.field type="datetime-local" field={@form[:finish]} label_class="hidden" error_label_class="hidden" required />
+              <div class="w-full sm:w-56">
+                <.field class="w-full sm:w-56 atomic-button atomic-button--primary-outline text-gray-900" type="datetime-local" field={@form[:finish]} label_class="hidden" error_label_class="hidden" required />
+              </div>            
             </div>
           </div>
         </div>
 
-        <.button class="flex flex-col items-start px-2 py-2 rounded-lg bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+        <.button class="flex flex-col items-start px-2 py-2 border-gray-300 rounded-lg bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+          <label class="text-left cursor-pointer text-gray-700">
+            Description
+            <span class="text-danger-600">*</span>
+          </label>
           <div class="w-full">
             <.field
+              :if={@has_description?}
               type="text"
               field={@form[:description]}
-              label="Description"
+              label=""
               readonly
-              required
-              label_class="text-left cursor-pointer"
+              label_class=""
               wrapper_class="m-0"
               autocomplete="off"
               error_class="text-danger-600 placeholder-danger-700"
@@ -61,28 +69,27 @@
         <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
           <.inputs_for :let={fl} field={@form[:location]}>
             <div class="flex flex-col gap-y-1">
-              <.field type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
+              <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
             </div>
-
             <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
-              <.field type="text" field={fl[:address]} label="Address" placeholder="Address" required />
+              <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:address]} label="Address" placeholder="Address" required />
             </div>
           </.inputs_for>
         </div>
 
         <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
           <div class="flex flex-col gap-y-1">
-            <.field type="number" field={@form[:minimum_entries]} label="Minimum entries" placeholder="Choose minimum entries" required />
+            <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="number" field={@form[:minimum_entries]} label="Minimum entries" placeholder="Choose minimum entries" required />
           </div>
 
           <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
-            <.field type="number" field={@form[:maximum_entries]} label="Maximum entries" placeholder="Choose maximum entries" required />
+            <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="number" field={@form[:maximum_entries]} label="Maximum entries" placeholder="Choose maximum entries" required />
           </div>
         </div>
 
-        <.modal :if={@modal} class="" id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
+        <.modal :if={@modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
           <div class="mt-4 flex-grow">
-            <.field class="min-h-10 resize-none" type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
+            <.field class="min-h-10 resize-none " type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
             <div class="w-full flex justify-end">
               <.button class="text" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
                 <span><%= gettext("Done") %></span>
@@ -90,6 +97,7 @@
             </div>
           </div>
         </.modal>
+        
       </div>
     </div>
 

From 9ff9ff85c11ad70b35679810290a2f6edd30f75b Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Mon, 27 Jan 2025 13:41:03 +0000
Subject: [PATCH 16/39] feat: form layout improvements

---
 .../activity_live/form_component.html.heex    | 43 ++++++++++++-------
 lib/atomic_web/live/activity_live/show.ex     |  6 +--
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index f82f5000c..dfc8f85f3 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -1,6 +1,6 @@
-<div>
+<div class="mt-16">
   <.form id="activity-form" for={@form} phx-change="validate" phx-submit="save" phx-target={@myself}>
-    <div class="flex flex-col gap-8 xl:flex-row">
+    <div class="flex flex-col justify-evenly gap-8 xl:flex-row">
       <div class="w-full xl:w-1/3">
         <.live_component module={ImageUploader} id="uploader" uploads={@uploads} target={@myself} />
       </div>
@@ -39,16 +39,20 @@
               <span>End</span>
               <div class="w-full sm:w-56">
                 <.field class="w-full sm:w-56 atomic-button atomic-button--primary-outline text-gray-900" type="datetime-local" field={@form[:finish]} label_class="hidden" error_label_class="hidden" required />
-              </div>            
+              </div>              
             </div>
           </div>
         </div>
-
-        <.button class="flex flex-col items-start px-2 py-2 border-gray-300 rounded-lg bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
-          <label class="text-left cursor-pointer text-gray-700">
-            Description
-            <span class="text-danger-600">*</span>
-          </label>
+        
+        <label class="atomic-label atomic-label--required cursor-pointer">
+          Description
+        </label>  
+        <.button class="lg:w-full flex flex-col items-start px-3 py-3 border-gray-300 rounded-lg bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+          <%= if not @has_description? do %>
+            <label class="text-left cursor-pointer text-gray-500">
+              Add description
+            </label>
+          <% end %>
           <div class="w-full">
             <.field
               :if={@has_description?}
@@ -56,7 +60,7 @@
               field={@form[:description]}
               label=""
               readonly
-              label_class=""
+              label_class="hidden"
               wrapper_class="m-0"
               autocomplete="off"
               error_class="text-danger-600 placeholder-danger-700"
@@ -81,12 +85,23 @@
           <div class="flex flex-col gap-y-1">
             <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="number" field={@form[:minimum_entries]} label="Minimum entries" placeholder="Choose minimum entries" required />
           </div>
-
           <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
             <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="number" field={@form[:maximum_entries]} label="Maximum entries" placeholder="Choose maximum entries" required />
           </div>
         </div>
 
+        <div class="mt-4 flex-grow">
+          <div class="flex justify-center lg:justify-end">
+            <.button class="w-full p-5 lg:p-3" type="submit" phx-disable-with="Saving...">
+              <%= if @action == :new do %>
+                <span><%= gettext("Create Activity") %></span>
+              <% else %>
+                <span><%= gettext("Save") %></span>
+              <% end %>
+            </.button>
+          </div>
+        </div>
+
         <.modal :if={@modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
           <div class="mt-4 flex-grow">
             <.field class="min-h-10 resize-none " type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
@@ -101,10 +116,6 @@
       </div>
     </div>
 
-    <div class="mt-4 flex-grow">
-      <div class="flex justify-center lg:justify-end">
-        <.button type="submit" phx-disable-with="Saving...">Save</.button>
-      </div>
-    </div>
+
   </.form>
 </div>
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index 122d0f663..19fd3a9c1 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -145,15 +145,15 @@ defmodule AtomicWeb.ActivityLive.Show do
   end
 
   defp generate_dropdown_items(is_enrolled, can_edit, activity, socket) do
-    [%{name: gettext("Share"), link: "/", icon: :share}]
+    [%{name: gettext("Share"), navigate: "/", icon: :share}]
     |> append_if_true(is_enrolled, %{
       name: gettext("Unenroll"),
-      link: Routes.activity_show_path(socket, :unenroll, activity),
+      navigate: Routes.activity_show_path(socket, :unenroll, activity),
       icon: :user_minus
     })
     |> append_if_true(can_edit, %{
       name: gettext("Edit"),
-      link: Routes.activity_edit_path(socket, :edit, activity.organization, activity),
+      navigate: Routes.activity_edit_path(socket, :edit, activity.organization, activity),
       icon: :pencil
     })
   end

From 41ac6e629324f401b168eb28844026221842732f Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Mon, 27 Jan 2025 18:54:50 +0000
Subject: [PATCH 17/39] fix: typo and styling

---
 lib/atomic_web/live/activity_live/form_component.html.heex | 4 +++-
 lib/atomic_web/live/activity_live/show.ex                  | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index dfc8f85f3..475731975 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -25,7 +25,9 @@
         <div class="flex w-full">
           <div class="justify-top flex flex-col items-center pt-3 hidden sm:block">
             <div class="size-3 bg-primary-600 m-1 rounded-full" />
-            <div class="border-l-primary-600 h-[3.25rem] border-l border-dashed" />
+            <div class="flex justify-center">
+              <div class="border-l-primary-600 h-[3.25rem] border-l border-dashed w-[3px]" />
+            </div>
             <div class="size-3 border-primary-600 m-1 rounded-full border" />
           </div>
           <div class="flex w-full flex-col">
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index 19fd3a9c1..e8d859c70 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -37,7 +37,7 @@ defmodule AtomicWeb.ActivityLive.Show do
 
   @impl true
   def handle_event("confirm", _payload, socket) do
-    case socket.assigns.llive_actionive_action do
+    case socket.assigns.live_action do
       :enroll ->
         action_enroll(socket)
 

From 1c9b5a9ad1da4002b3c5e03431c066d0e36977f2 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Thu, 30 Jan 2025 23:11:45 +0000
Subject: [PATCH 18/39] feat: view participants on activity page

---
 lib/atomic/activities.ex                      |   7 +-
 lib/atomic_web/components/modal.ex            |   1 +
 .../activity_live/form_component.html.heex    |   2 +-
 .../live/activity_live/new.html.heex          |   2 +-
 lib/atomic_web/live/activity_live/show.ex     |  43 ++-
 .../live/activity_live/show.html.heex         | 334 +++++++++++-------
 lib/atomic_web/live/department_live/show.ex   |   4 +-
 .../live/department_live/show.html.heex       |   2 +-
 8 files changed, 251 insertions(+), 144 deletions(-)

diff --git a/lib/atomic/activities.ex b/lib/atomic/activities.ex
index 3368f2b3b..b1af16964 100644
--- a/lib/atomic/activities.ex
+++ b/lib/atomic/activities.ex
@@ -358,9 +358,14 @@ defmodule Atomic.Activities do
       join: e in assoc(u, :enrollments),
       where: e.activity_id == ^id
     )
-    |> Repo.all()
   end
 
+  def list_display_participants(id, %{} = flop, opts \\ []) do
+    list_activity_participants(id)
+    |> Flop.validate_and_run(flop, opts)
+  end
+
+
   @doc """
   Returns the list of activities a user has enrolled in.
 
diff --git a/lib/atomic_web/components/modal.ex b/lib/atomic_web/components/modal.ex
index 4234a406d..4a736c571 100644
--- a/lib/atomic_web/components/modal.ex
+++ b/lib/atomic_web/components/modal.ex
@@ -30,6 +30,7 @@ defmodule AtomicWeb.Components.Modal do
   attr :id, :string, required: true
   attr :show, :boolean, default: false
   attr :class, :string, default: ""
+  attr :modal_class, :string, default: ""
   attr :on_cancel, JS, default: %JS{}
   slot :inner_block, required: true
 
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 4b1dd9b1c..e8d6dac1f 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -67,7 +67,7 @@
               autocomplete="off"
               error_class="text-danger-600 placeholder-danger-700"
               error_label_class="text-danger-700"
-              class="border-none focus:ring-0 shadow-none text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900"
+              class="text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900"
             />
           </div>
         </.button>
diff --git a/lib/atomic_web/live/activity_live/new.html.heex b/lib/atomic_web/live/activity_live/new.html.heex
index bc66b22a8..edc590ccb 100644
--- a/lib/atomic_web/live/activity_live/new.html.heex
+++ b/lib/atomic_web/live/activity_live/new.html.heex
@@ -1,4 +1,4 @@
-<.page title="New Activity" id="atomic-new">
+<.page title="New Activity">
   <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
     <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={:new} title={@page_title} action={@live_action} activity={@activity} current_organization={@current_organization} return_to={~p"/activities/"} />
   </div>
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index ab74237e0..ac7da115c 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -1,7 +1,7 @@
 defmodule AtomicWeb.ActivityLive.Show do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.Components.{Avatar, Dropdown, Gradient, Map}
+  import AtomicWeb.Components.{Avatar, Dropdown, Gradient, Table, Map, Pagination}
 
   alias Atomic.Accounts
   alias Atomic.Activities
@@ -18,15 +18,18 @@ defmodule AtomicWeb.ActivityLive.Show do
   end
 
   @impl true
-  def handle_params(%{"id" => id}, _, socket) do
+  def handle_params(%{"id" => id} = params, _, socket) do
     activity = Activities.get_activity!(id, [:organization])
 
     {:noreply,
      socket
+     |> assign(:attendees_modal, false)
+     |> apply_action(socket.assigns.live_action, params)
      |> assign(:page_title, "#{activity.title}")
      |> assign(:current_page, :activities)
+     |> assign(:params, params)
      |> assign(:activity, activity)
-     |> assign(:participants, Activities.list_activity_participants(id))
+     |> assign(list_participants_paginated(id, params))
      |> assign(:enrolled?, maybe_put_enrolled(socket))
      |> assign(:enrollment_id, maybe_put_enrollment_id(socket))
      |> assign(:max_enrolled?, Activities.verify_maximum_enrollments?(id))
@@ -35,6 +38,30 @@ defmodule AtomicWeb.ActivityLive.Show do
      end)}
   end
 
+  defp apply_action(socket, :show, params) do
+    socket
+    |> assign(:current_view, current_view(socket, params))
+  end
+
+  defp apply_action(socket, :participants, params) do
+    socket
+    |> assign(:current_view, current_view(socket, params))
+  end
+
+  defp apply_action(socket, _, _) do
+    socket
+  end
+
+  defp list_participants_paginated(id, params) do
+    case Activities.list_display_participants(id, params) do
+      {:ok, {participants, meta}} ->
+        %{participants: participants, meta: meta}
+
+      {:error, flop} ->
+        %{participants: [], meta: flop}
+    end
+  end
+
   @impl true
   def handle_event("confirm", _payload, socket) do
     case socket.assigns.live_action do
@@ -49,6 +76,12 @@ defmodule AtomicWeb.ActivityLive.Show do
     end
   end
 
+  def handle_event("handle_attendees_modal", _, socket) do
+    {:noreply, socket |> assign(:attendees_modal, not socket.assigns.attendees_modal)}
+  end
+
+
+
   def action_enroll(socket) do
     case Activities.create_enrollment(socket.assigns.id, socket.assigns.current_user) do
       {:ok, %Enrollment{}} ->
@@ -180,4 +213,8 @@ defmodule AtomicWeb.ActivityLive.Show do
         gettext("Beware that you will lose your spot if you unenroll.")
     end
   end
+
+  defp current_view(_socket, params) when is_map_key(params, "tab"), do: params["tab"]
+
+  defp current_view(_socket, _params), do: "show"
 end
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index 5fe7bdeff..e8c2ca8b1 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -16,161 +16,208 @@
     </div>
   </:title_wrapper>
   <:actions>
-    <!-- Actions (desktop) -->
-    <div class="sm:flex hidden gap-4">
-      <%= if @is_authenticated? do %>
-        <.button :if={not @max_enrolled? and !@enrolled?} color={:white} icon="hero-ticket" patch={~p"/activities/#{@activity.id}/enroll"} disabled={@enrolled?}>
-          <%= gettext("Register") %>
-        </.button>
-        <.button :if={@enrolled?} patch={~p"/activities/#{@activity.id}/ticket"} color={:white} icon="hero-ticket">
-          <%= gettext("Ticket") %>
-        </.button>
-        <.button :if={@has_permissions?} navigate={~p"/organizations/#{@activity.organization_id}/activities/#{@activity.id}/edit"} icon="hero-pencil">
-          <%= gettext("Edit activity") %>
-        </.button>
-      <% end %>
-    </div>
-    <!-- Actions (mobile) -->
-    <div class="sm:hidden block">
-      <.dropdown id="activity-actions-dropdown" items={generate_dropdown_items(@enrolled?, @has_permissions?, @activity, @socket)}>
-        <:wrapper>
-          <.button icon_variant={:solid} color={:white} icon="hero-ellipsis_horizontal" />
-        </:wrapper>
-      </.dropdown>
-    </div>
+    <%= if @current_view == "show" do %>
+      <!-- Actions (desktop) -->
+      <div class="sm:flex hidden gap-4">
+        <%= if @is_authenticated? do %>
+          <.button :if={not @max_enrolled? and !@enrolled?} color={:white} icon="hero-ticket" patch={~p"/activities/#{@activity.id}/enroll"} disabled={@enrolled?}>
+            <%= gettext("Register") %>
+          </.button>
+          <.button :if={@enrolled?} patch={~p"/activities/#{@activity.id}/ticket"} color={:white} icon="hero-ticket">
+            <%= gettext("Ticket") %>
+          </.button>
+          <.button :if={@has_permissions?} navigate={~p"/organizations/#{@activity.organization_id}/activities/#{@activity.id}/edit"} icon="hero-pencil">
+            <%= gettext("Edit activity") %>
+          </.button>
+        <% end %>
+      </div>
+      <!-- Actions (mobile) -->
+      <div class="sm:hidden block">
+        <.dropdown id="activity-actions-dropdown" items={generate_dropdown_items(@enrolled?, @has_permissions?, @activity, @socket)}>
+          <:wrapper>
+            <.button icon_variant={:solid} color={:white} icon="hero-ellipsis_horizontal" />
+          </:wrapper>
+        </.dropdown>
+      </div>
+    <% end %>
+    <%= if @current_view == "attendees" do %>
+      <.button icon="hero-arrow-left-solid" color={:white} patch={~p"/activities/#{@activity.id}"} />
+    <% end %>
   </:actions>
   <!-- Activity image (mobile) -->
-  <div class="sm:hidden pb-8 px-8 sm:px-6 flex w-full justify-center">
-    <div class="w-full aspect-square object-cover">
-      <%= if @activity.image do %>
-        <img class="h-full w-full object-cover rounded-xl border" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
-      <% else %>
-        <.gradient class="rounded-xl" seed={@activity.id} />
-      <% end %>
+  <%= if @current_view == "show" do %>
+    <div class="sm:hidden pb-8 px-8 sm:px-6 flex w-full justify-center">
+      <div class="w-full aspect-square object-cover">
+        <%= if @activity.image do %>
+          <img class="h-full w-full object-cover rounded-xl border" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+        <% else %>
+          <.gradient class="rounded-xl" seed={@activity.id} />
+        <% end %>
+      </div>
     </div>
-  </div>
-  <div class="grid grid-cols-5 gap-12 mx-4 max-w-5xl sm:mx-6 lg:mx-8">
-    <div class="sm:col-span-3 col-span-5 flex flex-col gap-6">
-      <div class="flex flex-row gap-16 justify-between sm:justify-normal">
-        <!-- Date -->
-        <%= if @activity.start do %>
-          <div class="flex items-center gap-2">
-            <.icon name="hero-calendar" solid class="h-5 w-5 text-gray-700" />
-            <!-- One day activity -->
-            <%= if Timex.to_date(@activity.start) == Timex.to_date(@activity.finish) do %>
-              <div class="flex flex-col">
-                <p class="font-medium">
-                  <%= pretty_display_date(@activity.start) %>
-                </p>
+    <div class="grid grid-cols-5 gap-12 mx-4 max-w-5xl sm:mx-6 lg:mx-8">
+      <div class="sm:col-span-3 col-span-5 flex flex-col gap-6">
+        <div class="flex flex-row gap-16 justify-between sm:justify-normal">
+          <!-- Date -->
+          <%= if @activity.start do %>
+            <div class="flex items-center gap-2">
+              <.icon name="hero-calendar" solid class="h-5 w-5 text-gray-700" />
+              <!-- One day activity -->
+              <%= if Timex.to_date(@activity.start) == Timex.to_date(@activity.finish) do %>
+                <div class="flex flex-col">
+                  <p class="font-medium">
+                    <%= pretty_display_date(@activity.start) %>
+                  </p>
+                  <p>
+                    <%= "#{display_time(@activity.start)}-#{display_time(@activity.finish)}" %>
+                  </p>
+                </div>
+              <% end %>
+              <!-- TODO: Support for multi-day activities -->
+            </div>
+          <% end %>
+          <!-- Capacity -->
+          <.link phx-click="handle_attendees_modal">
+            <div class="flex items-center gap-2">
+              <.icon name="hero-user-group" class="h-5 w-5 text-gray-700" />
+              <p class="font-medium">
+                <%= @activity.enrolled %> / <%= @activity.maximum_entries %>
+              </p>
+            </div>
+          </.link>
+        </div>
+        <!-- Enrollment (desktop) -->
+        <%= if @enrolled? do %>
+          <div class="sm:block hidden">
+            <div class="flex flex-row items-center gap-2">
+              <.icon name="hero-check-badge" class="h-5 w-5 text-gray-700" />
+              <div>
+                <h2 class="flex-1 select-none truncate text-md font-semibold text-gray-900">
+                  <%= gettext("You are going!") %>
+                </h2>
                 <p>
-                  <%= "#{display_time(@activity.start)}-#{display_time(@activity.finish)}" %>
+                  <%= gettext("If you can't go please unenroll") %>
+                  <.link patch={~p"/activities/#{@activity.id}/unenroll/"}>
+                    <span class="text-primary-500 underline"><%= gettext("here") %></span>.
+                  </.link>
                 </p>
               </div>
-            <% end %>
-            <!-- TODO: Support for multi-day activities -->
+            </div>
           </div>
         <% end %>
-        <!-- Capacity -->
-        <div class="flex items-center gap-2">
-          <.icon name="hero-user-group" class="h-5 w-5 text-gray-700" />
-          <p class="font-medium">
-            <%= @activity.enrolled %> / <%= @activity.maximum_entries %>
-          </p>
-        </div>
-      </div>
-      <!-- Enrollment (desktop) -->
-      <%= if @enrolled? do %>
-        <div class="sm:block hidden">
-          <div class="flex flex-row items-center gap-2">
-            <.icon name="hero-check-badge" class="h-5 w-5 text-gray-700" />
-            <div>
-              <h2 class="flex-1 select-none truncate text-md font-semibold text-gray-900">
-                <%= gettext("You are going!") %>
-              </h2>
-              <p>
-                <%= gettext("If you can't go please unenroll") %>
-                <.link patch={~p"/activities/#{@activity.id}/unenroll/"}>
-                  <span class="text-primary-500 underline"><%= gettext("here") %></span>.
-                </.link>
-              </p>
-            </div>
+        <!-- About -->
+        <div>
+          <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900">
+            <%= gettext("About") %>
+          </h2>
+          <div class="flex flex-col gap-2">
+            <%= text_to_html(@activity.description) %>
           </div>
         </div>
-      <% end %>
-      <!-- About -->
-      <div>
-        <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900">
-          <%= gettext("About") %>
-        </h2>
-        <div class="flex flex-col gap-2">
-          <%= text_to_html(@activity.description) %>
+        <!-- Location -->
+        <div :if={@activity.location}>
+          <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900">
+            <%= gettext("Location") %>
+          </h2>
+          <div class="pb-4">
+            <p>
+              <%= @activity.location.name %>
+            </p>
+            <p class="text-sm text-gray-600">
+              <%= @activity.location.address %>
+            </p>
+          </div>
+          <figure class="border rounded-xl">
+            <.map location={@activity.location.address} class="rounded-xl" />
+          </figure>
         </div>
-      </div>
-      <!-- Location -->
-      <div :if={@activity.location}>
-        <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900">
-          <%= gettext("Location") %>
-        </h2>
-        <div class="pb-4">
-          <p>
-            <%= @activity.location.name %>
-          </p>
-          <p class="text-sm text-gray-600">
-            <%= @activity.location.address %>
-          </p>
+        <!-- Action buttons (mobile) -->
+        <div class="sm:hidden block pt-8">
+          <!-- Register button -->
+          <.button :if={not @max_enrolled? and !@enrolled?} icon="hero-ticket" size={:lg} patch={~p"/activities/#{@activity.id}/enroll/"} full_width>
+            <%= gettext("Register") %>
+          </.button>
+          <!-- Ticket and unenroll buttons -->
+          <div :if={@enrolled?} class="grid grid-cols-3 gap-2">
+            <.button class="col-span-2" patch={~p"/activities/#{@activity.id}/ticket/"} icon="hero-ticket" size={:lg} full_width>
+              <%= gettext("View ticket") %>
+            </.button>
+            <.button patch={~p"/activities/#{@activity.id}/unenroll/"} color={:white} icon="hero-user-minus" size={:lg} full_width></.button>
+          </div>
         </div>
-        <figure class="border rounded-xl">
-          <.map location={@activity.location.address} class="rounded-xl" />
-        </figure>
       </div>
-      <!-- Action buttons (mobile) -->
-      <div class="sm:hidden block pt-8">
-        <!-- Register button -->
-        <.button :if={not @max_enrolled? and !@enrolled?} icon="hero-ticket" size={:lg} patch={~p"/activities/#{@activity.id}/enroll/"} full_width>
-          <%= gettext("Register") %>
-        </.button>
-        <!-- Ticket and unenroll buttons -->
-        <div :if={@enrolled?} class="grid grid-cols-3 gap-2">
-          <.button class="col-span-2" patch={~p"/activities/#{@activity.id}/ticket/"} icon="hero-ticket" size={:lg} full_width>
-            <%= gettext("View ticket") %>
-          </.button>
-          <.button patch={~p"/activities/#{@activity.id}/unenroll/"} color={:white} icon="hero-user-minus" size={:lg} full_width></.button>
+      <div class="sm:block hidden col-span-2 w-full object-cover">
+        <!-- Activity image (desktop) -->
+        <%= if @activity.image do %>
+          <img class="max-h-fit w-full object-cover rounded-xl border" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+        <% else %>
+          <.gradient class="!h-[50vh] rounded-xl border" seed={@activity.id} />
+        <% end %>
+        <div class="flex flex-col">
+          <!-- Activity participants (desktop) -->
+          <div :if={@activity.enrolled > 0} class="pt-4">
+            <h2 class="mb-2 flex-1 select-none truncate text-md font-semibold text-gray-900">
+              <%= gettext("%{enrolled} Going", enrolled: @activity.enrolled) %>
+            </h2>
+            <.avatar_group
+              size={:xs}
+              items={
+                @participants
+                |> Enum.take(6)
+                |> Enum.map(fn p -> %{name: p.name} end)
+                |> then(fn avatars ->
+                  if length(@participants) > 6 do
+                    Enum.concat(avatars, [%{name: "+#{length(@participants) - 6}", auto_generate_initials: false}])
+                  else
+                    avatars
+                  end
+                end)
+              }
+            />
+          </div>
+          <%= if length(@participants) == 0 do %>
+            <span class="text-orange-500 flex justify-center pt-2"><%= gettext("No participants on this activity") %></span>
+          <% else %>
+            <%= if @has_permissions? do %>
+              <.link patch={~p"/activities/#{@activity.id}?tab=attendees"} class="text-orange-500 hover:cursor-pointer hover:underline">
+                <%= gettext("View all") %>
+              </.link>
+            <% else %>
+              <.link phx-click="handle_attendees_modal" class="text-orange-500 hover:cursor-pointer hover:underline">
+                <%= gettext("View all") %>
+              </.link>
+            <% end %>
+          <% end %>
         </div>
       </div>
     </div>
-    <div class="sm:block hidden col-span-2 w-full object-cover">
-      <!-- Activity image (desktop) -->
-      <%= if @activity.image do %>
-        <img class="max-h-fit w-full object-cover rounded-xl border" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+  <% end %>
+  <%= if @current_view == "attendees" do %>
+    <%= if length(@participants) != 0 do %>
+      <%= if @has_permissions? do %>
+        <div class="mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 class="mb-4 flex-1 select-none truncate text-lg font-semibold text-zinc-900">Participants</h2>
+          <div class="border-t border-l">
+            <.table items={@participants} meta={@meta} filter={[]}>
+              <:col :let={participant} label="Name"><%= participant.name %></:col>
+              <:col :let={participant} label="Email"><%= participant.email %></:col>
+              <:col :let={participant} label="Phone number"><%= participant.phone_number %></:col>
+            </.table>
+          </div>
+          <.pagination items={@participants} meta={@meta} params={@params} class="flex w-full items-center justify-between border border-t-0 pt-2" />
+        </div>
       <% else %>
-        <.gradient class="!h-[50vh] rounded-xl border" seed={@activity.id} />
+        <ul>
+          <%= for participant <- @participants do %>
+            <li><%= participant.name %></li>
+          <% end %>
+        </ul>
       <% end %>
-      <!-- Activity participants (desktop) -->
-      <div :if={@activity.enrolled > 0} class="pt-4">
-        <h2 class="mb-2 flex-1 select-none truncate text-md font-semibold text-gray-900">
-          <%= gettext("%{enrolled} Going", enrolled: @activity.enrolled) %>
-        </h2>
-        <.avatar_group
-          size={:xs}
-          items={
-            @participants
-            |> Enum.take(6)
-            |> Enum.map(fn p -> %{name: p.name} end)
-            |> then(fn avatars ->
-              if length(@participants) > 6 do
-                Enum.concat(avatars, [%{name: "+#{length(@participants) - 6}", auto_generate_initials: false}])
-              else
-                avatars
-              end
-            end)
-          }
-        />
-      </div>
-    </div>
-  </div>
+    <% end %>
+  <% end %>
 </.page>
 <!-- Ticket show modal -->
-<.modal :if={@live_action in [:ticket] and @enrolled?} class="!w-min" id="ticket-modal" show on_cancel={JS.patch(~p"/activities/#{@activity.id}")}>
+<.modal :if={@live_action in [:ticket] and @enrolled?} modal_class="p-0" id="ticket-modal" show on_cancel={JS.patch(~p"/activities/#{@activity.id}")}>
   <div class="w-full flex flex-col gap-2 justify-center text-center">
     <p class="text-md font-semibold text-gray-900">
       <%= gettext("Show this code to the staff present at the activity to register your presence.") %>
@@ -208,3 +255,20 @@
     </div>
   </div>
 </.modal>
+<!-- Attendees show modal -->
+<.modal :if={@attendees_modal} show id="attendees_modal" on_cancel={JS.push("handle_attendees_modal")}>
+  <span class="flex-l text-lg font-semibold text-gray-900">Participants</span>
+  <%= if length(@participants) != 0 do %> 
+    <div class="">
+      <ul>
+        <%= for participant <- @participants do %>
+          <li class="h-6 p-6 border-b flex items-center justify-center"><%= participant.name %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% else %>
+  <div class="mt-4">
+    <span>There are no participants for this activity</span>
+  </div>
+  <% end %>
+</.modal>
diff --git a/lib/atomic_web/live/department_live/show.ex b/lib/atomic_web/live/department_live/show.ex
index 7020c23bd..285665e58 100644
--- a/lib/atomic_web/live/department_live/show.ex
+++ b/lib/atomic_web/live/department_live/show.ex
@@ -29,11 +29,11 @@ defmodule AtomicWeb.DepartmentLive.Show do
       raise Ecto.NoResultsError, queryable: Atomic.Organizations.Department
     else
       socket
+      |> assign(:page_title, department.name)
       |> assign(:current_page, :departments)
+      |> assign(:department, department)
       |> assign(:current_view, current_view(socket, params))
-      |> assign(:page_title, department.name)
       |> assign(:organization, organization)
-      |> assign(:department, department)
       |> assign(:params, params)
       |> assign(:current_collaborator, maybe_put_collaborator(socket, department.id))
       |> assign(list_collaborators(department.id, params, has_permissions))
diff --git a/lib/atomic_web/live/department_live/show.html.heex b/lib/atomic_web/live/department_live/show.html.heex
index 9579ae83c..920522f06 100644
--- a/lib/atomic_web/live/department_live/show.html.heex
+++ b/lib/atomic_web/live/department_live/show.html.heex
@@ -166,7 +166,7 @@
             <%= if @has_permissions? do %>
               <!-- Collaborators admin view -->
               <div class="mx-auto px-4 sm:px-6 lg:px-8">
-                <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-zinc-900">Collaborators</h2>
+                <h2 class="mb-4 flex-1 select-none truncate text-lg font-semibold text-zinc-900">Collaborators</h2>
                 <div class="border-t border-l">
                   <.table items={@collaborators} meta={@meta} filter={[]}>
                     <:col :let={collaborator} label="Name" field={:string}><%= collaborator.user.name %></:col>

From 545d0de5f2f6e7d5024f75406cdc2585ce523b54 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Fri, 31 Jan 2025 10:48:58 +0000
Subject: [PATCH 19/39] chore: enhance code quality

---
 lib/atomic/activities.ex                      |  1 -
 lib/atomic_web/components/modal.ex            |  1 -
 .../activity_live/form_component.html.heex    |  2 +-
 lib/atomic_web/live/activity_live/show.ex     | 16 ++-------
 .../live/activity_live/show.html.heex         | 33 ++++++++++---------
 5 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/lib/atomic/activities.ex b/lib/atomic/activities.ex
index b1af16964..b81538894 100644
--- a/lib/atomic/activities.ex
+++ b/lib/atomic/activities.ex
@@ -365,7 +365,6 @@ defmodule Atomic.Activities do
     |> Flop.validate_and_run(flop, opts)
   end
 
-
   @doc """
   Returns the list of activities a user has enrolled in.
 
diff --git a/lib/atomic_web/components/modal.ex b/lib/atomic_web/components/modal.ex
index 4a736c571..4234a406d 100644
--- a/lib/atomic_web/components/modal.ex
+++ b/lib/atomic_web/components/modal.ex
@@ -30,7 +30,6 @@ defmodule AtomicWeb.Components.Modal do
   attr :id, :string, required: true
   attr :show, :boolean, default: false
   attr :class, :string, default: ""
-  attr :modal_class, :string, default: ""
   attr :on_cancel, JS, default: %JS{}
   slot :inner_block, required: true
 
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index e8d6dac1f..51e54654a 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -23,7 +23,7 @@
           </div>
         </div>
         <div class="flex w-full">
-          <div class="justify-top flex flex-col items-center pt-3 hidden sm:block">
+          <div class="justify-top flex flex-col items-center pt-3 sm:block">
             <div class="size-3 bg-primary-600 m-1 rounded-full" />
             <div class="flex justify-center">
               <div class="border-l-primary-600 h-[3.25rem] border-l border-dashed w-[3px]" />
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index ac7da115c..0caabc040 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -23,7 +23,7 @@ defmodule AtomicWeb.ActivityLive.Show do
 
     {:noreply,
      socket
-     |> assign(:attendees_modal, false)
+     |> assign(:participants_modal, false)
      |> apply_action(socket.assigns.live_action, params)
      |> assign(:page_title, "#{activity.title}")
      |> assign(:current_page, :activities)
@@ -76,12 +76,10 @@ defmodule AtomicWeb.ActivityLive.Show do
     end
   end
 
-  def handle_event("handle_attendees_modal", _, socket) do
-    {:noreply, socket |> assign(:attendees_modal, not socket.assigns.attendees_modal)}
+  def handle_event("handle_participants_modal", _, socket) do
+    {:noreply, socket |> assign(:participants_modal, not socket.assigns.participants_modal)}
   end
 
-
-
   def action_enroll(socket) do
     case Activities.create_enrollment(socket.assigns.id, socket.assigns.current_user) do
       {:ok, %Enrollment{}} ->
@@ -169,14 +167,6 @@ defmodule AtomicWeb.ActivityLive.Show do
     |> QRCodeEx.svg(color: "#111827", width: 200, background_color: :transparent)
   end
 
-  defp build_url do
-    if Mix.env() == :dev do
-      "http://localhost:4000"
-    else
-      "https://#{Application.fetch_env!(:atomic, AtomicWeb.Endpoint)[:url][:host]}"
-    end
-  end
-
   defp generate_dropdown_items(is_enrolled, can_edit, activity, _) do
     [%{name: gettext("Share"), navigate: "/", icon: "share"}]
     |> append_if_true(is_enrolled, %{
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index e8c2ca8b1..199780948 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -35,12 +35,12 @@
       <div class="sm:hidden block">
         <.dropdown id="activity-actions-dropdown" items={generate_dropdown_items(@enrolled?, @has_permissions?, @activity, @socket)}>
           <:wrapper>
-            <.button icon_variant={:solid} color={:white} icon="hero-ellipsis_horizontal" />
+            <.button icon="hero-ellipsis-horizontal" color={:white} />
           </:wrapper>
         </.dropdown>
       </div>
     <% end %>
-    <%= if @current_view == "attendees" do %>
+    <%= if @current_view == "participants" do %>
       <.button icon="hero-arrow-left-solid" color={:white} patch={~p"/activities/#{@activity.id}"} />
     <% end %>
   </:actions>
@@ -61,7 +61,7 @@
           <!-- Date -->
           <%= if @activity.start do %>
             <div class="flex items-center gap-2">
-              <.icon name="hero-calendar" solid class="h-5 w-5 text-gray-700" />
+              <.icon name="hero-calendar" class="h-5 w-5 text-gray-700" />
               <!-- One day activity -->
               <%= if Timex.to_date(@activity.start) == Timex.to_date(@activity.finish) do %>
                 <div class="flex flex-col">
@@ -77,7 +77,7 @@
             </div>
           <% end %>
           <!-- Capacity -->
-          <.link phx-click="handle_attendees_modal">
+          <.link phx-click="handle_participants_modal">
             <div class="flex items-center gap-2">
               <.icon name="hero-user-group" class="h-5 w-5 text-gray-700" />
               <p class="font-medium">
@@ -179,11 +179,11 @@
             <span class="text-orange-500 flex justify-center pt-2"><%= gettext("No participants on this activity") %></span>
           <% else %>
             <%= if @has_permissions? do %>
-              <.link patch={~p"/activities/#{@activity.id}?tab=attendees"} class="text-orange-500 hover:cursor-pointer hover:underline">
+              <.link patch="?tab=participants" class="text-orange-500 hover:cursor-pointer hover:underline">
                 <%= gettext("View all") %>
               </.link>
             <% else %>
-              <.link phx-click="handle_attendees_modal" class="text-orange-500 hover:cursor-pointer hover:underline">
+              <.link phx-click="handle_participants_modal" class="text-orange-500 hover:cursor-pointer hover:underline">
                 <%= gettext("View all") %>
               </.link>
             <% end %>
@@ -192,7 +192,7 @@
       </div>
     </div>
   <% end %>
-  <%= if @current_view == "attendees" do %>
+  <%= if @current_view == "participants" do %>
     <%= if length(@participants) != 0 do %>
       <%= if @has_permissions? do %>
         <div class="mx-auto px-4 sm:px-6 lg:px-8">
@@ -217,7 +217,7 @@
   <% end %>
 </.page>
 <!-- Ticket show modal -->
-<.modal :if={@live_action in [:ticket] and @enrolled?} modal_class="p-0" id="ticket-modal" show on_cancel={JS.patch(~p"/activities/#{@activity.id}")}>
+<.modal :if={@live_action in [:ticket] and @enrolled?} id="ticket-modal" show on_cancel={JS.patch(~p"/activities/#{@activity.id}")}>
   <div class="w-full flex flex-col gap-2 justify-center text-center">
     <p class="text-md font-semibold text-gray-900">
       <%= gettext("Show this code to the staff present at the activity to register your presence.") %>
@@ -255,20 +255,23 @@
     </div>
   </div>
 </.modal>
-<!-- Attendees show modal -->
-<.modal :if={@attendees_modal} show id="attendees_modal" on_cancel={JS.push("handle_attendees_modal")}>
+<!-- Participants show modal -->
+<.modal :if={@participants_modal} show id="participants_modal" on_cancel={JS.push("handle_participants_modal")}>
   <span class="flex-l text-lg font-semibold text-gray-900">Participants</span>
-  <%= if length(@participants) != 0 do %> 
+  <%= if length(@participants) != 0 do %>
     <div class="">
       <ul>
         <%= for participant <- @participants do %>
-          <li class="h-6 p-6 border-b flex items-center justify-center"><%= participant.name %></li>
+          <li class="h-6 py-6 px-0 border-b flex items-center justify-center">
+            <.avatar size={:xs} name={participant.name} type={:user} />
+            <span class="ml-4"><%= participant.name %></span>
+          </li>
         <% end %>
       </ul>
     </div>
   <% else %>
-  <div class="mt-4">
-    <span>There are no participants for this activity</span>
-  </div>
+    <div class="mt-4">
+      <span>There are no participants for this activity</span>
+    </div>
   <% end %>
 </.modal>

From 88891502c10450c47030d4cfbd19108e0679fb17 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Wed, 5 Feb 2025 20:48:28 +0000
Subject: [PATCH 20/39] fix: show ticket crashing

---
 lib/atomic_web/live/activity_live/show.ex        | 1 +
 lib/atomic_web/live/activity_live/show.html.heex | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index 0caabc040..80fae8d31 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -30,6 +30,7 @@ defmodule AtomicWeb.ActivityLive.Show do
      |> assign(:params, params)
      |> assign(:activity, activity)
      |> assign(list_participants_paginated(id, params))
+     |> assign(:current_view, current_view(socket, params))
      |> assign(:enrolled?, maybe_put_enrolled(socket))
      |> assign(:enrollment_id, maybe_put_enrollment_id(socket))
      |> assign(:max_enrolled?, Activities.verify_maximum_enrollments?(id))
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index 199780948..4696bba86 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -13,7 +13,7 @@
           <%= @activity.organization.name %>
         </.link>
       </span>
-    </div>
+    </div>  
   </:title_wrapper>
   <:actions>
     <%= if @current_view == "show" do %>
@@ -218,7 +218,7 @@
 </.page>
 <!-- Ticket show modal -->
 <.modal :if={@live_action in [:ticket] and @enrolled?} id="ticket-modal" show on_cancel={JS.patch(~p"/activities/#{@activity.id}")}>
-  <div class="w-full flex flex-col gap-2 justify-center text-center">
+  <div class="w-full flex flex-col gap-2 text-center place-items-center">
     <p class="text-md font-semibold text-gray-900">
       <%= gettext("Show this code to the staff present at the activity to register your presence.") %>
     </p>

From 31a0355080138fcc8253924e51d94cd54d6859d6 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Wed, 5 Feb 2025 21:14:22 +0000
Subject: [PATCH 21/39] fix: minor design issues

---
 .../activity_live/form_component.html.heex     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 51e54654a..99e35e4c5 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -12,18 +12,18 @@
               type="text"
               field={@form[:title]}
               label_class="hidden"
-              wrapper_class="!bg-white"
+              wrapper_class="!bg-white text-3xl"
               autocomplete="off"
               error_class="text-danger-600 placeholder-danger-700"
               error_label_class="text-danger-700"
-              class="border-none focus:ring-0 shadow-none font-bold text-3xl !bg-white p-0"
+              class="border-none focus:ring-0 shadow-none font-bold text-4xl !bg-white p-0"
               placeholder="Activity Title"
               required
             />
           </div>
         </div>
         <div class="flex w-full">
-          <div class="justify-top flex flex-col items-center pt-3 sm:block">
+          <div class="justify-top flex flex-col items-center pt-3 hidden sm:block">
             <div class="size-3 bg-primary-600 m-1 rounded-full" />
             <div class="flex justify-center">
               <div class="border-l-primary-600 h-[3.25rem] border-l border-dashed w-[3px]" />
@@ -31,13 +31,13 @@
             <div class="size-3 border-primary-600 m-1 rounded-full border" />
           </div>
           <div class="flex w-full flex-col">
-            <div class="text-nowrap flex flex-col sm:flex-row items-baseline justify-between gap-y-1 p-1 pl-3">
+            <div class="text-nowrap flex flex-col sm:flex-row items-baseline justify-between gap-y-1 sm:p-1 sm:pl-3">
               <span>Start</span>
               <div class="w-full sm:w-56">
                 <.field class="w-full sm:w-56 atomic-button atomic-button--primary-outline text-gray-900" type="datetime-local" field={@form[:start]} label_class="hidden" error_label_class="hidden" required />
               </div>
             </div>
-            <div class="text-nowrap flex flex-col sm:flex-row items-baseline justify-between gap-y-1 p-1 pl-3">
+            <div class="text-nowrap flex flex-col sm:flex-row items-baseline justify-between gap-y-1 sm:p-1 sm:pl-3">
               <span>End</span>
               <div class="w-full sm:w-56">
                 <.field class="w-full sm:w-56 atomic-button atomic-button--primary-outline text-gray-900" type="datetime-local" field={@form[:finish]} label_class="hidden" error_label_class="hidden" required />
@@ -46,10 +46,10 @@
           </div>
         </div>
 
-        <label class="atomic-label atomic-label--required cursor-pointer">
+        <label class="atomic-label atomic-label--required">
           Description
         </label>
-        <.button class="lg:w-full flex flex-col items-start px-3 py-3 border-gray-300 rounded-lg bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+        <.button class="lg:w-full flex flex-col items-start px-3 py-3 border-gray-300 rounded-md bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
           <%= if not @has_description? do %>
             <label class="text-left cursor-pointer text-gray-500">
               Add description
@@ -72,7 +72,7 @@
           </div>
         </.button>
 
-        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
+        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start xl:justify-between">
           <.inputs_for :let={fl} field={@form[:location]}>
             <div class="flex flex-col gap-y-1">
               <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
@@ -83,7 +83,7 @@
           </.inputs_for>
         </div>
 
-        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
+        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start xl:justify-between">
           <div class="flex flex-col gap-y-1">
             <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="number" field={@form[:minimum_entries]} label="Minimum entries" placeholder="Choose minimum entries" required />
           </div>

From 11c27a73c0c7e0d05daa53daa96dcfb10f4d2aa1 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Fri, 7 Feb 2025 14:06:35 +0000
Subject: [PATCH 22/39] refactor: participants modal

---
 .../live/activity_live/show.html.heex          | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index 4696bba86..9f49d43b1 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -13,7 +13,7 @@
           <%= @activity.organization.name %>
         </.link>
       </span>
-    </div>  
+    </div>
   </:title_wrapper>
   <:actions>
     <%= if @current_view == "show" do %>
@@ -259,15 +259,13 @@
 <.modal :if={@participants_modal} show id="participants_modal" on_cancel={JS.push("handle_participants_modal")}>
   <span class="flex-l text-lg font-semibold text-gray-900">Participants</span>
   <%= if length(@participants) != 0 do %>
-    <div class="">
-      <ul>
-        <%= for participant <- @participants do %>
-          <li class="h-6 py-6 px-0 border-b flex items-center justify-center">
-            <.avatar size={:xs} name={participant.name} type={:user} />
-            <span class="ml-4"><%= participant.name %></span>
-          </li>
-        <% end %>
-      </ul>
+    <div class="mt-2 flex align-center place-items-center flex-wrap w-full gap-4">
+      <%= for participant <- @participants do %>
+        <div class="h-6 py-6 px-0 flex items-center">
+          <.avatar size={:xs} name={participant.name} type={:user} />
+          <span class="ml-4"><%= participant.name %></span>
+        </div>
+      <% end %>
     </div>
   <% else %>
     <div class="mt-4">

From 9d51352c6947d5813741625d489ade870bf52e22 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Fri, 7 Feb 2025 14:46:09 +0000
Subject: [PATCH 23/39] chore: remove minimum entries

---
 lib/atomic/activities/activity.ex             | 40 +------------------
 .../live/activity_live/form_component.ex      |  4 +-
 .../activity_live/form_component.html.heex    |  7 +---
 .../20221022010100_create_activities.exs      |  1 -
 priv/repo/seeds/feed.exs                      |  1 -
 test/atomic/activities_test.exs               |  8 +---
 test/support/factories/activities_factory.ex  |  1 -
 test/support/fixtures/activities_fixtures.ex  |  1 -
 8 files changed, 6 insertions(+), 57 deletions(-)

diff --git a/lib/atomic/activities/activity.ex b/lib/atomic/activities/activity.ex
index 4735f2e2a..5ab068249 100644
--- a/lib/atomic/activities/activity.ex
+++ b/lib/atomic/activities/activity.ex
@@ -9,7 +9,7 @@ defmodule Atomic.Activities.Activity do
   alias Atomic.Location
   alias Atomic.Organizations.Organization
 
-  @required_fields ~w(title description start finish minimum_entries maximum_entries enrolled organization_id)a
+  @required_fields ~w(title description start finish maximum_entries enrolled organization_id)a
   @optional_fields ~w()a
 
   @derive {
@@ -30,7 +30,6 @@ defmodule Atomic.Activities.Activity do
     field :finish, :naive_datetime
 
     field :maximum_entries, :integer
-    field :minimum_entries, :integer
     field :enrolled, :integer, default: 0
 
     field :image, Uploaders.Post.Type
@@ -50,9 +49,7 @@ defmodule Atomic.Activities.Activity do
     |> cast_embed(:location, with: &Location.changeset/2)
     |> validate_required(@required_fields)
     |> validate_dates()
-    |> validate_entries()
     |> validate_enrollments()
-    |> check_constraint(:enrolled, name: :enrolled_less_than_max)
     |> maybe_mark_for_deletion()
   end
 
@@ -61,41 +58,6 @@ defmodule Atomic.Activities.Activity do
     |> cast_attachments(attrs, [:image])
   end
 
-  defp validate_entries(changeset) do
-    minimum_entries = get_change(changeset, :minimum_entries)
-    maximum_entries = get_change(changeset, :maximum_entries)
-
-    case {minimum_entries, maximum_entries} do
-      {nil, nil} ->
-        validate_entries_values(
-          changeset.data.minimum_entries,
-          changeset.data.maximum_entries,
-          changeset
-        )
-
-      {nil, maximum} ->
-        validate_entries_values(changeset.data.minimum_entries, maximum, changeset)
-
-      {minimum, nil} ->
-        validate_entries_values(minimum, changeset.data.maximum_entries, changeset)
-
-      {min, max} ->
-        validate_entries_values(min, max, changeset)
-    end
-  end
-
-  def validate_entries_values(min_value, max_value, changeset) do
-    if min_value > max_value do
-      add_error(
-        changeset,
-        :maximum_entries,
-        gettext("must be greater than minimum entries")
-      )
-    else
-      changeset
-    end
-  end
-
   defp validate_dates(changeset) do
     start = get_change(changeset, :start)
     finish = get_change(changeset, :finish)
diff --git a/lib/atomic_web/live/activity_live/form_component.ex b/lib/atomic_web/live/activity_live/form_component.ex
index eaaab7547..e5929c9a9 100644
--- a/lib/atomic_web/live/activity_live/form_component.ex
+++ b/lib/atomic_web/live/activity_live/form_component.ex
@@ -22,7 +22,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
      socket
      |> assign(assigns)
      |> assign_form(changeset)
-     |> assign(:modal, false)
+     |> assign(:description_modal, false)
      |> assign(:has_description?, initial_description)
      |> allow_upload(:image, accept: Uploaders.Post.extension_whitelist(), max_entries: 1)}
   end
@@ -61,7 +61,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
   def handle_event("toggle_description_modal", _, socket) do
     {:noreply,
      socket
-     |> assign(:modal, not socket.assigns.modal)}
+     |> assign(:description_modal, not socket.assigns.description_modal)}
   end
 
   defp save_activity(socket, :new, activity_params) do
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 99e35e4c5..d0eec68d7 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -84,9 +84,6 @@
         </div>
 
         <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start xl:justify-between">
-          <div class="flex flex-col gap-y-1">
-            <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="number" field={@form[:minimum_entries]} label="Minimum entries" placeholder="Choose minimum entries" required />
-          </div>
           <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
             <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="number" field={@form[:maximum_entries]} label="Maximum entries" placeholder="Choose maximum entries" required />
           </div>
@@ -104,9 +101,9 @@
           </div>
         </div>
 
-        <.modal :if={@modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
+        <.modal :if={@description_modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
           <div class="mt-4 flex-grow">
-            <.field class="min-h-10 resize-none " type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
+            <.field class="\-h-10 resize-none " type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
             <div class="w-full flex justify-end">
               <.button class="text" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
                 <span><%= gettext("Done") %></span>
diff --git a/priv/repo/migrations/20221022010100_create_activities.exs b/priv/repo/migrations/20221022010100_create_activities.exs
index 10ae6829d..b8f9d1ac1 100644
--- a/priv/repo/migrations/20221022010100_create_activities.exs
+++ b/priv/repo/migrations/20221022010100_create_activities.exs
@@ -11,7 +11,6 @@ defmodule Atomic.Repo.Migrations.CreateActivities do
       add :start, :naive_datetime, null: false
       add :finish, :naive_datetime, null: false
 
-      add :minimum_entries, :integer, null: false
       add :maximum_entries, :integer, null: false
       add :enrolled, :integer, default: 0, null: false
 
diff --git a/priv/repo/seeds/feed.exs b/priv/repo/seeds/feed.exs
index 1bd3f18ec..9c9c1471f 100644
--- a/priv/repo/seeds/feed.exs
+++ b/priv/repo/seeds/feed.exs
@@ -57,7 +57,6 @@ defmodule Atomic.Repo.Seeds.Feed do
       start: build_start_date(i),
       finish: build_finish_date(i),
       location: %{name: Faker.Company.name(), address: Faker.Address.street_address()},
-      minimum_entries: Enum.random(1..10),
       maximum_entries: Enum.random(11..20),
       organization_id: organization_id,
       enrolled: 0
diff --git a/test/atomic/activities_test.exs b/test/atomic/activities_test.exs
index 1d3ab1749..5a8eb7011 100644
--- a/test/atomic/activities_test.exs
+++ b/test/atomic/activities_test.exs
@@ -9,7 +9,7 @@ defmodule Atomic.ActivitiesTest do
   describe "activities" do
     alias Atomic.Activities.Activity
 
-    @invalid_attrs %{description: nil, maximum_entries: nil, minimum_entries: nil, title: nil}
+    @invalid_attrs %{description: nil, maximum_entries: nil, title: nil}
 
     test "list_activities/1 returns all activities" do
       activity = insert(:activity)
@@ -34,12 +34,6 @@ defmodule Atomic.ActivitiesTest do
       assert {:error, %Ecto.Changeset{}} = Activities.create_activity_with_post(@invalid_attrs)
     end
 
-    test "create_activity_with_post/2 with maximum_entries lower than minimum_entries" do
-      activity = params_for(:activity, maximum_entries: 1, minimum_entries: 2)
-
-      assert {:error, %Ecto.Changeset{}} = Activities.create_activity_with_post(activity)
-    end
-
     test "create_activity_with_post/2 with finish date before start date" do
       activity =
         params_for(:activity, finish: ~N[2022-10-21 20:00:00], start: ~N[2022-10-22 20:00:00])
diff --git a/test/support/factories/activities_factory.ex b/test/support/factories/activities_factory.ex
index a8e59e395..497733ac9 100644
--- a/test/support/factories/activities_factory.ex
+++ b/test/support/factories/activities_factory.ex
@@ -12,7 +12,6 @@ defmodule Atomic.Factories.ActivityFactory do
         %Activity{
           title: Faker.Beer.brand(),
           description: Faker.Lorem.paragraph(),
-          minimum_entries: Enum.random(1..10),
           maximum_entries: Enum.random(11..20),
           enrolled: 0,
           start: NaiveDateTime.utc_now(),
diff --git a/test/support/fixtures/activities_fixtures.ex b/test/support/fixtures/activities_fixtures.ex
index 53d583351..50f6fec4e 100644
--- a/test/support/fixtures/activities_fixtures.ex
+++ b/test/support/fixtures/activities_fixtures.ex
@@ -16,7 +16,6 @@ defmodule Atomic.ActivitiesFixtures do
         description: "some description",
         title: "some title",
         maximum_entries: 42,
-        minimum_entries: 0,
         finish: ~N[2022-10-22 20:00:00],
         start: ~N[2022-10-22 20:00:00],
         organization_id: OrganizationsFixtures.organization_fixture().id

From 31e901473153816a3ba05f8c994d85073588b40a Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Fri, 7 Feb 2025 16:54:41 +0000
Subject: [PATCH 24/39] feat: add modal for maximum entries control

---
 assets/css/app.css                            | 12 ++++
 .../live/activity_live/form_component.ex      |  9 +++
 .../activity_live/form_component.html.heex    | 63 +++++++++++++------
 3 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index e5bc31aca..8430f46b9 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -26,3 +26,15 @@ input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 30px white inset !important;
 }
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
\ No newline at end of file
diff --git a/lib/atomic_web/live/activity_live/form_component.ex b/lib/atomic_web/live/activity_live/form_component.ex
index e5929c9a9..756e0d45c 100644
--- a/lib/atomic_web/live/activity_live/form_component.ex
+++ b/lib/atomic_web/live/activity_live/form_component.ex
@@ -23,6 +23,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
      |> assign(assigns)
      |> assign_form(changeset)
      |> assign(:description_modal, false)
+     |> assign(:maximum_entries_modal, false)
      |> assign(:has_description?, initial_description)
      |> allow_upload(:image, accept: Uploaders.Post.extension_whitelist(), max_entries: 1)}
   end
@@ -64,6 +65,14 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
      |> assign(:description_modal, not socket.assigns.description_modal)}
   end
 
+  @impl true
+  def handle_event("toggle_maximum_entries_modal", _, socket) do
+    {:noreply,
+      socket
+      |> assign(:maximum_entries_modal, not socket.assigns.maximum_entries_modal)
+    }
+  end
+
   defp save_activity(socket, :new, activity_params) do
     case Activities.create_activity_with_post(activity_params, &consume_image_data(socket, &1)) do
       {:ok, _activity} ->
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index d0eec68d7..31e66aef9 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -46,10 +46,10 @@
           </div>
         </div>
 
-        <label class="atomic-label atomic-label--required">
+        <label for="description_button" class="atomic-label atomic-label--required">
           Description
         </label>
-        <.button class="lg:w-full flex flex-col items-start px-3 py-3 border-gray-300 rounded-md bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+        <.button id="description_button" class="lg:w-full flex flex-col items-start px-3 py-3 border-gray-300 rounded-md bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
           <%= if not @has_description? do %>
             <label class="text-left cursor-pointer text-gray-500">
               Add description
@@ -83,11 +83,24 @@
           </.inputs_for>
         </div>
 
-        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start xl:justify-between">
-          <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
-            <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="number" field={@form[:maximum_entries]} label="Maximum entries" placeholder="Choose maximum entries" required />
-          </div>
-        </div>
+        <label for="capacity_button" class="atomic-label atomic-label--required">
+          Capacity
+        </label>
+        <.button id="capacity_button" type="button" class="lg:w-full flex flex-col items-start px-3 py-3 border-gray-300 rounded-md bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
+          <.field 
+            class="text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900" 
+            type="number" 
+            field={@form[:maximum_entries]} 
+            label="Maximum entries" 
+            placeholder="Choose maximum entries" 
+            readonly
+            required 
+            label_class="hidden"
+            wrapper_class="m-0"
+            error_class="text-danger-600 placeholder-danger-700"
+            error_label_class="text-danger-700"
+          />
+        </.button>
 
         <div class="mt-4 flex-grow">
           <div class="flex justify-center lg:justify-end">
@@ -100,18 +113,32 @@
             </.button>
           </div>
         </div>
-
-        <.modal :if={@description_modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
-          <div class="mt-4 flex-grow">
-            <.field class="\-h-10 resize-none " type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
-            <div class="w-full flex justify-end">
-              <.button class="text" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
-                <span><%= gettext("Done") %></span>
-              </.button>
-            </div>
-          </div>
-        </.modal>
       </div>
     </div>
+    <.modal :if={@description_modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
+      <div class="mt-4 flex-grow">
+        <.field class="\-h-10 resize-none " type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
+        <div class="w-full flex justify-end">
+          <.button class="text" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+            <span><%= gettext("Done") %></span>
+          </.button>
+        </div>
+      </div>
+    </.modal>
+    <.modal :if={@maximum_entries_modal} id="maximum_entries_modal" show on_cancel={JS.push("toggle_maximum_entries_modal", target: @myself)}>
+      <div class="w-full h-full">
+        <div class="">
+          <.field class="" type="number" field={@form[:maximum_entries]} placeholder="Choose maximum entries" />
+        </div>
+        <div class="flex gap-3">
+          <.button type="button" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
+            Close
+          </.button>
+          <.button type="button" phx-click="" phx-target={@myself}>
+            Remove limit
+          </.button>
+        </div>
+      </div>
+    </.modal>
   </.form>
 </div>

From 28c52f0d02d659b905fad13b073d19a74a5bc14c Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Sat, 8 Feb 2025 12:37:22 +0000
Subject: [PATCH 25/39] fix: image uploader

---
 lib/atomic_web/components/image_uploader.ex   | 69 ++++++++++---------
 .../live/activity_live/form_component.ex      |  5 +-
 .../activity_live/form_component.html.heex    | 16 ++---
 mix.lock                                      |  2 +-
 4 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex
index 86d19f238..5c21019f7 100644
--- a/lib/atomic_web/components/image_uploader.ex
+++ b/lib/atomic_web/components/image_uploader.ex
@@ -9,45 +9,50 @@ defmodule AtomicWeb.Components.ImageUploader do
     cancel-image - cancels the upload of an image. This event should be defined in the component that you passed in the @target attribute.
   """
   use AtomicWeb, :live_component
+  attr :icon, :string, default: "hero-photo"
 
   def render(assigns) do
     ~H"""
-    <div>
-      <div class="shrink-0 1.5xl:shrink-0">
-        <.live_file_input upload={@uploads.image} class="hidden" />
-        <div class={
-            "#{if length(@uploads.image.entries) != 0 do
-              "hidden"
-            end} border-2 border-zinc-300 border-dashed rounded-md"
-          } phx-drop-target={@uploads.image.ref}>
-          <div class="mx-auto sm:col-span-6 lg:w-full">
-            <div class="my-[140px] flex justify-center px-6">
-              <div class="space-y-1 text-center">
-                <svg class="size-12 mx-auto text-zinc-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
-                  <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                </svg>
-                <div class="flex text-sm text-zinc-600">
-                  <label for="file-upload" class="relative cursor-pointer rounded-md font-medium text-orange-500 hover:text-red-800">
-                    <a onclick={"document.getElementById('#{@uploads.image.ref}').click()"}>
-                      Upload a file
-                    </a>
-                  </label>
-                  <p class="pl-1">or drag and drop</p>
-                </div>
-                <p class="text-xs text-zinc-500">
-                  PNG, JPG, GIF up to 10MB
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <section>
+    <div class="h-full">
+      <.live_file_input upload={@uploads.image} class="hidden" />
+      <div class="h-full shrink-0 1.5xl:shrink-0">
+        <section class="" phx-drop-target={@uploads.image.ref} onclick={"document.getElementById('#{@uploads.image.ref}').click()"}>
+          <%= if @uploads.image.entries == [] do %>
+            <%= if @image do %>
+              <img class="p-4" src={@image} />
+            <% else %>
+              <article class="h-full w-full">
+                <figure class="flex h-full items-center justify-center">
+                  <div class="flex h-full w-full place-items-center rounded-md border-2 border-dashed border-zinc-300">
+                    <div class="mx-auto sm:col-span-6 lg:w-full">
+                      <div class="my-[140px] flex justify-center px-6">
+                        <div class="space-y-1 text-center">
+                          <svg class="size-12 mx-auto text-zinc-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                          </svg>
+                          <div class="flex text-sm text-zinc-600">
+                            <span class="rounded-md font-medium text-orange-500">Upload a file</span>
+                            <p class="pl-1">or drag and drop</p>
+                          </div>
+                          <p class="text-xs text-zinc-500">
+                            PNG, JPG, GIF up to 10MB
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </figure>
+              </article>
+            <% end %>
+          <% end %>
+        </section>
+        <%= if @uploads.image.entries do %>
           <%= for entry <- @uploads.image.entries do %>
             <%= for err <- upload_errors(@uploads.image, entry) do %>
               <p class="alert alert-danger"><%= Phoenix.Naming.humanize(err) %></p>
             <% end %>
             <article class="upload-entry">
-              <figure class="w-[400px]">
+              <figure class="">
                 <.live_img_preview entry={entry} />
                 <div class="flex">
                   <figcaption>
@@ -64,7 +69,7 @@ defmodule AtomicWeb.Components.ImageUploader do
               </figure>
             </article>
           <% end %>
-        </section>
+        <% end %>
       </div>
     </div>
     """
diff --git a/lib/atomic_web/live/activity_live/form_component.ex b/lib/atomic_web/live/activity_live/form_component.ex
index 756e0d45c..56bd0f091 100644
--- a/lib/atomic_web/live/activity_live/form_component.ex
+++ b/lib/atomic_web/live/activity_live/form_component.ex
@@ -68,9 +68,8 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
   @impl true
   def handle_event("toggle_maximum_entries_modal", _, socket) do
     {:noreply,
-      socket
-      |> assign(:maximum_entries_modal, not socket.assigns.maximum_entries_modal)
-    }
+     socket
+     |> assign(:maximum_entries_modal, not socket.assigns.maximum_entries_modal)}
   end
 
   defp save_activity(socket, :new, activity_params) do
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 31e66aef9..1a3f0f0d6 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -2,7 +2,7 @@
   <.form id="activity-form" for={@form} phx-change="validate" phx-submit="save" phx-target={@myself}>
     <div class="flex flex-col justify-evenly gap-8 xl:flex-row">
       <div class="w-full xl:w-1/3">
-        <.live_component module={ImageUploader} id="uploader" uploads={@uploads} target={@myself} />
+        <.live_component module={ImageUploader} id="uploader" uploads={@uploads} target={@myself} image={Uploaders.Post.url({@activity.image, @activity}, :original)} />
       </div>
 
       <div class="flex flex-col">
@@ -87,14 +87,14 @@
           Capacity
         </label>
         <.button id="capacity_button" type="button" class="lg:w-full flex flex-col items-start px-3 py-3 border-gray-300 rounded-md bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
-          <.field 
-            class="text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900" 
-            type="number" 
-            field={@form[:maximum_entries]} 
-            label="Maximum entries" 
-            placeholder="Choose maximum entries" 
+          <.field
+            class="text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900"
+            type="number"
+            field={@form[:maximum_entries]}
+            label="Maximum entries"
+            placeholder="Choose maximum entries"
             readonly
-            required 
+            required
             label_class="hidden"
             wrapper_class="m-0"
             error_class="text-danger-600 placeholder-danger-700"
diff --git a/mix.lock b/mix.lock
index da0d37fd4..612101aa2 100644
--- a/mix.lock
+++ b/mix.lock
@@ -64,7 +64,7 @@
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.7", "354c321cf377240c7b8716899e182ce4890c5938111a1296add3ec74cf1715df", [:make, :mix, :rebar3], [], "hexpm", "fe4c190e8f37401d30167c8c405eda19469f34577987c76dde613e838bbc67f8"},
   "swoosh": {:hex, :swoosh, "1.17.0", "4a082a6ce4d60b1f48ffa725c8da0e2304504569ff550f4ed2d088c923039cb0", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "659b8bc25f7483b872d051a7f0731fb8d5312165be0d0302a3c783b566b0a290"},
-  "tabler_icons": {:git, "https://github.com/tabler/tabler-icons.git", "405bcfffba9cecf08e686145367dcdc9cc44eb5c", [sparse: "icons"]},
+  "tabler_icons": {:git, "https://github.com/tabler/tabler-icons.git", "a90ddb1fb22fbb28bcafcace6a43fe66ff1f16e2", [sparse: "icons"]},
   "tailwind": {:hex, :tailwind, "0.2.3", "277f08145d407de49650d0a4685dc062174bdd1ae7731c5f1da86163a24dfcdb", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "8e45e7a34a676a7747d04f7913a96c770c85e6be810a1d7f91e713d3a3655b5d"},
   "tailwind_formatter": {:hex, :tailwind_formatter, "0.3.7", "2728d031e6803dfddf63f1dd7c64b5b9fd70ffdf635709c50f47589f4fb48861", [:mix], [{:phoenix_live_view, ">= 0.17.6", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}], "hexpm", "3d91ac4d4622505b09c0f4678512281515b4fbe7644f012da1bd2722f5880185"},
   "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},

From 0f483263a6e0d2b34279c7fd4e661a54faad47b2 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Sat, 8 Feb 2025 13:12:35 +0000
Subject: [PATCH 26/39] fix: image uploader styling

---
 lib/atomic_web/components/image_uploader.ex | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex
index 5c21019f7..5b31f7a27 100644
--- a/lib/atomic_web/components/image_uploader.ex
+++ b/lib/atomic_web/components/image_uploader.ex
@@ -16,15 +16,19 @@ defmodule AtomicWeb.Components.ImageUploader do
     <div class="h-full">
       <.live_file_input upload={@uploads.image} class="hidden" />
       <div class="h-full shrink-0 1.5xl:shrink-0">
-        <section class="" phx-drop-target={@uploads.image.ref} onclick={"document.getElementById('#{@uploads.image.ref}').click()"}>
+        <section class={if @uploads.image.entries == [] && !@image, do: "h-full", else: ""} phx-drop-target={@uploads.image.ref} onclick={"document.getElementById('#{@uploads.image.ref}').click()"}>
           <%= if @uploads.image.entries == [] do %>
             <%= if @image do %>
-              <img class="p-4" src={@image} />
+              <div class="flex flex-col place-items-center">
+                <img class="p-4" src={@image} />
+                <span class="text-sm text-orange-500 cursor-pointer hover:text-red-800">Click to upload new image</span>
+                <p class="text-xs text-zinc-500">(PNG, JPG, GIF up to 10MB)</p>
+              </div>
             <% else %>
               <article class="h-full w-full">
                 <figure class="flex h-full items-center justify-center">
                   <div class="flex h-full w-full place-items-center rounded-md border-2 border-dashed border-zinc-300">
-                    <div class="mx-auto sm:col-span-6 lg:w-full">
+                    <div class="flex place-items-center justify-center h-full mx-auto sm:col-span-6 lg:w-full">
                       <div class="my-[140px] flex justify-center px-6">
                         <div class="space-y-1 text-center">
                           <svg class="size-12 mx-auto text-zinc-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
@@ -49,7 +53,9 @@ defmodule AtomicWeb.Components.ImageUploader do
         <%= if @uploads.image.entries do %>
           <%= for entry <- @uploads.image.entries do %>
             <%= for err <- upload_errors(@uploads.image, entry) do %>
-              <p class="alert alert-danger"><%= Phoenix.Naming.humanize(err) %></p>
+            <div class="flex justify-center">
+              <p class="alert alert-danger text-orange-500"><%= Phoenix.Naming.humanize(err) %></p>
+            </div>
             <% end %>
             <article class="upload-entry">
               <figure class="">

From 5380d9c21f9803a91a1201d166286c2c60688377 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Sun, 9 Feb 2025 14:43:33 +0000
Subject: [PATCH 27/39] feat: add links to users profiles to participants modal

---
 lib/atomic_web/live/activity_live/show.html.heex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index 9f49d43b1..58a501fdd 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -263,7 +263,7 @@
       <%= for participant <- @participants do %>
         <div class="h-6 py-6 px-0 flex items-center">
           <.avatar size={:xs} name={participant.name} type={:user} />
-          <span class="ml-4"><%= participant.name %></span>
+          <.link navigate={~p"/profile/#{participant.slug}"} class="ml-4 hover:underline"><%= participant.name %></.link>
         </div>
       <% end %>
     </div>

From ca3e7efe327828371e29cfd0e53535d3edf660b3 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Sun, 16 Feb 2025 21:03:48 +0000
Subject: [PATCH 28/39] feat: unlimited entries on activities

---
 lib/atomic/activities/activity.ex             |  8 +++--
 .../live/activity_live/form_component.ex      |  8 +++++
 .../activity_live/form_component.html.heex    | 29 ++++++++++++++++---
 .../live/activity_live/show.html.heex         |  7 +++--
 .../20221022010100_create_activities.exs      |  2 +-
 5 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/lib/atomic/activities/activity.ex b/lib/atomic/activities/activity.ex
index 5ab068249..2d4ac2c00 100644
--- a/lib/atomic/activities/activity.ex
+++ b/lib/atomic/activities/activity.ex
@@ -9,8 +9,8 @@ defmodule Atomic.Activities.Activity do
   alias Atomic.Location
   alias Atomic.Organizations.Organization
 
-  @required_fields ~w(title description start finish maximum_entries enrolled organization_id)a
-  @optional_fields ~w()a
+  @required_fields ~w(title description start finish enrolled organization_id)a
+  @optional_fields ~w(maximum_entries)a
 
   @derive {
     Flop.Schema,
@@ -29,7 +29,7 @@ defmodule Atomic.Activities.Activity do
     field :start, :naive_datetime
     field :finish, :naive_datetime
 
-    field :maximum_entries, :integer
+    field :maximum_entries, :integer, default: nil
     field :enrolled, :integer, default: 0
 
     field :image, Uploaders.Post.Type
@@ -102,6 +102,8 @@ defmodule Atomic.Activities.Activity do
     end
   end
 
+  def validate_enrollments_values(_enrolled, nil, changeset), do: changeset
+
   def validate_enrollments_values(enrolled, maximum_entries, changeset) do
     if enrolled > maximum_entries do
       add_error(changeset, :maximum_entries, gettext("maximum number of enrollments reached"))
diff --git a/lib/atomic_web/live/activity_live/form_component.ex b/lib/atomic_web/live/activity_live/form_component.ex
index 56bd0f091..1bb77109c 100644
--- a/lib/atomic_web/live/activity_live/form_component.ex
+++ b/lib/atomic_web/live/activity_live/form_component.ex
@@ -24,6 +24,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
      |> assign_form(changeset)
      |> assign(:description_modal, false)
      |> assign(:maximum_entries_modal, false)
+     |> assign(:has_max_capacity?, true)
      |> assign(:has_description?, initial_description)
      |> allow_upload(:image, accept: Uploaders.Post.extension_whitelist(), max_entries: 1)}
   end
@@ -72,6 +73,13 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
      |> assign(:maximum_entries_modal, not socket.assigns.maximum_entries_modal)}
   end
 
+  @impl true
+  def handle_event("remove_max_capacity", _, socket) do
+    {:noreply, socket
+      |> assign(:has_max_capacity?, false)
+      |> assign(:maximum_entries_modal, not socket.assigns.maximum_entries_modal)}
+  end
+
   defp save_activity(socket, :new, activity_params) do
     case Activities.create_activity_with_post(activity_params, &consume_image_data(socket, &1)) do
       {:ok, _activity} ->
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 1a3f0f0d6..540f4bd22 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -87,19 +87,36 @@
           Capacity
         </label>
         <.button id="capacity_button" type="button" class="lg:w-full flex flex-col items-start px-3 py-3 border-gray-300 rounded-md bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
-          <.field
+          <%= if @has_max_capacity? do %>
+            <.field
+              class="text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900"
+              type="number"
+              field={@form[:maximum_entries]}
+              label="Maximum entries"
+              placeholder="Choose maximum entries"
+              readonly
+              required
+              label_class="hidden"
+              wrapper_class="m-0"
+              error_class="text-danger-600 placeholder-danger-700"
+              error_label_class="text-danger-700"
+            />
+          <% else %>
+            <.field
             class="text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900"
             type="number"
             field={@form[:maximum_entries]}
             label="Maximum entries"
-            placeholder="Choose maximum entries"
+            placeholder="Unlimited"
             readonly
+            value="nil"
             required
             label_class="hidden"
             wrapper_class="m-0"
             error_class="text-danger-600 placeholder-danger-700"
             error_label_class="text-danger-700"
           />
+          <% end %>
         </.button>
 
         <div class="mt-4 flex-grow">
@@ -128,13 +145,17 @@
     <.modal :if={@maximum_entries_modal} id="maximum_entries_modal" show on_cancel={JS.push("toggle_maximum_entries_modal", target: @myself)}>
       <div class="w-full h-full">
         <div class="">
-          <.field class="" type="number" field={@form[:maximum_entries]} placeholder="Choose maximum entries" />
+          <%= if @has_max_capacity? do %>
+            <.field class="" type="number" field={@form[:maximum_entries]} placeholder="Choose maximum entries" />
+          <% else %>
+            <.field class="" type="number" value="nil" field={@form[:maximum_entries]} placeholder="Unlimited"/>
+          <% end %>
         </div>
         <div class="flex gap-3">
           <.button type="button" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
             Close
           </.button>
-          <.button type="button" phx-click="" phx-target={@myself}>
+          <.button type="button" phx-target={@myself} phx-click="remove_max_capacity">
             Remove limit
           </.button>
         </div>
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index 58a501fdd..95e51d1a6 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -81,7 +81,7 @@
             <div class="flex items-center gap-2">
               <.icon name="hero-user-group" class="h-5 w-5 text-gray-700" />
               <p class="font-medium">
-                <%= @activity.enrolled %> / <%= @activity.maximum_entries %>
+                <%= @activity.enrolled %> <%= if @activity.maximum_entries, do: "/ #{@activity.maximum_entries}" %>
               </p>
             </div>
           </.link>
@@ -199,7 +199,8 @@
           <h2 class="mb-4 flex-1 select-none truncate text-lg font-semibold text-zinc-900">Participants</h2>
           <div class="border-t border-l">
             <.table items={@participants} meta={@meta} filter={[]}>
-              <:col :let={participant} label="Name"><%= participant.name %></:col>
+              <:col :let={participant} label="Name"><.link navigate={~p"/profile/#{participant.slug}"} class="hover:underline"><%= participant.name %></.link>
+              </:col>
               <:col :let={participant} label="Email"><%= participant.email %></:col>
               <:col :let={participant} label="Phone number"><%= participant.phone_number %></:col>
             </.table>
@@ -219,7 +220,7 @@
 <!-- Ticket show modal -->
 <.modal :if={@live_action in [:ticket] and @enrolled?} id="ticket-modal" show on_cancel={JS.patch(~p"/activities/#{@activity.id}")}>
   <div class="w-full flex flex-col gap-2 text-center place-items-center">
-    <p class="text-md font-semibold text-gray-900">
+    <p class="text-md font-semibold text-gray-900 sm:w-1/2">
       <%= gettext("Show this code to the staff present at the activity to register your presence.") %>
     </p>
     <%= draw_ticket_qr_code(@enrollment_id) |> raw %>
diff --git a/priv/repo/migrations/20221022010100_create_activities.exs b/priv/repo/migrations/20221022010100_create_activities.exs
index b8f9d1ac1..659650493 100644
--- a/priv/repo/migrations/20221022010100_create_activities.exs
+++ b/priv/repo/migrations/20221022010100_create_activities.exs
@@ -11,7 +11,7 @@ defmodule Atomic.Repo.Migrations.CreateActivities do
       add :start, :naive_datetime, null: false
       add :finish, :naive_datetime, null: false
 
-      add :maximum_entries, :integer, null: false
+      add :maximum_entries, :integer, null: true
       add :enrolled, :integer, default: 0, null: false
 
       add :image, :string

From 929d758fee500a3d28c20c793eef5b114928d657 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Mon, 17 Feb 2025 18:10:25 +0000
Subject: [PATCH 29/39] feat: unlimited attendees

---
 lib/atomic_web/components/image_uploader.ex   | 10 +-
 .../live/activity_live/edit.html.heex         |  2 +-
 .../live/activity_live/form_component.ex      | 12 ++-
 .../activity_live/form_component.html.heex    | 56 +++++------
 .../live/activity_live/index.html.heex        | 16 ++--
 .../live/activity_live/new.html.heex          |  2 +-
 .../live/activity_live/show.html.heex         | 43 ++++-----
 .../live/announcement_live/edit.html.heex     |  2 +-
 .../live/announcement_live/new.html.heex      |  2 +-
 .../live/announcement_live/show.html.heex     | 12 +--
 .../live/calendar_live/show.html.heex         | 10 +-
 .../live/department_live/edit.html.heex       |  2 +-
 .../live/department_live/index.html.heex      |  2 +-
 lib/atomic_web/live/home_live/index.ex        |  5 +-
 lib/atomic_web/live/home_live/index.html.heex | 32 +++----
 .../cookies_live/show.html.heex               | 64 ++++++-------
 .../privacy_live/show.html.heex               | 96 +++++++++----------
 .../legal_terms_live/tos_live/show.html.heex  | 56 +++++------
 .../live/organization_live/index.html.heex    | 10 +-
 .../live/organization_live/show.html.heex     | 32 +++----
 .../live/partner_live/edit.html.heex          |  2 +-
 .../live/partner_live/index.html.heex         |  8 +-
 .../live/partner_live/show.html.heex          | 22 ++---
 .../profile_live/form_component.html.heex     | 48 +++++-----
 .../live/profile_live/show.html.heex          | 10 +-
 .../live/scanner_live/index.html.heex         |  6 +-
 lib/atomic_web/templates/error/404.html.heex  | 10 +-
 lib/atomic_web/templates/error/500.html.heex  |  2 +-
 lib/atomic_web/templates/layout/app.html.heex | 20 ++--
 .../templates/layout/live.html.heex           | 10 +-
 .../user_change_password/edit.html.heex       | 66 ++++++-------
 .../templates/user_registration/new.html.heex | 50 +++++-----
 .../user_reset_password/edit.html.heex        | 50 +++++-----
 .../user_reset_password/new.html.heex         | 20 ++--
 .../templates/user_session/new.html.heex      | 42 ++++----
 .../templates/user_settings/edit.html.heex    | 28 +++---
 .../templates/user_setup/edit.html.heex       | 46 ++++-----
 mix.lock                                      |  4 +-
 38 files changed, 458 insertions(+), 452 deletions(-)

diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex
index 5b31f7a27..2c125bcf3 100644
--- a/lib/atomic_web/components/image_uploader.ex
+++ b/lib/atomic_web/components/image_uploader.ex
@@ -21,14 +21,14 @@ defmodule AtomicWeb.Components.ImageUploader do
             <%= if @image do %>
               <div class="flex flex-col place-items-center">
                 <img class="p-4" src={@image} />
-                <span class="text-sm text-orange-500 cursor-pointer hover:text-red-800">Click to upload new image</span>
+                <span class="cursor-pointer text-sm text-orange-500 hover:text-red-800">Click to upload new image</span>
                 <p class="text-xs text-zinc-500">(PNG, JPG, GIF up to 10MB)</p>
               </div>
             <% else %>
               <article class="h-full w-full">
                 <figure class="flex h-full items-center justify-center">
                   <div class="flex h-full w-full place-items-center rounded-md border-2 border-dashed border-zinc-300">
-                    <div class="flex place-items-center justify-center h-full mx-auto sm:col-span-6 lg:w-full">
+                    <div class="mx-auto flex h-full place-items-center justify-center sm:col-span-6 lg:w-full">
                       <div class="my-[140px] flex justify-center px-6">
                         <div class="space-y-1 text-center">
                           <svg class="size-12 mx-auto text-zinc-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
@@ -53,9 +53,9 @@ defmodule AtomicWeb.Components.ImageUploader do
         <%= if @uploads.image.entries do %>
           <%= for entry <- @uploads.image.entries do %>
             <%= for err <- upload_errors(@uploads.image, entry) do %>
-            <div class="flex justify-center">
-              <p class="alert alert-danger text-orange-500"><%= Phoenix.Naming.humanize(err) %></p>
-            </div>
+              <div class="flex justify-center">
+                <p class="alert alert-danger text-orange-500"><%= Phoenix.Naming.humanize(err) %></p>
+              </div>
             <% end %>
             <article class="upload-entry">
               <figure class="">
diff --git a/lib/atomic_web/live/activity_live/edit.html.heex b/lib/atomic_web/live/activity_live/edit.html.heex
index fba5f6c9b..99ed60cbe 100644
--- a/lib/atomic_web/live/activity_live/edit.html.heex
+++ b/lib/atomic_web/live/activity_live/edit.html.heex
@@ -1,5 +1,5 @@
 <.page title="Edit Activity">
-  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
     <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={@activity.id} title={@page_title} action={@live_action} activity={@activity} current_organization={@activity.organization} return_to={~p"/activities/#{@activity.id}"} />
   </div>
 </.page>
diff --git a/lib/atomic_web/live/activity_live/form_component.ex b/lib/atomic_web/live/activity_live/form_component.ex
index 1bb77109c..2fec6a5da 100644
--- a/lib/atomic_web/live/activity_live/form_component.ex
+++ b/lib/atomic_web/live/activity_live/form_component.ex
@@ -24,7 +24,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
      |> assign_form(changeset)
      |> assign(:description_modal, false)
      |> assign(:maximum_entries_modal, false)
-     |> assign(:has_max_capacity?, true)
+     |> assign(:has_max_capacity?, activity.maximum_entries)
      |> assign(:has_description?, initial_description)
      |> allow_upload(:image, accept: Uploaders.Post.extension_whitelist(), max_entries: 1)}
   end
@@ -32,7 +32,9 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
   @impl true
   def handle_event("validate", %{"activity" => activity_params}, socket) do
     description = Map.get(activity_params, "description", "")
+    capacity = Map.get(activity_params, "max_entries", "")
     has_description = is_nil(description) || String.trim(description) == ""
+    has_capacity = is_nil(capacity) || String.trim(capacity) == ""
 
     changeset =
       socket.assigns.activity
@@ -42,6 +44,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
     {:noreply,
      socket
      |> assign(:has_description?, not has_description)
+     |> assign(:has_max_capacity?, has_capacity)
      |> assign_form(changeset)}
   end
 
@@ -75,9 +78,10 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
 
   @impl true
   def handle_event("remove_max_capacity", _, socket) do
-    {:noreply, socket
-      |> assign(:has_max_capacity?, false)
-      |> assign(:maximum_entries_modal, not socket.assigns.maximum_entries_modal)}
+    {:noreply,
+     socket
+     |> assign(:has_max_capacity?, false)
+     |> assign(:maximum_entries_modal, not socket.assigns.maximum_entries_modal)}
   end
 
   defp save_activity(socket, :new, activity_params) do
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 540f4bd22..1e95c3620 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -23,24 +23,24 @@
           </div>
         </div>
         <div class="flex w-full">
-          <div class="justify-top flex flex-col items-center pt-3 hidden sm:block">
+          <div class="justify-top flex hidden flex-col items-center pt-3 sm:block">
             <div class="size-3 bg-primary-600 m-1 rounded-full" />
             <div class="flex justify-center">
-              <div class="border-l-primary-600 h-[3.25rem] border-l border-dashed w-[3px]" />
+              <div class="border-l-primary-600 h-[3.25rem] w-[3px] border-l border-dashed" />
             </div>
             <div class="size-3 border-primary-600 m-1 rounded-full border" />
           </div>
           <div class="flex w-full flex-col">
-            <div class="text-nowrap flex flex-col sm:flex-row items-baseline justify-between gap-y-1 sm:p-1 sm:pl-3">
+            <div class="text-nowrap flex flex-col items-baseline justify-between gap-y-1 sm:flex-row sm:p-1 sm:pl-3">
               <span>Start</span>
               <div class="w-full sm:w-56">
-                <.field class="w-full sm:w-56 atomic-button atomic-button--primary-outline text-gray-900" type="datetime-local" field={@form[:start]} label_class="hidden" error_label_class="hidden" required />
+                <.field class="atomic-button atomic-button--primary-outline w-full text-gray-900 sm:w-56" type="datetime-local" field={@form[:start]} label_class="hidden" error_label_class="hidden" required />
               </div>
             </div>
-            <div class="text-nowrap flex flex-col sm:flex-row items-baseline justify-between gap-y-1 sm:p-1 sm:pl-3">
+            <div class="text-nowrap flex flex-col items-baseline justify-between gap-y-1 sm:flex-row sm:p-1 sm:pl-3">
               <span>End</span>
               <div class="w-full sm:w-56">
-                <.field class="w-full sm:w-56 atomic-button atomic-button--primary-outline text-gray-900" type="datetime-local" field={@form[:finish]} label_class="hidden" error_label_class="hidden" required />
+                <.field class="atomic-button atomic-button--primary-outline w-full text-gray-900 sm:w-56" type="datetime-local" field={@form[:finish]} label_class="hidden" error_label_class="hidden" required />
               </div>
             </div>
           </div>
@@ -49,9 +49,9 @@
         <label for="description_button" class="atomic-label atomic-label--required">
           Description
         </label>
-        <.button id="description_button" class="lg:w-full flex flex-col items-start px-3 py-3 border-gray-300 rounded-md bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+        <.button id="description_button" class="group atomic-button atomic-button--primary-outline flex flex-col items-start rounded-md border-gray-300 bg-white px-3 py-3 text-gray-300 focus-within:bg-white lg:w-full" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
           <%= if not @has_description? do %>
-            <label class="text-left cursor-pointer text-gray-500">
+            <label class="cursor-pointer text-left text-gray-500">
               Add description
             </label>
           <% end %>
@@ -67,7 +67,7 @@
               autocomplete="off"
               error_class="text-danger-600 placeholder-danger-700"
               error_label_class="text-danger-700"
-              class="text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900"
+              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
             />
           </div>
         </.button>
@@ -86,14 +86,14 @@
         <label for="capacity_button" class="atomic-label atomic-label--required">
           Capacity
         </label>
-        <.button id="capacity_button" type="button" class="lg:w-full flex flex-col items-start px-3 py-3 border-gray-300 rounded-md bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
+        <.button id="capacity_button" type="button" class="group atomic-button atomic-button--primary-outline flex flex-col items-start rounded-md border-gray-300 bg-white px-3 py-3 text-gray-300 focus-within:bg-white lg:w-full" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
           <%= if @has_max_capacity? do %>
             <.field
-              class="text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900"
+              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
               type="number"
               field={@form[:maximum_entries]}
               label="Maximum entries"
-              placeholder="Choose maximum entries"
+              placeholder="Choose maximum capacity"
               readonly
               required
               label_class="hidden"
@@ -103,19 +103,19 @@
             />
           <% else %>
             <.field
-            class="text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900"
-            type="number"
-            field={@form[:maximum_entries]}
-            label="Maximum entries"
-            placeholder="Unlimited"
-            readonly
-            value="nil"
-            required
-            label_class="hidden"
-            wrapper_class="m-0"
-            error_class="text-danger-600 placeholder-danger-700"
-            error_label_class="text-danger-700"
-          />
+              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
+              type="number"
+              field={@form[:maximum_entries]}
+              label="Maximum entries"
+              placeholder="Unlimited"
+              value=" "
+              readonly
+              required
+              label_class="hidden"
+              wrapper_class="m-0"
+              error_class="text-danger-600 placeholder-danger-700"
+              error_label_class="text-danger-700"
+            />
           <% end %>
         </.button>
 
@@ -135,7 +135,7 @@
     <.modal :if={@description_modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
       <div class="mt-4 flex-grow">
         <.field class="\-h-10 resize-none " type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
-        <div class="w-full flex justify-end">
+        <div class="flex w-full justify-end">
           <.button class="text" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
             <span><%= gettext("Done") %></span>
           </.button>
@@ -143,12 +143,12 @@
       </div>
     </.modal>
     <.modal :if={@maximum_entries_modal} id="maximum_entries_modal" show on_cancel={JS.push("toggle_maximum_entries_modal", target: @myself)}>
-      <div class="w-full h-full">
+      <div class="h-full w-full">
         <div class="">
           <%= if @has_max_capacity? do %>
             <.field class="" type="number" field={@form[:maximum_entries]} placeholder="Choose maximum entries" />
           <% else %>
-            <.field class="" type="number" value="nil" field={@form[:maximum_entries]} placeholder="Unlimited"/>
+            <.field class="" type="number" field={@form[:maximum_entries]} value="" placeholder="Unlimited" />
           <% end %>
         </div>
         <div class="flex gap-3">
diff --git a/lib/atomic_web/live/activity_live/index.html.heex b/lib/atomic_web/live/activity_live/index.html.heex
index 827865c0e..ef06130c8 100644
--- a/lib/atomic_web/live/activity_live/index.html.heex
+++ b/lib/atomic_web/live/activity_live/index.html.heex
@@ -7,11 +7,11 @@
     <% end %>
   </:actions>
   <!-- Tabs -->
-  <.tabs class="overflow-scroll scrollbar-hide max-w-5-xl mx-auto px-4 sm:px-6 lg:px-8">
+  <.tabs class="scrollbar-hide max-w-5-xl mx-auto overflow-scroll px-4 sm:px-6 lg:px-8">
     <%= if @is_authenticated? and @has_current_organization? do %>
       <.link patch="?tab=organization" replace={false}>
         <.tab active={@current_tab == "organization"}>
-          <.icon name="hero-globe-alt" class="h-5 w-5 mr-1" />
+          <.icon name="hero-globe-alt" class="mr-1 h-5 w-5" />
           <%= @current_user.current_organization.name <> gettext("'s activities") %>
         </.tab>
       </.link>
@@ -19,7 +19,7 @@
 
     <.link patch="?tab=discover" replace={false}>
       <.tab active={@current_tab == "discover"}>
-        <.icon name="hero-globe-alt" class="h-5 w-5 mr-1" />
+        <.icon name="hero-globe-alt" class="mr-1 h-5 w-5" />
         <%= gettext("Discover") %>
       </.tab>
     </.link>
@@ -27,7 +27,7 @@
     <%= if @is_authenticated? do %>
       <.link patch="?tab=following" replace={false}>
         <.tab active={@current_tab == "following"}>
-          <.icon name="hero-eye" class="h-5 w-5 mr-1" />
+          <.icon name="hero-eye" class="mr-1 h-5 w-5" />
           <%= gettext("Following") %>
         </.tab>
       </.link>
@@ -36,13 +36,13 @@
     <%= if @is_authenticated? do %>
       <.link patch="?tab=enrolled" replace={false}>
         <.tab active={@current_tab == "enrolled"} number={@upcoming_enrolled_count}>
-          <.icon name="hero-ticket" class="h-5 w-5 mr-1" />
+          <.icon name="hero-ticket" class="mr-1 h-5 w-5" />
           <%= gettext("Upcoming") %>
         </.tab>
       </.link>
       <.link patch="?tab=past" replace={false}>
         <.tab active={@current_tab == "past"}>
-          <.icon name="hero-clock" class="h-5 w-5 mr-1" />
+          <.icon name="hero-clock" class="mr-1 h-5 w-5" />
           <%= gettext("Past") %>
         </.tab>
       </.link>
@@ -55,7 +55,7 @@
         <.empty_state url={~p"/organizations/#{@current_organization}/activities/new"} placeholder="activity" />
       </div>
     <% else %>
-      <div class="text-zinc-600 mt-32 flex flex-col items-center w-full justify-center">
+      <div class="mt-32 flex w-full flex-col items-center justify-center text-zinc-600">
         <.icon class="w-24" name="hero-megaphone" />
         <p class="pt-4"><%= gettext("No activities to show.") %></p>
         <p><%= activities_empty_state_description(@current_tab) %></p>
@@ -63,7 +63,7 @@
     <% end %>
   <% else %>
     <div class="overflow-hidden bg-white">
-      <ul role="list" class="p-4 overflow-auto grid sm:grid-cols-2 gap-4">
+      <ul role="list" class="grid gap-4 overflow-auto p-4 sm:grid-cols-2">
         <%= for activity <- @activities do %>
           <li id={activity.id} class={@current_tab == "past" && "opacity-70"}>
             <.activity_card activity={activity} />
diff --git a/lib/atomic_web/live/activity_live/new.html.heex b/lib/atomic_web/live/activity_live/new.html.heex
index edc590ccb..0fd88a39a 100644
--- a/lib/atomic_web/live/activity_live/new.html.heex
+++ b/lib/atomic_web/live/activity_live/new.html.heex
@@ -1,5 +1,5 @@
 <.page title="New Activity">
-  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
     <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={:new} title={@page_title} action={@live_action} activity={@activity} current_organization={@current_organization} return_to={~p"/activities/"} />
   </div>
 </.page>
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index 95e51d1a6..712a74b12 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -1,7 +1,7 @@
 <.page title={@activity.title}>
   <:title_wrapper :let={title}>
     <div class="grid">
-      <h1 class="select-none pb-2  text-2xl font-bold text-gray-900">
+      <h1 class="select-none pb-2 text-2xl font-bold text-gray-900">
         <%= title %>
       </h1>
       <span class="flex items-center gap-2">
@@ -18,7 +18,7 @@
   <:actions>
     <%= if @current_view == "show" do %>
       <!-- Actions (desktop) -->
-      <div class="sm:flex hidden gap-4">
+      <div class="hidden gap-4 sm:flex">
         <%= if @is_authenticated? do %>
           <.button :if={not @max_enrolled? and !@enrolled?} color={:white} icon="hero-ticket" patch={~p"/activities/#{@activity.id}/enroll"} disabled={@enrolled?}>
             <%= gettext("Register") %>
@@ -32,7 +32,7 @@
         <% end %>
       </div>
       <!-- Actions (mobile) -->
-      <div class="sm:hidden block">
+      <div class="block sm:hidden">
         <.dropdown id="activity-actions-dropdown" items={generate_dropdown_items(@enrolled?, @has_permissions?, @activity, @socket)}>
           <:wrapper>
             <.button icon="hero-ellipsis-horizontal" color={:white} />
@@ -46,18 +46,18 @@
   </:actions>
   <!-- Activity image (mobile) -->
   <%= if @current_view == "show" do %>
-    <div class="sm:hidden pb-8 px-8 sm:px-6 flex w-full justify-center">
-      <div class="w-full aspect-square object-cover">
+    <div class="flex w-full justify-center px-8 pb-8 sm:hidden sm:px-6">
+      <div class="aspect-square w-full object-cover">
         <%= if @activity.image do %>
-          <img class="h-full w-full object-cover rounded-xl border" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+          <img class="h-full w-full rounded-xl border object-cover" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
         <% else %>
           <.gradient class="rounded-xl" seed={@activity.id} />
         <% end %>
       </div>
     </div>
-    <div class="grid grid-cols-5 gap-12 mx-4 max-w-5xl sm:mx-6 lg:mx-8">
-      <div class="sm:col-span-3 col-span-5 flex flex-col gap-6">
-        <div class="flex flex-row gap-16 justify-between sm:justify-normal">
+    <div class="mx-4 grid max-w-5xl grid-cols-5 gap-12 sm:mx-6 lg:mx-8">
+      <div class="col-span-5 flex flex-col gap-6 sm:col-span-3">
+        <div class="flex flex-row justify-between gap-16 sm:justify-normal">
           <!-- Date -->
           <%= if @activity.start do %>
             <div class="flex items-center gap-2">
@@ -88,11 +88,11 @@
         </div>
         <!-- Enrollment (desktop) -->
         <%= if @enrolled? do %>
-          <div class="sm:block hidden">
+          <div class="hidden sm:block">
             <div class="flex flex-row items-center gap-2">
               <.icon name="hero-check-badge" class="h-5 w-5 text-gray-700" />
               <div>
-                <h2 class="flex-1 select-none truncate text-md font-semibold text-gray-900">
+                <h2 class="text-md flex-1 select-none truncate font-semibold text-gray-900">
                   <%= gettext("You are going!") %>
                 </h2>
                 <p>
@@ -127,12 +127,12 @@
               <%= @activity.location.address %>
             </p>
           </div>
-          <figure class="border rounded-xl">
+          <figure class="rounded-xl border">
             <.map location={@activity.location.address} class="rounded-xl" />
           </figure>
         </div>
         <!-- Action buttons (mobile) -->
-        <div class="sm:hidden block pt-8">
+        <div class="block pt-8 sm:hidden">
           <!-- Register button -->
           <.button :if={not @max_enrolled? and !@enrolled?} icon="hero-ticket" size={:lg} patch={~p"/activities/#{@activity.id}/enroll/"} full_width>
             <%= gettext("Register") %>
@@ -146,17 +146,17 @@
           </div>
         </div>
       </div>
-      <div class="sm:block hidden col-span-2 w-full object-cover">
+      <div class="col-span-2 hidden w-full object-cover sm:block">
         <!-- Activity image (desktop) -->
         <%= if @activity.image do %>
-          <img class="max-h-fit w-full object-cover rounded-xl border" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+          <img class="max-h-fit w-full rounded-xl border object-cover" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
         <% else %>
           <.gradient class="!h-[50vh] rounded-xl border" seed={@activity.id} />
         <% end %>
         <div class="flex flex-col">
           <!-- Activity participants (desktop) -->
           <div :if={@activity.enrolled > 0} class="pt-4">
-            <h2 class="mb-2 flex-1 select-none truncate text-md font-semibold text-gray-900">
+            <h2 class="text-md mb-2 flex-1 select-none truncate font-semibold text-gray-900">
               <%= gettext("%{enrolled} Going", enrolled: @activity.enrolled) %>
             </h2>
             <.avatar_group
@@ -176,7 +176,7 @@
             />
           </div>
           <%= if length(@participants) == 0 do %>
-            <span class="text-orange-500 flex justify-center pt-2"><%= gettext("No participants on this activity") %></span>
+            <span class="flex justify-center pt-2 text-orange-500"><%= gettext("No participants on this activity") %></span>
           <% else %>
             <%= if @has_permissions? do %>
               <.link patch="?tab=participants" class="text-orange-500 hover:cursor-pointer hover:underline">
@@ -199,8 +199,7 @@
           <h2 class="mb-4 flex-1 select-none truncate text-lg font-semibold text-zinc-900">Participants</h2>
           <div class="border-t border-l">
             <.table items={@participants} meta={@meta} filter={[]}>
-              <:col :let={participant} label="Name"><.link navigate={~p"/profile/#{participant.slug}"} class="hover:underline"><%= participant.name %></.link>
-              </:col>
+              <:col :let={participant} label="Name"><.link navigate={~p"/profile/#{participant.slug}"} class="hover:underline"><%= participant.name %></.link></:col>
               <:col :let={participant} label="Email"><%= participant.email %></:col>
               <:col :let={participant} label="Phone number"><%= participant.phone_number %></:col>
             </.table>
@@ -219,7 +218,7 @@
 </.page>
 <!-- Ticket show modal -->
 <.modal :if={@live_action in [:ticket] and @enrolled?} id="ticket-modal" show on_cancel={JS.patch(~p"/activities/#{@activity.id}")}>
-  <div class="w-full flex flex-col gap-2 text-center place-items-center">
+  <div class="flex w-full flex-col place-items-center gap-2 text-center">
     <p class="text-md font-semibold text-gray-900 sm:w-1/2">
       <%= gettext("Show this code to the staff present at the activity to register your presence.") %>
     </p>
@@ -260,9 +259,9 @@
 <.modal :if={@participants_modal} show id="participants_modal" on_cancel={JS.push("handle_participants_modal")}>
   <span class="flex-l text-lg font-semibold text-gray-900">Participants</span>
   <%= if length(@participants) != 0 do %>
-    <div class="mt-2 flex align-center place-items-center flex-wrap w-full gap-4">
+    <div class="align-center mt-2 flex w-full flex-wrap place-items-center gap-4">
       <%= for participant <- @participants do %>
-        <div class="h-6 py-6 px-0 flex items-center">
+        <div class="flex h-6 items-center px-0 py-6">
           <.avatar size={:xs} name={participant.name} type={:user} />
           <.link navigate={~p"/profile/#{participant.slug}"} class="ml-4 hover:underline"><%= participant.name %></.link>
         </div>
diff --git a/lib/atomic_web/live/announcement_live/edit.html.heex b/lib/atomic_web/live/announcement_live/edit.html.heex
index c3db0c4f7..a803ca2d0 100644
--- a/lib/atomic_web/live/announcement_live/edit.html.heex
+++ b/lib/atomic_web/live/announcement_live/edit.html.heex
@@ -4,7 +4,7 @@
       <%= gettext("Delete") %>
     </.button>
   </:actions>
-  <div class="pt-4 px-4">
+  <div class="px-4 pt-4">
     <.live_component module={AtomicWeb.AnnouncementLive.FormComponent} id={@announcement.id} organization={@current_organization} title={@page_title} action={@live_action} announcement={@announcement} return_to={~p"/announcements/#{@announcement}"} />
   </div>
 </.page>
diff --git a/lib/atomic_web/live/announcement_live/new.html.heex b/lib/atomic_web/live/announcement_live/new.html.heex
index bda286c44..293c0376b 100644
--- a/lib/atomic_web/live/announcement_live/new.html.heex
+++ b/lib/atomic_web/live/announcement_live/new.html.heex
@@ -1,5 +1,5 @@
 <.page title={gettext("New Announcement")}>
-  <div class="pt-4 px-4">
+  <div class="px-4 pt-4">
     <.live_component module={AtomicWeb.AnnouncementLive.FormComponent} id={:new} organization={@current_organization} title={@page_title} action={@live_action} announcement={@announcement} return_to={~p"/announcements"} />
   </div>
 </.page>
diff --git a/lib/atomic_web/live/announcement_live/show.html.heex b/lib/atomic_web/live/announcement_live/show.html.heex
index 308ae58e5..a3a37de12 100644
--- a/lib/atomic_web/live/announcement_live/show.html.heex
+++ b/lib/atomic_web/live/announcement_live/show.html.heex
@@ -1,7 +1,7 @@
-<div class="py-4 px-4 sm:px-0">
-  <div class="px-4 flex flex-col gap-2 mt-6 sm:flex-row sm:items-center">
+<div class="px-4 py-4 sm:px-0">
+  <div class="mt-6 flex flex-col gap-2 px-4 sm:flex-row sm:items-center">
     <div>
-      <div class="flex justify-between items-center">
+      <div class="flex items-center justify-between">
         <h4 class="text-2xl font-bold text-zinc-800">
           <%= @announcement.title %>
         </h4>
@@ -14,9 +14,9 @@
 </div>
 
 <%= if @has_permissions? do %>
-  <.link patch={~p"/organizations/#{@announcement.organization}/announcements/#{@announcement}/edit"} class="px-2 button">
-    <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-      <.icon name="hero-pencil-solid" class="mr-3 w-5 h-5 text-zinc-400" /> Edit
+  <.link patch={~p"/organizations/#{@announcement.organization}/announcements/#{@announcement}/edit"} class="button px-2">
+    <div type="button" class="inline-flex w-fit justify-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
+      <.icon name="hero-pencil-solid" class="mr-3 h-5 w-5 text-zinc-400" /> Edit
     </div>
   </.link>
 <% end %>
diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex
index 402861149..df7226327 100644
--- a/lib/atomic_web/live/calendar_live/show.html.heex
+++ b/lib/atomic_web/live/calendar_live/show.html.heex
@@ -1,7 +1,7 @@
 <.page title="Calendar">
-  <div class="ring-zinc-900/10 mx-4 overflow-hidden rounded-lg bg-zincf-50 ring-1 lg:min-h-[787px] lg:mx-8 lg:h-0">
+  <div class="ring-zinc-900/10 bg-zincf-50 mx-4 overflow-hidden rounded-lg ring-1 lg:min-h-[787px] lg:mx-8 lg:h-0">
     <div class="lg:flex lg:h-full lg:flex-col">
-      <header class="flex flex-none items-center justify-between border-b border-zincf-200 px-6 py-4">
+      <header class="border-zincf-200 flex flex-none items-center justify-between border-b px-6 py-4">
         <div class="flex-1">
           <div class="relative flex w-full items-center justify-between lg:flex-none">
             <span class="text-base font-semibold text-zinc-900">
@@ -28,7 +28,7 @@
                 <button type="button" phx-click="present" class="hidden border-y border-zinc-300 px-3.5 text-sm font-semibold text-zinc-900 hover:bg-zincf-50 focus:relative md:block">
                   <span><%= gettext("Today") %></span>
                 </button>
-                <span class="relative -mx-px h-5 w-px bg-zincf-300 md:hidden"></span>
+                <span class="bg-zincf-300 relative -mx-px h-5 w-px md:hidden"></span>
                 <button type="button" phx-click="next" class="flex h-9 w-12 items-center justify-center rounded-r-md border-y border-r border-zinc-300 pl-1 text-zinc-400 hover:text-zinc-500 focus:relative md:w-9 md:pl-0 md:hover:bg-zincf-50">
                   <span class="sr-only">Next month</span>
                   <.icon name="hero-chevron-right-solid" class="size-3 sm:size-5" />
@@ -40,7 +40,7 @@
                   orientation={:down}
                   items={
                     [
-                      %{name: gettext("Go to today"), phx_click: "present", class: "md:hidden border-b border-zinc-100"},
+                      %{name: gettext("Go to today"), phx_click: "present", class: "border-b border-zinc-100 md:hidden"},
                       # Link that switches mode
                       %{name: gettext("Week view"), patch: "?mode=week"},
                       %{name: gettext("Month view"), patch: "?mode=month"}
@@ -58,7 +58,7 @@
                         <.icon name="hero-chevron-down-solid" />
                       </span>
                     </button>
-                    <button type="button" class="ml-5 md:hidden flex items-center rounded-full border border-transparent py-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
+                    <button type="button" class="ml-5 flex items-center rounded-full border border-transparent py-2 text-zinc-400 hover:text-zinc-500 md:hidden" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
                       <span class="sr-only">Open menu</span>
                       <.icon name="hero-ellipsis-horizontal-solid" class="size-5" />
                     </button>
diff --git a/lib/atomic_web/live/department_live/edit.html.heex b/lib/atomic_web/live/department_live/edit.html.heex
index 40092c0b8..71cfe7a2d 100644
--- a/lib/atomic_web/live/department_live/edit.html.heex
+++ b/lib/atomic_web/live/department_live/edit.html.heex
@@ -26,7 +26,7 @@
       </div>
     <% end %>
   </:actions>
-  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
     <.live_component
       module={AtomicWeb.DepartmentLive.FormComponent}
       id="department-edit"
diff --git a/lib/atomic_web/live/department_live/index.html.heex b/lib/atomic_web/live/department_live/index.html.heex
index f6002c3cf..439d9ac2e 100644
--- a/lib/atomic_web/live/department_live/index.html.heex
+++ b/lib/atomic_web/live/department_live/index.html.heex
@@ -12,7 +12,7 @@
       <.empty_state url={~p"/organizations/#{@current_organization}/departments/new"} placeholder="department" />
     </div>
   <% else %>
-    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-4 px-4 mx-auto max-w-5xl sm:px-6 lg:px-8">
+    <div class="mx-auto grid max-w-5xl grid-cols-1 gap-4 px-4 sm:grid-cols-2 sm:px-6 md:grid-cols-2 lg:px-8">
       <%= for {department, collaborators} <- @departments do %>
         <.link navigate={~p"/organizations/#{@current_organization}/departments/#{department}"}>
           <.department_card department={department} collaborators={collaborators} />
diff --git a/lib/atomic_web/live/home_live/index.ex b/lib/atomic_web/live/home_live/index.ex
index 9af04ca75..bbee5d42f 100644
--- a/lib/atomic_web/live/home_live/index.ex
+++ b/lib/atomic_web/live/home_live/index.ex
@@ -118,7 +118,10 @@ defmodule AtomicWeb.HomeLive.Index do
 
   defp fetch_user_schedule(user) do
     {daily, weekly} =
-      Activities.list_user_activities(user.id, preloads: [:organization], order_by: [desc: :start])
+      Activities.list_user_activities(user.id,
+        preloads: [:organization],
+        order_by: [desc: :start]
+      )
       |> Enum.reduce({[], []}, &process_activity/2)
 
     %{daily: Enum.take(daily, 3), weekly: Enum.take(weekly, 3)}
diff --git a/lib/atomic_web/live/home_live/index.html.heex b/lib/atomic_web/live/home_live/index.html.heex
index bf8fdd767..0bf7f2d04 100644
--- a/lib/atomic_web/live/home_live/index.html.heex
+++ b/lib/atomic_web/live/home_live/index.html.heex
@@ -1,29 +1,29 @@
 <div class="flex min-h-full flex-col items-stretch justify-between lg:flex-row">
-  <div class="flex flex-col w-full bg-white lg:border-r lg:flex-row">
-    <main class="relative z-0 flex-1 mb-10 xl:order-last focus:outline-none">
+  <div class="flex w-full flex-col bg-white lg:flex-row lg:border-r">
+    <main class="relative z-0 mb-10 flex-1 focus:outline-none xl:order-last">
       <article class="sticky top-0">
         <!-- Header -->
         <div class="hidden lg:block">
-          <div class="px-4 mx-auto max-w-5xl sm:px-6 lg:px-8">
-            <div class="flex flex-row my-6 min-w-0 select-none gap-x-2">
+          <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+            <div class="my-6 flex min-w-0 select-none flex-row gap-x-2">
               <%= if @is_authenticated? do %>
-                <h1 class="text-2xl font-bold text-zinc-900 truncate">
+                <h1 class="truncate text-2xl font-bold text-zinc-900">
                   Welcome, <%= @current_user.name %>
                 </h1>
               <% else %>
-                <h1 class="text-2xl font-bold text-zinc-900 truncate">
+                <h1 class="truncate text-2xl font-bold text-zinc-900">
                   Welcome to Atomic
                 </h1>
               <% end %>
-              <span class="text-2xl animate-wave">
+              <span class="animate-wave text-2xl">
                 👋
               </span>
             </div>
           </div>
         </div>
         <!-- Tabs -->
-        <div x-data="{ option: 'all' }" class="sticky top-10 lg:top-0 z-10 bg-white block">
-          <.tabs class="max-w-5xl mx-auto pt-1 px-4 sm:px-6 lg:px-8">
+        <div x-data="{ option: 'all' }" class="sticky top-10 z-10 block bg-white lg:top-0">
+          <.tabs class="mx-auto max-w-5xl px-4 pt-1 sm:px-6 lg:px-8">
             <.tab id="tab-all" active={@current_tab == "all"} phx-click="load-all" phx-hook="ScrollToTop">
               <%= gettext("All") %>
             </.tab>
@@ -45,7 +45,7 @@
             </div>
           <% else %>
             <ul id="feed" role="list" phx-update="stream" phx-viewport-bottom="load-more">
-              <li :for={{id, post} <- @streams.posts} id={id} class="py-4 px-4 mx-auto max-w-5xl border-b border-zinc-200 sm:px-6 lg:px-8">
+              <li :for={{id, post} <- @streams.posts} id={id} class="mx-auto max-w-5xl border-b border-zinc-200 px-4 py-4 sm:px-6 lg:px-8">
                 <%= if post.type == :activity do %>
                   <.link navigate={~p"/activities/#{post.activity}"}>
                     <.activity activity={post.activity} />
@@ -64,15 +64,15 @@
       </article>
     </main>
   </div>
-  <div id="scroll-panel" phx-hook="StickyScroll" class="hidden h-fit pb-6 w-full border-t border-zinc-200 sm:pr-6 lg:block lg:flex-shrink-0 lg:pb-0 lg:w-72 lg:border-t-0 xl:pr-0 sticky top-0">
+  <div id="scroll-panel" phx-hook="StickyScroll" class="sticky top-0 hidden h-fit w-full border-t border-zinc-200 pb-6 sm:pr-6 lg:block lg:w-72 lg:flex-shrink-0 lg:border-t-0 lg:pb-0 xl:pr-0">
     <!-- Organizations to follow -->
-    <section aria-labelledby="organizations-to-follow" class="border-b border-zinc-200 pl-6 pr-4 pt-6">
+    <section aria-labelledby="organizations-to-follow" class="border-b border-zinc-200 pt-6 pr-4 pl-6">
       <.follow_suggestions current_user={@current_user} organizations={@organizations} />
     </section>
     <!-- Schedule -->
-    <section aria-labelledby="schedule" class="pl-6 pr-4">
-      <div class="flex justify-between items-center pt-4">
-        <h1 class="text-xl font-bold text-zinc-90">Schedule</h1>
+    <section aria-labelledby="schedule" class="pr-4 pl-6">
+      <div class="flex items-center justify-between pt-4">
+        <h1 class="text-zinc-90 text-xl font-bold">Schedule</h1>
         <.dropdown
           :if={@current_user}
           id="schedule-dropdown"
@@ -89,7 +89,7 @@
           ]}
         >
           <:wrapper>
-            <.button color={:white} size={:xs} class="flex space-x-1 items-center">
+            <.button color={:white} size={:xs} class="flex items-center space-x-1">
               <span>
                 <%= if @schedule == :user do %>
                   <%= gettext("My schedule") %>
diff --git a/lib/atomic_web/live/legal_terms_live/cookies_live/show.html.heex b/lib/atomic_web/live/legal_terms_live/cookies_live/show.html.heex
index 4abe427eb..7c969ecd1 100644
--- a/lib/atomic_web/live/legal_terms_live/cookies_live/show.html.heex
+++ b/lib/atomic_web/live/legal_terms_live/cookies_live/show.html.heex
@@ -1,5 +1,5 @@
-<main class="px-4 w-full flex justify-center">
-  <div class="flex flex-col max-w-[2000px]">
+<main class="flex w-full justify-center px-4">
+  <div class="max-w-[2000px] flex flex-col">
     <!-- Header -->
     <.header page_name="Cookie Policy" />
     <!-- Main title -->
@@ -7,25 +7,25 @@
     <!-- Black container -->
     <.black_bar black_bar_text="Lorem ipsum sit dor amet" />
     <!-- Content Section -->
-    <section class="w-full px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
-      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">How We Use Cookies</h2>
+    <section class="w-full px-4 pt-16 sm:px-8 md:px-36 2xl:px-96">
+      <h2 class="mb-8 text-2xl font-semibold sm:text-4xl">How We Use Cookies</h2>
       <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
       <br />
-      <ul class="list-disc mx-6 mb-8">
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Jonas ipsum dolor sit amet, consectetur Jonas elit.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Vivamus Jonas tincidunt, Jonas feugiat sapien Jonas, accumsan Jonas ligula erat Jonas.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Fusce Jonas fermentum Jonas ornare.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Curabitur Jonas vel urna Jonas pharetra Jonas semper.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Quisque Jonas purus nisl, aliquet Jonas varius a Jonas dictum a Jonas tempus.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Pellentesque habitant morbi Jonas tristique senectus Jonas netus Jonas malesuada fames ac turpis Jonas.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Proin Jonas scelerisque nunc Jonas sodales.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Sed Jonas dapibus risus vel Jonas porta, non Jonas interdum nisl.</li>
+      <ul class="mx-6 mb-8 list-disc">
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Jonas ipsum dolor sit amet, consectetur Jonas elit.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Vivamus Jonas tincidunt, Jonas feugiat sapien Jonas, accumsan Jonas ligula erat Jonas.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Fusce Jonas fermentum Jonas ornare.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Curabitur Jonas vel urna Jonas pharetra Jonas semper.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Quisque Jonas purus nisl, aliquet Jonas varius a Jonas dictum a Jonas tempus.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Pellentesque habitant morbi Jonas tristique senectus Jonas netus Jonas malesuada fames ac turpis Jonas.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Proin Jonas scelerisque nunc Jonas sodales.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Sed Jonas dapibus risus vel Jonas porta, non Jonas interdum nisl.</li>
       </ul>
       <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
 
-      <div class="border my-8"></div>
+      <div class="my-8 border"></div>
 
-      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">What are cookies, pixels, and local storage?</h2>
+      <h2 class="mb-8 text-2xl font-semibold sm:text-4xl">What are cookies, pixels, and local storage?</h2>
       <p class="text-md sm:text-lg">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
       </p>
@@ -38,41 +38,41 @@
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
       </p>
 
-      <div class="border my-8"></div>
+      <div class="my-8 border"></div>
 
-      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Why do our services use these technologies?</h2>
+      <h2 class="mb-8 text-2xl font-semibold sm:text-4xl">Why do our services use these technologies?</h2>
       <p class="text-md sm:text-lg">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
       </p>
 
-      <div class="border my-8"></div>
+      <div class="my-8 border"></div>
 
-      <ul class="list-disc mx-6 mb-8">
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Jonas ipsum dolor sit amet, consectetur Jonas elit.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Vivamus Jonas tincidunt, Jonas feugiat sapien Jonas, accumsan Jonas ligula erat Jonas.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Fusce Jonas fermentum Jonas ornare.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Curabitur Jonas vel urna Jonas pharetra Jonas semper.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Quisque Jonas purus nisl, aliquet Jonas varius a Jonas dictum a Jonas tempus.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Pellentesque habitant morbi Jonas tristique senectus Jonas netus Jonas malesuada fames ac turpis Jonas.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Proin Jonas scelerisque nunc Jonas sodales.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Sed Jonas dapibus risus vel Jonas porta, non Jonas interdum nisl.</li>
+      <ul class="mx-6 mb-8 list-disc">
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Jonas ipsum dolor sit amet, consectetur Jonas elit.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Vivamus Jonas tincidunt, Jonas feugiat sapien Jonas, accumsan Jonas ligula erat Jonas.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Fusce Jonas fermentum Jonas ornare.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Curabitur Jonas vel urna Jonas pharetra Jonas semper.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Quisque Jonas purus nisl, aliquet Jonas varius a Jonas dictum a Jonas tempus.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Pellentesque habitant morbi Jonas tristique senectus Jonas netus Jonas malesuada fames ac turpis Jonas.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Proin Jonas scelerisque nunc Jonas sodales.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Sed Jonas dapibus risus vel Jonas porta, non Jonas interdum nisl.</li>
       </ul>
 
-      <div class="border my-8"></div>
+      <div class="my-8 border"></div>
 
-      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
+      <h2 class="mb-8 text-2xl font-semibold sm:text-4xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
       <p class="text-md sm:text-lg">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, quisquam? Ex harum aliquam dolores est asperiores mollitia, similique magni illum ea repellendus doloribus consequuntur sit distinctio sed dignissimos fuga placeat!
       </p>
 
-      <div class="border my-8"></div>
+      <div class="my-8 border"></div>
 
-      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Jonas Johanes Johnson</h2>
+      <h2 class="mb-8 text-2xl font-semibold sm:text-4xl">Jonas Johanes Johnson</h2>
       <p class="text-md sm:text-lg">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
       </p>
 
-      <div class="border my-8"></div>
+      <div class="my-8 border"></div>
     </section>
   </div>
 </main>
diff --git a/lib/atomic_web/live/legal_terms_live/privacy_live/show.html.heex b/lib/atomic_web/live/legal_terms_live/privacy_live/show.html.heex
index ef8cc15e9..0d0a2b8f3 100644
--- a/lib/atomic_web/live/legal_terms_live/privacy_live/show.html.heex
+++ b/lib/atomic_web/live/legal_terms_live/privacy_live/show.html.heex
@@ -1,5 +1,5 @@
-<main class="px-4 w-full flex justify-center">
-  <div class="flex flex-col max-w-[2000px]">
+<main class="flex w-full justify-center px-4">
+  <div class="max-w-[2000px] flex flex-col">
     <!-- Header -->
     <.header page_name="Privacy Policy" />
     <!-- Main title -->
@@ -7,8 +7,8 @@
     <!-- Black container -->
     <.black_bar black_bar_text="Lorem ipsum sit dor amet" />
     <!-- Summary Section -->
-    <section class="px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
-      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Before you scroll, jonas this</h2>
+    <section class="px-4 pt-16 sm:px-8 md:px-36 2xl:px-96">
+      <h2 class="mb-8 text-2xl font-semibold sm:text-4xl">Before you scroll, jonas this</h2>
       <p class="text-md sm:text-lg">
         Jonas ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia maxime tempore sapiente reiciendis omnis reprehenderit maiores fuga assumenda porro sequi cupiditate quibusdam, voluptatem blanditiis, quos inventore cumque distinctio atque ad!
       </p>
@@ -17,105 +17,105 @@
       <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
     </section>
     <!-- Grid Section -->
-    <section class="px-4 sm:px-8 md:px-36 2xl:px-96 pt-12">
+    <section class="px-4 pt-12 sm:px-8 md:px-36 2xl:px-96">
       <!-- Grid Container -->
-      <div class="grid place-items-center grid-cols-1 sm:place-items-initial sm:grid-cols-2 sm:grid-rows-3 lg:grid-cols-3 lg:grid-rows-2">
+      <div class="grid grid-cols-1 place-items-center sm:place-items-initial sm:grid-cols-2 sm:grid-rows-3 lg:grid-cols-3 lg:grid-rows-2">
         <!-- Grid Item 1 -->
-        <div class="w-full flex flex-col justify-center h-44 sm:h-56">
-          <h3 class="text-2xl font-semibold pb-8">Jonas Johaness</h3>
-          <a href="#section1" class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+        <div class="flex h-44 w-full flex-col justify-center sm:h-56">
+          <h3 class="pb-8 text-2xl font-semibold">Jonas Johaness</h3>
+          <a href="#section1" class="cursor-pointer underline hover:text-zinc-600">Jonas ipsum dolor sit amet consectetur</a>
         </div>
         <!-- Grid Item 2 -->
-        <div class="w-full flex flex-col justify-center h-44 sm:h-56">
-          <h3 class="text-2xl font-semibold pb-8">Jonas Johaness</h3>
-          <a href="#section2" class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+        <div class="flex h-44 w-full flex-col justify-center sm:h-56">
+          <h3 class="pb-8 text-2xl font-semibold">Jonas Johaness</h3>
+          <a href="#section2" class="cursor-pointer underline hover:text-zinc-600">Jonas ipsum dolor sit amet consectetur</a>
         </div>
         <!-- Grid Item 3 -->
-        <div class="w-full flex flex-col justify-center h-44 sm:h-56">
-          <h3 class="text-2xl font-semibold pb-8">Jonas Johaness</h3>
-          <a href="#section3" class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+        <div class="flex h-44 w-full flex-col justify-center sm:h-56">
+          <h3 class="pb-8 text-2xl font-semibold">Jonas Johaness</h3>
+          <a href="#section3" class="cursor-pointer underline hover:text-zinc-600">Jonas ipsum dolor sit amet consectetur</a>
         </div>
         <!-- Grid Item 4 -->
-        <div class="w-full flex flex-col justify-center h-44 sm:h-56">
-          <h3 class="text-2xl font-semibold pb-8">Jonas Johaness</h3>
-          <a href="#section4" class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+        <div class="flex h-44 w-full flex-col justify-center sm:h-56">
+          <h3 class="pb-8 text-2xl font-semibold">Jonas Johaness</h3>
+          <a href="#section4" class="cursor-pointer underline hover:text-zinc-600">Jonas ipsum dolor sit amet consectetur</a>
         </div>
         <!-- Grid Item 5 -->
-        <div class="w-full flex flex-col justify-center h-44 sm:h-56">
-          <h3 class="text-2xl font-semibold pb-8">Jonas Johaness</h3>
-          <a href="#section5" class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+        <div class="flex h-44 w-full flex-col justify-center sm:h-56">
+          <h3 class="pb-8 text-2xl font-semibold">Jonas Johaness</h3>
+          <a href="#section5" class="cursor-pointer underline hover:text-zinc-600">Jonas ipsum dolor sit amet consectetur</a>
         </div>
         <!-- Grid Item 6 -->
-        <div class="w-full flex flex-col justify-center h-44 sm:h-56">
-          <h3 class="text-2xl font-semibold pb-8">Jonas Johaness</h3>
-          <a href="#section6" class="underline hover:text-zinc-600 cursor-pointer">Jonas ipsum dolor sit amet consectetur</a>
+        <div class="flex h-44 w-full flex-col justify-center sm:h-56">
+          <h3 class="pb-8 text-2xl font-semibold">Jonas Johaness</h3>
+          <a href="#section6" class="cursor-pointer underline hover:text-zinc-600">Jonas ipsum dolor sit amet consectetur</a>
         </div>
       </div>
-      <div class="border my-8"></div>
+      <div class="my-8 border"></div>
     </section>
     <!-- Terms of Service Content Section -->
-    <section class="flex flex-col px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
+    <section class="flex flex-col px-4 pt-16 sm:px-8 md:px-36 2xl:px-96">
       <div class="flex">
         <!-- Sticky part -->
-        <div class="hidden xl:block xl:w-1/4 pr-20">
+        <div class="hidden pr-20 xl:block xl:w-1/4">
           <ul class="sticky top-40">
-            <li><a href="#section1" class="text-sm font-semibold pb-2">1. Information We Collect </a></li>
-            <li><a href="#section2" class="text-sm font-semibold pb-2">2. How We Use Information</a></li>
-            <li><a href="#section3" class="text-sm font-semibold pb-2">3. Sharing Information</a></li>
-            <li><a href="#section4" class="text-sm font-semibold pb-2">4. How Long We Keep Information</a></li>
-            <li><a href="#section5" class="text-sm font-semibold pb-2">5. Take Control</a></li>
-            <li><a href="#section6" class="text-sm font-semibold pb-2">6. Your Rights and Ours</a></li>
-            <li><a href="#section7" class="text-sm font-semibold pb-2">7. Atomic's Audience</a></li>
-            <li><a href="#section8" class="text-sm font-semibold pb-2">8. Changes To This Privacy Policy</a></li>
-            <li><a href="#section9" class="text-sm font-semibold pb-2">9. General</a></li>
-            <li><a href="#section10" class="text-sm font-semibold pb-2">10. How To Contact Atomic</a></li>
+            <li><a href="#section1" class="pb-2 text-sm font-semibold">1. Information We Collect </a></li>
+            <li><a href="#section2" class="pb-2 text-sm font-semibold">2. How We Use Information</a></li>
+            <li><a href="#section3" class="pb-2 text-sm font-semibold">3. Sharing Information</a></li>
+            <li><a href="#section4" class="pb-2 text-sm font-semibold">4. How Long We Keep Information</a></li>
+            <li><a href="#section5" class="pb-2 text-sm font-semibold">5. Take Control</a></li>
+            <li><a href="#section6" class="pb-2 text-sm font-semibold">6. Your Rights and Ours</a></li>
+            <li><a href="#section7" class="pb-2 text-sm font-semibold">7. Atomic's Audience</a></li>
+            <li><a href="#section8" class="pb-2 text-sm font-semibold">8. Changes To This Privacy Policy</a></li>
+            <li><a href="#section9" class="pb-2 text-sm font-semibold">9. General</a></li>
+            <li><a href="#section10" class="pb-2 text-sm font-semibold">10. How To Contact Atomic</a></li>
           </ul>
         </div>
         <!-- Content -->
         <div class="xl:w-3/4">
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 scroll-mt-24" id="section1">1. Information We Collect</h3>
+          <h3 class="mb-8 scroll-mt-24 text-4xl font-semibold sm:text-5xl" id="section1">1. Information We Collect</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section2">2. How We Use Information</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section2">2. How We Use Information</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section3">3. Sharing Information</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section3">3. Sharing Information</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section4">4. How Long We Keep Information</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section4">4. How Long We Keep Information</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section5">5. Take Control</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section5">5. Take Control</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section6">6. Your Rights and Ours</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section6">6. Your Rights and Ours</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section7">7. Atomic's Audience</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section7">7. Atomic's Audience</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section8">8. Changes To This Privacy Policy</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section8">8. Changes To This Privacy Policy</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section9">9. General</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section9">9. General</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section10">10. How to Contact Atomic</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section10">10. How to Contact Atomic</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
         </div>
       </div>
-      <div class="border my-8"></div>
+      <div class="my-8 border"></div>
     </section>
   </div>
 </main>
diff --git a/lib/atomic_web/live/legal_terms_live/tos_live/show.html.heex b/lib/atomic_web/live/legal_terms_live/tos_live/show.html.heex
index 20d8ae3a2..c0596cf36 100644
--- a/lib/atomic_web/live/legal_terms_live/tos_live/show.html.heex
+++ b/lib/atomic_web/live/legal_terms_live/tos_live/show.html.heex
@@ -1,5 +1,5 @@
-<main class="px-4 w-full flex justify-center">
-  <div class="flex flex-col max-w-[2000px]">
+<main class="flex w-full justify-center px-4">
+  <div class="max-w-[2000px] flex flex-col">
     <!-- Header -->
     <.header page_name="Terms of Service" />
     <!-- Main title -->
@@ -7,80 +7,80 @@
     <!-- Black container -->
     <.black_bar black_bar_text="Lorem ipsum sit dor amet" />
     <!-- Summary Section -->
-    <section class="px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
-      <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Summary of our Terms</h2>
+    <section class="px-4 pt-16 sm:px-8 md:px-36 2xl:px-96">
+      <h2 class="mb-8 text-2xl font-semibold sm:text-4xl">Summary of our Terms</h2>
       <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
       <br />
-      <ul class="list-disc mx-6 mb-8">
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est odio explicabo expedita accusamus vero ullam deleniti laboriosam. Blanditiis minima inventore ut dolorum suscipit omnis dolore laudantium quo, mollitia, placeat accusantium.</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus veritatis provident laboriosam perferendis ducimus laborum molestiae fuga non aliquid! Dicta veniam fugiat harum? Nemo sunt voluptate dolorem placeat voluptates suscipit?</li>
-        <li class="mb-4 text-md sm:text-lg text-zinc-900">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, sapiente laboriosam quaerat animi sed distinctio dignissimos! Aut iste officia, libero, aspernatur illo nostrum sed autem id, dolorum molestias quae. Cum?</li>
+      <ul class="mx-6 mb-8 list-disc">
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est odio explicabo expedita accusamus vero ullam deleniti laboriosam. Blanditiis minima inventore ut dolorum suscipit omnis dolore laudantium quo, mollitia, placeat accusantium.</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus veritatis provident laboriosam perferendis ducimus laborum molestiae fuga non aliquid! Dicta veniam fugiat harum? Nemo sunt voluptate dolorem placeat voluptates suscipit?</li>
+        <li class="text-md mb-4 text-zinc-900 sm:text-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, sapiente laboriosam quaerat animi sed distinctio dignissimos! Aut iste officia, libero, aspernatur illo nostrum sed autem id, dolorum molestias quae. Cum?</li>
       </ul>
       <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
     </section>
     <!-- Some Text Section -->
     <section class="px-4 sm:px-8 md:px-36 2xl:px-96">
-      <div class="border my-8"></div>
+      <div class="my-8 border"></div>
       <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
       <br />
       <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
-      <div class="border my-8"></div>
+      <div class="my-8 border"></div>
     </section>
     <!-- Atomic Terms of Service Section -->
     <section class="px-4 sm:px-8 md:px-36 2xl:px-96">
-      <h2 class="font-semibold text-4xl sm:text-6xl mb-8">Atomic Terms of Service</h2>
-      <p class="text-md sm:text-2xl font-bold">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus, ea, voluptates jonas.</p>
+      <h2 class="mb-8 text-4xl font-semibold sm:text-6xl">Atomic Terms of Service</h2>
+      <p class="text-md font-bold sm:text-2xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus, ea, voluptates jonas.</p>
       <br />
       <p class="text-md sm:text-lg">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea quo at repellendus quia pariatur possimus labore laboriosam voluptas totam assumenda. Harum optio suscipit quas fuga laboriosam. Alias, eos! Praesentium, quibusdam! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis blanditiis soluta corporis ea nihil pariatur omnis, corrupti fugit reprehenderit inventore mollitia explicabo neque ex non accusamus rerum earum enim illo!
       </p>
       <br />
       <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur qui exercitationem eaque, quibusdam sint sapiente excepturi repudiandae expedita, ipsa tempore dignissimos provident ipsum minus ullam rerum commodi quas? Odit, voluptatibus.</p>
-      <div class="border my-8"></div>
+      <div class="my-8 border"></div>
     </section>
     <!-- Terms of Service Content Section -->
-    <section class="flex flex-col px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
+    <section class="flex flex-col px-4 pt-16 sm:px-8 md:px-36 2xl:px-96">
       <div class="flex">
         <!-- Sticky part -->
-        <div class="hidden xl:block xl:w-1/4 pr-20">
+        <div class="hidden pr-20 xl:block xl:w-1/4">
           <ul class="sticky top-40">
-            <li><a href="#section1" class="text-sm font-semibold pb-2 transition-all duration-100">1. Who May Use the Services</a></li>
-            <li><a href="#section2" class="text-sm font-semibold pb-2">2. Privacy</a></li>
-            <li><a href="#section3" class="text-sm font-semibold pb-2">3. Content of the Services</a></li>
-            <li><a href="#section4" class="text-sm font-semibold pb-2">4. Using the Services</a></li>
-            <li><a href="#section5" class="text-sm font-semibold pb-2">5. Disclaimers and Limitations of Liability</a></li>
-            <li><a href="#section6" class="text-sm font-semibold pb-2">6. General</a></li>
+            <li><a href="#section1" class="pb-2 text-sm font-semibold transition-all duration-100">1. Who May Use the Services</a></li>
+            <li><a href="#section2" class="pb-2 text-sm font-semibold">2. Privacy</a></li>
+            <li><a href="#section3" class="pb-2 text-sm font-semibold">3. Content of the Services</a></li>
+            <li><a href="#section4" class="pb-2 text-sm font-semibold">4. Using the Services</a></li>
+            <li><a href="#section5" class="pb-2 text-sm font-semibold">5. Disclaimers and Limitations of Liability</a></li>
+            <li><a href="#section6" class="pb-2 text-sm font-semibold">6. General</a></li>
           </ul>
         </div>
         <!-- Content -->
         <div class="xl:w-3/4">
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 scroll-mt-24" id="section1">1. Who May Use the Services</h3>
+          <h3 class="mb-8 scroll-mt-24 text-4xl font-semibold sm:text-5xl" id="section1">1. Who May Use the Services</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section2">2. Privacy</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section2">2. Privacy</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section3">3. Content on the Services</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section3">3. Content on the Services</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section4">4. Using the Services</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section4">4. Using the Services</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section5">5. Disclaimers and Limitarions of Liability</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section5">5. Disclaimers and Limitarions of Liability</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
-          <h3 class="font-semibold text-4xl sm:text-5xl mb-8 pt-12 scroll-mt-24" id="section6">6. General</h3>
+          <h3 class="mb-8 scroll-mt-24 pt-12 text-4xl font-semibold sm:text-5xl" id="section6">6. General</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veritatis beatae corrupti ullam laudantium suscipit obcaecati. Magnam, minima quasi! Cumque, officiis amet? Eius, illum molestias? Error, at. Quos, delectus eligendi? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni molestias tempore eos ea ducimus cupiditate iusto iste, porro illum dolore quae corporis beatae temporibus est consequatur. Ullam distinctio illo laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad maiores enim voluptatem ut vel. Modi incidunt consectetur similique veniam quaerat accusantium laudantium excepturi a, nulla, officiis eum quas rerum explicabo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit earum fugiat, aliquid reiciendis aspernatur rem sunt corrupti accusantium sed quisquam laborum omnis possimus, eos ratione soluta, nemo iure officiis.
           </p>
         </div>
       </div>
-      <div class="border my-8"></div>
+      <div class="my-8 border"></div>
     </section>
   </div>
 </main>
diff --git a/lib/atomic_web/live/organization_live/index.html.heex b/lib/atomic_web/live/organization_live/index.html.heex
index c9eb9a73e..99eb2e926 100644
--- a/lib/atomic_web/live/organization_live/index.html.heex
+++ b/lib/atomic_web/live/organization_live/index.html.heex
@@ -12,19 +12,19 @@
       <.empty_state url={~p"/organizations/new"} placeholder="organization" />
     </div>
   <% else %>
-    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 px-4 mx-auto max-w-5xl sm:px-6 lg:px-8">
+    <div class="mx-auto grid max-w-5xl grid-cols-1 gap-4 px-4 sm:grid-cols-2 sm:px-6 md:grid-cols-3 lg:px-8">
       <%= for organization <- @organizations do %>
         <.link navigate={~p"/organizations/#{organization.id}"}>
-          <div class="flex items-center space-x-4 px-4 py-4 border border-zinc-200 hover:bg-zinc-50 hover:cursor-pointer rounded-lg">
+          <div class="flex items-center space-x-4 rounded-lg border border-zinc-200 px-4 py-4 hover:cursor-pointer hover:bg-zinc-50">
             <.avatar name={organization.name} src={Uploaders.Logo.url({organization.logo, organization}, :original)} type={:organization} size={:lg} color={:light_zinc} />
             <div class="ml-4">
-              <h4 class="font-medium text-lg text-zinc-900">
+              <h4 class="text-lg font-medium text-zinc-900">
                 <%= organization.name %>
               </h4>
-              <p class="hidden md:block xl:hidden text-xs text-zinc-900">
+              <p class="hidden text-xs text-zinc-900 md:block xl:hidden">
                 <%= maybe_slice_string(organization.long_name, 35) %>
               </p>
-              <p class="sm:block md:hidden xl:block text-xs text-zinc-900">
+              <p class="text-xs text-zinc-900 sm:block md:hidden xl:block">
                 <%= maybe_slice_string(organization.long_name, 85) %>
               </p>
             </div>
diff --git a/lib/atomic_web/live/organization_live/show.html.heex b/lib/atomic_web/live/organization_live/show.html.heex
index d4492d761..7a7a2bc68 100644
--- a/lib/atomic_web/live/organization_live/show.html.heex
+++ b/lib/atomic_web/live/organization_live/show.html.heex
@@ -3,29 +3,29 @@
     <div class="bg-white">
       <div class="flex justify-between py-4">
         <div class="w-full gap-x-4 lg:flex lg:flex-col">
-          <div class="flex flex-col items-center lg:flex-row space-x-2 lg:space-x-8">
+          <div class="flex flex-col items-center space-x-2 lg:flex-row lg:space-x-8">
             <.avatar name={@organization.name} type={:organization} src={Logo.url({@organization.logo, @organization}, :original)} size={:xl} color={:light_zinc} />
             <div class="flex-1 space-x-2">
-              <div class="flex flex-col lg:flex-row items-center lg:items-start lg:justify-start justify-center lg:space-x-2">
-                <div x-data="{ open: false }" class="flex flex-col items-center lg:items-start lg:justify-start justify-center space-y-2">
-                  <h2 class="font-medium text-zinc-900 text-2xl">
+              <div class="flex flex-col items-center justify-center lg:flex-row lg:items-start lg:justify-start lg:space-x-2">
+                <div x-data="{ open: false }" class="flex flex-col items-center justify-center space-y-2 lg:items-start lg:justify-start">
+                  <h2 class="text-2xl font-medium text-zinc-900">
                     <%= @organization.name %>
                   </h2>
                   <p class="text-xs text-zinc-900">
                     <%= @organization.long_name %>
                   </p>
                   <div class="flex flex-row items-center space-x-2 text-sm">
-                    <span class="text-zinc-900 font-bold inline-flex items-center"><%= @followers_count %></span>
-                    <span class="text-zinc-900 w-full inline-flex items-center">Followers</span>
+                    <span class="inline-flex items-center font-bold text-zinc-900"><%= @followers_count %></span>
+                    <span class="inline-flex w-full items-center text-zinc-900">Followers</span>
                   </div>
                   <div class="flex space-x-2">
                     <%= if not @following? do %>
-                      <button phx-click="follow" type="button" class="w-32 text-center rounded-md bg-orange-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500">
+                      <button phx-click="follow" type="button" class="w-32 rounded-md bg-orange-500 px-3.5 py-2.5 text-center text-sm font-medium text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500">
                         Follow
                       </button>
                     <% else %>
                       <%= if @organization.name == "CeSIUM" do %>
-                        <div class="lg:my-0 w-32 rounded-md bg-orange-400 py-2 text-center text-sm font-medium text-white shadow-sm inline">Following</div>
+                        <div class="inline w-32 rounded-md bg-orange-400 py-2 text-center text-sm font-medium text-white shadow-sm lg:my-0">Following</div>
                       <% else %>
                         <div class="relative">
                           <div class="inline-flex rounded-md shadow-sm">
@@ -36,7 +36,7 @@
                               <button
                                 type="button"
                                 @click="open = true"
-                                class="inline-flex items-center rounded-l-none rounded-r-md bg-orange-400 px-2 py-2.5 hover:bg-orange-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-50"
+                                class="inline-flex items-center rounded-r-md rounded-l-none bg-orange-400 px-2 py-2.5 hover:bg-orange-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-50"
                                 aria-haspopup="listbox"
                                 aria-expanded="true"
                                 aria-labelledby="listbox-label"
@@ -53,13 +53,13 @@
                             phx-click="unfollow"
                             @click.away="open = false"
                             @click="open = false"
-                            class="absolute left-0 z-10 -mr-1 mt-2 w-72 origin-top-left divide-y divide-zinc-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:left-auto sm:left-0"
+                            class="absolute left-0 z-10 mt-2 -mr-1 w-72 origin-top-left divide-y divide-zinc-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:left-0 sm:left-auto"
                             tabindex="-1"
                             role="listbox"
                             aria-labelledby="listbox-label"
                             aria-activedescendant="listbox-option-0"
                           >
-                            <li class="text-zinc-900 cursor-default select-none p-4 text-sm hover:cursor-pointer hover:bg-zinc-50">
+                            <li class="cursor-default select-none p-4 text-sm text-zinc-900 hover:cursor-pointer hover:bg-zinc-50">
                               <div class="flex flex-col">
                                 <div class="flex justify-between">
                                   <p class="font-normal">Unfollow</p>
@@ -72,13 +72,13 @@
                     <% end %>
                     <%= if @has_permissions? do %>
                       <.link patch={~p"/organizations/#{@organization}/edit"} class="button">
-                        <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-                          <.icon name="hero-pencil-solid" class="mr-3 w-5 h-5 text-zinc-400" /> Edit
+                        <div type="button" class="inline-flex w-fit justify-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
+                          <.icon name="hero-pencil-solid" class="mr-3 h-5 w-5 text-zinc-400" /> Edit
                         </div>
                       </.link>
                       <%= link to: "#", phx_click: "delete", phx_value_id: @organization.id, data: [confirm: "Are you sure?"] do %>
-                        <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-                          <.icon name="hero-trash-solid" class="mr-3 w-5 h-5 text-zinc-400" /> Delete
+                        <div type="button" class="inline-flex w-fit justify-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
+                          <.icon name="hero-trash-solid" class="mr-3 h-5 w-5 text-zinc-400" /> Delete
                         </div>
                       <% end %>
                     <% end %>
@@ -94,7 +94,7 @@
   </div>
 </div>
 
-<div class="flex space-x-20 w-full">
+<div class="flex w-full space-x-20">
   <div class="sm:w-3/4"></div>
   <div class="sm:w-1/4">
     <p class="text-md text-zinc-900">
diff --git a/lib/atomic_web/live/partner_live/edit.html.heex b/lib/atomic_web/live/partner_live/edit.html.heex
index 91ee4afa8..ca0057cdb 100644
--- a/lib/atomic_web/live/partner_live/edit.html.heex
+++ b/lib/atomic_web/live/partner_live/edit.html.heex
@@ -26,7 +26,7 @@
       </div>
     <% end %>
   </:actions>
-  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
     <.live_component module={AtomicWeb.PartnerLive.FormComponent} organization={@current_organization} id={@partner.id || :new} title={@page_title} action={@live_action} partner={@partner} return_to={~p"/organizations/#{@current_organization}/partners"} />
   </div>
 </.page>
diff --git a/lib/atomic_web/live/partner_live/index.html.heex b/lib/atomic_web/live/partner_live/index.html.heex
index bc897d6ad..e9d7c97b5 100644
--- a/lib/atomic_web/live/partner_live/index.html.heex
+++ b/lib/atomic_web/live/partner_live/index.html.heex
@@ -36,20 +36,20 @@
     <ul role="list" class="">
       <%= for partner <- @partners do %>
         <.link navigate={~p"/organizations/#{@organization}/partners/#{partner}"} class="block hover:bg-zinc-50">
-          <li class="px-4 flex flex-col md:flex-row justify-between border-b border-zinc-200 gap-x-6 py-5">
-            <div class="flex flex-col md:flex-row gap-x-4 w-full">
+          <li class="flex flex-col justify-between gap-x-6 border-b border-zinc-200 px-4 py-5 md:flex-row">
+            <div class="flex w-full flex-col gap-x-4 md:flex-row">
               <div class="flex-shrink-0">
                 <.avatar color={:light_zinc} name={partner.name} src={Uploaders.PartnerImage.url({partner.image, partner}, :original)} type={:company} size={:sm} />
               </div>
               <div class="flex-grow">
                 <p class="text-md font-semibold leading-6 text-zinc-900"><%= partner.name %></p>
                 <%= if partner.location do %>
-                  <div class="flex flex-row items-center gap-x-1 text-sm leading-6 z-1">
+                  <div class="z-1 flex flex-row items-center gap-x-1 text-sm leading-6">
                     <.icon name="hero-map-pin" class="size-5 text-zinc-400" />
                     <p class="text-blue-500"><%= partner.location.name %></p>
                   </div>
                 <% end %>
-                <p class="mt-1 truncate text-xs leading-5 text-zinc-500 overflow-hidden overflow-ellipsis whitespace-normal">
+                <p class="mt-1 overflow-hidden truncate overflow-ellipsis whitespace-normal text-xs leading-5 text-zinc-500">
                   <%= Enum.map(String.split(partner.benefits, "\n"), fn phrase -> %>
                     <%= if String.length(phrase) < 150 do %>
                       <%= phrase %><br />
diff --git a/lib/atomic_web/live/partner_live/show.html.heex b/lib/atomic_web/live/partner_live/show.html.heex
index a71d38d58..30f52f858 100644
--- a/lib/atomic_web/live/partner_live/show.html.heex
+++ b/lib/atomic_web/live/partner_live/show.html.heex
@@ -1,28 +1,28 @@
 <.page title="Partners">
   <:actions>
     <%= if @has_permissions? do %>
-      <div class="lg:border-orange-500 lg:block">
+      <div class="lg:block lg:border-orange-500">
         <.button navigate={~p"/organizations/#{@organization}/partners/#{@partner}/edit"} icon="hero-pencil">
           <%= gettext("Edit Partner") %>
         </.button>
       </div>
     <% end %>
   </:actions>
-  <div class="lg:px-8 sm:px-0 min-h-fit border-t-100 select-none lg:mx-0 max-w-5xl sm:mx-6 ">
-    <div class="flex flex-col gap-2 mt-6 sm:justify-center">
+  <div class="border-t-100 min-h-fit max-w-5xl select-none sm:mx-6 sm:px-0 lg:mx-0 lg:px-8">
+    <div class="mt-6 flex flex-col gap-2 sm:justify-center">
       <div class="flex flex-row">
-        <div class="flex flex-col lg:justify-none items-center px-2">
+        <div class="flex flex-col items-center px-2 lg:justify-none">
           <.avatar color={:light_zinc} name={@partner.name} src={Uploaders.PartnerImage.url({@partner.image, @partner}, :original)} type={:company} size={:xl} />
         </div>
         <div>
           <div class="flex items-center justify-between">
-            <h1 class="flex-1 select-none truncate text-wrap text-xl sm:text-2xl font-bold pr-4 text-zinc-900 ml-2">
+            <h1 class="text-wrap ml-2 flex-1 select-none truncate pr-4 text-xl font-bold text-zinc-900 sm:text-2xl">
               <%= @partner.name %>
             </h1>
           </div>
           <%= if @partner.location do %>
             <!-- Location -->
-            <div class="flex flex-row items-center gap-x-1 text-md leading-6">
+            <div class="text-md flex flex-row items-center gap-x-1 leading-6">
               <.icon name="hero-map-pin" class="h-5 w-5 text-zinc-400" />
               <.link class="text-blue-500" href={"https://www.google.com/maps/search/?api=1&query=#{@partner.location.name}"}>
                 <%= @partner.location.name %>
@@ -32,7 +32,7 @@
 
           <%= if @partner.socials do %>
             <!-- Socials and Website -->
-            <div class="flex flex-wrap gap-x-4 items-center mt-2">
+            <div class="mt-2 flex flex-wrap items-center gap-x-4">
               <!-- Website -->
               <%= if @partner.socials.website do %>
                 <div class="flex flex-row items-center gap-x-1">
@@ -49,7 +49,7 @@
         </div>
       </div>
       <div>
-        <div class="mt-1 text-zinc-800 py-4 px-2">
+        <div class="mt-1 px-2 py-4 text-zinc-800">
           <div class="flex flex-row items-center gap-x-2">
             <.icon name="hero-clock" class="size-5 mb-2" />
             <h2 class="mb-2 flex-1 truncate text-lg font-semibold text-zinc-900">Overview</h2>
@@ -60,7 +60,7 @@
             <% end) %>
           </span>
         </div>
-        <div class="text-zinc-800 py-4 px-2">
+        <div class="px-2 py-4 text-zinc-800">
           <div class="flex flex-row items-center gap-x-2 text-zinc-800">
             <.icon name="hero-signal" class="size-5 mb-2" />
             <h2 class="mb-2 flex-1 truncate text-lg font-semibold text-zinc-900">Benefits</h2>
@@ -79,11 +79,11 @@
           <div class="flex flex-col gap-x-2 text-zinc-800">
             <div class="flex flex-row items-center gap-x-2 px-2">
               <.icon name="hero-star" class="size-5 mb-2" />
-              <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-zinc-900 py-2">Related Partners</h2>
+              <h2 class="mb-2 flex-1 select-none truncate py-2 text-lg font-semibold text-zinc-900">Related Partners</h2>
             </div>
             <div class="sm:grid sm:grid-cols-2 sm:gap-px">
               <%= for partner <- @partners |> Enum.filter(fn partner -> partner.id != @partner.id end) do %>
-                <div class="rounded-lg group relative border border-zinc-200 bg-white p-4 hover:bg-zinc-50 m-2">
+                <div class="group relative m-2 rounded-lg border border-zinc-200 bg-white p-4 hover:bg-zinc-50">
                   <.link href={~p"/organizations/#{@organization}/partners/#{@partner}"}>
                     <div class="flex flex-row items-center space-x-2">
                       <.avatar color={:light_zinc} name={partner.name} src={Uploaders.PartnerImage.url({partner.image, partner}, :original)} type={:company} size={:xs} />
diff --git a/lib/atomic_web/live/profile_live/form_component.html.heex b/lib/atomic_web/live/profile_live/form_component.html.heex
index ee4757071..c4a88614b 100644
--- a/lib/atomic_web/live/profile_live/form_component.html.heex
+++ b/lib/atomic_web/live/profile_live/form_component.html.heex
@@ -1,8 +1,8 @@
-<div class="pt-4 px-4">
+<div class="px-4 pt-4">
   <.form :let={f} for={@changeset} id="profile-form" phx-target={@myself} phx-change="validate" phx-submit="save">
-    <div class="flex flex-col-reverse sm:flex-row items-center sm:justify-between mt-4 border-b pb-10 border-zinc-200">
-      <div class="space-y-4 w-full">
-        <h2 class="hidden sm:block text-xl pb-4 font-bold leading-7 text-zinc-900 sm:text-4xl">
+    <div class="mt-4 flex flex-col-reverse items-center border-b border-zinc-200 pb-10 sm:flex-row sm:justify-between">
+      <div class="w-full space-y-4">
+        <h2 class="hidden pb-4 text-xl font-bold leading-7 text-zinc-900 sm:block sm:text-4xl">
           <%= gettext("Your Profile") %>
         </h2>
 
@@ -11,48 +11,48 @@
           <%= text_input(f, :name,
             required: true,
             placeholder: gettext("John Doe"),
-            class: "relative w-full sm:w-96 appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
+            class: "relative w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:w-96 sm:text-sm"
           ) %>
-          <div class="flex flex-col text-sm w-full sm:w-96 text-red-600"><%= error_tag(f, :name) %></div>
+          <div class="flex w-full flex-col text-sm text-red-600 sm:w-96"><%= error_tag(f, :name) %></div>
         </div>
         <div class="flex flex-col justify-center">
           <%= label(f, :email, class: "mb-1 text-sm font-medium text-zinc-700") %>
           <%= text_input(f, :email,
             required: true,
             placeholder: gettext("john_doe@mail.com"),
-            class: "relative w-full sm:w-96 appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
+            class: "relative w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:w-96 sm:text-sm"
           ) %>
-          <div class="flex flex-col text-sm w-full sm:w-96 text-red-600"><%= error_tag(f, :email) %></div>
+          <div class="flex w-full flex-col text-sm text-red-600 sm:w-96"><%= error_tag(f, :email) %></div>
         </div>
         <div class="flex flex-col justify-center">
           <%= label(f, :username, class: "mb-1 text-sm font-medium text-zinc-700") %>
-          <div class="flex flex-row relative w-full sm:w-96  appearance-none rounded border border-zinc-300 px-3 text-zinc-900 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:outline-none sm:text-sm">
-            <span class="self-center select-none">@</span>
+          <div class="relative flex w-full appearance-none flex-row rounded border border-zinc-300 px-3 text-zinc-900 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:outline-none focus-within:ring-orange-400 sm:w-96 sm:text-sm">
+            <span class="select-none self-center">@</span>
             <%= text_input(f, :slug,
               required: true,
               spellcheck: false,
               placeholder: gettext("john_doe"),
-              class: "pl-0 appearance-none text-zinc-900 placeholder-zinc-500 sm:text-sm border-none w-full focus:outline-none focus:ring-transparent"
+              class: "w-full appearance-none border-none pl-0 text-zinc-900 placeholder-zinc-500 focus:outline-none focus:ring-transparent sm:text-sm"
             ) %>
           </div>
-          <div class="flex flex-col text-sm w-full sm:w-96 text-red-600"><%= error_tag(f, :slug) %></div>
+          <div class="flex w-full flex-col text-sm text-red-600 sm:w-96"><%= error_tag(f, :slug) %></div>
         </div>
         <div class="flex flex-col justify-center">
           <%= label(f, :phone_number, class: "mb-1 text-sm font-medium text-zinc-700") %>
           <%= text_input(f, :phone_number,
             required: true,
             placeholder: gettext("912345678"),
-            class: "relative w-full sm:w-96 appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
+            class: "relative w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:w-96 sm:text-sm"
           ) %>
-          <div class="flex flex-col text-sm w-full sm:w-96 text-red-600"><%= error_tag(f, :phone_number) %></div>
+          <div class="flex w-full flex-col text-sm text-red-600 sm:w-96"><%= error_tag(f, :phone_number) %></div>
         </div>
       </div>
       <.live_file_input upload={@uploads.picture} class="hidden" />
       <a onclick={"document.getElementById('#{@uploads.picture.ref}').click()"}>
         <div class={
           "#{if length(@uploads.picture.entries) != 0 do "hidden" end} relative w-40 h-40 ring-2 ring-zinc-300 rounded-full cursor-pointer bg-zinc-400 sm:w-48 group sm:h-48 hover:bg-tertiary"}>
-          <div class="flex absolute justify-center items-center w-full h-full">
-            <.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white group-hover:text-opacity-70" />
+          <div class="absolute flex h-full w-full items-center justify-center">
+            <.icon name="hero-camera" class="mx-auto h-12 w-12 text-white group-hover:text-opacity-70 sm:h-20 sm:w-20" />
           </div>
         </div>
         <section>
@@ -60,22 +60,22 @@
             <%= for err <- upload_errors(@uploads.picture, entry) do %>
               <p class="alert alert-danger"><%= Phoenix.Naming.humanize(err) %></p>
             <% end %>
-            <article class="flex relative items-center w-40 h-40 sm:w-48 sm:h-48 bg-white rounded-full cursor-pointer upload-entry group">
-              <div class="flex absolute z-10 justify-center items-center w-full h-full rounded-full">
-                <.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white text-opacity-0 rounded-full group-hover:text-opacity-100" />
+            <article class="upload-entry group relative flex h-40 w-40 cursor-pointer items-center rounded-full bg-white sm:h-48 sm:w-48">
+              <div class="absolute z-10 flex h-full w-full items-center justify-center rounded-full">
+                <.icon name="hero-camera" class="mx-auto h-12 w-12 rounded-full text-white text-opacity-0 group-hover:text-opacity-100 sm:h-20 sm:w-20" />
               </div>
-              <figure class="flex justify-center items-center w-full h-full rounded-full group-hover:opacity-80">
-                <.live_img_preview entry={entry} class="object-cover object-center rounded-full w-40 h-40 sm:w-48 sm:h-48 border-4 border-white" />
+              <figure class="flex h-full w-full items-center justify-center rounded-full group-hover:opacity-80">
+                <.live_img_preview entry={entry} class="h-40 w-40 rounded-full border-4 border-white object-cover object-center sm:h-48 sm:w-48" />
               </figure>
             </article>
           <% end %>
         </section>
       </a>
     </div>
-    <div class="w-full flex flex-row-reverse mt-8">
+    <div class="mt-8 flex w-full flex-row-reverse">
       <%= submit do %>
-        <div class="inline-flex px-6 py-2 text-sm font-medium text-orange-500 bg-white border-2 border-orange-500 rounded-md shadow-sm hover:bg-orange-600 hover:text-white">
-          <.icon name="hero-archive-box-solid" class="mr-2 -ml-1 w-5 h-5" /> Save
+        <div class="inline-flex rounded-md border-2 border-orange-500 bg-white px-6 py-2 text-sm font-medium text-orange-500 shadow-sm hover:bg-orange-600 hover:text-white">
+          <.icon name="hero-archive-box-solid" class="mr-2 -ml-1 h-5 w-5" /> Save
         </div>
       <% end %>
     </div>
diff --git a/lib/atomic_web/live/profile_live/show.html.heex b/lib/atomic_web/live/profile_live/show.html.heex
index 40ce92cb2..c0e278c28 100644
--- a/lib/atomic_web/live/profile_live/show.html.heex
+++ b/lib/atomic_web/live/profile_live/show.html.heex
@@ -1,5 +1,5 @@
 <div>
-  <div class="pt-4 px-4">
+  <div class="px-4 pt-4">
     <div class="flex items-center justify-between">
       <div class="min-w-0 flex-1 space-y-2">
         <div class="flex flex-row">
@@ -8,7 +8,7 @@
           </h2>
         </div>
         <p class="text-zinc-500">@<%= @user.slug %></p>
-        <div class="grid grid-cols-1 gap-4 py-6 mb-2 sm:grid-cols-2 lg:grid-cols-3">
+        <div class="mb-2 grid grid-cols-1 gap-4 py-6 sm:grid-cols-2 lg:grid-cols-3">
           <%= if @user.email do %>
             <div class="sm:col-span-1">
               <dt class="text-sm font-medium text-zinc-500">Email</dt>
@@ -32,13 +32,13 @@
           <% end %>
         </div>
       </div>
-      <.avatar class="sm:w-44 sm:h-44 sm:text-6xl" name={@user.name} size={:xl} color={:light_zinc} />
+      <.avatar class="sm:h-44 sm:w-44 sm:text-6xl" name={@user.name} size={:xl} color={:light_zinc} />
     </div>
     <!-- Divider -->
-    <div class="py-6 mb-2 border-b border-zinc-200"></div>
+    <div class="mb-2 border-b border-zinc-200 py-6"></div>
 
     <%= if @is_current_user do %>
-      <div class="w-24 flex justify-end">
+      <div class="flex w-24 justify-end">
         <.button patch={~p"/profile/#{@user}/edit"}>
           <%= gettext("Edit") %>
         </.button>
diff --git a/lib/atomic_web/live/scanner_live/index.html.heex b/lib/atomic_web/live/scanner_live/index.html.heex
index b06604cf8..4aec0db39 100644
--- a/lib/atomic_web/live/scanner_live/index.html.heex
+++ b/lib/atomic_web/live/scanner_live/index.html.heex
@@ -3,14 +3,14 @@
     Scan a QR code
   </h2>
 
-  <div class="my-8 w-full lg:px-6 lg:mx-16">
+  <div class="my-8 w-full lg:mx-16 lg:px-6">
     <div id="qr-scanner" phx-hook="QrScanner" data-ask_perm="perm_button" data-open_on_mount data-on_start="document.getElementById('request').style.display = 'none'" data-on_success="hook.pushEvent('scan', pathname)" class="relative"></div>
 
-    <div id="request" class="flex justify-between items-center h-10">
+    <div id="request" class="flex h-10 items-center justify-between">
       <div id="loadingMessage" class="inline-flex justify-center py-2 text-base font-medium text-zinc-900">
         Unable to access camera. Make sure you allow the use of the camera and that the camera isn't being used elsewhere.
       </div>
-      <button id="perm_button" type="button" class="inline-flex justify-center items-center py-2 px-4 text-sm font-medium text-white rounded-md border border-transparent shadow-sm bg-secondary hover:bg-orange-600">Request Permission</button>
+      <button id="perm_button" type="button" class="bg-secondary inline-flex items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-orange-600">Request Permission</button>
     </div>
   </div>
 </div>
diff --git a/lib/atomic_web/templates/error/404.html.heex b/lib/atomic_web/templates/error/404.html.heex
index cc0aad004..3fd0d106c 100644
--- a/lib/atomic_web/templates/error/404.html.heex
+++ b/lib/atomic_web/templates/error/404.html.heex
@@ -8,14 +8,14 @@
     <%= live_title_tag(assigns[:page_title] || "Atomic", suffix: " · 404") %>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
   </head>
-  <div class="flex flex-col items-center w-screen h-screen justify-center bg-white bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat bg-opacity-25 bg-center">
+  <div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-white bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
     <div class="flex flex-col items-center">
-      <div class="flex flex-row gap-4 items-center">
-        <span class="text-5xl font-bold text-zinc-900 uppercase">Error</span>
-        <span class="text-6xl font-bold text-zinc-900 pb-2">404</span>
+      <div class="flex flex-row items-center gap-4">
+        <span class="text-5xl font-bold uppercase text-zinc-900">Error</span>
+        <span class="pb-2 text-6xl font-bold text-zinc-900">404</span>
       </div>
       <h2 class="text-lg font-semibold text-zinc-900">Page Not Found</h2>
-      <.link href="/" class="inline-flex items-center rounded-md bg-orange-500 px-3 py-2 my-4 text-sm font-semibold text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500">
+      <.link href="/" class="my-4 inline-flex items-center rounded-md bg-orange-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500">
         <%= gettext("Go back home") %>
       </.link>
     </div>
diff --git a/lib/atomic_web/templates/error/500.html.heex b/lib/atomic_web/templates/error/500.html.heex
index 6b6f4a100..78fe47304 100644
--- a/lib/atomic_web/templates/error/500.html.heex
+++ b/lib/atomic_web/templates/error/500.html.heex
@@ -8,7 +8,7 @@
     <%= live_title_tag(assigns[:page_title] || "500", suffix: " · Atomic") %>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
   </head>
-  <body class="flex flex-row justify-center items-center overflow-x-hidden bg-white bg-hero-pattern bg-cover lg:bg-75 bg-no-repeat bg-center h-full w-full">
+  <body class="bg-hero-pattern flex h-full w-full flex-row items-center justify-center overflow-x-hidden bg-white bg-cover bg-center bg-no-repeat lg:bg-75">
     <main class="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
       <div class="text-center">
         <p class="text-base font-semibold text-orange-500">500</p>
diff --git a/lib/atomic_web/templates/layout/app.html.heex b/lib/atomic_web/templates/layout/app.html.heex
index 14b4e0d25..466daa8b9 100644
--- a/lib/atomic_web/templates/layout/app.html.heex
+++ b/lib/atomic_web/templates/layout/app.html.heex
@@ -1,14 +1,14 @@
 <main>
   <%= if Phoenix.Flash.get(@flash, :info) do %>
-    <div id="info-flash" x-init="setTimeout(function() { document.getElementById('info-flash').remove(); }, 5000);" class="absolute top-0 right-0 w-full flex justify-end mr-2 mt-2">
-      <div class="overflow-hidden w-full max-w-sm bg-white rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto">
-        <div class="bg-blue-400 opacity-100 h-[0.30rem] animate-progress"></div>
+    <div id="info-flash" x-init="setTimeout(function() { document.getElementById('info-flash').remove(); }, 5000);" class="absolute top-0 right-0 mt-2 mr-2 flex w-full justify-end">
+      <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+        <div class="h-[0.30rem] animate-progress bg-blue-400 opacity-100"></div>
         <div class="p-4">
           <div class="flex items-start">
             <div class="flex-shrink-0">
-              <.icon name="hero-information-circle-solid" class="w-6 h-6 text-blue-400" />
+              <.icon name="hero-information-circle-solid" class="h-6 w-6 text-blue-400" />
             </div>
-            <div class="flex-1 mt-1 text-sm font-medium text-zinc-900 ml-3 w-0">
+            <div class="mt-1 ml-3 w-0 flex-1 text-sm font-medium text-zinc-900">
               <%= Phoenix.Flash.get(@flash, :info) %>
             </div>
           </div>
@@ -18,15 +18,15 @@
   <% end %>
 
   <%= if Phoenix.Flash.get(@flash, :error) do %>
-    <div id="error-flash" x-init="setTimeout(function() { document.getElementById('error-flash').remove(); }, 5000);" class="absolute top-0 right-0 w-full flex justify-end mr-2 mt-2">
-      <div class="overflow-hidden w-full max-w-sm bg-white rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto">
-        <div class="bg-red-400 opacity-100 h-[0.30rem] animate-progress"></div>
+    <div id="error-flash" x-init="setTimeout(function() { document.getElementById('error-flash').remove(); }, 5000);" class="absolute top-0 right-0 mt-2 mr-2 flex w-full justify-end">
+      <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+        <div class="h-[0.30rem] animate-progress bg-red-400 opacity-100"></div>
         <div class="p-4">
           <div class="flex items-start">
             <div class="flex-shrink-0">
-              <.icon name="hero-x-circle-solid" class="w-6 h-6 text-red-400" />
+              <.icon name="hero-x-circle-solid" class="h-6 w-6 text-red-400" />
             </div>
-            <div class="flex-1 mt-1 text-sm font-medium text-zinc-900 ml-3 w-0">
+            <div class="mt-1 ml-3 w-0 flex-1 text-sm font-medium text-zinc-900">
               <%= Phoenix.Flash.get(@flash, :error) %>
             </div>
           </div>
diff --git a/lib/atomic_web/templates/layout/live.html.heex b/lib/atomic_web/templates/layout/live.html.heex
index f9f56cce8..6070853db 100644
--- a/lib/atomic_web/templates/layout/live.html.heex
+++ b/lib/atomic_web/templates/layout/live.html.heex
@@ -1,18 +1,18 @@
 <!-- Notifications -->
-<div aria-live="assertive" class="flex fixed inset-0 z-50 flex-col gap-y-2 items-end py-4 px-4 pointer-events-none sm:items-start sm:px-6">
+<div aria-live="assertive" class="pointer-events-none fixed inset-0 z-50 flex flex-col items-end gap-y-2 px-4 py-4 sm:items-start sm:px-6">
   <%= for {key, message} <- @flash do %>
     <.live_component id={key} module={AtomicWeb.Components.Notification} type={key} message={message} flash={@flash} />
   <% end %>
 </div>
 <!-- Layout -->
-<div class="flex relative flex-col min-h-screen">
-  <div class="flex flex-col mx-auto w-full lg:flex-row xl:px-8 max-w-[1380px]">
+<div class="relative flex min-h-screen flex-col">
+  <div class="max-w-[1380px] mx-auto flex w-full flex-col lg:flex-row xl:px-8">
     <!-- Navbar -->
-    <div class="relative flex-shrink-0 lg:w-72 lg:flex lg:max-w-[400px] sticky top-0 z-10 bg-white">
+    <div class="relative sticky top-0 z-10 flex-shrink-0 bg-white lg:max-w-[400px] lg:flex lg:w-72">
       <%= render("_live_navbar.html", assigns) %>
     </div>
     <!-- Central content -->
-    <div class="w-full content-height">
+    <div class="content-height w-full">
       <%= @inner_content %>
     </div>
   </div>
diff --git a/lib/atomic_web/templates/user_change_password/edit.html.heex b/lib/atomic_web/templates/user_change_password/edit.html.heex
index e666bdbee..1e1f22ee6 100644
--- a/lib/atomic_web/templates/user_change_password/edit.html.heex
+++ b/lib/atomic_web/templates/user_change_password/edit.html.heex
@@ -1,12 +1,12 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat	bg-opacity-25 bg-center">
-  <.form :let={f} for={@changeset} action={~p"/users/change_password"} id="update_password" class="flex flex-col items-center justify-center w-full h-full mx-8 mt-8 space-y-6 sm:mx-0">
-    <h2 class="mx-4 mt-6 text-center text-5xl font-bold text-zinc-900 select-none">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <.form :let={f} for={@changeset} action={~p"/users/change_password"} id="update_password" class="mx-8 mt-8 flex h-full w-full flex-col items-center justify-center space-y-6 sm:mx-0">
+    <h2 class="mx-4 mt-6 select-none text-center text-5xl font-bold text-zinc-900">
       <span><%= gettext("Change Password") %></span>
     </h2>
     <%= if @error_message do %>
-      <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
-        <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
+      <div class="mx-4 mt-4 w-full px-4 sm:w-96 sm:px-0">
+        <div class="alert alert-danger flex w-full flex-row border-l-4 border-orange-400 bg-red-100 px-4 py-4 text-sm text-red-700">
+          <.icon name="hero-exclamation-circle-solid" class="mr-2 h-5 w-5 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -16,57 +16,57 @@
 
     <%= hidden_input(f, :action, value: "update_password") %>
 
-    <div class="space-y-3 rounded-md w-full flex-col mt-6">
-      <div class="flex flex-col items-center justify-center mx-4">
-        <div x-data="{ hide: true }" class="sm:w-96 flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+    <div class="mt-6 w-full flex-col space-y-3 rounded-md">
+      <div class="mx-4 flex flex-col items-center justify-center">
+        <div x-data="{ hide: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:w-96 sm:text-sm">
           <%= label(f, :current_password, "Current password", class: "sr-only") %>
-          <%= password_input(f, :current_password, required: true, placeholder: gettext("Current password"), class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm") %>
-          <div x-show="hide" x-on:click="hide = false; document.getElementById('update_password_current_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <%= password_input(f, :current_password, required: true, placeholder: gettext("Current password"), class: "relative w-full appearance-none rounded border-0 text-zinc-900 outline-none focus:ring-0 sm:text-sm") %>
+          <div x-show="hide" x-on:click="hide = false; document.getElementById('update_password_current_password').type = 'text';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
-          <div x-show="!hide" x-on:click="hide = true; document.getElementById('update_password_current_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <div x-show="!hide" x-on:click="hide = true; document.getElementById('update_password_current_password').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-slash-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
         </div>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :current_password) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :current_password) %></span>
       </div>
 
-      <div class="flex flex-col items-center justify-center mx-4">
-        <div x-data="{ hide: true }" class="sm:w-96 flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+      <div class="mx-4 flex flex-col items-center justify-center">
+        <div x-data="{ hide: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:w-96 sm:text-sm">
           <%= label(f, :password, "New password", class: "sr-only") %>
-          <%= password_input(f, :password, required: true, placeholder: gettext("New password"), class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm") %>
-          <div x-show="hide" x-on:click="hide = false; document.getElementById('update_password_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <%= password_input(f, :password, required: true, placeholder: gettext("New password"), class: "relative w-full appearance-none rounded border-0 text-zinc-900 outline-none focus:ring-0 sm:text-sm") %>
+          <div x-show="hide" x-on:click="hide = false; document.getElementById('update_password_password').type = 'text';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
-          <div x-show="!hide" x-on:click="hide = true; document.getElementById('update_password_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <div x-show="!hide" x-on:click="hide = true; document.getElementById('update_password_password').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-slash-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
         </div>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :password) %></span>
       </div>
 
-      <div class="flex flex-col items-center justify-center mx-4">
-        <div x-data="{ hide_confirm: true }" class="sm:w-96 flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+      <div class="mx-4 flex flex-col items-center justify-center">
+        <div x-data="{ hide_confirm: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:w-96 sm:text-sm">
           <%= label(f, :password_confirmation, "Confirm new password", class: "sr-only") %>
           <%= password_input(f, :password_confirmation,
             required: true,
             placeholder: gettext("Confirm new password"),
-            class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
+            class: "relative w-full appearance-none rounded border-0 text-zinc-900 outline-none focus:ring-0 sm:text-sm"
           ) %>
-          <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('update_password_password_confirmation').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('update_password_password_confirmation').type = 'text';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
-          <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('update_password_password_confirmation').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('update_password_password_confirmation').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-slash-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
         </div>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password_confirmation) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :password_confirmation) %></span>
       </div>
     </div>
 
     <div class="w-full flex-col">
-      <div class="mx-4 justify-center flex select-none">
-        <%= submit("Change Password", class: "w-full flex justify-center border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm sm:w-96") %>
+      <div class="mx-4 flex select-none justify-center">
+        <%= submit("Change Password", class: "flex w-full justify-center rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm sm:w-96") %>
       </div>
     </div>
   </.form>
diff --git a/lib/atomic_web/templates/user_registration/new.html.heex b/lib/atomic_web/templates/user_registration/new.html.heex
index de7342dcd..3c34ee80c 100644
--- a/lib/atomic_web/templates/user_registration/new.html.heex
+++ b/lib/atomic_web/templates/user_registration/new.html.heex
@@ -1,12 +1,12 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-white bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat bg-opacity-25 bg-center">
-  <.form :let={f} for={@changeset} action={~p"/users/register"} class="flex flex-col items-center justify-center w-full h-full mx-8 mt-8 sm:mx-0">
-    <h2 class="mt-6 text-center text-5xl font-bold text-zinc-900 select-none">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-white bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <.form :let={f} for={@changeset} action={~p"/users/register"} class="mx-8 mt-8 flex h-full w-full flex-col items-center justify-center sm:mx-0">
+    <h2 class="mt-6 select-none text-center text-5xl font-bold text-zinc-900">
       <span><%= gettext("Register") %></span>
     </h2>
     <%= if @changeset.action do %>
-      <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
-        <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
+      <div class="mx-4 mt-4 w-full px-4 sm:w-96 sm:px-0">
+        <div class="alert alert-danger flex w-full flex-row border-l-4 border-orange-400 bg-red-100 px-4 py-4 text-sm text-red-700">
+          <.icon name="hero-exclamation-circle-solid" class="mr-2 h-5 w-5 text-red-400" />
           <div>
             <p>Oops, something went wrong!</p>
           </div>
@@ -14,51 +14,51 @@
       </div>
     <% end %>
 
-    <div class="space-y-3 rounded-md flex-col w-full justify-center items-center mt-6 px-3.5 mx-4 sm:w-96 sm:mx-0 sm:px-0">
+    <div class="mx-4 mt-6 w-full flex-col items-center justify-center space-y-3 rounded-md px-3.5 sm:mx-0 sm:w-96 sm:px-0">
       <div class="flex flex-col items-center justify-center">
         <%= label(f, :email, class: "sr-only") %>
         <%= email_input(f, :email,
           required: true,
           placeholder: gettext("Email address"),
-          class: "relative w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
+          class: "relative w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:text-sm"
         ) %>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :email) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :email) %></span>
       </div>
       <div class="flex flex-col items-center justify-center">
-        <div x-data="{ hide: true }" class="flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+        <div x-data="{ hide: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:text-sm">
           <%= label(f, :password, class: "sr-only") %>
           <%= password_input(f, :password,
             required: true,
             placeholder: gettext("Password"),
             autocomplete: "current-password",
-            class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:outline-none focus:ring-0 sm:text-sm"
+            class: "relative w-full appearance-none rounded border-0 text-zinc-900 outline-none focus:outline-none focus:ring-0 sm:text-sm"
           ) %>
-          <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
-          <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-slash-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
         </div>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :password) %></span>
       </div>
       <div class="flex flex-col items-center justify-center">
-        <div x-data="{ hide_confirm: true }" class="flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1  sm:text-sm">
+        <div x-data="{ hide_confirm: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:text-sm">
           <%= label(f, :password_confirmation, class: "sr-only") %>
           <%= password_input(f, :password_confirmation,
             required: true,
             placeholder: gettext("Confirm password"),
             autocomplete: "current-password",
-            class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:outline-none focus:ring-0 sm:text-sm"
+            class: "relative w-full appearance-none rounded border-0 text-zinc-900 outline-none focus:outline-none focus:ring-0 sm:text-sm"
           ) %>
-          <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('user_password_confirmation').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('user_password_confirmation').type = 'text';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
-          <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('user_password_confirmation').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('user_password_confirmation').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-slash-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
         </div>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password_confirmation) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :password_confirmation) %></span>
       </div>
     </div>
 
@@ -70,8 +70,8 @@
     </div>
 
     <div class="w-full flex-col">
-      <div class="mx-4 justify-center flex select-none">
-        <%= submit("Register", class: "w-full flex justify-center border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm sm:w-96 sm:mx-0 sm:px-0") %>
+      <div class="mx-4 flex select-none justify-center">
+        <%= submit("Register", class: "flex w-full justify-center rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm sm:mx-0 sm:w-96 sm:px-0") %>
       </div>
     </div>
   </.form>
diff --git a/lib/atomic_web/templates/user_reset_password/edit.html.heex b/lib/atomic_web/templates/user_reset_password/edit.html.heex
index c27f499ed..2d5999812 100644
--- a/lib/atomic_web/templates/user_reset_password/edit.html.heex
+++ b/lib/atomic_web/templates/user_reset_password/edit.html.heex
@@ -1,12 +1,12 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat	bg-opacity-25 bg-center">
-  <.form :let={f} for={@changeset} action={~p"/users/reset_password/#{@token}"} class="flex flex-col items-center justify-center w-full h-full mx-8 mt-8 space-y-6 sm:mx-0">
-    <h2 class="mx-4 mt-6 text-center text-5xl font-bold text-zinc-900 select-none">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <.form :let={f} for={@changeset} action={~p"/users/reset_password/#{@token}"} class="mx-8 mt-8 flex h-full w-full flex-col items-center justify-center space-y-6 sm:mx-0">
+    <h2 class="mx-4 mt-6 select-none text-center text-5xl font-bold text-zinc-900">
       <span><%= gettext("Reset Password") %></span>
     </h2>
     <%= if @error_message do %>
-      <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
-        <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name="hero-exclamation_circle-solid" class="w-5 h-5 mr-2 text-red-400" />
+      <div class="mx-4 mt-4 w-full px-4 sm:w-96 sm:px-0">
+        <div class="alert alert-danger flex w-full flex-row border-l-4 border-orange-400 bg-red-100 px-4 py-4 text-sm text-red-700">
+          <.icon name="hero-exclamation_circle-solid" class="mr-2 h-5 w-5 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -14,43 +14,43 @@
       </div>
     <% end %>
 
-    <div class="space-y-3 rounded-md w-full flex-col mt-6">
-      <div class="flex flex-col items-center justify-center mx-4">
-        <div x-data="{ hide: true }" class="sm:w-96 flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+    <div class="mt-6 w-full flex-col space-y-3 rounded-md">
+      <div class="mx-4 flex flex-col items-center justify-center">
+        <div x-data="{ hide: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:w-96 sm:text-sm">
           <%= label(f, :password, "New password", class: "sr-only") %>
-          <%= password_input(f, :password, required: true, placeholder: gettext("New password"), class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm") %>
-          <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <%= password_input(f, :password, required: true, placeholder: gettext("New password"), class: "relative w-full appearance-none rounded border-0 text-zinc-900 outline-none focus:ring-0 sm:text-sm") %>
+          <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
-          <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-slash-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
         </div>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :password) %></span>
       </div>
 
-      <div class="flex flex-col items-center justify-center mx-4">
-        <div x-data="{ hide_confirm: true }" class="sm:w-96 flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+      <div class="mx-4 flex flex-col items-center justify-center">
+        <div x-data="{ hide_confirm: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:w-96 sm:text-sm">
           <%= label(f, :password_confirmation, "Confirm new password", class: "sr-only") %>
           <%= password_input(f, :password_confirmation,
             required: true,
             placeholder: gettext("Confirm new password"),
-            class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
+            class: "relative w-full appearance-none rounded border-0 text-zinc-900 outline-none focus:ring-0 sm:text-sm"
           ) %>
-          <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('user_password_confirmation').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('user_password_confirmation').type = 'text';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
-          <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('user_password_confirmation').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
+          <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('user_password_confirmation').type = 'password';" class="w-fit cursor-pointer px-2">
+            <.icon name="hero-eye-slash-solid" class="h-auto w-5 fill-black hover:fill-black" />
           </div>
         </div>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password_confirmation) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :password_confirmation) %></span>
       </div>
     </div>
 
     <div class="w-full flex-col">
-      <div class="mx-4 justify-center flex select-none">
-        <%= submit class: "w-full flex justify-center border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm sm:w-96" do %>
+      <div class="mx-4 flex select-none justify-center">
+        <%= submit class: "flex w-full justify-center rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm sm:w-96" do %>
           <%= gettext("Change Password") %>
         <% end %>
       </div>
diff --git a/lib/atomic_web/templates/user_reset_password/new.html.heex b/lib/atomic_web/templates/user_reset_password/new.html.heex
index 2db6e8e5e..aa1dd8194 100644
--- a/lib/atomic_web/templates/user_reset_password/new.html.heex
+++ b/lib/atomic_web/templates/user_reset_password/new.html.heex
@@ -1,12 +1,12 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat	bg-opacity-25 bg-center">
-  <.form :let={f} for={%{}} as={:user} action={~p"/users/reset_password"} class="flex flex-col items-center justify-center w-full h-full mx-8 mt-8 space-y-6 sm:mx-0">
-    <h2 class="mx-4 mt-6 text-center text-5xl font-bold text-zinc-900 select-none">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <.form :let={f} for={%{}} as={:user} action={~p"/users/reset_password"} class="mx-8 mt-8 flex h-full w-full flex-col items-center justify-center space-y-6 sm:mx-0">
+    <h2 class="mx-4 mt-6 select-none text-center text-5xl font-bold text-zinc-900">
       <%= gettext("Recover Account") %>
     </h2>
     <%= if @error_message do %>
-      <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
-        <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
+      <div class="mx-4 mt-4 w-full px-4 sm:w-96 sm:px-0">
+        <div class="alert alert-danger flex w-full flex-row border-l-4 border-orange-400 bg-red-100 px-4 py-4 text-sm text-red-700">
+          <.icon name="hero-exclamation-circle-solid" class="mr-2 h-5 w-5 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -18,20 +18,20 @@
       <p class="px-4 text-center text-zinc-900"><%= gettext("Enter your email or username and we'll send you an email with a link to get back into your account.") %></p>
     </div>
 
-    <div class="space-y-3 rounded-md w-full flex-col">
+    <div class="w-full flex-col space-y-3 rounded-md">
       <div class="flex justify-center">
         <%= label(f, :input, class: "sr-only") %>
         <%= text_input(f, :input,
           required: true,
           placeholder: gettext("Email address or username"),
-          class: "relative w-full sm:w-96 mx-4 appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
+          class: "relative mx-4 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:w-96 sm:text-sm"
         ) %>
       </div>
     </div>
 
     <div class="w-full flex-col">
-      <div class="mx-4 justify-center flex select-none">
-        <%= submit class: "w-full flex justify-center border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm sm:w-96" do %>
+      <div class="mx-4 flex select-none justify-center">
+        <%= submit class: "flex w-full justify-center rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm sm:w-96" do %>
           <%= gettext("Reset password") %>
         <% end %>
       </div>
diff --git a/lib/atomic_web/templates/user_session/new.html.heex b/lib/atomic_web/templates/user_session/new.html.heex
index 935194d27..c5fe92f27 100644
--- a/lib/atomic_web/templates/user_session/new.html.heex
+++ b/lib/atomic_web/templates/user_session/new.html.heex
@@ -1,12 +1,12 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-white bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat  bg-opacity-25 bg-center">
-  <.form :let={f} for={@conn} action={~p"/users/log_in"} as={:user} class="flex flex-col items-center justify-center w-full h-full mx-8 mt-8 space-y-6 sm:mx-0">
-    <h2 class="mt-6 text-center text-5xl font-bold text-zinc-900 select-none">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-white bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <.form :let={f} for={@conn} action={~p"/users/log_in"} as={:user} class="mx-8 mt-8 flex h-full w-full flex-col items-center justify-center space-y-6 sm:mx-0">
+    <h2 class="mt-6 select-none text-center text-5xl font-bold text-zinc-900">
       <%= gettext("Log") %><span class="text-orange-500"><%= gettext("in") %></span>
     </h2>
     <%= if @error_message do %>
-      <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
-        <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
+      <div class="mx-4 mt-4 w-full px-4 sm:w-96 sm:px-0">
+        <div class="alert alert-danger flex w-full flex-row border-l-4 border-orange-400 bg-red-100 px-4 py-4 text-sm text-red-700">
+          <.icon name="hero-exclamation-circle-solid" class="mr-2 h-5 w-5 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -14,41 +14,41 @@
       </div>
     <% end %>
 
-    <div class="space-y-3 rounded-sm w-full flex-col justify-center items-center mt-6 mx-4 px-3.5 sm:w-96 sm:mx-0 sm:px-0">
-      <div class="flex justify-center w-full">
+    <div class="mx-4 mt-6 w-full flex-col items-center justify-center space-y-3 rounded-sm px-3.5 sm:mx-0 sm:w-96 sm:px-0">
+      <div class="flex w-full justify-center">
         <%= label(f, :email, class: "sr-only") %>
         <%= email_input(f, :email,
           required: true,
           placeholder: gettext("Email address"),
-          class: "relative w-full appearance-none rounded border border-zinc-300 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
+          class: "relative w-full appearance-none rounded border border-zinc-300 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:outline-none focus:ring-orange-400 sm:text-sm"
         ) %>
       </div>
-      <div x-data="{ hide: true }" class="flex flex-row items-center justify-center w-full border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+      <div x-data="{ hide: true }" class="flex w-full flex-row items-center justify-center rounded border border-zinc-300 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-1 focus-within:ring-orange-400 sm:text-sm">
         <%= label(f, :password, class: "sr-only") %>
         <%= password_input(f, :password,
           required: true,
           placeholder: gettext("Password"),
           autocomplete: "current-password",
-          class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
+          class: "relative w-full appearance-none rounded border-0 text-zinc-900 outline-none focus:ring-0 sm:text-sm"
         ) %>
-        <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-          <.icon name="hero-eye-solid" class="w-5 h-auto fill-zinc-900 hover:fill-black" />
+        <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="w-fit cursor-pointer px-2">
+          <.icon name="hero-eye-solid" class="h-auto w-5 fill-zinc-900 hover:fill-black" />
         </div>
-        <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-          <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-zinc-900 hover:fill-black" />
+        <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="w-fit cursor-pointer px-2">
+          <.icon name="hero-eye-slash-solid" class="h-auto w-5 fill-zinc-900 hover:fill-black" />
         </div>
       </div>
     </div>
 
-    <div class="flex flex-row mx-4 w-full sm:w-96 justify-between">
-      <div class="ml-4 sm:ml-0 flex flex-col space-y-2">
+    <div class="mx-4 flex w-full flex-row justify-between sm:w-96">
+      <div class="ml-4 flex flex-col space-y-2 sm:ml-0">
         <div class="flex items-center">
-          <%= checkbox(f, :remember_me, class: "size-4 rounded border-zinc-300 text-orange-500 fill-orange-500 focus:ring-orange-500") %>
+          <%= checkbox(f, :remember_me, class: "size-4 rounded border-zinc-300 fill-orange-500 text-orange-500 focus:ring-orange-500") %>
           <%= label(f, :remember_me, gettext("Remember me"), class: "ml-2 block text-sm text-zinc-900") %>
         </div>
       </div>
 
-      <div class="mr-4 sm:mr-0 text-sm">
+      <div class="mr-4 text-sm sm:mr-0">
         <span>
           New here?
         </span>
@@ -57,8 +57,8 @@
     </div>
 
     <div class="w-full flex-col">
-      <div class="mx-4 justify-center flex select-none">
-        <%= submit class: "w-full flex justify-center border-2 rounded-sm bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm sm:w-96 sm:mx-0 sm:px-0" do %>
+      <div class="mx-4 flex select-none justify-center">
+        <%= submit class: "flex w-full justify-center rounded-sm border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm sm:mx-0 sm:w-96 sm:px-0" do %>
           <%= gettext("Log in") %>
         <% end %>
       </div>
diff --git a/lib/atomic_web/templates/user_settings/edit.html.heex b/lib/atomic_web/templates/user_settings/edit.html.heex
index 33d9d3e3a..1ac0d7a7f 100644
--- a/lib/atomic_web/templates/user_settings/edit.html.heex
+++ b/lib/atomic_web/templates/user_settings/edit.html.heex
@@ -1,10 +1,10 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-white bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat	bg-opacity-25 bg-center">
-  <div class="flex flex-col lg:flex-row items-center justify-center lg:space-x-16">
-    <div class="py-8 px-4 lg:py-0 lg:px-0  flex flex-col items-center justify-center">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-white bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <div class="flex flex-col items-center justify-center lg:flex-row lg:space-x-16">
+    <div class="flex flex-col items-center justify-center px-4 py-8 lg:px-0 lg:py-0">
       <h2 class="mb-6 text-center text-5xl font-extrabold text-zinc-900">
         <span><%= gettext("Change Email") %></span>
       </h2>
-      <.form :let={f} for={@email_changeset} action={~p"/profile"} id="update_email" class="flex flex-col items-center justify-center w-full h-full mx-8 sm:mx-0">
+      <.form :let={f} for={@email_changeset} action={~p"/profile"} id="update_email" class="mx-8 flex h-full w-full flex-col items-center justify-center sm:mx-0">
         <%= if @email_changeset.action do %>
           <div class="alert alert-danger">
             <p>Oops, something went wrong! Please check the errors below.</p>
@@ -14,7 +14,7 @@
         <%= hidden_input(f, :action, value: "update_email") %>
 
         <%= label(f, :email, class: "sr-only") %>
-        <%= email_input(f, :email, placeholder: gettext("New Email"), required: true, class: "relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm") %>
+        <%= email_input(f, :email, placeholder: gettext("New Email"), required: true, class: "relative block w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm lg:w-96") %>
         <%= error_tag(f, :email) %>
 
         <%= label(f, :current_password, for: "current_password_for_email", class: "sr-only") %>
@@ -23,21 +23,21 @@
           required: true,
           name: "current_password",
           id: "current_password_for_email",
-          class: "mt-1 relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm"
+          class: "relative mt-1 block w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm lg:w-96"
         ) %>
         <%= error_tag(f, :current_password) %>
 
         <div>
-          <%= submit("Change Email", class: "mt-6 w-64 border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm") %>
+          <%= submit("Change Email", class: "mt-6 w-64 rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm") %>
         </div>
       </.form>
     </div>
 
-    <div class="px-4 lg:px-0  flex flex-col items-center justify-center">
+    <div class="flex flex-col items-center justify-center px-4 lg:px-0">
       <h2 class="mb-6 text-center text-5xl font-extrabold text-zinc-900">
         <span><%= gettext("Change Password") %></span>
       </h2>
-      <.form :let={f} for={@password_changeset} action={~p"/profile"} id="update_password" class="flex flex-col items-center justify-center w-full h-full mx-8 sm:mx-0">
+      <.form :let={f} for={@password_changeset} action={~p"/profile"} id="update_password" class="mx-8 flex h-full w-full flex-col items-center justify-center sm:mx-0">
         <%= if @password_changeset.action do %>
           <div class="alert alert-danger">
             <p>Oops, something went wrong! Please check the errors below.</p>
@@ -47,14 +47,14 @@
         <%= hidden_input(f, :action, value: "update_password") %>
 
         <%= label(f, :password, "New password", class: "sr-only") %>
-        <%= password_input(f, :password, placeholder: gettext("New Password"), required: true, class: "mt-1 relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm") %>
+        <%= password_input(f, :password, placeholder: gettext("New Password"), required: true, class: "relative mt-1 block w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm lg:w-96") %>
         <%= error_tag(f, :password) %>
 
         <%= label(f, :password_confirmation, "Confirm new password", class: "sr-only") %>
         <%= password_input(f, :password_confirmation,
           required: true,
           placeholder: gettext("Confirm new Password"),
-          class: "mt-1 relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm"
+          class: "relative mt-1 block w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm lg:w-96"
         ) %>
         <%= error_tag(f, :password_confirmation) %>
 
@@ -64,12 +64,12 @@
           name: "current_password",
           placeholder: gettext("Current Password"),
           id: "current_password_for_password",
-          class: "mt-1 relative block lg:w-96 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm"
+          class: "relative mt-1 block w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none sm:text-sm lg:w-96"
         ) %>
         <%= error_tag(f, :current_password) %>
 
-        <div class="flex justify-center mt-5">
-          <%= submit("Change Password", class: "mt-6 w-64 border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm") %>
+        <div class="mt-5 flex justify-center">
+          <%= submit("Change Password", class: "mt-6 w-64 rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm") %>
         </div>
       </.form>
     </div>
diff --git a/lib/atomic_web/templates/user_setup/edit.html.heex b/lib/atomic_web/templates/user_setup/edit.html.heex
index a2b9fc985..21182991f 100644
--- a/lib/atomic_web/templates/user_setup/edit.html.heex
+++ b/lib/atomic_web/templates/user_setup/edit.html.heex
@@ -1,18 +1,18 @@
-<div class="flex flex-col items-center w-screen h-screen justify-center bg-white bg-hero-pattern bg-cover lg:bg-[length:2000px_1400px] bg-no-repeat bg-opacity-25 bg-center">
-  <.form :let={f} for={@changeset} action={~p"/users/setup"} class="flex flex-col items-center justify-center w-full h-full mx-8 mt-8 sm:mx-0">
-    <div class="flex-row flex select-none">
+<div class="bg-hero-pattern flex h-screen w-screen flex-col items-center justify-center bg-white bg-opacity-25 bg-cover bg-center bg-no-repeat lg:bg-[length:2000px_1400px]">
+  <.form :let={f} for={@changeset} action={~p"/users/setup"} class="mx-8 mt-8 flex h-full w-full flex-col items-center justify-center sm:mx-0">
+    <div class="flex select-none flex-row">
       <p class="mt-6 uppercase tracking-widest"><%= gettext("Welcome to Atomic!") %></p>
-      <p class="ml-2 animate-wave text-2xl self-end">👋</p>
+      <p class="animate-wave ml-2 self-end text-2xl">👋</p>
     </div>
-    <div class="sm:w-96 mx-4">
-      <h2 class="mt-1 text-center text-xl font-bold text-zinc-900 select-none">
+    <div class="mx-4 sm:w-96">
+      <h2 class="mt-1 select-none text-center text-xl font-bold text-zinc-900">
         <%= gettext("Please finish setting up your account") %>
       </h2>
     </div>
     <%= if @changeset.action do %>
-      <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
-        <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
+      <div class="mx-4 mt-4 w-full px-4 sm:w-96 sm:px-0">
+        <div class="alert alert-danger flex w-full flex-row border-l-4 border-orange-400 bg-red-100 px-4 py-4 text-sm text-red-700">
+          <.icon name="hero-exclamation-circle-solid" class="mr-2 h-5 w-5 text-red-400" />
           <div>
             <p>Oops, something went wrong!</p>
           </div>
@@ -20,43 +20,43 @@
       </div>
     <% end %>
 
-    <div class="space-y-3 rounded-md w-full flex-col mt-6">
-      <div class="flex flex-col items-center justify-center mx-4">
+    <div class="mt-6 w-full flex-col space-y-3 rounded-md">
+      <div class="mx-4 flex flex-col items-center justify-center">
         <%= label(f, :name, class: "sr-only") %>
         <%= text_input(f, :name,
           required: true,
           placeholder: gettext("Name"),
-          class: "relative w-full sm:w-96 mx-4 appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:ring-orange-500 focus:outline-none sm:text-sm"
+          class: "relative mx-4 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none focus:ring-orange-500 sm:w-96 sm:text-sm"
         ) %>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :name) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :name) %></span>
       </div>
-      <div class="flex flex-col items-center justify-center mx-4">
+      <div class="mx-4 flex flex-col items-center justify-center">
         <%= label(f, :slug, class: "sr-only") %>
-        <div class="flex flex-row relative w-full sm:w-96 mx-4 appearance-none rounded border border-zinc-300 px-3 text-zinc-900 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:outline-none sm:text-sm">
-          <span class="self-center select-none">@</span>
+        <div class="relative mx-4 flex w-full appearance-none flex-row rounded border border-zinc-300 px-3 text-zinc-900 placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:outline-none focus-within:ring-orange-400 sm:w-96 sm:text-sm">
+          <span class="select-none self-center">@</span>
           <%= text_input(f, :slug,
             required: true,
             placeholder: gettext("username"),
-            class: "pl-0 appearance-none text-zinc-900 placeholder-zinc-500 sm:text-sm border-none w-full focus:outline-none focus:ring-transparent"
+            class: "w-full appearance-none border-none pl-0 text-zinc-900 placeholder-zinc-500 focus:outline-none focus:ring-transparent sm:text-sm"
           ) %>
         </div>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :slug) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :slug) %></span>
       </div>
-      <div class="flex flex-col items-center justify-center mx-4">
+      <div class="mx-4 flex flex-col items-center justify-center">
         <%= label(f, :course_id, class: "sr-only") %>
         <%= select(f, :course_id, Enum.map(@courses, &{&1.name, &1.id}),
           required: true,
           placeholder: gettext("Course"),
           prompt: gettext("Select a course"),
-          class: "relative w-full sm:w-96 mx-4 appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:ring-orange-500 focus:outline-none sm:text-sm"
+          class: "relative mx-4 w-full appearance-none rounded border border-zinc-300 px-3 py-2 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-500 focus:outline-none focus:ring-orange-500 sm:w-96 sm:text-sm"
         ) %>
-        <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :course_id) %></span>
+        <span class="mx-4 w-full text-sm text-red-600 sm:w-96"><%= error_tag(f, :course_id) %></span>
       </div>
     </div>
 
     <div class="mt-6 w-full flex-col">
-      <div class="mx-4 justify-center flex select-none">
-        <%= submit("Next Step", class: "w-full flex justify-center border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm sm:w-96") %>
+      <div class="mx-4 flex select-none justify-center">
+        <%= submit("Next Step", class: "flex w-full justify-center rounded-md border-2 border-orange-500 bg-orange-500 px-3.5 py-2 text-sm text-lg font-medium text-white shadow-sm sm:w-96") %>
       </div>
     </div>
   </.form>
diff --git a/mix.lock b/mix.lock
index 612101aa2..27035a1d7 100644
--- a/mix.lock
+++ b/mix.lock
@@ -29,7 +29,7 @@
   "gen_stage": {:hex, :gen_stage, "1.2.1", "19d8b5e9a5996d813b8245338a28246307fd8b9c99d1237de199d21efc4c76a1", [:mix], [], "hexpm", "83e8be657fa05b992ffa6ac1e3af6d57aa50aace8f691fcf696ff02f8335b001"},
   "gettext": {:hex, :gettext, "0.26.1", "38e14ea5dcf962d1fc9f361b63ea07c0ce715a8ef1f9e82d3dfb8e67e0416715", [:mix], [{:expo, "~> 0.5.1 or ~> 1.0", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "01ce56f188b9dc28780a52783d6529ad2bc7124f9744e571e1ee4ea88bf08734"},
   "hackney": {:hex, :hackney, "1.20.1", "8d97aec62ddddd757d128bfd1df6c5861093419f8f7a4223823537bad5d064e2", [:rebar3], [{:certifi, "~> 2.12.0", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "~> 6.1.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "~> 1.0.0", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~> 1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:parse_trans, "3.4.1", [hex: :parse_trans, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "~> 1.1.0", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}, {:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "fe9094e5f1a2a2c0a7d10918fee36bfec0ec2a979994cff8cfe8058cd9af38e3"},
-  "heroicons": {:git, "https://github.com/tailwindlabs/heroicons.git", "ad0ad1f6d51bd64dcd67e363d2b2833a8de25154", [tag: "v2.1.5", sparse: "optimized"]},
+  "heroicons": {:git, "https://github.com/tailwindlabs/heroicons.git", "ad0ad1f6d51bd64dcd67e363d2b2833a8de25154", [tag: "v2.1.5", sparse: "optimized", depth: 1]},
   "idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"},
   "inflex": {:hex, :inflex, "2.0.0", "db69d542b8fdb23ac667f9bc0c2395a3983fa2da6ae2efa7ab5dc541928f7a75", [:mix], [], "hexpm", "c018852409bd48b03ad96ed53594186bc074bdd1519043a0ad1fa5697aac4399"},
   "jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"},
@@ -64,7 +64,7 @@
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.7", "354c321cf377240c7b8716899e182ce4890c5938111a1296add3ec74cf1715df", [:make, :mix, :rebar3], [], "hexpm", "fe4c190e8f37401d30167c8c405eda19469f34577987c76dde613e838bbc67f8"},
   "swoosh": {:hex, :swoosh, "1.17.0", "4a082a6ce4d60b1f48ffa725c8da0e2304504569ff550f4ed2d088c923039cb0", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "659b8bc25f7483b872d051a7f0731fb8d5312165be0d0302a3c783b566b0a290"},
-  "tabler_icons": {:git, "https://github.com/tabler/tabler-icons.git", "a90ddb1fb22fbb28bcafcace6a43fe66ff1f16e2", [sparse: "icons"]},
+  "tabler_icons": {:git, "https://github.com/tabler/tabler-icons.git", "a90ddb1fb22fbb28bcafcace6a43fe66ff1f16e2", [sparse: "icons", depth: 1]},
   "tailwind": {:hex, :tailwind, "0.2.3", "277f08145d407de49650d0a4685dc062174bdd1ae7731c5f1da86163a24dfcdb", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "8e45e7a34a676a7747d04f7913a96c770c85e6be810a1d7f91e713d3a3655b5d"},
   "tailwind_formatter": {:hex, :tailwind_formatter, "0.3.7", "2728d031e6803dfddf63f1dd7c64b5b9fd70ffdf635709c50f47589f4fb48861", [:mix], [{:phoenix_live_view, ">= 0.17.6", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}], "hexpm", "3d91ac4d4622505b09c0f4678512281515b4fbe7644f012da1bd2722f5880185"},
   "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},

From 33f417ef5f874efd528f0ef43635b2870f0be188 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Mon, 17 Feb 2025 21:15:03 +0000
Subject: [PATCH 30/39] chore: add infinity symbol to input placeholder

---
 lib/atomic_web/live/activity_live/form_component.html.heex | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 1e95c3620..0cf3410a0 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -107,7 +107,7 @@
               type="number"
               field={@form[:maximum_entries]}
               label="Maximum entries"
-              placeholder="Unlimited"
+              placeholder="∞ Unlimited"
               value=" "
               readonly
               required
@@ -148,7 +148,7 @@
           <%= if @has_max_capacity? do %>
             <.field class="" type="number" field={@form[:maximum_entries]} placeholder="Choose maximum entries" />
           <% else %>
-            <.field class="" type="number" field={@form[:maximum_entries]} value="" placeholder="Unlimited" />
+            <.field class="" type="number" field={@form[:maximum_entries]} value="" placeholder="∞ Unlimited" />
           <% end %>
         </div>
         <div class="flex gap-3">

From 6c941fcd04c871940ac842bc92d8a491f2426aaf Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Mon, 17 Feb 2025 23:21:14 +0000
Subject: [PATCH 31/39] feat: add support for multi-day activities (to display
 date)

---
 lib/atomic_web/components/tabs.ex                  |  2 +-
 .../live/activity_live/form_component.html.heex    | 14 +++++++-------
 lib/atomic_web/live/activity_live/show.html.heex   |  9 +++++++++
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/lib/atomic_web/components/tabs.ex b/lib/atomic_web/components/tabs.ex
index 1e565b1ff..a81c4be51 100644
--- a/lib/atomic_web/components/tabs.ex
+++ b/lib/atomic_web/components/tabs.ex
@@ -85,7 +85,7 @@ defmodule AtomicWeb.Components.Tabs do
     underline_classes =
       if active,
         do: "bg-orange-100 text-orange-600",
-        else: "text-zinc-500 bg-zinc-100"
+        else: "text-zinc-300 bg-zinc-100"
 
     [base_classes, active_classes, underline_classes]
   end
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 0cf3410a0..5933ef916 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -49,7 +49,7 @@
         <label for="description_button" class="atomic-label atomic-label--required">
           Description
         </label>
-        <.button id="description_button" class="group atomic-button atomic-button--primary-outline flex flex-col items-start rounded-md border-gray-300 bg-white px-3 py-3 text-gray-300 focus-within:bg-white lg:w-full" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+        <.button id="description_button" class="group atomic-button atomic-button--primary-outline flex flex-col items-start rounded-md border-gray-300 bg-white px-3 py-[10px] sm:py-2 text-gray-300 focus-within:bg-white lg:w-full" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
           <%= if not @has_description? do %>
             <label class="cursor-pointer text-left text-gray-500">
               Add description
@@ -72,24 +72,24 @@
           </div>
         </.button>
 
-        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start xl:justify-between">
+        <div class="flex flex-col justify-center md:flex-row md:justify-start xl:justify-between">
           <.inputs_for :let={fl} field={@form[:location]}>
-            <div class="flex flex-col gap-y-1">
+            <div class="mt-3 sm:mt-4 flex flex-col gap-y-1">
               <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
             </div>
-            <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
+            <div class="-mt-2 sm:-mt-2 md:mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
               <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:address]} label="Address" placeholder="Address" required />
             </div>
           </.inputs_for>
         </div>
 
-        <label for="capacity_button" class="atomic-label atomic-label--required">
+        <label for="capacity_button" class="atomic-label atomic-label--required -mt-2">
           Capacity
         </label>
-        <.button id="capacity_button" type="button" class="group atomic-button atomic-button--primary-outline flex flex-col items-start rounded-md border-gray-300 bg-white px-3 py-3 text-gray-300 focus-within:bg-white lg:w-full" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
+        <.button id="capacity_button" type="button" class="group atomic-button atomic-button--primary-outline flex flex-col items-start rounded-md border-gray-300 bg-white px-3 py-[10px] sm:py-2 text-gray-300 focus-within:bg-white lg:w-full" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
           <%= if @has_max_capacity? do %>
             <.field
-              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
+              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0 atomic-text-input"
               type="number"
               field={@form[:maximum_entries]}
               label="Maximum entries"
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index 712a74b12..2e10d00e2 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -72,6 +72,15 @@
                     <%= "#{display_time(@activity.start)}-#{display_time(@activity.finish)}" %>
                   </p>
                 </div>
+              <% else %>
+                <div class="flex flex-col">
+                  <p class="font-medium">
+                    <%= pretty_display_date(@activity.start) %> - <%= pretty_display_date(@activity.finish) %>
+                  </p>
+                  <p>
+                    <%= "#{display_time(@activity.start)}-#{display_time(@activity.finish)}" %>
+                  </p>
+                </div>
               <% end %>
               <!-- TODO: Support for multi-day activities -->
             </div>

From 6ed444d8e5cf3ccf99b4ba22e9709145239c2bcf Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Wed, 19 Feb 2025 15:31:45 +0000
Subject: [PATCH 32/39] chore: improve responsive design

---
 lib/atomic_web/components/modal.ex                        | 2 +-
 lib/atomic_web/components/tabs.ex                         | 2 +-
 lib/atomic_web/live/activity_live/form_component.ex       | 6 +++---
 .../live/activity_live/form_component.html.heex           | 4 ++--
 lib/atomic_web/live/activity_live/show.html.heex          | 8 +++++---
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/lib/atomic_web/components/modal.ex b/lib/atomic_web/components/modal.ex
index 4234a406d..7610318cd 100644
--- a/lib/atomic_web/components/modal.ex
+++ b/lib/atomic_web/components/modal.ex
@@ -40,7 +40,7 @@ defmodule AtomicWeb.Components.Modal do
       <div class="fixed inset-0 overflow-y-auto" aria-labelledby={"#{@id}-title"} aria-describedby={"#{@id}-description"} role="dialog" aria-modal="true" tabindex="0">
         <div class="flex min-h-full items-center justify-center">
           <div class={"#{@class} w-full max-w-3xl p-4 sm:p-6 lg:py-8"}>
-            <.focus_wrap id={"#{@id}-container"} phx-click-away={JS.exec("phx-cancel", to: "##{@id}")} class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition">
+            <.focus_wrap id={"#{@id}-container"} phx-click-away={JS.exec("phx-cancel", to: "##{@id}")} class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white px-6 py-14 sm:px-8 md:px-14 shadow-lg ring-1 transition">
               <div class="absolute top-6 right-5">
                 <button phx-click={JS.exec("phx-cancel", to: "##{@id}")} type="button" class="-m-3 flex-none p-3 opacity-20 outline-none hover:opacity-40" aria-label={gettext("close")}>
                   <.icon name="hero-x-mark-solid" class="size-5" />
diff --git a/lib/atomic_web/components/tabs.ex b/lib/atomic_web/components/tabs.ex
index a81c4be51..77678934f 100644
--- a/lib/atomic_web/components/tabs.ex
+++ b/lib/atomic_web/components/tabs.ex
@@ -85,7 +85,7 @@ defmodule AtomicWeb.Components.Tabs do
     underline_classes =
       if active,
         do: "bg-orange-100 text-orange-600",
-        else: "text-zinc-300 bg-zinc-100"
+        else: "text-white bg-zinc-100"
 
     [base_classes, active_classes, underline_classes]
   end
diff --git a/lib/atomic_web/live/activity_live/form_component.ex b/lib/atomic_web/live/activity_live/form_component.ex
index 2fec6a5da..939d922bb 100644
--- a/lib/atomic_web/live/activity_live/form_component.ex
+++ b/lib/atomic_web/live/activity_live/form_component.ex
@@ -32,9 +32,9 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
   @impl true
   def handle_event("validate", %{"activity" => activity_params}, socket) do
     description = Map.get(activity_params, "description", "")
-    capacity = Map.get(activity_params, "max_entries", "")
+    capacity = Map.get(activity_params, "maximum_entries", "")
     has_description = is_nil(description) || String.trim(description) == ""
-    has_capacity = is_nil(capacity) || String.trim(capacity) == ""
+    capacity_field_empty = is_nil(capacity) || String.trim(capacity) == ""
 
     changeset =
       socket.assigns.activity
@@ -44,7 +44,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
     {:noreply,
      socket
      |> assign(:has_description?, not has_description)
-     |> assign(:has_max_capacity?, has_capacity)
+     |> assign(:has_max_capacity?, not capacity_field_empty)
      |> assign_form(changeset)}
   end
 
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 5933ef916..866e4f157 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -77,7 +77,7 @@
             <div class="mt-3 sm:mt-4 flex flex-col gap-y-1">
               <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
             </div>
-            <div class="-mt-2 sm:-mt-2 md:mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
+            <div class="-mt-2 sm:-mt-2 md:mt-4 flex flex-col gap-y-1 md:ml-8">
               <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:address]} label="Address" placeholder="Address" required />
             </div>
           </.inputs_for>
@@ -121,7 +121,7 @@
 
         <div class="mt-4 flex-grow">
           <div class="flex justify-center lg:justify-end">
-            <.button class="w-full p-5 lg:p-3" type="submit" phx-disable-with="Saving...">
+            <.button class="w-full p-4 lg:p-3" type="submit" phx-disable-with="Saving...">
               <%= if @action == :new do %>
                 <span><%= gettext("Create Activity") %></span>
               <% else %>
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index 2e10d00e2..ba45af4b5 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -82,7 +82,6 @@
                   </p>
                 </div>
               <% end %>
-              <!-- TODO: Support for multi-day activities -->
             </div>
           <% end %>
           <!-- Capacity -->
@@ -268,14 +267,17 @@
 <.modal :if={@participants_modal} show id="participants_modal" on_cancel={JS.push("handle_participants_modal")}>
   <span class="flex-l text-lg font-semibold text-gray-900">Participants</span>
   <%= if length(@participants) != 0 do %>
-    <div class="align-center mt-2 flex w-full flex-wrap place-items-center gap-4">
+  <div class="flex justify-center place-items-center w-full">
+    <div class="align-center mt-4 grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 w-fit">
       <%= for participant <- @participants do %>
-        <div class="flex h-6 items-center px-0 py-6">
+        <div class="flex h-10">
           <.avatar size={:xs} name={participant.name} type={:user} />
           <.link navigate={~p"/profile/#{participant.slug}"} class="ml-4 hover:underline"><%= participant.name %></.link>
         </div>
       <% end %>
     </div>
+  </div>
+
   <% else %>
     <div class="mt-4">
       <span>There are no participants for this activity</span>

From cce41c44dedac4a5fcedf423b81b05e32873e231 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Sun, 23 Feb 2025 21:18:49 +0000
Subject: [PATCH 33/39] feat: show relative enrollment time in participant
 modal

---
 lib/atomic/activities.ex                        |  3 ++-
 lib/atomic_web/components/activity.ex           | 10 ++++++++--
 .../live/activity_live/form_component.html.heex |  8 ++++----
 lib/atomic_web/live/activity_live/show.ex       |  1 +
 .../live/activity_live/show.html.heex           | 17 +++++++++++------
 5 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/lib/atomic/activities.ex b/lib/atomic/activities.ex
index b81538894..265a035fa 100644
--- a/lib/atomic/activities.ex
+++ b/lib/atomic/activities.ex
@@ -356,7 +356,8 @@ defmodule Atomic.Activities do
   def list_activity_participants(id) do
     from(u in User,
       join: e in assoc(u, :enrollments),
-      where: e.activity_id == ^id
+      where: e.activity_id == ^id,
+      preload: [enrollments: e]
     )
   end
 
diff --git a/lib/atomic_web/components/activity.ex b/lib/atomic_web/components/activity.ex
index 70839ebe5..96e55cda6 100644
--- a/lib/atomic_web/components/activity.ex
+++ b/lib/atomic_web/components/activity.ex
@@ -47,14 +47,20 @@ defmodule AtomicWeb.Components.Activity do
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
               <.icon name="hero-calendar-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
-              <span class="font-medium text-zinc-900"><%= pretty_display_date(@activity.start) %></span>
+              <%= if Timex.to_date(@activity.start) == Timex.to_date(@activity.finish) do %>
+                <span class="font-medium text-zinc-900"><%= pretty_display_date(@activity.start) %></span>
+              <% else %>
+                <span class="font-medium text-zinc-900"><%= pretty_display_date(@activity.start) %></span>
+                <.icon name="hero-arrow-right" class="size-4 mt-[3px]"/>
+                <span class="font-medium text-zinc-900"><%= pretty_display_date(@activity.finish) %></span>
+              <% end %>
               <span class="sr-only">starting in</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
               <.icon name="hero-user-group-solid" class="size-5" />
-              <span class="font-medium text-zinc-900"><%= @activity.enrolled %>/<%= @activity.maximum_entries %></span>
+              <span class="font-medium text-zinc-900"><%= @activity.enrolled %> <%= if @activity.maximum_entries, do: "/" %> <%= @activity.maximum_entries %></span>
               <span class="sr-only text-zinc-400">enrollments</span>
             </span>
           </span>
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 866e4f157..61ae4be11 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -23,7 +23,7 @@
           </div>
         </div>
         <div class="flex w-full">
-          <div class="justify-top flex hidden flex-col items-center pt-3 sm:block">
+          <div class="justify-top hidden sm:flex flex-col items-center pt-3 ">
             <div class="size-3 bg-primary-600 m-1 rounded-full" />
             <div class="flex justify-center">
               <div class="border-l-primary-600 h-[3.25rem] w-[3px] border-l border-dashed" />
@@ -134,7 +134,7 @@
     </div>
     <.modal :if={@description_modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
       <div class="mt-4 flex-grow">
-        <.field class="\-h-10 resize-none " type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
+        <.field class="\-h-10 resize-none atomic-button atomic-button--primary-outline" type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
         <div class="flex w-full justify-end">
           <.button class="text" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
             <span><%= gettext("Done") %></span>
@@ -146,9 +146,9 @@
       <div class="h-full w-full">
         <div class="">
           <%= if @has_max_capacity? do %>
-            <.field class="" type="number" field={@form[:maximum_entries]} placeholder="Choose maximum entries" />
+            <.field class="atomic-button atomic-button--primary-outline" type="number" field={@form[:maximum_entries]} placeholder="Choose maximum entries" />
           <% else %>
-            <.field class="" type="number" field={@form[:maximum_entries]} value="" placeholder="∞ Unlimited" />
+            <.field class="atomic-button atomic-button--primary-outline" type="number" field={@form[:maximum_entries]} value="" placeholder="∞ Unlimited" />
           <% end %>
         </div>
         <div class="flex gap-3">
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index 80fae8d31..0232e3e74 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -78,6 +78,7 @@ defmodule AtomicWeb.ActivityLive.Show do
   end
 
   def handle_event("handle_participants_modal", _, socket) do
+    IO.inspect(socket)
     {:noreply, socket |> assign(:participants_modal, not socket.assigns.participants_modal)}
   end
 
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index ba45af4b5..f245ec85a 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -264,15 +264,20 @@
   </div>
 </.modal>
 <!-- Participants show modal -->
-<.modal :if={@participants_modal} show id="participants_modal" on_cancel={JS.push("handle_participants_modal")}>
-  <span class="flex-l text-lg font-semibold text-gray-900">Participants</span>
+<.modal :if={@participants_modal} show class="max-w-[500px]" id="participants_modal" on_cancel={JS.push("handle_participants_modal")}>
+  <div class="flex w-full justify-center">
+    <span class="flex-l text-lg font-semibold text-gray-900">Participants</span>
+  </div>
   <%= if length(@participants) != 0 do %>
   <div class="flex justify-center place-items-center w-full">
-    <div class="align-center mt-4 grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 w-fit">
+    <div class="align-center mt-4 grid gap-4 grid-cols-1 w-fit max-h-80 overflow-auto scrollbar-hide">
       <%= for participant <- @participants do %>
-        <div class="flex h-10">
-          <.avatar size={:xs} name={participant.name} type={:user} />
-          <.link navigate={~p"/profile/#{participant.slug}"} class="ml-4 hover:underline"><%= participant.name %></.link>
+        <div class="flex h-10 place-items-center justify-between">
+          <div class="flex place-items-center">
+            <.avatar size={:xs} name={participant.name} type={:user} />
+            <.link navigate={~p"/profile/#{participant.slug}"} class="ml-4 hover:underline"><%= participant.name %></.link>
+          </div>
+          <span class="ml-2 text-gray-500 hidden sm:block"><%= relative_datetime(participant.enrollments |> List.first() |> Map.get(:inserted_at)) %></span>
         </div>
       <% end %>
     </div>

From 3d7d3754ef544442cf32b85f4ee404ece4c637cb Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Sun, 27 Apr 2025 22:14:25 +0100
Subject: [PATCH 34/39] fix: page component

---
 lib/atomic_web/components/page.ex                | 11 +++++++----
 lib/atomic_web/live/activity_live/show.html.heex | 11 ++++-------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/lib/atomic_web/components/page.ex b/lib/atomic_web/components/page.ex
index b39ebe303..4ea28e39c 100644
--- a/lib/atomic_web/components/page.ex
+++ b/lib/atomic_web/components/page.ex
@@ -10,6 +10,7 @@ defmodule AtomicWeb.Components.Page do
     default: false,
     doc: "Whether to show a bottom border after the page header."
 
+  slot :title_wrapper, required: false
   slot :actions, required: false, doc: "Slot for actions to be rendered in the page header."
   slot :inner_block, required: false, doc: "Slot for the body content of the page."
 
@@ -20,13 +21,15 @@ defmodule AtomicWeb.Components.Page do
         <main class="relative z-0 mb-10 flex-1 overflow-y-auto focus:outline-none xl:order-last">
           <div class={["mx-auto max-w-5xl px-4 sm:px-6 lg:px-8", @bottom_border && "border-b"]}>
             <div class="my-6 flex min-w-0 flex-row items-center justify-between">
-              <h1 class="flex-1 select-none truncate text-2xl font-bold text-zinc-900">
-                {@title}
-              </h1>
+              <div class="flex flex-col items-start">
+                <h1 class="flex-1 select-none truncate text-2xl font-bold text-zinc-900">
+                  {@title}
+                </h1>
+                {render_slot(@title_wrapper)}
+              </div>
               {render_slot(@actions)}
             </div>
           </div>
-
           {render_slot(@inner_block)}
         </main>
       </div>
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index 25bb6a3f5..90de173f7 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -1,15 +1,12 @@
 <.page title={@activity.title}>
-  <:title_wrapper :let={title}>
+  <:title_wrapper>
     <div class="grid">
-      <h1 class="select-none pb-2 text-2xl font-bold text-gray-900">
-        {title}
-      </h1>
       <span class="flex items-center gap-2">
-        <p>
+        <p class="text-sm font-semibold text-gray-900">
           {gettext("hosted by")}
         </p>
-        <.link navigate={~p"/organizations/#{@activity.organization.id}"} class="flex items-center gap-1">
-          <.avatar class={@activity.organization.logo && "border-0"} src={Uploaders.Logo.url({@activity.organization.logo, @activity.organization}, :original)} name={@activity.organization.name} size={:xs} type={:organization} color={:white} />
+        <.link navigate={~p"/organizations/#{@activity.organization.id}"} class="flex items-center gap-1 font-semibold text-gray-900 hover:underline">
+          <.avatar class={@activity.organization.logo && "border-0 size-5"} src={Uploaders.Logo.url({@activity.organization.logo, @activity.organization}, :original)} name={@activity.organization.name} size={:xs} type={:organization} color={:white} />
           {@activity.organization.name}
         </.link>
       </span>

From 1ba795526603cdf162384524a2dd08d69a2e6069 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Sun, 27 Apr 2025 22:18:35 +0100
Subject: [PATCH 35/39] fix: remove IO.inspect

---
 lib/atomic_web/live/activity_live/show.ex | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index 0232e3e74..80fae8d31 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -78,7 +78,6 @@ defmodule AtomicWeb.ActivityLive.Show do
   end
 
   def handle_event("handle_participants_modal", _, socket) do
-    IO.inspect(socket)
     {:noreply, socket |> assign(:participants_modal, not socket.assigns.participants_modal)}
   end
 

From ced4241eba0ba2e77526a26ee56caa6f566a7a5b Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Wed, 30 Apr 2025 20:51:06 +0100
Subject: [PATCH 36/39] chore: use new image_uploader on activities page

---
 lib/atomic/activities/activity.ex             |  4 +-
 lib/atomic_web/components/activity.ex         |  6 +-
 .../activity_live/components/activity_card.ex |  4 +-
 .../live/activity_live/form_component.ex      | 61 +++++++++++++------
 .../activity_live/form_component.html.heex    |  2 +-
 .../live/activity_live/show.html.heex         |  8 +--
 .../20221022010100_create_activities.exs      |  2 +-
 7 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/lib/atomic/activities/activity.ex b/lib/atomic/activities/activity.ex
index 2d4ac2c00..48e921595 100644
--- a/lib/atomic/activities/activity.ex
+++ b/lib/atomic/activities/activity.ex
@@ -32,7 +32,7 @@ defmodule Atomic.Activities.Activity do
     field :maximum_entries, :integer, default: nil
     field :enrolled, :integer, default: 0
 
-    field :image, Uploaders.Post.Type
+    field :card, Uploaders.Post.Type
     embeds_one :location, Location, on_replace: :update
 
     belongs_to :organization, Organization
@@ -55,7 +55,7 @@ defmodule Atomic.Activities.Activity do
 
   def image_changeset(activity, attrs) do
     activity
-    |> cast_attachments(attrs, [:image])
+    |> cast_attachments(attrs, [:card])
   end
 
   defp validate_dates(changeset) do
diff --git a/lib/atomic_web/components/activity.ex b/lib/atomic_web/components/activity.ex
index 9444ff7e7..c85bea9fb 100644
--- a/lib/atomic_web/components/activity.ex
+++ b/lib/atomic_web/components/activity.ex
@@ -36,9 +36,9 @@ defmodule AtomicWeb.Components.Activity do
         <p>{maybe_slice_string(@activity.description, 300)}</p>
       </div>
       <!-- Image -->
-      <%= if @activity.image do %>
+      <%= if @activity.card do %>
         <div class="mt-4">
-          <img class="max-w-screen max-h-[32rem] rounded-md object-cover sm:max-w-xl" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+          <img class="max-w-screen max-h-[32rem] rounded-md object-cover sm:max-w-xl" src={Uploaders.Post.url({@activity.card, @activity}, :original)} />
         </div>
       <% end %>
       <!-- Footer -->
@@ -78,7 +78,7 @@ defmodule AtomicWeb.Components.Activity do
   end
 
   defp footer_margin_top_class(%Activity{} = activity) do
-    if activity.image do
+    if activity.card do
       "mt-4"
     else
       "mt-2"
diff --git a/lib/atomic_web/live/activity_live/components/activity_card.ex b/lib/atomic_web/live/activity_live/components/activity_card.ex
index 70286bb13..8fe4b769f 100644
--- a/lib/atomic_web/live/activity_live/components/activity_card.ex
+++ b/lib/atomic_web/live/activity_live/components/activity_card.ex
@@ -46,8 +46,8 @@ defmodule AtomicWeb.ActivityLive.Components.ActivityCard do
           </div>
           <!-- Activity image -->
           <div class="h-48 object-cover">
-            <%= if @activity.image do %>
-              <img class="h-full w-full rounded-r-lg object-cover" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+            <%= if @activity.card do %>
+              <img class="h-full w-full rounded-r-lg object-cover" src={Uploaders.Post.url({@activity.card, @activity}, :original)} />
             <% else %>
               <.gradient seed={@activity.id} class="rounded-r-lg" />
             <% end %>
diff --git a/lib/atomic_web/live/activity_live/form_component.ex b/lib/atomic_web/live/activity_live/form_component.ex
index 939d922bb..c921f8e31 100644
--- a/lib/atomic_web/live/activity_live/form_component.ex
+++ b/lib/atomic_web/live/activity_live/form_component.ex
@@ -2,12 +2,22 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
   use AtomicWeb, :live_component
 
   alias Atomic.Activities
-  alias AtomicWeb.Components.ImageUploader
 
-  import AtomicWeb.Components.Forms
+  import AtomicWeb.Components.{Forms, ImageUploader}
 
   alias Phoenix.LiveView.JS
 
+  @impl true
+  def mount(socket) do
+    {:ok,
+     socket
+     |> allow_upload(:card,
+       accept: Uploaders.Post.extension_whitelist(),
+       max_entries: 1,
+       max_file_size: 10_000_000
+     )}
+  end
+
   @impl true
   def update(%{activity: activity, action: action} = assigns, socket) do
     changeset = Activities.change_activity(activity)
@@ -25,8 +35,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
      |> assign(:description_modal, false)
      |> assign(:maximum_entries_modal, false)
      |> assign(:has_max_capacity?, activity.maximum_entries)
-     |> assign(:has_description?, initial_description)
-     |> allow_upload(:image, accept: Uploaders.Post.extension_whitelist(), max_entries: 1)}
+     |> assign(:has_description?, initial_description)}
   end
 
   @impl true
@@ -59,7 +68,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
 
   @impl true
   def handle_event("cancel-image", %{"ref" => ref}, socket) do
-    {:noreply, cancel_upload(socket, :image, ref)}
+    {:noreply, cancel_upload(socket, :card, ref)}
   end
 
   @impl true
@@ -115,24 +124,36 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
   end
 
   defp consume_image_data(socket, activity) do
-    consume_uploaded_entries(socket, :image, fn %{path: path}, entry ->
-      Activities.update_activity_image(activity, %{
-        "image" => %Plug.Upload{
-          content_type: entry.client_type,
-          filename: entry.client_name,
-          path: path
-        }
-      })
-    end)
-    |> case do
-      [{:ok, activity}] ->
-        {:ok, activity}
-
-      _errors ->
-        {:ok, activity}
+    results =
+      [:card]
+      |> Enum.map(&consume_image_entry(socket, activity, &1))
+      |> List.flatten()
+
+    if Enum.any?(results, fn result -> match?({:error, _}, result) end) do
+      {:error, results}
+    else
+      {:ok, activity}
     end
   end
 
+  defp consume_image_entry(socker, activity, field) do
+    consume_uploaded_entries(socker, field, fn %{path: path}, entry ->
+      case Activities.update_activity_image(activity, %{
+             "#{field}" => %Plug.Upload{
+               content_type: entry.client_type,
+               filename: entry.client_name,
+               path: path
+             }
+           }) do
+        {:ok, updated_activity} ->
+          {:ok, updated_activity}
+
+        {:error, _changeset} ->
+          {:error, field}
+      end
+    end)
+  end
+
   defp assign_form(socket, %Ecto.Changeset{} = changeset) do
     assign(socket, :form, to_form(changeset))
   end
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index fd46d7f46..f0a1a338a 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -2,7 +2,7 @@
   <.form id="activity-form" for={@form} phx-change="validate" phx-submit="save" phx-target={@myself}>
     <div class="flex flex-col justify-evenly gap-8 xl:flex-row">
       <div class="w-full xl:w-1/3">
-        <.live_component module={ImageUploader} id="uploader" uploads={@uploads} target={@myself} image={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+        <.image_uploader id="activity-image" class="h-64 w-full object-cover" upload={@uploads.card} icon="hero-photo" memory_unit="MB" image_class="h-[290px] w-full object-cover" image={Uploaders.Post.url({@activity.card, @activity}, :original)} />
       </div>
 
       <div class="flex flex-col">
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index 90de173f7..d19f4900e 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -45,8 +45,8 @@
   <%= if @current_view == "show" do %>
     <div class="flex w-full justify-center px-8 pb-8 sm:hidden sm:px-6">
       <div class="aspect-square w-full object-cover">
-        <%= if @activity.image do %>
-          <img class="h-full w-full rounded-xl border object-cover" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+        <%= if @activity.card do %>
+          <img class="h-full w-full rounded-xl border object-cover" src={Uploaders.Post.url({@activity.card, @activity}, :original)} />
         <% else %>
           <.gradient class="rounded-xl" seed={@activity.id} />
         <% end %>
@@ -153,8 +153,8 @@
       </div>
       <div class="col-span-2 hidden w-full object-cover sm:block">
         <!-- Activity image (desktop) -->
-        <%= if @activity.image do %>
-          <img class="max-h-fit w-full rounded-xl border object-cover" src={Uploaders.Post.url({@activity.image, @activity}, :original)} />
+        <%= if @activity.card do %>
+          <img class="max-h-fit w-full rounded-xl border object-cover" src={Uploaders.Post.url({@activity.card, @activity}, :original)} />
         <% else %>
           <.gradient class="!h-[50vh] rounded-xl border" seed={@activity.id} />
         <% end %>
diff --git a/priv/repo/migrations/20221022010100_create_activities.exs b/priv/repo/migrations/20221022010100_create_activities.exs
index 659650493..901b65c9c 100644
--- a/priv/repo/migrations/20221022010100_create_activities.exs
+++ b/priv/repo/migrations/20221022010100_create_activities.exs
@@ -14,7 +14,7 @@ defmodule Atomic.Repo.Migrations.CreateActivities do
       add :maximum_entries, :integer, null: true
       add :enrolled, :integer, default: 0, null: false
 
-      add :image, :string
+      add :card, :string
       add :location, :map
 
       add :organization_id, references(:organizations, type: :binary_id), null: false

From bb4c467387aeb722825103b72953b83ee453c74e Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Wed, 30 Apr 2025 23:42:56 +0100
Subject: [PATCH 37/39] chore: remake image_uploader container

---
 lib/atomic_web/components/image_uploader.ex          |  2 +-
 .../live/activity_live/form_component.html.heex      | 12 ++++++++++--
 lib/atomic_web/live/activity_live/show.ex            |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex
index 602c89bfd..8cd7d968e 100644
--- a/lib/atomic_web/components/image_uploader.ex
+++ b/lib/atomic_web/components/image_uploader.ex
@@ -22,7 +22,7 @@ defmodule AtomicWeb.Components.ImageUploader do
     assigns = update(assigns, %{})
 
     ~H"""
-    <div id={@id}>
+    <div id={@id} class="w-full">
       <%= if @editable do %>
         <.live_file_input upload={@upload} class="hidden" />
       <% end %>
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index f0a1a338a..1bf5c3542 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -1,8 +1,16 @@
 <div class="mt-16">
   <.form id="activity-form" for={@form} phx-change="validate" phx-submit="save" phx-target={@myself}>
     <div class="flex flex-col justify-evenly gap-8 xl:flex-row">
-      <div class="w-full xl:w-1/3">
-        <.image_uploader id="activity-image" class="h-64 w-full object-cover" upload={@uploads.card} icon="hero-photo" memory_unit="MB" image_class="h-[290px] w-full object-cover" image={Uploaders.Post.url({@activity.card, @activity}, :original)} />
+      <div class="flex w-full xl:w-1/3">
+      <%= if @activity.card do %>
+        <div class="flex rounded-xl">
+          <.image_uploader id="activity-image" class="h-full items-center justify-center rounded-xl" upload={@uploads.card} icon="hero-photo" memory_unit="MB" image_class="h-full w-full object-cover rounded-xl" image={Uploaders.Post.url({@activity.card, @activity}, :original)} />
+        </div>
+      <% else %>
+        <div class="flex h-full w-full justify-center border-4 border-dashed rounded-xl border-primary-500">
+          <.image_uploader id="activity-image" class="h-full w-full" upload={@uploads.card} icon="hero-photo" memory_unit="MB" image_class="h-full w-full object-cover" />
+        </div>
+      <% end %>
       </div>
 
       <div class="flex flex-col">
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index c0e1f9bcc..3c2c29a57 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -1,7 +1,7 @@
 defmodule AtomicWeb.ActivityLive.Show do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.Components.{Avatar, Dropdown, Gradient, Table, Map, Pagination}
+  import AtomicWeb.Components.{Avatar, Dropdown, Gradient, Table, Map, Pagination, ImageUploader}
 
   alias Atomic.Accounts
   alias Atomic.Activities

From a5bc7322984d50083d515af60a2f6c860902b059 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Thu, 1 May 2025 00:55:00 +0100
Subject: [PATCH 38/39] chore: remove input field classes

---
 .../activity_live/form_component.html.heex    | 40 +++++++++----------
 lib/atomic_web/live/activity_live/show.ex     |  2 +-
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 1bf5c3542..84104681c 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -2,15 +2,15 @@
   <.form id="activity-form" for={@form} phx-change="validate" phx-submit="save" phx-target={@myself}>
     <div class="flex flex-col justify-evenly gap-8 xl:flex-row">
       <div class="flex w-full xl:w-1/3">
-      <%= if @activity.card do %>
-        <div class="flex rounded-xl">
-          <.image_uploader id="activity-image" class="h-full items-center justify-center rounded-xl" upload={@uploads.card} icon="hero-photo" memory_unit="MB" image_class="h-full w-full object-cover rounded-xl" image={Uploaders.Post.url({@activity.card, @activity}, :original)} />
-        </div>
-      <% else %>
-        <div class="flex h-full w-full justify-center border-4 border-dashed rounded-xl border-primary-500">
-          <.image_uploader id="activity-image" class="h-full w-full" upload={@uploads.card} icon="hero-photo" memory_unit="MB" image_class="h-full w-full object-cover" />
-        </div>
-      <% end %>
+        <%= if @activity.card do %>
+          <div class="flex rounded-xl">
+            <.image_uploader id="activity-image" class="h-full items-center justify-center rounded-xl" upload={@uploads.card} icon="hero-photo" memory_unit="MB" image_class="h-full w-full rounded-xl object-cover" image={Uploaders.Post.url({@activity.card, @activity}, :original)} />
+          </div>
+        <% else %>
+          <div class="border-primary-500 flex h-full w-full justify-center rounded-xl border-4 border-dashed">
+            <.image_uploader id="activity-image" class="h-full w-full" upload={@uploads.card} icon="hero-photo" memory_unit="MB" image_class="h-full w-full object-cover" />
+          </div>
+        <% end %>
       </div>
 
       <div class="flex flex-col">
@@ -42,13 +42,13 @@
             <div class="text-nowrap flex flex-col items-baseline justify-between gap-y-1 sm:flex-row sm:p-1 sm:pl-3">
               <span>Start</span>
               <div class="w-full sm:w-56">
-                <.field class="atomic-button atomic-button--primary-outline w-full text-gray-900 sm:w-56" type="datetime-local" field={@form[:start]} label_class="hidden" error_label_class="hidden" required />
+                <.field class="w-full text-gray-900 sm:w-56" type="datetime-local" field={@form[:start]} label_class="hidden" error_label_class="hidden" required />
               </div>
             </div>
             <div class="text-nowrap flex flex-col items-baseline justify-between gap-y-1 sm:flex-row sm:p-1 sm:pl-3">
               <span>End</span>
               <div class="w-full sm:w-56">
-                <.field class="atomic-button atomic-button--primary-outline w-full text-gray-900 sm:w-56" type="datetime-local" field={@form[:finish]} label_class="hidden" error_label_class="hidden" required />
+                <.field class="w-full text-gray-900 sm:w-56" type="datetime-local" field={@form[:finish]} label_class="hidden" error_label_class="hidden" required />
               </div>
             </div>
           </div>
@@ -59,7 +59,7 @@
         </label>
         <.button
           id="description_button"
-          class="group atomic-button atomic-button--primary-outline py-[10px] flex flex-col items-start rounded-md border-gray-300 bg-white px-3 text-gray-300 focus-within:bg-white sm:py-2 lg:w-full"
+          class="group atomic-button atomic-button--primary-outline py-[10px] flex flex-col items-start rounded-md border-gray-300 bg-white px-3 text-gray-300 focus-within:bg-white hover:bg-white sm:py-[8px] lg:w-full"
           type="button"
           phx-click="toggle_description_modal"
           phx-target={@myself}
@@ -81,7 +81,7 @@
               autocomplete="off"
               error_class="text-danger-600 placeholder-danger-700"
               error_label_class="text-danger-700"
-              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
+              class="atomic-button pointer-events-none cursor-pointer select-none border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
             />
           </div>
         </.button>
@@ -89,10 +89,10 @@
         <div class="flex flex-col justify-center md:flex-row md:justify-start xl:justify-between">
           <.inputs_for :let={fl} field={@form[:location]}>
             <div class="mt-3 flex flex-col gap-y-1 sm:mt-4">
-              <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
+              <.field class="text-gray-900" type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
             </div>
             <div class="-mt-2 flex flex-col gap-y-1 sm:-mt-2 md:mt-4 md:ml-8">
-              <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:address]} label="Address" placeholder="Address" required />
+              <.field class="text-gray-900" type="text" field={fl[:address]} label="Address" placeholder="Address" required />
             </div>
           </.inputs_for>
         </div>
@@ -103,13 +103,13 @@
         <.button
           id="capacity_button"
           type="button"
-          class="group atomic-button atomic-button--primary-outline py-[10px] flex flex-col items-start rounded-md border-gray-300 bg-white px-3 text-gray-300 focus-within:bg-white sm:py-2 lg:w-full"
+          class="group atomic-button atomic-button--primary-outline py-[10px] flex flex-col items-start rounded-md border-gray-300 bg-white px-3 text-gray-300 focus-within:bg-white hover:bg-white sm:py-2 lg:w-full"
           phx-click="toggle_maximum_entries_modal"
           phx-target={@myself}
         >
           <%= if @has_max_capacity? do %>
             <.field
-              class="atomic-text-input cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
+              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
               type="number"
               field={@form[:maximum_entries]}
               label="Maximum entries"
@@ -154,7 +154,7 @@
     </div>
     <.modal :if={@description_modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
       <div class="mt-4 flex-grow">
-        <.field class="\-h-10 resize-none atomic-button atomic-button--primary-outline" type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
+        <.field class="\-h-10 resize-none" type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
         <div class="flex w-full justify-end">
           <.button class="text" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
             <span>{gettext("Done")}</span>
@@ -166,9 +166,9 @@
       <div class="h-full w-full">
         <div class="">
           <%= if @has_max_capacity? do %>
-            <.field class="atomic-button atomic-button--primary-outline" type="number" field={@form[:maximum_entries]} placeholder="Choose maximum entries" />
+            <.field class="" type="number" field={@form[:maximum_entries]} placeholder="Choose maximum entries" />
           <% else %>
-            <.field class="atomic-button atomic-button--primary-outline" type="number" field={@form[:maximum_entries]} value="" placeholder="∞ Unlimited" />
+            <.field class="" type="number" field={@form[:maximum_entries]} value="" placeholder="∞ Unlimited" />
           <% end %>
         </div>
         <div class="flex gap-3">
diff --git a/lib/atomic_web/live/activity_live/show.ex b/lib/atomic_web/live/activity_live/show.ex
index 3c2c29a57..c0e1f9bcc 100644
--- a/lib/atomic_web/live/activity_live/show.ex
+++ b/lib/atomic_web/live/activity_live/show.ex
@@ -1,7 +1,7 @@
 defmodule AtomicWeb.ActivityLive.Show do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.Components.{Avatar, Dropdown, Gradient, Table, Map, Pagination, ImageUploader}
+  import AtomicWeb.Components.{Avatar, Dropdown, Gradient, Table, Map, Pagination}
 
   alias Atomic.Accounts
   alias Atomic.Activities

From be8934d1248861f9d501c247d3ada465e5901821 Mon Sep 17 00:00:00 2001
From: RicoPleasure <esprazj.dev@gmail.com>
Date: Thu, 1 May 2025 11:57:26 +0100
Subject: [PATCH 39/39] fix: participants count & fields

---
 assets/js/app.js                                  |  5 +++--
 assets/js/hooks/auto_focus.js                     |  5 +++++
 lib/atomic_web/components/forms.ex                |  2 +-
 .../live/activity_live/form_component.html.heex   | 15 +--------------
 lib/atomic_web/live/activity_live/show.html.heex  |  4 ++--
 5 files changed, 12 insertions(+), 19 deletions(-)
 create mode 100644 assets/js/hooks/auto_focus.js

diff --git a/assets/js/app.js b/assets/js/app.js
index 835747ba8..984b92b96 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -24,14 +24,15 @@ import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import "../vendor/alpine.js";
 import topbar from "../vendor/topbar"
-import { QrScanner, InitSorting, StickyScroll, ScrollToTop } from "./hooks";
+import { QrScanner, InitSorting, StickyScroll, ScrollToTop, AutoFocus } from "./hooks";
 import phxFeedbackDom from "./shims/phx_feedback_dom.js"
 
 let Hooks = {
   QrScanner: QrScanner,
   InitSorting: InitSorting,
   StickyScroll: StickyScroll,
-  ScrollToTop: ScrollToTop
+  ScrollToTop: ScrollToTop,
+  AutoFocus: AutoFocus,
 };
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
diff --git a/assets/js/hooks/auto_focus.js b/assets/js/hooks/auto_focus.js
new file mode 100644
index 000000000..42d3b1ffa
--- /dev/null
+++ b/assets/js/hooks/auto_focus.js
@@ -0,0 +1,5 @@
+export const AutoFocus = {
+    mounted() {
+      this.el.focus()
+    }
+}
\ No newline at end of file
diff --git a/lib/atomic_web/components/forms.ex b/lib/atomic_web/components/forms.ex
index 88c294ff8..02b43ff65 100644
--- a/lib/atomic_web/components/forms.ex
+++ b/lib/atomic_web/components/forms.ex
@@ -155,7 +155,7 @@ defmodule AtomicWeb.Components.Forms do
         {@label}
       </.field_label>
 
-      <textarea id={@id} name={@name} class={["atomic-text-input", @class, @errors != [] && @error_class]} rows={@rows} required={@required} {@rest}><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
+      <textarea id={@id} name={@name} class={["atomic-text-input", @class, @errors != [] && @error_class]} rows={@rows} required={@required} autofocus {@rest}><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
 
       <.field_error :for={msg <- @errors}>{msg}</.field_error>
       <.field_help_text help_text={@help_text} />
diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex
index 84104681c..3344850a7 100644
--- a/lib/atomic_web/live/activity_live/form_component.html.heex
+++ b/lib/atomic_web/live/activity_live/form_component.html.heex
@@ -16,18 +16,7 @@
       <div class="flex flex-col">
         <div class="flex flex-col">
           <div class="w-full">
-            <.field
-              type="text"
-              field={@form[:title]}
-              label_class="hidden"
-              wrapper_class="!bg-white text-3xl"
-              autocomplete="off"
-              error_class="text-danger-600 placeholder-danger-700"
-              error_label_class="text-danger-700"
-              class="border-none focus:ring-0 shadow-none font-bold text-4xl !bg-white p-0"
-              placeholder="Activity Title"
-              required
-            />
+            <.field type="text" field={@form[:title]} label_class="hidden" wrapper_class="!bg-white text-3xl" autocomplete="off" class="border-none focus:ring-0 shadow-none font-bold text-4xl !bg-white p-0" placeholder="Activity Title" required />
           </div>
         </div>
         <div class="flex w-full">
@@ -79,8 +68,6 @@
               label_class="hidden"
               wrapper_class="m-0"
               autocomplete="off"
-              error_class="text-danger-600 placeholder-danger-700"
-              error_label_class="text-danger-700"
               class="atomic-button pointer-events-none cursor-pointer select-none border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
             />
           </div>
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index d19f4900e..5d5390453 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -86,7 +86,7 @@
             <div class="flex items-center gap-2">
               <.icon name="hero-user-group" class="h-5 w-5 text-gray-700" />
               <p class="font-medium">
-                {@activity.enrolled} {if @activity.maximum_entries, do: "/ #{@activity.maximum_entries}"}
+                {Enum.count(@participants)} {if @activity.maximum_entries, do: "/ #{@activity.maximum_entries}"}
               </p>
             </div>
           </.link>
@@ -162,7 +162,7 @@
           <!-- Activity participants (desktop) -->
           <div :if={@activity.enrolled > 0} class="pt-4">
             <h2 class="text-md mb-2 flex-1 select-none truncate font-semibold text-gray-900">
-              {gettext("%{enrolled} Going", enrolled: @activity.enrolled)}
+              {gettext("%{enrolled} Going", enrolled: Enum.count(@participants))}
             </h2>
             <.avatar_group
               size={:xs}