Update notificaion styles

livebook-dev · Apr 16, 2022 · fbf79a1 · fbf79a1
1 parent 3dffb63
commit fbf79a1
Showing 1 changed file with 27 additions and 21 deletions.
diff --git a/lib/livebook_web/live/home_live.ex b/lib/livebook_web/live/home_live.ex
@@ -41,10 +41,10 @@ defmodule LivebookWeb.HomeLive do
       <SidebarHelpers.sidebar>
         <SidebarHelpers.shared_home_footer socket={@socket} current_user={@current_user} />
       </SidebarHelpers.sidebar>
-      <div class="grow px-6 py-8 overflow-y-auto">
-        <div class="max-w-screen-lg w-full mx-auto px-4 pb-8 space-y-4">
-          <.update_notification version={@new_version} instructions_url={@update_instructions_url} />
-          <.memory_notification memory={@memory} app_service_url={@app_service_url} />
+      <div class="grow overflow-y-auto">
+        <.update_notification version={@new_version} instructions_url={@update_instructions_url} />
+        <.memory_notification memory={@memory} app_service_url={@app_service_url} />
+        <div class="max-w-screen-lg w-full mx-auto px-8 pt-8 pb-32 space-y-4">
           <div class="flex flex-col space-y-2 items-center pb-4 border-b border-gray-200
                       sm:flex-row sm:space-y-0 sm:justify-between">
             <div class="text-2xl text-gray-800 font-semibold">
@@ -164,30 +164,36 @@ defmodule LivebookWeb.HomeLive do
 
   defp update_notification(assigns) do
     ~H"""
-    <div class="border-b border-gray-200 pb-4 text-gray-700">
-      Livebook v<%= @version %> available! Check out the news on
-      <a class="font-semibold" href="https://livebook.dev/" target="_blank">livebook.dev</a>
-      <%= if @instructions_url do %>
-        and follow the
-        <a class="font-semibold" href={@instructions_url} target="_blank">update instructions</a>
-      <% end %>
-      🚀
+    <div class="px-2 py-2 bg-blue-200 text-gray-900 text-sm text-center">
+      <span>
+        Livebook v<%= @version %> available! Check out the news on
+        <a class="font-medium border-b border-gray-900 hover:border-transparent" href="https://livebook.dev/" target="_blank">
+          livebook.dev
+        </a>
+        <%= if @instructions_url do %>
+          and follow the
+          <a class="font-medium border-b border-gray-900 hover:border-transparent" href={@instructions_url} target="_blank">
+            update instructions
+          </a>
+        <% end %>
+        🚀
+      </span>
     </div>
     """
   end
 
   defp memory_notification(assigns) do
     ~H"""
     <%= if @app_service_url && @memory.free < 30_000_000 do %>
-      <div class="flex justify-between items-center border-b border-gray-200 pb-4 text-gray-700">
-        <span class="flex items-end">
-          <.remix_icon icon="alarm-warning-line" class="text-xl mr-2" />
-          <span>
-          Less than 30 MB of memory left, consider adding more resources to
-          <a class="font-semibold" href={@app_service_url} target="_blank">the instance</a>
-          or closing <a class="font-semibold" href="#running-sessions">running sessions</a>.
-          </span>
-        </span>
+      <div class="px-2 py-2 bg-red-200 text-gray-900 text-sm text-center">
+        Less than 30 MB of memory left, consider adding more resources to
+        <a class="font-medium border-b border-gray-900 hover:border-transparent" href={@app_service_url} target="_blank">
+          the instance
+        </a>
+        or closing
+        <a class="font-medium border-b border-gray-900 hover:border-transparent" href="#running-sessions">
+          running sessions
+        </a>.
       </div>
     <% end %>
     """