Make nav buttons readable over dark content

resources/views/components/bifrost-button.blade.php

@@ -4,39 +4,6 @@
 
 <a
     href="https://bifrost.nativephp.com/"
-    x-data="{ tl: null, items: [] }"
-    x-init="
-        $nextTick(() => {
-            this.items = Array.from($refs.textContainer.children);
-            if (this.items.length > 1) {
-                gsap.set(this.items, { autoAlpha: 0, y: 10 });
-                gsap.set(this.items[0], { autoAlpha: 1, y: 0 });
-
-                const hold = 0.7;
-                this.tl = gsap.timeline({ repeat: -1 });
-
-                for (let i = 0; i < this.items.length; i++) {
-                    const curr = this.items[i];
-                    const next = this.items[(i + 1) % this.items.length];
-
-                    this.tl.to(curr, { duration: 0.5, autoAlpha: 0, y: -10, ease: 'circ.inOut' }, `+=${hold}`)
-                           .to(next, { duration: 0.5, autoAlpha: 1, y: 0, ease: 'circ.inOut' }, '<');
-                }
-            }
-        })
-    "
-    @mouseenter="
-        if (tl) {
-            tl.pause();
-            gsap.to(items, { autoAlpha: 0, y: -10, duration: 0.2 });
-            gsap.to(items[0], { autoAlpha: 1, y: 0, duration: 0.2 });
-        }
-    "
-    @mouseleave="
-        if (tl) {
-            tl.restart();
-        }
-    "
     @class([
         'group relative z-0 inline-flex items-center overflow-hidden rounded-full bg-gray-200 transition duration-200 will-change-transform hover:scale-x-105 dark:bg-slate-800',
 
@@ -61,29 +28,5 @@ class="absolute inset-0.5 rounded-full bg-white dark:bg-slate-950"
         class="absolute bottom-0 left-1/2 h-1/3 w-4/5 -translate-x-1/2 rounded-full bg-indigo-400/15 opacity-50 blur-md transition-all duration-500 group-hover:h-2/3 group-hover:opacity-100"
         aria-hidden="true"
     ></div>
-    <span
-        x-ref="textContainer"
-        class="inline-grid font-medium"
-    >
-        <span
-            class="self-center justify-self-center whitespace-nowrap [grid-area:1/-1]"
-        >
-            Try Bifrost!
-        </span>
-        <span
-            class="self-center justify-self-center whitespace-nowrap [grid-area:1/-1]"
-        >
-            Build
-        </span>
-        <span
-            class="self-center justify-self-center whitespace-nowrap [grid-area:1/-1]"
-        >
-            Distribute
-        </span>
-        <span
-            class="self-center justify-self-center whitespace-nowrap [grid-area:1/-1]"
-        >
-            {{ $small ? 'Ship' : 'Ship it!' }}
-        </span>
-    </span>
+    <span class="relative font-medium">Bifrost</span>
 </a>

resources/views/components/navigation-bar.blade.php

@@ -81,23 +81,23 @@ class="-mt-px size-3.5"
             {{-- Ultra link (desktop only) --}}
             <a
                 href="{{ route('pricing') }}"
-                class="hidden items-center gap-1.5 rounded-full bg-orange-500/10 px-3 py-1.5 text-sm font-medium text-orange-600 transition duration-200 hover:bg-orange-500/20 lg:inline-flex dark:text-orange-400 dark:hover:bg-orange-500/20"
+                class="hidden items-center rounded-full bg-zinc-200/60 px-3 py-2 text-sm transition duration-200 hover:bg-zinc-200 lg:inline-flex dark:bg-slate-950/30 dark:ring-1 dark:ring-slate-700/50 dark:ring-inset dark:hover:bg-cloud/70"
             >
                 Ultra
             </a>
 
             {{-- Course link (desktop only) --}}
             <a
                 href="{{ route('course') }}"
-                class="hidden items-center gap-1.5 rounded-full bg-emerald-500/10 px-3 py-1.5 text-sm font-medium text-emerald-600 transition duration-200 hover:bg-emerald-500/20 lg:inline-flex dark:text-emerald-400 dark:hover:bg-emerald-500/20"
+                class="hidden items-center rounded-full bg-zinc-200/60 px-3 py-2 text-sm transition duration-200 hover:bg-zinc-200 lg:inline-flex dark:bg-slate-950/30 dark:ring-1 dark:ring-slate-700/50 dark:ring-inset dark:hover:bg-cloud/70"
             >
                 Masterclass
             </a>
 
             {{-- Build link (desktop only) --}}
             <a
                 href="{{ route('build-my-app') }}"
-                class="hidden items-center gap-1.5 rounded-full bg-violet-500/10 px-3 py-1.5 text-sm font-medium text-violet-600 transition duration-200 hover:bg-violet-500/20 lg:inline-flex dark:text-violet-400 dark:hover:bg-violet-500/20"
+                class="hidden items-center rounded-full bg-zinc-200/60 px-3 py-2 text-sm transition duration-200 hover:bg-zinc-200 lg:inline-flex dark:bg-slate-950/30 dark:ring-1 dark:ring-slate-700/50 dark:ring-inset dark:hover:bg-cloud/70"
             >
                 Build
             </a>

tests/Feature/NavigationBarTest.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace Tests\Feature;
+
+use DOMDocument;
+use DOMXPath;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use PHPUnit\Framework\Attributes\Test;
+use Tests\TestCase;
+
+class NavigationBarTest extends TestCase
+{
+    use RefreshDatabase;
+
+    #[Test]
+    public function the_bifrost_button_just_says_bifrost(): void
+    {
+        foreach (['<x-bifrost-button />', '<x-bifrost-button small />'] as $template) {
+            $button = $this->blade($template);
+
+            $this->assertSame('Bifrost', trim(strip_tags((string) $button)));
+
+            $button->assertDontSee('gsap', escape: false);
+        }
+    }
+
+    /**
+     * Ultra, Masterclass and Build used to be tinted, see-through pills that
+     * lost their contrast whenever the sticky nav floated over dark content.
+     * They now share the resting background of the Mobile and Desktop dropdown
+     * buttons, so the expected classes are read off the Mobile dropdown itself.
+     */
+    #[Test]
+    public function the_desktop_nav_links_share_the_device_dropdown_background(): void
+    {
+        $dom = new DOMDocument;
+        libxml_use_internal_errors(true);
+        $dom->loadHTML('<?xml encoding="utf-8" ?>'.$this->get('/')->assertOk()->getContent());
+        libxml_clear_errors();
+
+        $xpath = new DOMXPath($dom);
+
+        $dropdownClasses = $xpath->query('//button[@id="mobile-dropdown-btn"]')->item(0)?->getAttribute(':class');
+
+        $this->assertSame(
+            1,
+            preg_match("/'([^']+)':\s*!open/", (string) $dropdownClasses, $closedDropdown),
+            'Could not read the resting background of the Mobile dropdown button.',
+        );
+
+        $expectedClasses = preg_split('/\s+/', $closedDropdown[1], flags: PREG_SPLIT_NO_EMPTY);
+
+        $links = [
+            'Ultra' => route('pricing'),
+            'Masterclass' => route('course'),
+            'Build' => route('build-my-app'),
+        ];
+
+        foreach ($links as $label => $href) {
+            $link = $xpath->query("//nav[@data-site-nav]/div/div/a[@href='{$href}']")->item(0);
+
+            $this->assertNotNull($link, "The {$label} link is missing from the nav bar.");
+            $this->assertSame($label, trim($link->textContent));
+
+            $linkClasses = preg_split('/\s+/', $link->getAttribute('class'), flags: PREG_SPLIT_NO_EMPTY);
+
+            $this->assertSame(
+                [],
+                array_values(array_diff($expectedClasses, $linkClasses)),
+                "The {$label} link should use the same background as the Mobile and Desktop dropdowns.",
+            );
+        }
+    }
+}