Update header styles

* Adds a border
sgobotta · Mar 20, 2024 · fa2b193 · fa2b193
1 parent 987bec3
commit fa2b193
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 29 deletions.
diff --git a/lib/ex_finance_web/components/layouts/app.html.heex b/lib/ex_finance_web/components/layouts/app.html.heex
@@ -1,31 +1,33 @@
 <header class="sticky top-0 bg-gray-200/25 z-50">
-  <div class="
-    flex items-center justify-between
-    border-b border-zinc-300
-    px-1 sm:px-6 lg:px-8
-    text-xs sm:text-sm
-    backdrop-blur-lg
-  ">
-    <div class="flex items-center gap-4">
-      <a href="/">
-        <img src={~p"/images/logo.svg"} width="36" />
-      </a>
-      <a href="" class="hover:text-zinc-700">
-        <%= assigns[:section_title] || gettext("Finance Apps") %>
-      </a>
-    </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <.toggle_theme_button theme={@theme} />
-      <a href="" class="hover:text-zinc-700"></a>
-      <.cafecito_button cafecito_username={
-        Application.fetch_env!(:ex_finance, :cafecito_username)
-      } />
-      <a
-        href="/"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-300/80 text-xs"
-      >
-        <%= gettext("Home") %> <span aria-hidden="true">&rarr;</span>
-      </a>
+  <div class="border-r-[1px] border-l-[1px] border-zinc-300 border-dotted">
+    <div class="
+      flex items-center justify-between
+      border-b border-zinc-300
+      px-1 sm:px-6 lg:px-8
+      text-xs sm:text-sm
+      backdrop-blur-lg
+    ">
+      <div class="flex items-center gap-4">
+        <a href="/">
+          <img src={~p"/images/logo.svg"} width="36" />
+        </a>
+        <a href="" class="hover:text-zinc-700">
+          <%= assigns[:section_title] || gettext("Finance Apps") %>
+        </a>
+      </div>
+      <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
+        <.toggle_theme_button theme={@theme} />
+        <a href="" class="hover:text-zinc-700"></a>
+        <.cafecito_button cafecito_username={
+          Application.fetch_env!(:ex_finance, :cafecito_username)
+        } />
+        <a
+          href="/"
+          class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-300/80 text-xs"
+        >
+          <%= gettext("Home") %> <span aria-hidden="true">&rarr;</span>
+        </a>
+      </div>
     </div>
   </div>
   <%= if assigns[:show_presence] do %>

diff --git a/lib/ex_finance_web/components/layouts/root.html.heex b/lib/ex_finance_web/components/layouts/root.html.heex
@@ -18,7 +18,7 @@
     </script>
   </head>
   <body class="bg-gray-200 antialiased h-screen">
-    <ul class="relative z-10 flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">
+    <ul class="relative z-10 flex items-center gap-4 justify-end border-r-[1px] border-l-[1px] border-zinc-300 border-dotted">
       <%= if @current_user do %>
         <li class="text-[0.8125rem] leading-6 text-zinc-900">
           <%= @current_user.email %>
@@ -35,7 +35,7 @@
           <.link
             href={~p"/users/log_out"}
             method="delete"
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
+            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700 pr-2"
           >
             <%= gettext("Log out") %>
           </.link>