feat(explorer): Fix nav bar (#1660)

Co-authored-by: Urix <[email protected]>
Co-authored-by: Marcos Nicolau <[email protected]>

Author: 3 people

explorer/lib/explorer_web/components/nav.ex

@@ -31,19 +31,22 @@ defmodule NavComponent do
     ~H"""
     <nav class={
       classes([
-        "px-4 sm:px-6 lg:px-8 fixed top-0 p-3 z-50",
-        "flex justify-between items-center w-full",
+        "flex fixed justify-center items-center w-full",
         "border-b border-foreground/10 backdrop-blur-lg backdrop-saturate-200"
       ])
-    }>
-      <div class="gap-x-6 inline-flex">
+    }
+    style="z-index: 1"
+    >
+    <div class={classes(["gap-5 lg:gap-10 px-4 sm:px-6 lg:px-8 top-0 p-3 z-50",
+        "flex justify-between items-center w-full"])} style="max-width: 1200px;">
+      <div class="gap-x-6 flex">
         <.link
           class="hover:scale-105 transform duration-150 active:scale-95 text-3xl"
           navigate={~p"/"}
         >
           🟩 <span class="sr-only">Aligned Explorer Home</span>
         </.link>
-        <div class={["items-center gap-8 [&>a]:drop-shadow-md", "hidden md:inline-flex"]}>
+        <div class={["items-center gap-5 hidden md:inline-flex"]}>
           <.link
             class={
               active_view_class(assigns.socket.view, [
@@ -78,9 +81,11 @@ defmodule NavComponent do
             Restakes
           </.link>
         </div>
+      </div>
+      <div style="max-width: 600px; width: 100%;">
         <.live_component module={SearchComponent} id="nav_search" />
       </div>
-      <div class="items-center gap-4 font-semibold leading-6 text-foreground/80 flex [&>a]:hidden lg:[&>a]:inline-block [&>a]:drop-shadow-md">
+      <div class="items-center gap-4 font-semibold leading-6 text-foreground/80 flex [&>a]:hidden lg:[&>a]:inline-block">
         <.link class="hover:text-foreground" target="_blank" href="https://docs.alignedlayer.com">
           Docs
         </.link>
@@ -92,15 +97,9 @@ defmodule NavComponent do
           GitHub
         </.link>
         <DarkMode.button />
-        <.badge :if={@latest_release != nil} class="hidden md:inline">
-          <%= @latest_release %>
-          <.tooltip>
-            Latest Aligned version
-          </.tooltip>
-        </.badge>
         <.hover_dropdown_selector
           current_value={get_current_network(@host)}
-          variant="foreground"
+          variant="accent"
           options={@networks}
           icon="hero-cube-transparent-micro"
         />
@@ -171,6 +170,7 @@ defmodule NavComponent do
           </div>
         </div>
       </div>
+      </div>
     </nav>
     """
   end

explorer/lib/explorer_web/components/search.ex

@@ -22,7 +22,7 @@ defmodule SearchComponent do
     end
   end
 
-  attr :class, :string, default: nil
+  attr(:class, :string, default: nil)
 
   @impl true
   def render(assigns) do
@@ -32,26 +32,20 @@ defmodule SearchComponent do
       phx-submit="search_batch"
       class={
         classes([
-          "relative flex items-center gap-2 z-10 px-5 sm:px-0 drop-shadow-sm max-w-md",
+          "relative flex items-center gap-2 sm:px-0 w-full",
           @class
         ])
       }
     >
       <input
         phx-hook="SearchFocus"
         id={"input_#{assigns.id}"}
-        class="pr-10 shadow-md flex h-10 w-full lg:min-w-80 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 w-full rounded-lg border-foreground/20 bg-card focus:border-foreground/20 focus:ring-accent text-sm"
         type="search"
-        placeholder="Enter batch or proof hash (cmd+K)"
+        placeholder="Search by batch hash, proof hash, address"
         name="batch[merkle_root]"
       />
-      <.button
-        type="submit"
-        class="absolute right-5 sm:right-1 top-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-transparent border-none size-10 shadow-none hover:bg-transparent text-muted-foreground"
-      >
-        <.icon name="hero-magnifying-glass-solid" class="size-5 hover:text-foreground" />
-        <span class="sr-only">Search</span>
-      </.button>
+      <.icon name="hero-magnifying-glass-solid" class="absolute right-3 text-foreground/20 size-5 hover:text-foreground" />
     </form>
     """
   end