From 79e297d3b3980a84e87814e2481a7d6bd8b0f613 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Sat, 9 Mar 2024 23:45:17 +0000
Subject: [PATCH 01/14] feat: dropdown component

---
 assets/js/app.js                              | 18 ++++++
 .../components/calendar/calendar.ex           | 23 +++++---
 lib/atomic_web/components/dropdown.ex         | 59 +++++++++++++++++++
 storybook/components/dropdown.story.exs       | 36 +++++++++++
 4 files changed, 128 insertions(+), 8 deletions(-)
 create mode 100644 lib/atomic_web/components/dropdown.ex
 create mode 100644 storybook/components/dropdown.story.exs

diff --git a/assets/js/app.js b/assets/js/app.js
index 8c30db156..39df3de12 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -34,6 +34,7 @@ let Hooks = {
   StickyScroll: StickyScroll
 };
 
+
 Hooks.ScrollToTop = {
   mounted() {
     this.el.addEventListener("click", e => {
@@ -46,6 +47,23 @@ Hooks.ScrollToTop = {
   }
 }
 
+
+Hooks.Dropdown = {
+  mounted() {
+    this.el.addEventListener("click", e => {
+      e.preventDefault()
+      if(this.el.nextElementSibling.classList.contains("hidden")) {
+        this.el.nextElementSibling.classList.remove("hidden")
+        this.el.classList.add("block")
+      }
+      else {
+        this.el.nextElementSibling.classList.add("hidden")
+        this.el.classList.remove("block")
+      }
+    })
+  }
+}
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
     params: { _csrf_token: csrfToken },
diff --git a/lib/atomic_web/components/calendar/calendar.ex b/lib/atomic_web/components/calendar/calendar.ex
index bab991229..1df1a64d1 100644
--- a/lib/atomic_web/components/calendar/calendar.ex
+++ b/lib/atomic_web/components/calendar/calendar.ex
@@ -5,6 +5,7 @@ defmodule AtomicWeb.Components.Calendar do
   import AtomicWeb.CalendarUtils
   import AtomicWeb.Components.CalendarMonth
   import AtomicWeb.Components.CalendarWeek
+  import AtomicWeb.Components.Dropdown
 
   alias Timex.Duration
 
@@ -85,14 +86,20 @@ defmodule AtomicWeb.Components.Calendar do
               </div>
               <div class="hidden md:ml-4 md:flex md:items-center">
                 <div class="relative">
-                  <a @click="mode_view = !mode_view" class="flex cursor-pointer items-center py-2 pr-2 pl-3 text-sm font-medium text-zinc-700 hover:bg-zinc-50" id="menu-button" aria-expanded="false" aria-haspopup="true">
-                    <%= if @mode == "month" do
-                      gettext("Month view")
-                    else
-                      gettext("Week view")
-                    end %>
-                    <.icon name={:chevron_down} solid class="ml-2 h-5 w-5 text-zinc-400" />
-                  </a>
+                  <.dropdown
+                    label={
+                      if @mode == "month" do
+                        gettext("Month view")
+                      else
+                        gettext("Week view")
+                      end
+                    }
+                    type={:button}
+                    items={[
+                      %{name: gettext("Week view"), link: @current_week_path},
+                      %{name: gettext("Month view"), link: @current_month_path}
+                    ]}
+                  />
 
                   <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
                     <div class="py-1" role="none">
diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
new file mode 100644
index 000000000..866d838bf
--- /dev/null
+++ b/lib/atomic_web/components/dropdown.ex
@@ -0,0 +1,59 @@
+defmodule AtomicWeb.Components.Dropdown do
+  @moduledoc false
+  use AtomicWeb, :component
+
+  import AtomicWeb.Components.Icon
+
+  attr :label, :string, required: true, doc: "The label of the dropdown."
+  attr :image, :string, default: "", doc: "The image of the dropdown."
+
+  attr :type, :atom,
+    default: :button,
+    values: [:button, :avatar],
+    doc: "The type of the dropdown."
+
+  attr :items, :list, default: [], doc: "The items to display in the dropdown."
+
+  def dropdown(%{type: :avatar} = assigns) do
+    ~H"""
+    <div class="relative inline-block text-left">
+      <button id={"dropdown-#{assigns.label}"} type="button" phx-hook="Dropdown" class="inline-flex h-10 w-10 justify-center rounded-3xl border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
+        <%= if String.length(assigns.image) > 0 do %>
+          <img class="h-8 w-8 rounded-full" src={assigns.image} alt="" />
+        <% else %>
+          <%= extract_initials(assigns.label) %>
+        <% end %>
+      </button>
+      <div id="avatar" class="absolute right-0 mt-2 hidden w-56 origin-top-right 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 <- assigns.items do %>
+            <a href={item.link} class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
+              <%= item.name %>
+            </a>
+          <% end %>
+        </div>
+      </div>
+    </div>
+    """
+  end
+
+  def dropdown(%{type: :button} = assigns) do
+    ~H"""
+    <div class="relative inline-block text-left">
+      <button id={"dropdown-#{assigns.label}"} type="button" phx-hook="Dropdown" class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
+        <%= assigns.label %>
+        <.icon name={:chevron_down} solid class="-mr-1 ml-2 h-5 w-5" />
+      </button>
+      <div id="button" class="absolute right-0 mt-2 hidden w-56 origin-top-right 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 <- assigns.items do %>
+            <a href={item.link} class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
+              <%= item.name %>
+            </a>
+          <% end %>
+        </div>
+      </div>
+    </div>
+    """
+  end
+end
diff --git a/storybook/components/dropdown.story.exs b/storybook/components/dropdown.story.exs
new file mode 100644
index 000000000..4251aea58
--- /dev/null
+++ b/storybook/components/dropdown.story.exs
@@ -0,0 +1,36 @@
+defmodule AtomicWeb.Storybook.Components.Dropdown do
+  use PhoenixStorybook.Story, :component
+
+  alias AtomicWeb.Components.Dropdown
+
+  def function, do: &Dropdown.dropdown/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        attributes: %{
+          label: "Dropdown",
+          type: :button,
+          items: [
+            %{name: "Profile", link: "#"},
+            %{name: "Settings", link: "#"},
+            %{name: "Logout", link: "#"}
+          ]
+        }
+      },
+      %Variation{
+        id: :avatar,
+        attributes: %{
+          label: "Dropdown",
+          type: :avatar,
+          items: [
+            %{name: "Profile", link: "#"},
+            %{name: "Settings", link: "#"},
+            %{name: "Logout", link: "#"}
+          ]
+        }
+      }
+    ]
+  end
+end

From 46ca18db3ec6fde67b8b82bd0686a1e0fbf12131 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Sat, 16 Mar 2024 20:47:12 +0000
Subject: [PATCH 02/14] chore: dropdown component

---
 .../components/calendar/calendar.ex           |  21 +--
 lib/atomic_web/components/dropdown.ex         |  49 ++-----
 lib/atomic_web/live/membership_live/index.ex  |   2 +-
 .../live/membership_live/index.html.heex      |  20 +--
 .../templates/layout/_live_navbar.html.heex   | 132 ++++++++----------
 5 files changed, 91 insertions(+), 133 deletions(-)

diff --git a/lib/atomic_web/components/calendar/calendar.ex b/lib/atomic_web/components/calendar/calendar.ex
index 1df1a64d1..b2c9d7b46 100644
--- a/lib/atomic_web/components/calendar/calendar.ex
+++ b/lib/atomic_web/components/calendar/calendar.ex
@@ -87,19 +87,22 @@ defmodule AtomicWeb.Components.Calendar do
               <div class="hidden md:ml-4 md:flex md:items-center">
                 <div class="relative">
                   <.dropdown
-                    label={
-                      if @mode == "month" do
-                        gettext("Month view")
-                      else
-                        gettext("Week view")
-                      end
-                    }
-                    type={:button}
+                    orientation={:down}
+                    id="calendar-dropdown"
                     items={[
                       %{name: gettext("Week view"), link: @current_week_path},
                       %{name: gettext("Month view"), link: @current_month_path}
                     ]}
-                  />
+                  >
+                    <button type="button" class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
+                      <%= if @mode == "month" do %>
+                        <%= gettext("Month view") %>
+                      <% else %>
+                        <%= gettext("Week view") %>
+                      <% end %>
+                      <.icon name={:chevron_down} solid class="-mr-1 ml-2 h-5 w-5" />
+                    </button>
+                  </.dropdown>
 
                   <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
                     <div class="py-1" role="none">
diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index 866d838bf..183f88762 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -2,49 +2,24 @@ defmodule AtomicWeb.Components.Dropdown do
   @moduledoc false
   use AtomicWeb, :component
 
-  import AtomicWeb.Components.Icon
+  alias Phoenix.LiveView.JS
 
-  attr :label, :string, required: true, doc: "The label of the dropdown."
+  attr :id, :string, required: true, doc: "The id of the dropdown."
   attr :image, :string, default: "", doc: "The image of the dropdown."
-
-  attr :type, :atom,
-    default: :button,
-    values: [:button, :avatar],
-    doc: "The type of the dropdown."
-
   attr :items, :list, default: [], doc: "The items to display in the dropdown."
 
-  def dropdown(%{type: :avatar} = assigns) do
-    ~H"""
-    <div class="relative inline-block text-left">
-      <button id={"dropdown-#{assigns.label}"} type="button" phx-hook="Dropdown" class="inline-flex h-10 w-10 justify-center rounded-3xl border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
-        <%= if String.length(assigns.image) > 0 do %>
-          <img class="h-8 w-8 rounded-full" src={assigns.image} alt="" />
-        <% else %>
-          <%= extract_initials(assigns.label) %>
-        <% end %>
-      </button>
-      <div id="avatar" class="absolute right-0 mt-2 hidden w-56 origin-top-right 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 <- assigns.items do %>
-            <a href={item.link} class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
-              <%= item.name %>
-            </a>
-          <% end %>
-        </div>
-      </div>
-    </div>
-    """
-  end
+  attr :orientation, :atom,
+    required: true,
+    doc: "The orientation of the dropdown.",
+    values: [:down, :up]
+
+  slot :inner_block, required: true, doc: "Slot for the body content of the dropdown."
 
-  def dropdown(%{type: :button} = assigns) do
+  def dropdown(assigns) do
     ~H"""
-    <div class="relative inline-block text-left">
-      <button id={"dropdown-#{assigns.label}"} type="button" phx-hook="Dropdown" class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
-        <%= assigns.label %>
-        <.icon name={:chevron_down} solid class="-mr-1 ml-2 h-5 w-5" />
-      </button>
-      <div id="button" class="absolute right-0 mt-2 hidden w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+    <div class="relative inline-block text-left" phx-click={JS.toggle(to: "##{assigns.id}", in: "block", out: "hidden")} phx-click-away={JS.hide(to: "##{assigns.id}")}>
+      <%= render_slot(@inner_block) %>
+      <div id={assigns.id} class={"#{if assigns.orientation == :down, do: "origin-top-right", else: "origin-bottom-right bottom-full"} absolute right-0 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 <- assigns.items do %>
             <a href={item.link} class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
diff --git a/lib/atomic_web/live/membership_live/index.ex b/lib/atomic_web/live/membership_live/index.ex
index 927a84bf2..54f32fda8 100644
--- a/lib/atomic_web/live/membership_live/index.ex
+++ b/lib/atomic_web/live/membership_live/index.ex
@@ -4,7 +4,7 @@ defmodule AtomicWeb.MembershipLive.Index do
   import AtomicWeb.Helpers
   import AtomicWeb.Components.Pagination
   import AtomicWeb.Components.Table
-
+  import AtomicWeb.Components.Dropdown
   alias Atomic.Organizations
 
   @impl true
diff --git a/lib/atomic_web/live/membership_live/index.html.heex b/lib/atomic_web/live/membership_live/index.html.heex
index b7b0478d3..c4afd497f 100644
--- a/lib/atomic_web/live/membership_live/index.html.heex
+++ b/lib/atomic_web/live/membership_live/index.html.heex
@@ -10,18 +10,18 @@
   <div x-data="{ menu: false }" class="flex w-100 flex-row justify-end">
     <!-- Export option dropdown -->
     <div class="relative block font-semibold">
-      <button
-        type="button"
-        class="group flex border-2 rounded-md bg-white border-orange-500 py-2 px-3.5 text-sm font-medium text-orange-500 shadow-sm hover:bg-orange-600 hover:text-white"
+      <.dropdown
+        orientation={:down}
         id="export-menu-button"
-        aria-expanded="false"
-        aria-haspopup="true"
-        @click="menu = ! menu"
-        @click.away="menu = false"
-        @keydown.escape="menu = false"
+        items={[
+          %{name: "Export to CSV", link: Routes.data_export_path(@socket, :export_memberships_csv, @params["organization_id"])},
+          %{name: "Export to Excel", link: Routes.data_export_path(@socket, :export_memberships_xlsx, @params["organization_id"])}
+        ]}
       >
-        <.icon name={:cloud_arrow_down} solid class="mr-2 -ml-1 w-5 h-5 text-orange-500 group-hover:text-white" /> Export Memberships
-      </button>
+        <button class="group flex border-2 rounded-md bg-white border-orange-500 py-2 px-3.5 text-sm font-medium text-orange-500 shadow-sm hover:bg-orange-600 hover:text-white">
+          <.icon name={:cloud_arrow_down} solid class="mr-2 -ml-1 w-5 h-5 text-orange-500 group-hover:text-white" /> Export Memberships
+        </button>
+      </.dropdown>
       <div
         class="absolute right-0 z-10 mt-2.5 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
         role="menu"
diff --git a/lib/atomic_web/templates/layout/_live_navbar.html.heex b/lib/atomic_web/templates/layout/_live_navbar.html.heex
index aa99e0cb7..a1a911100 100644
--- a/lib/atomic_web/templates/layout/_live_navbar.html.heex
+++ b/lib/atomic_web/templates/layout/_live_navbar.html.heex
@@ -126,47 +126,37 @@
             <!-- Profile menu or "Sign in" -->
             <li class="-mx-6 mt-auto -mb-2" @click="menu = ! menu">
               <span class="sr-only">Open user menu</span>
-              <button class="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-zinc-700 select-none">
-                <AtomicWeb.Components.Avatar.avatar
-                  name={@current_user.name}
-                  src={
-                    if @current_user.profile_picture do
-                      Uploaders.ProfilePicture.url({@current_user, @current_user.profile_picture}, :original)
-                    else
-                      nil
-                    end
-                  }
-                  size={:xs}
-                  fg_color="zinc-400"
-                  bg_color="zinc-200"
-                  class="!text-sm"
-                />
-                <span class="hidden lg:flex lg:items-center">
-                  <span class="text-sm font-semibold leading-6 text-zinc-900" aria-hidden="true"><%= @current_user.name %></span>
-                  <svg class="-rotate-90 ml-2 h-5 w-5 text-zinc-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-                  </svg>
-                </span>
-                <div
-                  class="absolute right-0 z-10 w-32 mb-16 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
-                  role="menu"
-                  aria-orientation="vertical"
-                  aria-labelledby="user-menu-button"
-                  tabindex="-1"
-                  x-show="menu"
-                  x-transition:enter="transition ease-out duration-100"
-                  x-transition:enter-start="transform opacity-0 scale-95"
-                  x-transition:enter-end="transform opacity-100 scale-100"
-                  x-transition:leave="transition ease-in duration-75"
-                  x-transition:leave-start="transform opacity-100 scale-100"
-                  x-transition:leave-end="transform opacity-0 scale-95"
-                  @click.away="menu = false"
-                  @keydown.escape="menu = false"
-                >
-                  <%= link("Your profile", to: Routes.profile_show_path(@socket, :show, @current_user), class: "block px-3 py-1 text-sm leading-6 text-zinc-900 hover:bg-zinc-50") %>
-                  <%= link("Sign out", to: Routes.user_session_path(@socket, :delete), method: :delete, class: "block px-3 py-1 text-sm leading-6 text-zinc-900 hover:bg-zinc-50") %>
-                </div>
-              </button>
+              <AtomicWeb.Components.Dropdown.dropdown
+                orientation={:top}
+                items={[
+                  %{name: "Your profile", link: Routes.profile_show_path(@socket, :show, @current_user)},
+                  %{name: "Sign out", link: Routes.user_session_path(@socket, :delete)}
+                ]}
+                id="user-menu-button"
+              >
+                <button class="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-zinc-700 select-none">
+                  <AtomicWeb.Components.Avatar.avatar
+                    name={@current_user.name}
+                    src={
+                      if @current_user.profile_picture do
+                        Uploaders.ProfilePicture.url({@current_user, @current_user.profile_picture}, :original)
+                      else
+                        nil
+                      end
+                    }
+                    size={:xs}
+                    fg_color="zinc-400"
+                    bg_color="zinc-200"
+                    class="!text-sm"
+                  />
+                  <span class="hidden lg:flex lg:items-center">
+                    <span class="text-sm font-semibold leading-6 text-zinc-900" aria-hidden="true"><%= @current_user.name %></span>
+                    <svg class="-rotate-90 ml-2 h-5 w-5 text-zinc-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+                    </svg>
+                  </span>
+                </button>
+              </AtomicWeb.Components.Dropdown.dropdown>
             </li>
           <% else %>
             <div class="border-b border-zinc-200 mt-auto"></div>
@@ -193,42 +183,32 @@
         <%= if @is_authenticated? do %>
           <!-- Profile menu or "Sign in" -->
           <div class="relative block lg:hidden font-semibold">
-            <button type="button" class="-m-1.5 flex items-center p-1.5" id="user-menu-button" aria-expanded="false" aria-haspopup="true" @click="menu = ! menu" @click.away="menu = false" @keydown.escape="menu = false">
-              <span class="sr-only">Open user menu</span>
-              <AtomicWeb.Components.Avatar.avatar
-                name={@current_user.name}
-                src={
-                  if @current_user.profile_picture do
-                    Uploaders.ProfilePicture.url({@current_user, @current_user.profile_picture}, :original)
-                  else
-                    nil
-                  end
-                }
-                size={:xs}
-                fg_color="zinc-400"
-                bg_color="zinc-200"
-                class="!text-[16px]"
-              />
-            </button>
-            <div
-              class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
-              role="menu"
-              aria-orientation="vertical"
-              aria-labelledby="user-menu-button"
-              tabindex="-1"
-              x-show="menu"
-              x-transition:enter="transition ease-out duration-100"
-              x-transition:enter-start="transform opacity-0 scale-95"
-              x-transition:enter-end="transform opacity-100 scale-100"
-              x-transition:leave="transition ease-in duration-75"
-              x-transition:leave-start="transform opacity-100 scale-100"
-              x-transition:leave-end="transform opacity-0 scale-95"
-              @click.away="menu = false"
-              @keydown.escape="menu = false"
+            <AtomicWeb.Components.Dropdown.dropdown
+              orientation={:top}
+              items={[
+                %{name: "Your profile", link: Routes.profile_show_path(@socket, :show, @current_user)},
+                %{name: "Sign out", link: Routes.user_session_path(@socket, :delete)}
+              ]}
+              id="user-dropdown-menu"
             >
-              <%= link("Your profile", to: Routes.profile_show_path(@socket, :show, @current_user), class: "block px-3 py-1 text-sm leading-6 text-zinc-900 hover:bg-zinc-50") %>
-              <%= link("Sign out", to: Routes.user_session_path(@socket, :delete), method: :delete, class: "block px-3 py-1 text-sm leading-6 text-zinc-900 hover:bg-zinc-50") %>
-            </div>
+              <button type="button" class="-m-1.5 flex items-center p-1.5" id="user-menu-button" aria-expanded="false" aria-haspopup="true" @click="menu = ! menu" @click.away="menu = false" @keydown.escape="menu = false">
+                <span class="sr-only">Open user menu</span>
+                <AtomicWeb.Components.Avatar.avatar
+                  name={@current_user.name}
+                  src={
+                    if @current_user.profile_picture do
+                      Uploaders.ProfilePicture.url({@current_user, @current_user.profile_picture}, :original)
+                    else
+                      nil
+                    end
+                  }
+                  size={:xs}
+                  fg_color="zinc-400"
+                  bg_color="zinc-200"
+                  class="!text-[16px]"
+                />
+              </button>
+            </AtomicWeb.Components.Dropdown.dropdown>
           </div>
         <% else %>
           <div class="flex lg:hidden flex-1 justify-end">

From 031b68c61237c55da20dfdbc64c6011da122305a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Mon, 18 Mar 2024 16:44:53 +0000
Subject: [PATCH 03/14] chore: implement suggestions

---
 assets/js/app.js                                | 17 -----------------
 lib/atomic_web/components/calendar/calendar.ex  |  4 ++--
 lib/atomic_web/components/dropdown.ex           |  1 -
 .../live/membership_live/index.html.heex        |  4 ++--
 storybook/components/dropdown.story.exs         | 13 -------------
 5 files changed, 4 insertions(+), 35 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 39df3de12..94c164e36 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -47,23 +47,6 @@ Hooks.ScrollToTop = {
   }
 }
 
-
-Hooks.Dropdown = {
-  mounted() {
-    this.el.addEventListener("click", e => {
-      e.preventDefault()
-      if(this.el.nextElementSibling.classList.contains("hidden")) {
-        this.el.nextElementSibling.classList.remove("hidden")
-        this.el.classList.add("block")
-      }
-      else {
-        this.el.nextElementSibling.classList.add("hidden")
-        this.el.classList.remove("block")
-      }
-    })
-  }
-}
-
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
     params: { _csrf_token: csrfToken },
diff --git a/lib/atomic_web/components/calendar/calendar.ex b/lib/atomic_web/components/calendar/calendar.ex
index b2c9d7b46..dcaaa5553 100644
--- a/lib/atomic_web/components/calendar/calendar.ex
+++ b/lib/atomic_web/components/calendar/calendar.ex
@@ -94,14 +94,14 @@ defmodule AtomicWeb.Components.Calendar do
                       %{name: gettext("Month view"), link: @current_month_path}
                     ]}
                   >
-                    <button type="button" class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
+                    <.button color={:white}>
                       <%= if @mode == "month" do %>
                         <%= gettext("Month view") %>
                       <% else %>
                         <%= gettext("Week view") %>
                       <% end %>
                       <.icon name={:chevron_down} solid class="-mr-1 ml-2 h-5 w-5" />
-                    </button>
+                    </.button>
                   </.dropdown>
 
                   <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index 183f88762..c21640695 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -5,7 +5,6 @@ defmodule AtomicWeb.Components.Dropdown do
   alias Phoenix.LiveView.JS
 
   attr :id, :string, required: true, doc: "The id of the dropdown."
-  attr :image, :string, default: "", doc: "The image of the dropdown."
   attr :items, :list, default: [], doc: "The items to display in the dropdown."
 
   attr :orientation, :atom,
diff --git a/lib/atomic_web/live/membership_live/index.html.heex b/lib/atomic_web/live/membership_live/index.html.heex
index c4afd497f..ecdc9555e 100644
--- a/lib/atomic_web/live/membership_live/index.html.heex
+++ b/lib/atomic_web/live/membership_live/index.html.heex
@@ -18,9 +18,9 @@
           %{name: "Export to Excel", link: Routes.data_export_path(@socket, :export_memberships_xlsx, @params["organization_id"])}
         ]}
       >
-        <button class="group flex border-2 rounded-md bg-white border-orange-500 py-2 px-3.5 text-sm font-medium text-orange-500 shadow-sm hover:bg-orange-600 hover:text-white">
+        <.button button color={:primary} variant={:inverted} class="group">
           <.icon name={:cloud_arrow_down} solid class="mr-2 -ml-1 w-5 h-5 text-orange-500 group-hover:text-white" /> Export Memberships
-        </button>
+        </.button>
       </.dropdown>
       <div
         class="absolute right-0 z-10 mt-2.5 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
diff --git a/storybook/components/dropdown.story.exs b/storybook/components/dropdown.story.exs
index 4251aea58..28f4f31b2 100644
--- a/storybook/components/dropdown.story.exs
+++ b/storybook/components/dropdown.story.exs
@@ -11,19 +11,6 @@ defmodule AtomicWeb.Storybook.Components.Dropdown do
         id: :default,
         attributes: %{
           label: "Dropdown",
-          type: :button,
-          items: [
-            %{name: "Profile", link: "#"},
-            %{name: "Settings", link: "#"},
-            %{name: "Logout", link: "#"}
-          ]
-        }
-      },
-      %Variation{
-        id: :avatar,
-        attributes: %{
-          label: "Dropdown",
-          type: :avatar,
           items: [
             %{name: "Profile", link: "#"},
             %{name: "Settings", link: "#"},

From f822c1c95afb59a739c404c9ff3555250097db9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Mon, 18 Mar 2024 18:04:49 +0000
Subject: [PATCH 04/14] chore: implement suggestions

---
 lib/atomic_web/live/membership_live/index.html.heex    | 2 +-
 lib/atomic_web/templates/layout/_live_navbar.html.heex | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/lib/atomic_web/live/membership_live/index.html.heex b/lib/atomic_web/live/membership_live/index.html.heex
index ecdc9555e..e112be036 100644
--- a/lib/atomic_web/live/membership_live/index.html.heex
+++ b/lib/atomic_web/live/membership_live/index.html.heex
@@ -18,7 +18,7 @@
           %{name: "Export to Excel", link: Routes.data_export_path(@socket, :export_memberships_xlsx, @params["organization_id"])}
         ]}
       >
-        <.button button color={:primary} variant={:inverted} class="group">
+        <.button color={:primary} variant={:inverted} class="group">
           <.icon name={:cloud_arrow_down} solid class="mr-2 -ml-1 w-5 h-5 text-orange-500 group-hover:text-white" /> Export Memberships
         </.button>
       </.dropdown>
diff --git a/lib/atomic_web/templates/layout/_live_navbar.html.heex b/lib/atomic_web/templates/layout/_live_navbar.html.heex
index a1a911100..bdb1d5e37 100644
--- a/lib/atomic_web/templates/layout/_live_navbar.html.heex
+++ b/lib/atomic_web/templates/layout/_live_navbar.html.heex
@@ -151,9 +151,7 @@
                   />
                   <span class="hidden lg:flex lg:items-center">
                     <span class="text-sm font-semibold leading-6 text-zinc-900" aria-hidden="true"><%= @current_user.name %></span>
-                    <svg class="-rotate-90 ml-2 h-5 w-5 text-zinc-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                      <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-                    </svg>
+                    <.icon name={:chevron_right} solid class="h-5 w-5 text-zinc-400" />
                   </span>
                 </button>
               </AtomicWeb.Components.Dropdown.dropdown>
@@ -184,7 +182,7 @@
           <!-- Profile menu or "Sign in" -->
           <div class="relative block lg:hidden font-semibold">
             <AtomicWeb.Components.Dropdown.dropdown
-              orientation={:top}
+              orientation={:down}
               items={[
                 %{name: "Your profile", link: Routes.profile_show_path(@socket, :show, @current_user)},
                 %{name: "Sign out", link: Routes.user_session_path(@socket, :delete)}

From 069a1918e784c1eb6e38c06b16ac1a8e5dd7c7dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Tue, 19 Mar 2024 10:58:26 +0000
Subject: [PATCH 05/14] chore: implement suggestions

---
 .../components/calendar/calendar.ex           |  2 +-
 lib/atomic_web/components/dropdown.ex         |  6 +--
 .../templates/layout/_live_navbar.html.heex   |  2 +-
 storybook/components/dropdown.story.exs       | 52 +++++++++++++++++--
 4 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/lib/atomic_web/components/calendar/calendar.ex b/lib/atomic_web/components/calendar/calendar.ex
index dcaaa5553..038372871 100644
--- a/lib/atomic_web/components/calendar/calendar.ex
+++ b/lib/atomic_web/components/calendar/calendar.ex
@@ -87,8 +87,8 @@ defmodule AtomicWeb.Components.Calendar do
               <div class="hidden md:ml-4 md:flex md:items-center">
                 <div class="relative">
                   <.dropdown
-                    orientation={:down}
                     id="calendar-dropdown"
+                    orientation={:down}
                     items={[
                       %{name: gettext("Week view"), link: @current_week_path},
                       %{name: gettext("Month view"), link: @current_month_path}
diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index c21640695..3a7c71f3c 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -1,6 +1,6 @@
 defmodule AtomicWeb.Components.Dropdown do
   @moduledoc false
-  use AtomicWeb, :component
+  use Phoenix.Component
 
   alias Phoenix.LiveView.JS
 
@@ -8,7 +8,7 @@ defmodule AtomicWeb.Components.Dropdown do
   attr :items, :list, default: [], doc: "The items to display in the dropdown."
 
   attr :orientation, :atom,
-    required: true,
+    default: :down,
     doc: "The orientation of the dropdown.",
     values: [:down, :up]
 
@@ -18,7 +18,7 @@ defmodule AtomicWeb.Components.Dropdown do
     ~H"""
     <div class="relative inline-block text-left" phx-click={JS.toggle(to: "##{assigns.id}", in: "block", out: "hidden")} phx-click-away={JS.hide(to: "##{assigns.id}")}>
       <%= render_slot(@inner_block) %>
-      <div id={assigns.id} class={"#{if assigns.orientation == :down, do: "origin-top-right", else: "origin-bottom-right bottom-full"} absolute right-0 mt-2 hidden w-56 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5"}>
+      <div id={assigns.id} class={"#{if assigns.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 <- assigns.items do %>
             <a href={item.link} class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
diff --git a/lib/atomic_web/templates/layout/_live_navbar.html.heex b/lib/atomic_web/templates/layout/_live_navbar.html.heex
index bdb1d5e37..d4fb69a6f 100644
--- a/lib/atomic_web/templates/layout/_live_navbar.html.heex
+++ b/lib/atomic_web/templates/layout/_live_navbar.html.heex
@@ -124,7 +124,7 @@
               </li>
             <% end %>
             <!-- Profile menu or "Sign in" -->
-            <li class="-mx-6 mt-auto -mb-2" @click="menu = ! menu">
+            <li class="-mx-6 mt-auto -mb-2 left-1/4" @click="menu = ! menu">
               <span class="sr-only">Open user menu</span>
               <AtomicWeb.Components.Dropdown.dropdown
                 orientation={:top}
diff --git a/storybook/components/dropdown.story.exs b/storybook/components/dropdown.story.exs
index 28f4f31b2..2b6efa760 100644
--- a/storybook/components/dropdown.story.exs
+++ b/storybook/components/dropdown.story.exs
@@ -10,13 +10,59 @@ defmodule AtomicWeb.Storybook.Components.Dropdown do
       %Variation{
         id: :default,
         attributes: %{
-          label: "Dropdown",
+          id: "dropdown",
           items: [
             %{name: "Profile", link: "#"},
             %{name: "Settings", link: "#"},
             %{name: "Logout", link: "#"}
-          ]
-        }
+          ],
+          orientation: :down
+        },
+        slots: [
+          """
+          <button class="bg-blue-500 text-white px-4 py-2 rounded-md">Button</button>
+          """
+        ]
+      },
+      %VariationGroup{
+        id: :orientation,
+        description: "Orientation",
+        variations: [
+          %Variation{
+            id: :button,
+            attributes: %{
+              id: "dropdown-down",
+              items: [
+                %{name: "Profile", link: "#"},
+                %{name: "Settings", link: "#"},
+                %{name: "Logout", link: "#"}
+              ],
+              orientation: :down
+            },
+            slots: [
+              """
+              <button class="bg-blue-500 text-white px-4 py-2 rounded-md">Button Down</button>
+              """
+            ]
+          },
+          %Variation{
+            id: :top,
+            attributes: %{
+              id: "dropdown-top",
+              items: [
+                %{name: "Profile", link: "#"},
+                %{name: "Settings", link: "#"},
+                %{name: "Logout", link: "#"}
+              ],
+              orientation: :top
+            },
+            slots: [
+              """
+              <button class="bg-blue-500 text-white px-4 py-2 rounded-md">Button Top</button>
+              """
+            ]
+          }
+        ]
       }
     ]
   end

