From 2549a8db2a0077b3bc9c7a6c5c5ac2aeb47a76ee Mon Sep 17 00:00:00 2001
From: Ro <ro@ro.social>
Date: Sat, 26 Oct 2024 17:33:04 -0500
Subject: [PATCH] feat: Visually indicate that avatar is editable

---
 lib/postland_web/live/profile_live.ex | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/lib/postland_web/live/profile_live.ex b/lib/postland_web/live/profile_live.ex
index 76ae346..7458621 100644
--- a/lib/postland_web/live/profile_live.ex
+++ b/lib/postland_web/live/profile_live.ex
@@ -7,14 +7,25 @@ defmodule PostlandWeb.ProfileLive do
   def render(assigns) do
     ~H"""
     <div class="flex items-start space-x-4">
-      <div>
+      <div class="flex-shrink-0 relative">
         <img
           class="h-16 w-16 rounded-full drop-shadow-lg"
           src={@account.icon || url(~p"/images/avatar.png")}
           alt=""
         />
+        <div
+          :if={@editing}
+          class="absolute top-0 left-0 h-16 w-16 rounded-full backdrop-brightness-50 flex justify-center items-center"
+        >
+          <.icon name="hero-pencil" class="text-violet-100" />
+        </div>
         <.form for={@form} phx-submit="avatar" phx-change="avatar">
-          <.live_file_input :if={@editing} upload={@uploads.avatar} />
+          <.live_file_input
+            :if={@editing}
+            id="avatar-upload"
+            class="opacity-0 absolute top-0 left-0 bottom-0 right-0"
+            upload={@uploads.avatar}
+          />
         </.form>
       </div>
       <div class="flex flex-col bg-white rounded-lg shadow container">