mock label and search repositioned (#36)

assets/css/app.css

@@ -133,7 +133,7 @@ input {
   @apply text-se-lilac hover:text-se-hover-lilac transition-all duration-300;
 }
 .text-hover-gray {
-  @apply text-gray-500 hover:text-gray-300 transition-all duration-300;
+  @apply text-gray-400 hover:text-gray-300 transition-all duration-300;
 }
 
 /* Rounded Labels */
@@ -153,5 +153,5 @@ input {
   @apply text-hover-lilac bg-se-lilac/5 px-4 py-1 rounded-full;
 }
 .gray-label {
-  @apply text-hover-gray bg-gray-600/5 px-4 py-1 rounded-full;
+  @apply text-hover-gray bg-gray-400/5 px-4 py-1 rounded-full;
 }

lib/starknet_explorer_web/live/pages/block_detail.ex

@@ -7,10 +7,6 @@ defmodule StarknetExplorerWeb.BlockDetailLive do
 
   defp block_detail_header(assigns) do
     ~H"""
-    <%= live_render(@socket, StarknetExplorerWeb.SearchLive,
-      id: "search-bar",
-      flash: @flash
-    ) %>
     <div class="flex flex-col md:flex-row justify-between">
       <h2>Block <span class="font-semibold">#<%= @block["block_number"] %></span></h2>
       <div class="text-gray-400">
@@ -63,6 +59,10 @@ defmodule StarknetExplorerWeb.BlockDetailLive do
   @impl true
   def render(assigns) do
     ~H"""
+    <%= live_render(@socket, StarknetExplorerWeb.SearchLive,
+      id: "search-bar",
+      flash: @flash
+    ) %>
     <div class="max-w-7xl mx-auto bg-container p-4 md:p-6 rounded-md">
       <%= block_detail_header(assigns) %>
       <%= render_info(assigns) %>
@@ -238,9 +238,12 @@ defmodule StarknetExplorerWeb.BlockDetailLive do
         Gas Price
       </div>
       <div class="col-span-3">
-        <span class="break-all bg-se-cash-green/10 text-se-cash-green rounded-full px-4 py-1">
-          <%= "0.000000017333948464 ETH" %>
-        </span>
+        <div class="flex flex-col lg:flex-row items-start lg:items-center gap-2">
+          <div class="gray-label text-sm">Mocked</div>
+          <div class="break-all bg-se-cash-green/10 text-se-cash-green rounded-full px-4 py-1">
+            <%= "0.000000017333948464 ETH" %>
+          </div>
+        </div>
       </div>
     </div>
     <div class="grid-4 custom-list-item">

lib/starknet_explorer_web/live/pages/home/index.ex

@@ -61,7 +61,8 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
           <div>1,525,792</div>
         </div>
       </div>
-      <div class="flex items-start gap-3 bg-container p-4 md:p-5">
+      <div class="flex items-start gap-3 bg-container p-4 md:p-5 relative">
+        <div class="absolute top-2 right-2 gray-label text-sm">Mocked</div>
         <img src={~p"/images/calendar.svg"} />
         <div class="text-sm">
           <div>Events</div>
@@ -78,7 +79,8 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
         <div class="ml-7 text-gray-500">Transaction Fees</div>
         <div id="fees"></div>
       </div>
-      <div class="pt-5 bg-container">
+      <div class="pt-5 bg-container relative">
+        <div class="absolute top-2 right-2 gray-label text-sm">Mocked</div>
         <div class="ml-7 text-gray-500">TVL</div>
         <div id="tvl"></div>
       </div>

lib/starknet_explorer_web/live/transaction_live.ex

@@ -5,10 +5,6 @@ defmodule StarknetExplorerWeb.TransactionLive do
 
   defp transaction_header(assigns) do
     ~H"""
-    <%= live_render(@socket, StarknetExplorerWeb.SearchLive,
-      id: "search-bar",
-      flash: @flash
-    ) %>
     <div class="flex flex-col md:flex-row justify-between">
       <div class="flex flex-col lg:flex-row gap-2 items-baseline">
         <h2>Transaction</h2>
@@ -78,6 +74,10 @@ defmodule StarknetExplorerWeb.TransactionLive do
   @impl true
   def render(assigns) do
     ~H"""
+    <%= live_render(@socket, StarknetExplorerWeb.SearchLive,
+      id: "search-bar",
+      flash: @flash
+    ) %>
     <div class="max-w-7xl mx-auto bg-container p-4 md:p-6 rounded-md">
       <%= transaction_header(assigns) %>
       <%= render_info(assigns) %>