feat: email styling

lib/atomic/accounts/user_notifier.ex

@@ -34,7 +34,7 @@ defmodule Atomic.Accounts.UserNotifier do
       |> subject("Confirm your Account")
       |> assign(:user, user)
       |> assign(:url, url)
-      |> render_body("user_confirmation.txt")
+      |> render_body("user_confirmation.html")
 
     case Mailer.deliver(email) do
       {:ok, _term} -> {:ok, email}
@@ -51,7 +51,7 @@ defmodule Atomic.Accounts.UserNotifier do
       |> subject("Reset Password Instructions")
       |> assign(:user, user)
       |> assign(:url, url)
-      |> render_body("user_reset_password.txt")
+      |> render_body("user_reset_password.html")
 
     case Mailer.deliver(email) do
       {:ok, _term} -> {:ok, email}

lib/atomic/departments.ex

@@ -5,7 +5,7 @@ defmodule Atomic.Departments do
   use Atomic.Context
 
   alias Atomic.Accounts.User
-  alias Atomic.Organizations.{Collaborator, Department}
+  alias Atomic.Organizations.{Collaborator, Department, Membership}
   alias AtomicWeb.DepartmentEmails
   alias AtomicWeb.Router.Helpers
 
@@ -405,7 +405,7 @@ defmodule Atomic.Departments do
     User
     |> join(:inner, [u], c in assoc(u, :collaborators))
     |> where([u, c], c.department_id == ^department.id and c.accepted == true)
-    |> join(:inner, [u, c], m in assoc(u, :memberships))
+    |> join(:inner, [u], m in Membership, on: m.user_id == u.id)
     |> where(
       [u, c, m],
       m.organization_id == ^department.organization_id and m.role in [:admin, :owner]

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

@@ -1,6 +1,6 @@
 <div>
   <.form id="activity-form" for={@form} phx-change="validate" phx-submit="save" phx-target={@myself}>
-    <div class="relative py-5 border-b border-zinc-200 sm:py-6">
+    <div class="relative border-b border-zinc-200 py-5 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 />
@@ -14,45 +14,45 @@
       </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 justify-center pt-6 md:flex-row md:justify-start">
           <div class="flex flex-col gap-y-1">
             <.field type="datetime-local" field={@form[:start]} label="Starting date" 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="datetime-local" field={@form[:finish]} label="Ending date" 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">
           <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="url" field={fl[:url]} label="URL" placeholder="Choose an URL" />
             </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>

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

@@ -50,18 +50,18 @@
                 <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="hero-users-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
+                      <.icon name="hero-users-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
                       <%= Enum.count(activity.enrollments) %> / <%= activity.maximum_entries %>
                     </p>
                     <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name="hero-calendar-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
+                      <.icon name="hero-calendar-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 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="hero-map-pin-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
+                        <.icon name="hero-map-pin-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
                         <%= activity.location && activity.location.name %>
                       </p>
                     <% end %>
@@ -70,11 +70,11 @@
                 <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="hero-bell-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Open
+                      <.icon name="hero-bell-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" /> Open
                     </div>
                   <% else %>
                     <div class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name="hero-bell-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Closed
+                      <.icon name="hero-bell-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" /> Closed
                     </div>
                   <% end %>
                 </div>

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

@@ -53,14 +53,14 @@
                 <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="hero-calendar-solid" class="size-5 text-zinc-400" />
-                    <p class="block pl-1.5 max-w-6xl">
+                    <p class="block max-w-6xl pl-1.5">
                       <%= display_date(@activity.start) %>
                     </p>
                   </div>
                 </div>
                 <div class="inset-y-0 my-auto flex md:pl-3">
                   <.icon name="hero-clock-solid" class="size-5 text-zinc-400" />
-                  <p class="block pl-1.5 max-w-6xl">
+                  <p class="block max-w-6xl pl-1.5">
                     <%= display_time(@activity.start) %> - <%= display_time(@activity.finish) %>
                   </p>
                 </div>
@@ -97,7 +97,7 @@
               <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">
+              <dd class="mt-1 flex flex-row space-x-1 text-sm text-zinc-900">
                 <span>
                   <%= gettext("If you can't go please") %>
                 </span>
@@ -116,12 +116,12 @@
                       phx-click="enroll"
                       phx-disable-with={gettext("Enrolling...")}
                       phx-throttle="0"
-                      class="w-fit mt-1 rounded-md bg-primary-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm hover:bg-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
+                      class="bg-primary-500 mt-1 w-fit rounded-md px-3.5 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-600 focus-visible:outline-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                     >
                       <%= gettext("Enroll") %>
                     </button>
                   <% else %>
-                    <button phx-click="must-login" class="w-fit mt-1 rounded-md bg-primary-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm hover:bg-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500">
+                    <button phx-click="must-login" class="bg-primary-500 mt-1 w-fit rounded-md px-3.5 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-600 focus-visible:outline-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
                       <%= gettext("Enroll") %>
                     </button>
                   <% end %>
@@ -138,13 +138,13 @@
 <div class="flex flex-row space-x-1">
   <%= if @has_permissions? do %>
     <.link patch={~p"/organizations/#{@activity.organization_id}/activities/#{@activity}/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: @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="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 %>

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"/organizations/#{@current_organization}/announcements"} />
   </div>
 </.page>

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

@@ -5,7 +5,7 @@
         <div class="flex flex-col">
           <.field field={f[:title]} type="text" placeholder="Title" required class="w-full" />
 
-          <.field field={f[:description]} type="textarea" placeholder="Description" required class="w-full overflow-auto resize-none h-44 xl:h-64" />
+          <.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" />

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"/organizations/#{@current_organization}/announcements"} />
   </div>
 </.page>

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

