fix: imports and usage of image_uploader

lib/atomic/uploaders/banner.ex

@@ -1,16 +1,21 @@
 defmodule Atomic.Uploaders.Banner do
   @moduledoc """
-  Uploader for user banners.
+  Uploader for user and department banners.
   """
   use Atomic.Uploader, extensions: ~w(.jpg .jpeg .png .gif)
   alias Atomic.Accounts.User
+  alias Atomic.Organizations.Department
 
   @versions [:original]
 
   def storage_dir(_version, {_file, %User{} = user}) do
     "uploads/atomic/users/#{user.id}/banner"
   end
 
+  def storage_dir(_version, {_file, %Department{} = department}) do
+    "uploads/atomic/departments/#{department.id}/banner"
+  end
+
   def filename(version, _) do
     version
   end

lib/atomic_web/components/image_uploader.ex

@@ -73,13 +73,13 @@ defmodule AtomicWeb.Components.ImageUploader do
                 <% end %>
               </figure>
               <%= for err <- upload_errors(@upload, entry) do %>
-                <p class="alert alert-danger">{Phoenix.Naming.humanize(err)}</p>
+                <p class="alert alert-danger text-red-500">{Phoenix.Naming.humanize(err)}</p>
               <% end %>
             </article>
           <% end %>
         <% end %>
         <%= for err <- upload_errors(@upload) do %>
-          <p class="alert alert-danger">{Phoenix.Naming.humanize(err)}</p>
+          <p class="alert alert-danger text-red-500">{Phoenix.Naming.humanize(err)}</p>
         <% end %>
       </section>
     </div>

lib/atomic_web/live/activity_live/form_component.ex

@@ -2,9 +2,8 @@ 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}
 
   @impl true
   def update(%{activity: activity} = assigns, socket) do

lib/atomic_web/live/activity_live/form_component.html.heex

@@ -10,7 +10,7 @@
 
     <div class="flex flex-col-reverse xl:flex-row">
       <div class="w-full xl:w-1/3">
-        <.live_component module={ImageUploader} id="uploader" uploads={@uploads} target={@myself} />
+        <.image_uploader id="uploader" upload={@uploads} class="h-32 w-full border border-zinc-300 shadow-sm xl:h-64" image_class="h-32 w-full object-cover xl:h-64" />
       </div>
 
       <div class="flex flex-col">

lib/atomic_web/live/announcement_live/form_component.ex

@@ -2,9 +2,8 @@ defmodule AtomicWeb.AnnouncementLive.FormComponent do
   use AtomicWeb, :live_component
 
   alias Atomic.Organizations
-  alias AtomicWeb.Components.ImageUploader
 
-  import AtomicWeb.Components.Forms
+  import AtomicWeb.Components.{Forms, ImageUploader}
 
   @impl true
   def mount(socket) do

lib/atomic_web/live/announcement_live/form_component.html.heex

@@ -8,7 +8,7 @@
           <.field field={f[:description]} type="textarea" placeholder="Description" required class="h-44 w-full resize-none overflow-auto xl:h-64" />
         </div>
         <div class="space-y-4">
-          <.live_component module={ImageUploader} id="uploader" uploads={@uploads} target={@myself} class="object-cover" />
+          <.image_uploader id="uploader" upload={@uploads.image} class="aspect-square w-full border border-zinc-300 shadow-sm" />
 
           <div class="flex justify-end">
             <.button size={:md} color={:white} icon="hero-cube" type="submit">{gettext("Save Changes")}</.button>

lib/atomic_web/live/department_live/form_component.ex

@@ -2,9 +2,8 @@ defmodule AtomicWeb.DepartmentLive.FormComponent do
   use AtomicWeb, :live_component
 
   alias Atomic.Departments
-  alias AtomicWeb.Components.ImageUploader
 
-  import AtomicWeb.Components.Forms
+  import AtomicWeb.Components.{Forms, ImageUploader}
 
   @impl true
   def render(assigns) do
@@ -24,7 +23,7 @@ defmodule AtomicWeb.DepartmentLive.FormComponent do
             <p class="atomic-form-help-text pb-4">{gettext("The banner of the department (2055×256px for best display)")}</p>
           </div>
           <div>
-            <.live_component module={ImageUploader} id="uploader" uploads={@uploads} target={@myself} />
+            <.image_uploader id="uploader" upload={@uploads.image} class="h-32 w-full border border-zinc-300 shadow-sm xl:h-64" image_class="h-32 w-full object-cover xl:h-64" />
           </div>
         </div>
 

lib/atomic_web/live/partner_live/form_component.ex

@@ -2,8 +2,7 @@ defmodule AtomicWeb.PartnerLive.FormComponent do
   use AtomicWeb, :live_component
 
   alias Atomic.Partners
-  alias AtomicWeb.Components.ImageUploader
-  import AtomicWeb.Components.Forms
+  import AtomicWeb.Components.{Forms, ImageUploader}
 
   @impl true
   def render(assigns) do
@@ -38,7 +37,7 @@ defmodule AtomicWeb.PartnerLive.FormComponent do
             <p class="atomic-form-help-text pb-4">{gettext("The image of the partner (960x960px for best display)")}</p>
           </div>
           <div>
-            <.live_component module={ImageUploader} id="uploader" uploads={@uploads} target={@myself} />
+            <.image_uploader id="uploader" upload={@uploads.image} class="h-32 w-full border border-zinc-300 shadow-sm xl:h-64" image_class="h-32 object-cover xl:h-64" />
           </div>
         </div>
         <h2 class="mt-8 mb-2 w-full border-b pb-2 text-lg font-semibold text-zinc-900">{gettext("Internal")}</h2>