Add some fancy styles to the presence banner

sgobotta · Mar 20, 2024 · ebeaa18 · ebeaa18
1 parent 85baf7f
commit ebeaa18
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/lib/ex_finance_web/components/custom_components/presence_disclaimer.ex b/lib/ex_finance_web/components/custom_components/presence_disclaimer.ex
@@ -14,10 +14,16 @@ defmodule ExFinanceWeb.CustomComponents.PresenceDisclaimer do
     ~H"""
     <div>
       <%= if connected?(@socket) do %>
-        <div class="py-2 text-xs italic cursor-default">
-          <p>
-            <%= @disclaimer_content %>
-          </p>
+        <div class="
+          text-xs italic text-zinc-700 cursor-default
+          rounded-b-xl overflow-hidden shadow-2xl
+          border-r-[0.75px] border-b-[0.5px] border-l-[0.75px] border-zinc-300 border-dotted
+        ">
+          <div class="backdrop-blur-md p-2">
+            <p>
+              <%= @disclaimer_content %>
+            </p>
+          </div>
         </div>
       <% else %>
         <div />

diff --git a/lib/ex_finance_web/components/layouts/app.html.heex b/lib/ex_finance_web/components/layouts/app.html.heex
@@ -1,5 +1,11 @@
-<header class="px-4 sm:px-6 lg:px-8 sticky top-0 bg-gray-200/25 z-50 backdrop-blur-lg">
-  <div class="flex items-center justify-between border-b border-zinc-300 py-3 text-xs sm:text-sm">
+<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" />