From 70d0075e4c317b691748038bc202fe3a94b55dc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Tue, 19 Mar 2024 11:11:03 +0000
Subject: [PATCH 06/14] chore: implement suggestions

---
 assets/js/app.js                             | 1 -
 lib/atomic_web/live/membership_live/index.ex | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 94c164e36..8c30db156 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -34,7 +34,6 @@ let Hooks = {
   StickyScroll: StickyScroll
 };
 
-
 Hooks.ScrollToTop = {
   mounted() {
     this.el.addEventListener("click", e => {
diff --git a/lib/atomic_web/live/membership_live/index.ex b/lib/atomic_web/live/membership_live/index.ex
index 54f32fda8..57fbe457b 100644
--- a/lib/atomic_web/live/membership_live/index.ex
+++ b/lib/atomic_web/live/membership_live/index.ex
@@ -5,6 +5,7 @@ defmodule AtomicWeb.MembershipLive.Index do
   import AtomicWeb.Components.Pagination
   import AtomicWeb.Components.Table
   import AtomicWeb.Components.Dropdown
+
   alias Atomic.Organizations
 
   @impl true

From ad6438ba60b8636da3d5d71eda92ec1501e2fbdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Tue, 19 Mar 2024 17:47:15 +0000
Subject: [PATCH 07/14] chore: wrapper

---
 .../components/calendar/calendar.ex           | 17 ++--
 lib/atomic_web/components/dropdown.ex         |  4 +-
 .../live/membership_live/index.html.heex      |  8 +-
 .../templates/layout/_live_navbar.html.heex   | 78 ++++++++++---------
 4 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/lib/atomic_web/components/calendar/calendar.ex b/lib/atomic_web/components/calendar/calendar.ex
index 038372871..2ec8ab397 100644
--- a/lib/atomic_web/components/calendar/calendar.ex
+++ b/lib/atomic_web/components/calendar/calendar.ex
@@ -94,14 +94,15 @@ defmodule AtomicWeb.Components.Calendar do
                       %{name: gettext("Month view"), link: @current_month_path}
                     ]}
                   >
-                    <.button color={:white}>
-                      <%= if @mode == "month" do %>
-                        <%= gettext("Month view") %>
-                      <% else %>
-                        <%= gettext("Week view") %>
-                      <% end %>
-                      <.icon name={:chevron_down} solid class="-mr-1 ml-2 h-5 w-5" />
-                    </.button>
+                    <:wrapper>
+                      <.button color={:white} color={:white} icon={:chevron_down} icon_position={:right} icon_variant={:solid}>
+                        <%= if @mode == "month" do %>
+                          <%= gettext("Month view") %>
+                        <% else %>
+                          <%= gettext("Week view") %>
+                        <% end %>
+                      </.button>
+                    </:wrapper>
                   </.dropdown>
 
                   <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index 3a7c71f3c..d88f39e4e 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -12,12 +12,12 @@ defmodule AtomicWeb.Components.Dropdown do
     doc: "The orientation of the dropdown.",
     values: [:down, :up]
 
-  slot :inner_block, required: true, doc: "Slot for the body content of the dropdown."
+  slot :wrapper, required: true, doc: "Slot for the body content of the dropdown."
 
   def dropdown(assigns) do
     ~H"""
     <div class="relative inline-block text-left" phx-click={JS.toggle(to: "##{assigns.id}", in: "block", out: "hidden")} phx-click-away={JS.hide(to: "##{assigns.id}")}>
-      <%= render_slot(@inner_block) %>
+      <%= render_slot(@wrapper) %>
       <div id={assigns.id} class={"#{if assigns.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 <- assigns.items do %>
diff --git a/lib/atomic_web/live/membership_live/index.html.heex b/lib/atomic_web/live/membership_live/index.html.heex
index e112be036..8bf307702 100644
--- a/lib/atomic_web/live/membership_live/index.html.heex
+++ b/lib/atomic_web/live/membership_live/index.html.heex
@@ -18,9 +18,11 @@
           %{name: "Export to Excel", link: Routes.data_export_path(@socket, :export_memberships_xlsx, @params["organization_id"])}
         ]}
       >
-        <.button color={:primary} variant={:inverted} class="group">
-          <.icon name={:cloud_arrow_down} solid class="mr-2 -ml-1 w-5 h-5 text-orange-500 group-hover:text-white" /> Export Memberships
-        </.button>
+        <:wrapper>
+          <.button color={:primary} variant={:inverted} class="group">
+            <.icon name={:cloud_arrow_down} solid class="mr-2 -ml-1 w-5 h-5 text-orange-500 group-hover:text-white" /> Export Memberships
+          </.button>
+        </:wrapper>
       </.dropdown>
       <div
         class="absolute right-0 z-10 mt-2.5 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
diff --git a/lib/atomic_web/templates/layout/_live_navbar.html.heex b/lib/atomic_web/templates/layout/_live_navbar.html.heex
index d4fb69a6f..cad2d3e4c 100644
--- a/lib/atomic_web/templates/layout/_live_navbar.html.heex
+++ b/lib/atomic_web/templates/layout/_live_navbar.html.heex
@@ -134,26 +134,28 @@
                 ]}
                 id="user-menu-button"
               >
-                <button class="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-zinc-700 select-none">
-                  <AtomicWeb.Components.Avatar.avatar
-                    name={@current_user.name}
-                    src={
-                      if @current_user.profile_picture do
-                        Uploaders.ProfilePicture.url({@current_user, @current_user.profile_picture}, :original)
-                      else
-                        nil
-                      end
-                    }
-                    size={:xs}
-                    fg_color="zinc-400"
-                    bg_color="zinc-200"
-                    class="!text-sm"
-                  />
-                  <span class="hidden lg:flex lg:items-center">
-                    <span class="text-sm font-semibold leading-6 text-zinc-900" aria-hidden="true"><%= @current_user.name %></span>
-                    <.icon name={:chevron_right} solid class="h-5 w-5 text-zinc-400" />
-                  </span>
-                </button>
+                <:wrapper>
+                  <button class="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-zinc-700 select-none">
+                    <AtomicWeb.Components.Avatar.avatar
+                      name={@current_user.name}
+                      src={
+                        if @current_user.profile_picture do
+                          Uploaders.ProfilePicture.url({@current_user, @current_user.profile_picture}, :original)
+                        else
+                          nil
+                        end
+                      }
+                      size={:xs}
+                      fg_color="zinc-400"
+                      bg_color="zinc-200"
+                      class="!text-sm"
+                    />
+                    <span class="hidden lg:flex lg:items-center">
+                      <span class="text-sm font-semibold leading-6 text-zinc-900" aria-hidden="true"><%= @current_user.name %></span>
+                      <.icon name={:chevron_right} solid class="h-5 w-5 text-zinc-400" />
+                    </span>
+                  </button>
+                </:wrapper>
               </AtomicWeb.Components.Dropdown.dropdown>
             </li>
           <% else %>
@@ -189,23 +191,25 @@
               ]}
               id="user-dropdown-menu"
             >
-              <button type="button" class="-m-1.5 flex items-center p-1.5" id="user-menu-button" aria-expanded="false" aria-haspopup="true" @click="menu = ! menu" @click.away="menu = false" @keydown.escape="menu = false">
-                <span class="sr-only">Open user menu</span>
-                <AtomicWeb.Components.Avatar.avatar
-                  name={@current_user.name}
-                  src={
-                    if @current_user.profile_picture do
-                      Uploaders.ProfilePicture.url({@current_user, @current_user.profile_picture}, :original)
-                    else
-                      nil
-                    end
-                  }
-                  size={:xs}
-                  fg_color="zinc-400"
-                  bg_color="zinc-200"
-                  class="!text-[16px]"
-                />
-              </button>
+              <:wrapper>
+                <button type="button" class="-m-1.5 flex items-center p-1.5" id="user-menu-button" aria-expanded="false" aria-haspopup="true" @click="menu = ! menu" @click.away="menu = false" @keydown.escape="menu = false">
+                  <span class="sr-only">Open user menu</span>
+                  <AtomicWeb.Components.Avatar.avatar
+                    name={@current_user.name}
+                    src={
+                      if @current_user.profile_picture do
+                        Uploaders.ProfilePicture.url({@current_user, @current_user.profile_picture}, :original)
+                      else
+                        nil
+                      end
+                    }
+                    size={:xs}
+                    fg_color="zinc-400"
+                    bg_color="zinc-200"
+                    class="!text-[16px]"
+                  />
+                </button>
+              </:wrapper>
             </AtomicWeb.Components.Dropdown.dropdown>
           </div>
         <% else %>

From 4d2c0d0b40a235366f5927db7b8b227a97f60fec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Tue, 19 Mar 2024 17:49:09 +0000
Subject: [PATCH 08/14] fix: remove duplicated attr

---
 lib/atomic_web/components/calendar/calendar.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/atomic_web/components/calendar/calendar.ex b/lib/atomic_web/components/calendar/calendar.ex
index 2ec8ab397..7c27db643 100644
--- a/lib/atomic_web/components/calendar/calendar.ex
+++ b/lib/atomic_web/components/calendar/calendar.ex
@@ -95,7 +95,7 @@ defmodule AtomicWeb.Components.Calendar do
                     ]}
                   >
                     <:wrapper>
-                      <.button color={:white} color={:white} icon={:chevron_down} icon_position={:right} icon_variant={:solid}>
+                      <.button color={:white} icon={:chevron_down} icon_position={:right} icon_variant={:solid}>
                         <%= if @mode == "month" do %>
                           <%= gettext("Month view") %>
                         <% else %>

From c995d6add12010167cb3763d4cd01af363055c46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Tue, 19 Mar 2024 20:19:10 +0000
Subject: [PATCH 09/14] chore: dropdown wrapper docs

---
 lib/atomic_web/components/dropdown.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index d88f39e4e..39b5ea32e 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -12,7 +12,7 @@ defmodule AtomicWeb.Components.Dropdown do
     doc: "The orientation of the dropdown.",
     values: [:down, :up]
 
-  slot :wrapper, required: true, doc: "Slot for the body content of the dropdown."
+  slot :wrapper, required: true, doc: "Slot to be rendered as a wrapper of the dropdown. For example, a custom button."
 
   def dropdown(assigns) do
     ~H"""

From 424a90c46a56bd0cd16a23693d257d286d73e673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Tue, 19 Mar 2024 20:23:41 +0000
Subject: [PATCH 10/14] fix: format

---
 lib/atomic_web/components/dropdown.ex | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index 39b5ea32e..a17e87162 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -12,7 +12,9 @@ defmodule AtomicWeb.Components.Dropdown do
     doc: "The orientation of the dropdown.",
     values: [:down, :up]
 
-  slot :wrapper, required: true, doc: "Slot to be rendered as a wrapper of the dropdown. For example, a custom button."
+  slot :wrapper,
+    required: true,
+    doc: "Slot to be rendered as a wrapper of the dropdown. For example, a custom button."
 
   def dropdown(assigns) do
     ~H"""

From 1ad9394f0748931c648c1ecd22612da7694ebe95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Wed, 20 Mar 2024 09:04:29 +0000
Subject: [PATCH 11/14] fix: assigns and storybook

---
 lib/atomic_web/components/dropdown.ex   |  6 +++---
 storybook/components/dropdown.story.exs | 10 ++++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index a17e87162..fd572b7a2 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -18,11 +18,11 @@ defmodule AtomicWeb.Components.Dropdown do
 
   def dropdown(assigns) do
     ~H"""
-    <div class="relative inline-block text-left" phx-click={JS.toggle(to: "##{assigns.id}", in: "block", out: "hidden")} phx-click-away={JS.hide(to: "##{assigns.id}")}>
+    <div class="relative inline-block text-left" phx-click={JS.toggle(to: "##{@id}", in: "block", out: "hidden")} phx-click-away={JS.hide(to: "##{@id}")}>
       <%= render_slot(@wrapper) %>
-      <div id={assigns.id} class={"#{if assigns.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 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 <- assigns.items do %>
+          <%= for item <- @items do %>
             <a href={item.link} class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
               <%= item.name %>
             </a>
diff --git a/storybook/components/dropdown.story.exs b/storybook/components/dropdown.story.exs
index 2b6efa760..ca3979151 100644
--- a/storybook/components/dropdown.story.exs
+++ b/storybook/components/dropdown.story.exs
@@ -20,7 +20,9 @@ defmodule AtomicWeb.Storybook.Components.Dropdown do
         },
         slots: [
           """
+          <:wrapper>
           <button class="bg-blue-500 text-white px-4 py-2 rounded-md">Button</button>
+          </:wrapper>
           """
         ]
       },
@@ -41,7 +43,9 @@ defmodule AtomicWeb.Storybook.Components.Dropdown do
             },
             slots: [
               """
-              <button class="bg-blue-500 text-white px-4 py-2 rounded-md">Button Down</button>
+              <:wrapper>
+                <button class="bg-blue-500 text-white px-4 py-2 rounded-md">Button Down</button>
+              </:wrapper>
               """
             ]
           },
