From 077400ce004920b0d868b35fdd4483da97041a18 Mon Sep 17 00:00:00 2001
From: PatStiles <pdstiles78@gmail.com>
Date: Thu, 19 Dec 2024 13:40:05 -0300
Subject: [PATCH 1/3] fix nav bar and search css classes

---
 explorer/lib/explorer_web/components/nav.ex    | 8 ++++----
 explorer/lib/explorer_web/components/search.ex | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/explorer/lib/explorer_web/components/nav.ex b/explorer/lib/explorer_web/components/nav.ex
index a93b9565e4..f4caf874b4 100644
--- a/explorer/lib/explorer_web/components/nav.ex
+++ b/explorer/lib/explorer_web/components/nav.ex
@@ -23,7 +23,7 @@ defmodule NavComponent do
         >
           🟩 <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-4 [&>a]:drop-shadow-md hidden sm:inline-flex"]}>
           <.link
             class="text-foreground/80 hover:text-foreground font-semibold"
             navigate={~p"/batches"}
@@ -39,7 +39,7 @@ defmodule NavComponent do
         </div>
         <.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 sm:[&>a]:inline-block [&>a]:drop-shadow-md">
         <.link class="hover:text-foreground" target="_blank" href="https://docs.alignedlayer.com">
           Docs
         </.link>
@@ -51,14 +51,14 @@ defmodule NavComponent do
           GitHub
         </.link>
         <DarkMode.button />
-        <.badge :if={@latest_release != nil} class="hidden md:inline">
+        <.badge :if={@latest_release != nil} class="hidden flex">
           <%= @latest_release %>
           <.tooltip>
             Latest Aligned version
           </.tooltip>
         </.badge>
         <button
-          class="md:hidden z-50"
+          class="z-50"
           id="menu-toggle"
           phx-click={toggle_menu()}
           aria-label="Toggle hamburger menu"
diff --git a/explorer/lib/explorer_web/components/search.ex b/explorer/lib/explorer_web/components/search.ex
index bf119ef665..b53e1aa743 100644
--- a/explorer/lib/explorer_web/components/search.ex
+++ b/explorer/lib/explorer_web/components/search.ex
@@ -40,7 +40,7 @@ defmodule SearchComponent do
       <input
         phx-hook="SearchFocus"
         id={"input_#{assigns.id}"}
-        class="pr-10 shadow-md flex h-10 w-full md: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 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"
         type="search"
         placeholder="Enter batch or proof hash (cmd+K)"
         name="batch[merkle_root]"

From 2a5ac315992270327504649e28b9999fdcdc9776 Mon Sep 17 00:00:00 2001
From: PatStiles <pdstiles78@gmail.com>
Date: Thu, 19 Dec 2024 14:04:07 -0300
Subject: [PATCH 2/3] fix gap

---
 explorer/lib/explorer_web/components/nav.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/explorer/lib/explorer_web/components/nav.ex b/explorer/lib/explorer_web/components/nav.ex
index 9bbc8223b3..27fac4d09c 100644
--- a/explorer/lib/explorer_web/components/nav.ex
+++ b/explorer/lib/explorer_web/components/nav.ex
@@ -31,7 +31,7 @@ defmodule NavComponent do
     ~H"""
     <nav class={
       classes([
-        "px-4 sm:px-6 lg:px-8 fixed top-0 p-3 z-50",
+        "gap-2 px-4 sm:px-6 lg:px-8 fixed top-0 p-3 z-50",
         "flex justify-between items-center w-full",
         "border-b border-foreground/10 backdrop-blur-lg backdrop-saturate-200"
       ])

From d8183fd11f8af4a66e46c35527dcd9f7926a8a9f Mon Sep 17 00:00:00 2001
From: Marcos Nicolau <marcosnicolau@lambdaclass.com>
Date: Thu, 19 Dec 2024 19:50:35 -0300
Subject: [PATCH 3/3] feat: redesign navbar

---
 explorer/lib/explorer_web/components/nav.ex   | 28 +++++++++----------
 .../lib/explorer_web/components/search.ex     | 16 ++++-------
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/explorer/lib/explorer_web/components/nav.ex b/explorer/lib/explorer_web/components/nav.ex
index 27fac4d09c..9e0e8ec982 100644
--- a/explorer/lib/explorer_web/components/nav.ex
+++ b/explorer/lib/explorer_web/components/nav.ex
@@ -31,19 +31,22 @@ defmodule NavComponent do
     ~H"""
     <nav class={
       classes([
-        "gap-2 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-4 [&>a]:drop-shadow-md hidden sm: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 sm:[&>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,20 +97,14 @@ defmodule NavComponent do
           GitHub
         </.link>
         <DarkMode.button />
-        <.badge :if={@latest_release != nil} class="hidden flex">
-          <%= @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"
         />
         <button
-          class="z-50"
+          class="md:hidden z-50"
           id="menu-toggle"
           phx-click={toggle_menu()}
           aria-label="Toggle hamburger menu"
@@ -171,6 +170,7 @@ defmodule NavComponent do
           </div>
         </div>
       </div>
+      </div>
     </nav>
     """
   end
diff --git a/explorer/lib/explorer_web/components/search.ex b/explorer/lib/explorer_web/components/search.ex
index b53e1aa743..33a062c346 100644
--- a/explorer/lib/explorer_web/components/search.ex
+++ b/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,7 +32,7 @@ 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
         ])
       }
@@ -40,18 +40,12 @@ defmodule SearchComponent do
       <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