Small updates and fixes

assets/css/app.css

@@ -293,10 +293,31 @@ input[type="checkbox"] {
   }
 }
 
+.dl-default {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  & dt {
+    font-weight: bold;
+  }
+
+  & dd {
+    padding: 1rem;
+    background-color: var(--grey-dark);
+    margin: 0;
+    border-radius: 1rem;
+  }
+}
+
 .error {
   color: var(--red);
 }
 
+.back-link {
+  margin-bottom: 2rem;
+}
+
 .banner {
   max-width: 1024px;
   margin: 0 auto;
@@ -312,4 +333,17 @@ input[type="checkbox"] {
   & p {
     font-size: 1.75em;
   }
+}
+
+.text-content {
+
+  & h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p:not(:last-child) {
+    margin-bottom: 1rem;
+  }
 }

lib/send_it/marketing.ex

@@ -130,7 +130,7 @@ defmodule SendIt.Marketing do
 
   """
   def list_messages do
-    Repo.all(Message)
+    Repo.all(from m in Message, order_by: [desc: m.inserted_at])
   end
 
   @doc """

lib/send_it_web/components/core_components.ex

@@ -495,14 +495,12 @@ defmodule SendItWeb.CoreComponents do
 
   def list(assigns) do
     ~H"""
-    <div>
+    <dl class="dl-default">
-      <dl>
+      <div :for={item <- @item}>
-        <div :for={item <- @item}>
+        <dt><%= item.title %></dt>
-          <dt><%= item.title %></dt>
+        <dd><%= render_slot(item) %></dd>
-          <dd><%= render_slot(item) %></dd>
+      </div>
-        </div>
+    </dl>
-      </dl>
-    </div>
     """
   end
 
@@ -518,10 +516,9 @@ defmodule SendItWeb.CoreComponents do
 
   def back(assigns) do
     ~H"""
-    <div>
+    <div class="back-link">
       <.link navigate={@navigate}>
-        <.icon name="hero-arrow-left-solid" />
+        &larr; <%= render_slot(@inner_block) %>
-        <%= render_slot(@inner_block) %>
       </.link>
     </div>
     """
@@ -627,4 +624,11 @@ defmodule SendItWeb.CoreComponents do
   def translate_errors(errors, field) when is_list(errors) do
     for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
   end
+
+  @doc """
+  Converts time into readable time
+  """
+  def format_date(date) do
+    Calendar.strftime(date, "%a, %b %d %Y")
+  end
 end

lib/send_it_web/live/contact_live/show.html.heex

@@ -1,6 +1,7 @@
+<.back navigate={~p"/contacts"}>Back to contacts</.back>
+
 <.header>
-  Contact <%= @contact.id %>
+  Contact
-  <:subtitle>This is a contact record from your database.</:subtitle>
   <:actions>
     <.link patch={~p"/contacts/#{@contact}/edit"} phx-click={JS.push_focus()}>
       <.button>Edit contact</.button>
@@ -14,8 +15,6 @@
   <:item title="Subscribed"><%= @contact.subscribed %></:item>
 </.list>
 
-<.back navigate={~p"/contacts"}>Back to contacts</.back>
-
 <.modal :if={@live_action == :edit} id="contact-modal" show on_cancel={JS.patch(~p"/contacts/#{@contact}")}>
   <.live_component
     module={SendItWeb.ContactLive.FormComponent}

lib/send_it_web/live/message_live/index.ex

@@ -34,7 +34,7 @@ defmodule SendItWeb.MessageLive.Index do
 
   @impl true
   def handle_info({SendItWeb.MessageLive.FormComponent, {:saved, message}}, socket) do
-    {:noreply, stream_insert(socket, :messages, message)}
+    {:noreply, stream_insert(socket, :messages, message, at: 0)}
   end
 
   @impl true

lib/send_it_web/live/message_live/index.html.heex

@@ -16,7 +16,7 @@
     <%= message.subject %>
   </:col>
   <:col :let={{_id, message}} label="Created">
-    <%= message.inserted_at %>
+    <%= format_date(message.inserted_at) %>
   </:col>
   <:action :let={{id, message}}>
     <.link

lib/send_it_web/live/message_live/show.html.heex

@@ -1,6 +1,8 @@
+<.back navigate={~p"/messages"}>Back to messages</.back>
+
 <.header>
-  Message <%= @message.id %>
+  Message
-  <:subtitle>This is a message record from your database.</:subtitle>
+  <:subtitle>Sent: <%= format_date(@message.inserted_at) %></:subtitle>
 </.header>
 
 <.list>
@@ -8,12 +10,12 @@
     <%= @message.subject %>
   </:item>
   <:item title="Content">
-    <%= @message.content %>
+    <div class="text-content">
+      <%= raw(@message.content) %>
+    </div>
   </:item>
 </.list>
 
-<.back navigate={~p"/messages"}>Back to messages</.back>
-
 <.modal
   :if={@live_action == :edit}
   id="message-modal"