refactor: some UI improvements

lib/dotcom_web/components/alerts.ex

@@ -8,34 +8,52 @@ defmodule DotcomWeb.Components.Alerts do
   alias Alerts.Alert
   alias DotcomWeb.AlertView
 
+  @date_time_module Application.compile_env!(:dotcom, :date_time_module)
+
   attr :alert, Alert, required: true
 
   @doc """
   An alert that is embedded within another component.
   It does not include header information like the time range, effect, or route.
   """
-  def embedded_alert(assigns) do
+  def embedded_alert(%{alert: alert} = assigns) do
+    assigns =
+      assign(
+        assigns,
+        Map.new([:description, :header, :url], fn key ->
+          {key, if(Map.get(alert, key) != "", do: Map.get(alert, key))}
+        end)
+      )
+      |> assign(:now, @date_time_module.now())
+      |> assign(:alert_icon_type, Alerts.Alert.icon(alert))
+
     ~H"""
-    <div class="p-4 bg-gray-100">
-      <%= if @alert.image do %>
-        <img
-          class="w-full mb-4"
-          src={@alert.image}
-          alt={if @alert.image_alternative_text, do: @alert.image_alternative_text, else: ""}
-        />
-      <% end %>
-      <%= if @alert.header do %>
-        <p class="my-0">{AlertView.format_alert_description(@alert.header)}</p>
-      <% end %>
-      <%= if @alert.description do %>
-        <hr class="h-px my-4 bg-gray-200 border-0" />
-        <p class="my-0">{AlertView.format_alert_description(@alert.description)}</p>
-      <% end %>
-      <%= if @alert.url do %>
-        <hr class="h-px my-4 bg-gray-200 border-0" />
-        <p class="my-0">
-          For more information: <a href={@alert.url}>{@alert.url}</a>
-        </p>
+    <div class={"p-md c-alert-item c-alert-item--#{@alert.priority}"}>
+      <div class="flex gap-sm">
+        <span :if={@alert_icon_type != :none} class="basis-[1.75rem]">
+          {AlertView.alert_icon(@alert_icon_type)}
+        </span>
+        <span>{AlertView.format_alert_description(@header)}</span>
+      </div>
+      <%= if @description do %>
+        <div class="mt-sm">
+          <img
+            :if={@alert.image}
+            class="w-full mb-4"
+            src={@alert.image}
+            alt={if @alert.image_alternative_text, do: @alert.image_alternative_text, else: ""}
+          />
+          {AlertView.format_alert_description(@description)}
+          <%= if @url do %>
+            <hr class="my-4 border-t-[1px] border-gray-lightest" />
+            <p class="my-0">
+              For more information: <a href={@url}>{@url}</a>
+            </p>
+          <% end %>
+          <div class="c-alert-item__updated">
+            {AlertView.alert_updated(@alert, @now)}
+          </div>
+        </div>
       <% end %>
     </div>
     """

lib/dotcom_web/components/components.ex

@@ -196,14 +196,14 @@ defmodule DotcomWeb.Components do
 
   slot(:content, required: true)
   slot(:heading, required: true)
-  attr(:class, :string, default: "Class names applied to the underlying <details> element.")
+  attr(:class, :string, default: "")
 
   attr(:summary_class, :string,
     default: "",
     doc: "Class names applied to the underlying <summary> element."
   )
 
-  attr(:chevron_class, :string, default: "Class names applied to the chevron icon.")
+  attr(:chevron_class, :string, default: "")
   attr(:rest, :global)
 
   @doc """
@@ -221,7 +221,9 @@ defmodule DotcomWeb.Components do
     <details class={"#{@class} group"} {@rest}>
       <summary class={"#{@summary_class} cursor-pointer"}>
         {render_slot(@heading)}
-        <.icon name="chevron-down" class={"#{@chevron_class} shrink-0 group-open:rotate-180"} />
+        <div class={"#{@chevron_class} shrink-0"}>
+          <.icon name="chevron-down" class="h-3 w-3 group-open:rotate-180" />
+        </div>
       </summary>
       {render_slot(@content)}
     </details>

lib/dotcom_web/components/planned_disruptions.ex

@@ -36,8 +36,8 @@ defmodule DotcomWeb.Components.PlannedDisruptions do
   defp disruption(assigns) do
     ~H"""
     <.unstyled_accordion
-      summary_class="flex gap-sm p-2 items-center hover:bg-slate-600 focus:bg-slate-600 hover:text-white focus:text-white cursor-pointer group/row"
-      chevron_class="ml-auto mr-2 w-3 h-3"
+      summary_class="flex items-center hover:bg-brand-primary-lightest cursor-pointer group/row"
+      chevron_class="fill-gray-lighter px-2 py-3"
     >
       <:heading>
         <.heading alert={@alert} />
@@ -59,8 +59,12 @@ defmodule DotcomWeb.Components.PlannedDisruptions do
     assigns = assign(assigns, route_ids: route_ids, time_range_str: time_range_str)
 
     ~H"""
-    <.subway_route_pill route_ids={@route_ids} class="group-hover/row:ring-slate-600" />
-    <.status_label status={@alert.effect} prefix={@time_range_str} />
+    <div class="pl-2 pr-sm">
+      <.subway_route_pill route_ids={@route_ids} class="group-hover/row:ring-brand-primary-lightest" />
+    </div>
+    <div class="flex items-center justify-between grow text-nowrap gap-sm py-3">
+      <.status_label status={@alert.effect} prefix={@time_range_str} />
+    </div>
     """
   end
 

lib/dotcom_web/components/route_symbols.ex

@@ -203,7 +203,7 @@ defmodule DotcomWeb.Components.RouteSymbols do
       @class,
       "w-[3.125rem] h-6 rounded-full ring-2 ring-white",
       "flex items-center justify-center",
-      "text-white font-bold font-heading leading-none"
+      "text-white font-bold font-heading leading-none notranslate"
     ]}>
       {@route_abbreviation}
     </div>

lib/dotcom_web/views/alert_view.ex

@@ -261,9 +261,9 @@ defmodule DotcomWeb.AlertView do
   def type_icon(mode), do: mode_icon(mode, :default)
 
   @spec alert_icon(Alert.icon_type()) :: Phoenix.HTML.Safe.t()
-  defp alert_icon(:shuttle), do: svg("icon-shuttle-default.svg")
-  defp alert_icon(:cancel), do: svg("icon-cancelled-default.svg")
-  defp alert_icon(:snow), do: svg("icon-snow-default.svg")
-  defp alert_icon(:alert), do: svg("icon-alerts-triangle.svg")
-  defp alert_icon(:none), do: ""
+  def alert_icon(:shuttle), do: svg("icon-shuttle-default.svg")
+  def alert_icon(:cancel), do: svg("icon-cancelled-default.svg")
+  def alert_icon(:snow), do: svg("icon-snow-default.svg")
+  def alert_icon(:alert), do: svg("icon-alerts-triangle.svg")
+  def alert_icon(:none), do: ""
 end