@@ -58,7 +62,9 @@ defmodule AtomicWeb.Storybook.Components.Dropdown do
             },
             slots: [
               """
-              <button class="bg-blue-500 text-white px-4 py-2 rounded-md">Button Top</button>
+              <:wrapper>
+                <button class="bg-blue-500 text-white px-4 py-2 rounded-md">Button Top</button>
+              </:wrapper>
               """
             ]
           }

From 97f7ebfb382bcf136c8890feff7d888e779c2748 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Wed, 20 Mar 2024 09:54:31 +0000
Subject: [PATCH 12/14] fix: padding

---
 lib/atomic_web/templates/layout/_live_navbar.html.heex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/atomic_web/templates/layout/_live_navbar.html.heex b/lib/atomic_web/templates/layout/_live_navbar.html.heex
index cad2d3e4c..ec6fa3c2f 100644
--- a/lib/atomic_web/templates/layout/_live_navbar.html.heex
+++ b/lib/atomic_web/templates/layout/_live_navbar.html.heex
@@ -135,7 +135,7 @@
                 id="user-menu-button"
               >
                 <:wrapper>
-                  <button class="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-zinc-700 select-none">
+                  <button class="flex items-center gap-x-4 px-12 py-3 text-sm font-semibold leading-6 text-zinc-700 select-none">
                     <AtomicWeb.Components.Avatar.avatar
                       name={@current_user.name}
                       src={

From 7eb3733d11e801d463052538e748d8721e82f613 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Wed, 20 Mar 2024 16:43:07 +0000
Subject: [PATCH 13/14] chore: icons

---
 lib/atomic_web/components/dropdown.ex         | 12 ++++-
 .../live/membership_live/index.html.heex      |  5 +-
 storybook/components/dropdown.story.exs       | 46 +++++++++++++++++++
 3 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index fd572b7a2..38ffa92a8 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -2,11 +2,18 @@ defmodule AtomicWeb.Components.Dropdown do
   @moduledoc false
   use Phoenix.Component
 
+  import AtomicWeb.Components.Icon
   alias Phoenix.LiveView.JS
 
   attr :id, :string, required: true, doc: "The id of the dropdown."
+
   attr :items, :list, default: [], doc: "The items to display in the dropdown."
 
+  attr :icon_variant, :atom,
+    default: :outline,
+    values: [:solid, :outline, :mini],
+    doc: "The icon variation to display."
+
   attr :orientation, :atom,
     default: :down,
     doc: "The orientation of the dropdown.",
@@ -23,7 +30,10 @@ 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 %>
-            <a href={item.link} class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
+            <a 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">
+              <%= 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 %>
             </a>
           <% end %>
diff --git a/lib/atomic_web/live/membership_live/index.html.heex b/lib/atomic_web/live/membership_live/index.html.heex
index 8bf307702..8aae94bb1 100644
--- a/lib/atomic_web/live/membership_live/index.html.heex
+++ b/lib/atomic_web/live/membership_live/index.html.heex
@@ -13,9 +13,10 @@
       <.dropdown
         orientation={:down}
         id="export-menu-button"
+        icon_variant={:solid}
         items={[
-          %{name: "Export to CSV", link: Routes.data_export_path(@socket, :export_memberships_csv, @params["organization_id"])},
-          %{name: "Export to Excel", link: Routes.data_export_path(@socket, :export_memberships_xlsx, @params["organization_id"])}
+          %{name: "Export to CSV", link: Routes.data_export_path(@socket, :export_memberships_csv, @params["organization_id"]), icon: :queue_list},
+          %{name: "Export to Excel", link: Routes.data_export_path(@socket, :export_memberships_xlsx, @params["organization_id"]), icon: :table_cells}
         ]}
       >
         <:wrapper>
diff --git a/storybook/components/dropdown.story.exs b/storybook/components/dropdown.story.exs
index ca3979151..cb0b5976f 100644
--- a/storybook/components/dropdown.story.exs
+++ b/storybook/components/dropdown.story.exs
@@ -69,6 +69,52 @@ defmodule AtomicWeb.Storybook.Components.Dropdown do
             ]
           }
         ]