@@ -5,26 +5,26 @@
     <% end %>
   </:actions>
   <div id={@announcement.id} class="mx-auto max-w-5xl">
-    <div class="mt-4 md:mt-2 flex flex-col justify-center rounded-lg bg-white lg:p-4">
+    <div class="mt-4 flex flex-col justify-center rounded-lg bg-white md:mt-2 lg:p-4">
       <div class="flex items-center space-x-2 px-4 py-1">
         <div class="flex-shrink-0">
           <.avatar name={@announcement.organization.name} color={:light_zinc} size={:md} type={:organization} src={Uploaders.Logo.url({@announcement.organization.logo, @announcement.organization}, :original)} />
         </div>
         <div>
           <.link navigate={~p"/organizations/#{@announcement.organization.id}"} class="hover:underline focus:outline-none">
-            <p class="text-lg sm:text-xl font-bold text-zinc-700"><%= @announcement.organization.name %></p>
+            <p class="text-lg font-bold text-zinc-700 sm:text-xl"><%= @announcement.organization.name %></p>
           </.link>
-          <p class="text-base md:text-md text-gray-500">
+          <p class="text-base text-gray-500 md:text-md">
             <span class="sr-only">Published on</span>
             <time><%= relative_datetime(@announcement.inserted_at) %></time>
           </p>
         </div>
       </div>
-      <div class="px-4 py-2 mt-8">
-        <p class="text-xl md:text-2xl font-semibold text-zinc-900" title={@announcement.title}>
+      <div class="mt-8 px-4 py-2">
+        <p class="text-xl font-semibold text-zinc-900 md:text-2xl" title={@announcement.title}>
           <%= @announcement.title %>
         </p>
-        <p class="mt-2 overflow-hidden break-words text-sm md:text-base leading-relaxed">
+        <p class="mt-2 overflow-hidden break-words text-sm leading-relaxed md:text-base">
           <span class="py-4 text-zinc-800">
             <%= Enum.map(String.split(@announcement.description, "\n"), fn phrase -> %>
               <%= phrase %>
@@ -33,8 +33,8 @@
         </p>
       </div>
       <%= if @announcement.image do %>
-        <div class="h-auto w-full overflow-hidden mt-4 px-4">
-          <img class="max-h-[32rem] sm:max-wxl object-cover max-w-screen md:rounded-xl" src={Uploaders.Post.url({@announcement.image, @announcement}, :original)} alt="Announcement Image" />
+        <div class="mt-4 h-auto w-full overflow-hidden px-4">
+          <img class="max-h-[32rem] max-w-screen object-cover sm:max-wxl md:rounded-xl" src={Uploaders.Post.url({@announcement.image, @announcement}, :original)} alt="Announcement Image" />
         </div>
       <% end %>
     </div>

lib/atomic_web/live/calendar_live/components/week.ex

@@ -211,7 +211,7 @@ defmodule AtomicWeb.CalendarLive.Components.CalendarWeek do
     |> Enum.filter(fn activity ->
       activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
 
-      activity != current_activity && activity.start.day == current_activity.start.day and
+      (activity != current_activity && activity.start.day == current_activity.start.day) and
         Timex.Interval.overlaps?(current_interval, activity_interval)
     end)
     |> length()
@@ -246,7 +246,7 @@ defmodule AtomicWeb.CalendarLive.Components.CalendarWeek do
       |> Enum.filter(fn activity ->
         activity_interval = Timex.Interval.new(from: activity.start, until: activity.finish)
 
-        activity != current_activity && activity.start.day == current_activity.start.day and
+        (activity != current_activity && activity.start.day == current_activity.start.day) and
           Timex.Interval.overlaps?(current_interval, activity_interval)
       end)
       |> length()

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>

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"

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} />