style(explorer): improve batch detail layout (yetanotherco#709)

Author: glpecile

explorer/lib/explorer_web/components/core_components.ex

@@ -837,4 +837,15 @@ defmodule ExplorerWeb.CoreComponents do
   def translate_errors(errors, field) when is_list(errors) do
     for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
   end
+
+  @doc """
+  Divider component.
+  """
+  attr :class, :string, default: nil
+
+  def divider(assigns) do
+    ~H"""
+    <hr class={["border-t rounded-full border-muted-foreground/40 my-1.5", @class]} />
+    """
+  end
 end

explorer/lib/explorer_web/components/search.ex

@@ -28,16 +28,16 @@ defmodule SearchComponent do
       phx-target={@myself}
       phx-submit="search_batch"
       class={[
-        "relative flex items-center w-full max-w-md gap-2 z-10 px-5 sm:px-0 drop-shadow-sm",
+        "relative flex items-center gap-2 z-10 px-5 sm:px-0 drop-shadow-sm max-w-md",
         @class
       ]}
     >
       <input
         phx-hook="SearchFocus"
         id={"input_#{assigns.id}"}
-        class="pr-10 shadow-md flex h-10 w-full file:border-0 text-foreground file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed flex-1 rounded-md border border-foreground/20 bg-card px-4 py-2 text-sm font-medium transition-colors hover:bg-muted focus:outline-none focus:ring-1 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground"
+        class="pr-10 shadow-md flex h-10 w-full md:min-w-72 file:border-0 text-foreground file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed flex-1 rounded-md border border-foreground/20 bg-card px-4 py-2 text-sm font-medium transition-colors hover:bg-muted focus:outline-none focus:ring-1 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground"
         type="search"
-        placeholder="Search by merkle root hash..."
+        placeholder="Search by batch hash (cmd+K)"
         name="batch[merkle_root]"
       />
       <.button

explorer/lib/explorer_web/components/tweet.ex

@@ -7,7 +7,7 @@ defmodule TweetComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div>
+    <div class={@class}>
       <a
         href={"https://twitter.com/intent/tweet?text=#{@text}"}
         target="_blank"
@@ -20,8 +20,7 @@ defmodule TweetComponent do
       >
         <button class={[
           "bg-black text-neutral-50 hover:bg-neutral-700 px-3 pb-0.5",
-          "font-bold text-sm leading-[18px] tracking-wider rounded-full",
-          @class
+          "font-bold text-sm leading-[18px] tracking-wider rounded-full"
         ]}>
           <span class="text-xl font-normal">𝕏</span> <span class="tracking-tight">Post</span>
         </button>

explorer/lib/explorer_web/live/pages/batch/index.html.heex

@@ -4,23 +4,43 @@
       Batch Details
     </.card_preheding>
     <.card
-      class="px-4 py-5 min-h-fit flex flex-col"
+      class="relative px-4 py-5 min-h-fit flex flex-col"
       inner_class="font-semibold inline-flex flex-col text-base gap-y-2 text-muted-foreground [&>p]:text-foreground [&>a]:text-foreground [&>*]:break-all [&>*]:font-normal"
     >
-      Merkle Root Hash:
+      Batch Hash:
       <p><%= @merkle_root %></p>
+      Status: <.dynamic_badge class="w-fit" status={@current_batch.is_verified} />
       Amount of Proofs in this Batch:
       <p><%= @current_batch.amount_of_proofs %></p>
       <%= if @current_batch.cost_per_proof != nil do %>
         Cost per Proof:
         <p>
           <%= @current_batch.cost_per_proof |> EthConverter.wei_to_eth() %> ETH
           <%= if @eth_usd_price != :empty and @eth_usd_price != "0.00000" do %>
-            (<%= @eth_usd_price %> USD)
+            <span class="inline-flex md:inline-block">(<%= @eth_usd_price %> USD)</span>
           <% end %>
         </p>
       <% end %>
-      Submission Block Number:
+      Proofs in this batch:
+      <%= if @proof_hashes != :empty do %>
+        <%= if @proof_hashes == :nil do %>
+          <p class="normal-case">
+            Proofs couldn't be shown for this Batch
+          </p>
+        <% else %>
+          <div class="h-36 overflow-y-auto text-foreground space-y-2">
+            <p :for={proof <- @proof_hashes}><%= proof %></p>
+          </div>
+          <.button class="w-fit text-foreground" phx-click="hide_proofs">
+            <.icon name="hero-eye-slash" class="size-4" /> Hide Proofs
+          </.button>
+        <% end %>
+      <% else %>
+        <.button class="w-fit text-foreground font-semibold" phx-click="show_proofs">
+          <.icon name="hero-eye" class="size-4" /> Show Proofs
+        </.button>
+      <% end %>
+      <.divider /> Submission Block Number:
       <.a
         target="_blank"
         rel="noopener"
@@ -44,9 +64,8 @@
       <p>
         <%= @current_batch.submission_timestamp |> Utils.parse_timestamp() %>
       </p>
-      Status: <.dynamic_badge class="w-fit" status={@current_batch.is_verified} />
       <%= if @current_batch.is_verified do %>
-        Response Block Number:
+        <.divider /> Response Block Number:
         <.a
           target="_blank"
           rel="noopener"
@@ -68,37 +87,18 @@
         <p>
           <%= @current_batch.response_timestamp |> Utils.parse_timestamp() %>
         </p>
-        Share:
         <%!-- 
           %20 represents a space
           %23 represents the hash symbol (#)
           %0A represents a line feed (LF) or Unix-style newline
          --%>
         <.live_component
+          class="absolute top-4 md:-top-12 right-5"
           id={"tweet_#{@merkle_root}"}
           module={TweetComponent}
           text={"Just%20submitted%20a%20proof%20via%20@alignedlayer%0AI%20am%20now%20%23aligned%20✅%0A#{@site_url}/batches/#{@merkle_root}"}
         />
       <% end %>
-      Proofs in this batch:
-      <%= if @proof_hashes != :empty do %>
-        <%= if @proof_hashes == :nil do %>
-          <p class="normal-case">
-            Proofs couldn't be shown for this Batch
-          </p>
-        <% else %>
-          <div class="h-32 overflow-y-auto text-foreground space-y-2">
-            <p :for={proof <- @proof_hashes}><%= proof %></p>
-            <.button class="w-fit text-foreground" phx-click="hide_proofs">
-              <.icon name="hero-eye-slash" class="size-4" /> Hide Proofs
-            </.button>
-          </div>
-        <% end %>
-      <% else %>
-        <.button class="w-fit text-foreground font-semibold" phx-click="show_proofs">
-          <.icon name="hero-eye" class="size-4" /> Show Proofs
-        </.button>
-      <% end %>
     </.card>
   <% else %>
     <div class="flex flex-col space-y-6 justify-center grow relative text-center md:pt-14">