feat(browser-preview): set browser's action buttons to the right + notification ping to admin tab

src/assets/CastopodIcon.astro

+---
+let { className = "" } = Astro.props;
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 44" class={className}
+  ><path
+    d="M62.2 44H51.39s-1.13-2.41-1.6-3.26c-.45-.86-1.55-.82-1.55-.82H18.85s-1.07-.14-1.6.82c-.57.95-1.63 3.26-1.63 3.26H4.97A4.47 4.47 0 0 1 .5 39.56V4.47A4.47 4.47 0 0 1 4.94 0h57.23a4.47 4.47 0 0 1 4.47 4.44v35.09A4.44 4.44 0 0 1 62.21 44Z"
+    fill="#009486"></path><path
+    d="M18.45 9.51h30.2a9.34 9.34 0 0 1 9.4 9.44c0 5.18-4.22 9.4-9.4 9.4h-30.2a9.42 9.42 0 0 1 0-18.84Z"
+    fill="#E7F9E4"></path><path
+    d="M46.27 15.36a4.61 4.61 0 0 0-3.64 7.46s1.58-1.18 3.8-1.18c1.66 0 3.6 1.01 3.6 1.01a4.61 4.61 0 0 0-3.76-7.29ZM20.73 15.36a4.61 4.61 0 0 0-3.77 7.3s1.94-1.02 3.6-1.02c2.23 0 3.8 1.18 3.8 1.18a4.61 4.61 0 0 0-3.64-7.45Z"
+    fill="#009486"></path></svg
+>

src/components/organisms/BrowserPreview.astro

@@ -29,6 +29,12 @@ function setActive(event: MouseEvent) {
   } else {
     const websiteIllustration = document.querySelector("img[id=website]");
     const websiteButton = document.querySelector("button[data-target=website]");
+    const notificationPing = button.querySelector("span[id=notification]");
+
+    if (notificationPing) {
+      notificationPing.remove();
+    }
+
     websiteButton.classList.remove("bg-gray-200", "font-semibold");
     websiteButton.classList.add("hover:bg-gray-200");
     websiteIllustration.classList.add("hidden");
@@ -40,26 +46,36 @@ function setActive(event: MouseEvent) {
   id="browser-preview"
   class="relative w-full max-w-6xl mx-auto -mt-40 overflow-hidden border-4 border-gray-300 shadow-2xl rounded-xl"
 >
-  <nav class="flex items-center h-5 px-4 bg-gray-300 gap-x-4">
-    <div class="inline-flex gap-x-1">
-      <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
-      <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
-      <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
-    </div>
-    <div class="flex gap-x-1">
+  <nav
+    class="flex items-center h-6 px-4 bg-gray-300 border-b-4 border-gray-300 gap-x-4"
+  >
+    <div class="flex h-full gap-x-1">
       <Button
         @click={setActive}
         data-target="website"
-        class={"px-4 text-sm rounded-t" + activeClass}
+        class={"px-4 h-full text-sm rounded" + activeClass}
       >
         website
       </Button>
       <Button
         @click={setActive}
         data-target="admin"
-        class={"px-4 text-sm rounded-t" + inactiveClass}>admin</Button
+        class={"inline-flex items-center gap-x-1 px-4 h-full text-sm rounded" +
+          inactiveClass}
+        ><span class="relative flex w-2 h-2" id="notification">
+          <span
+            class="absolute inline-flex w-full h-full rounded-full opacity-75 animate-ping bg-rose-500"
+          ></span>
+          <span class="relative inline-flex w-2 h-2 rounded-full bg-rose-700"
+          ></span>
+        </span>admin</Button
       >
     </div>
+    <div class="inline-flex ml-auto gap-x-1">
+      <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
+      <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
+      <div class="w-2 h-2 bg-gray-500 rounded-full"></div>
+    </div>
   </nav>
 
   <img

src/components/organisms/MainNav.astro

 ---
 import CastopodLogo from "assets:CastopodLogo";
+import CastopodIcon from "assets:CastopodIcon";
 import { Icon } from "astro-icon";
 
 import XElement from "astro-xelement";
@@ -26,9 +27,10 @@ const toggleMobileMenu = () => {
 <nav class="px-4 bg-pine-800 md:px-0">
   <div class="container flex justify-between h-20">
     <div class="inline-flex items-center gap-x-6">
-      <a href="https://castopod.org/" class="relative -bottom-2" title="Home"
-        ><CastopodLogo className="h-10" /></a
-      >
+      <a href="https://castopod.org/" class="relative -bottom-2" title="Home">
+        <CastopodIcon className="h-8 -mt-2 block md:hidden" />
+        <CastopodLogo className="h-10 hidden md:block" />
+      </a>
       <a
         href="https://blog.castopod.org/"
         class="hidden font-semibold md:block hover:underline decoration-pine-500 decoration-2"

tailwind.config.js

@@ -29,12 +29,17 @@ module.exports = {
           800: "#00564A",
           900: "#003D0B",
         },
-        amber: {
-          50: "#FFF0EB",
-          100: "#FFD5C5",
-          500: "#FF6022",
-          800: "#B13200",
-          900: "#792200",
+        rose: {
+          50: "#fcf9f8",
+          100: "#fdeef2",
+          200: "#fbcfe4",
+          300: "#faa7cd",
+          400: "#fb6ea5",
+          500: "#fc437c",
+          600: "#f24664",
+          700: "#dd1f47",
+          800: "#b21a39",
+          900: "#8e162e",
         },
       },
     },