feat: final touches

lib/safira_web/components/layouts/app.html.heex

@@ -5,11 +5,11 @@
       current_user={@current_user}
       pages={SafiraWeb.Config.app_pages(!@current_user.attendee.ineligible)}
       current_page={Map.get(assigns, :current_page, nil)}
-      border="border-darkShade"
+      border="border-light/10"
       logo_images={%{light: "/images/sei-logo.svg", dark: "/images/sei-logo.svg"}}
       logo_url={~p"/app/"}
       user_dropdown_name_color="text-light"
-      user_dropdown_handle_color="text-lightMuted"
+      user_dropdown_handle_color="text-light/60"
       user_dropdown_icon_color="text-lightShade"
       link_active_class="bg-light text-primary"
       link_inactive_class="hover:bg-primary-500/10 text-light"

lib/safira_web/components/sidebar.ex

@@ -289,16 +289,16 @@ defmodule SafiraWeb.Components.Sidebar do
       <div
         id={"#{@id}-dropdown"}
         phx-click-away={hide_user_dropdown("##{@id}-dropdown")}
-        class="hidden z-10 mx-3 origin-bottom bottom-full absolute right-0 left-0 mb-2 rounded-md shadow-lg bg-primary ring-2 ring-white divide-y divide-lightShade overflow-hidden"
+        class="hidden z-10 mx-3 origin-bottom bottom-full absolute right-0 left-0 mb-2 rounded-md shadow-lg bg-light text-primary overflow-hidden"
         role="menu"
         aria-labelledby={@id}
       >
-        <div role="none">
+        <div role="none" class="divide-y divide-primary/10">
           <%= for link <- @link do %>
             <.link
               tabindex="-1"
               role="menuitem"
-              class="block px-4 py-2 bg-primary text-light hover:bg-blue-900/35"
+              class="block px-4 py-3 bg-light text-primary font-medium hover:bg-lightShade transition-colors"
               {link}
             >
               <%= render_slot(link) %>
@@ -332,7 +332,7 @@ defmodule SafiraWeb.Components.Sidebar do
           ]}
         >
           <%= if Map.get(page, :icon) do %>
-            <.icon name={page.icon} class="mr-3 flex-shrink-0 size-8" />
+            <.icon name={page.icon} class="mr-3 flex-shrink-0 size-6" />
           <% end %>
           <%= if Map.get(page, :image) do %>
             <div

lib/safira_web/config.ex

@@ -98,7 +98,7 @@ defmodule SafiraWeb.Config do
         %{
           key: :credential,
           title: "Credential",
-          icon: "hero-qr-code",
+          image: "/images/icons/scanner.svg",
           url: "/app/credential",
           enabled: true
         }

lib/safira_web/live/app/leaderboard_live/components/leaderboard.ex

@@ -60,6 +60,7 @@ defmodule SafiraWeb.App.LeaderboardLive.Components.Leaderboard do
           handle={@entry.handle}
           size={:xl}
           class="bg-light/5 border-2 border-accent bg-accent rounded-full"
+          link={~p"/app/user/#{@entry.handle}"}
         />
         <span class="bg-accent rounded-full px-2 -translate-y-3 select-none text-primary/80 font-semibold border-primary border-2">
           <%= @pos %>
@@ -88,6 +89,7 @@ defmodule SafiraWeb.App.LeaderboardLive.Components.Leaderboard do
             handle={@entry.handle}
             size={:sm}
             class={"#{if @self do "bg-primary/10 border-2 border-primary/10" else "bg-light/5 border-2 border-light/5" end} rounded-full"}
+            link={~p"/app/user/#{@entry.handle}"}
           />
         </p>
         <p class="font-semibold truncate max-w-40">

lib/safira_web/live/app/vault_live/components/item.ex

@@ -13,7 +13,7 @@ defmodule SafiraWeb.App.VaultLive.Components.Item do
   def item(assigns) do
     ~H"""
     <li id={@id} class={"flex flex-row #{if @redeemed do "opacity-50" end}"}>
-      <figure class="w-32 h-32 bg-light/5 rounded-xl">
+      <figure class="w-32 h-32 bg-light/5 rounded-xl flex-shrink-0">
         <%= if @image do %>
           <img class="w-full p-4" src={@image} />
         <% end %>