+      },
+      %VariationGroup{
+        id: :icons,
+        description: "Icons",
+        variations: [
+          %Variation{
+            id: :button,
+            attributes: %{
+              id: "dropdown-solid-icons",
+              icon_variant: :solid,
+              items: [
+                %{name: "Profile", link: "#", icon: :user},
+                %{name: "Settings", link: "#", icon: :cog},
+                %{name: "Logout", link: "#", icon: :arrow_left_on_rectangle}
+              ],
+              orientation: :down
+            },
+            slots: [
+              """
+              <:wrapper>
+                <button class="bg-blue-500 text-white px-4 py-2 rounded-md">Dropdown with Solid Icons</button>
+              </:wrapper>
+              """
+            ]
+          },
+          %Variation{
+            id: :top,
+            attributes: %{
+              id: "dropdown-outline-icons",
+              icon_variant: :outline,
+              items: [
+                %{name: "Profile", link: "#", icon: :user},
+                %{name: "Settings", link: "#", icon: :cog},
+                %{name: "Logout", link: "#", icon: :arrow_left_on_rectangle}
+              ],
+              orientation: :top
+            },
+            slots: [
+              """
+              <:wrapper>
+                <button class="bg-blue-500 text-white px-4 py-2 rounded-md">Dropdown with Outline Icons</button>
+              </:wrapper>
+              """
+            ]
+          }
+        ]
       }
     ]
   end

From 4b1e12cd4abb5c5c6ea763ba7759af4ea783e83b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Wed, 20 Mar 2024 16:53:24 +0000
Subject: [PATCH 14/14] fix: avatars

---
 lib/atomic_web/templates/layout/_live_navbar.html.heex | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/lib/atomic_web/templates/layout/_live_navbar.html.heex b/lib/atomic_web/templates/layout/_live_navbar.html.heex
index ec6fa3c2f..24a4c6147 100644
--- a/lib/atomic_web/templates/layout/_live_navbar.html.heex
+++ b/lib/atomic_web/templates/layout/_live_navbar.html.heex
@@ -146,8 +146,7 @@
                         end
                       }
                       size={:xs}
-                      fg_color="zinc-400"
-                      bg_color="zinc-200"
+                      color={:light_gray}
                       class="!text-sm"
                     />
                     <span class="hidden lg:flex lg:items-center">
@@ -204,8 +203,7 @@
                       end
                     }
                     size={:xs}
-                    fg_color="zinc-400"
-                    bg_color="zinc-200"
+                    color={:light_gray}
                     class="!text-[16px]"
                   />
                 </button>