misc

Author: zcesur

lib/algora_web/components/banner.ex

@@ -9,13 +9,13 @@ defmodule AlgoraWeb.Components.Banner do
 
   def banner(assigns) do
     ~H"""
-    <div class="group flex items-center gap-x-6 bg-emerald-600 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
+    <div class="group flex items-center gap-x-6 bg-emerald-600 px-6 py-1.5 sm:px-3.5 sm:before:flex-1 whitespace-nowrap">
       <p class="text-sm/6 text-foreground">
         <.link
           href={Constants.get(:github_repo_url)}
           rel="noopener"
           target="_blank"
-          class="font-medium"
+          class="font-semibold"
         >
           <strong class="font-semibold">🎉 Algora is now open source!</strong><svg
             viewBox="0 0 2 2"

lib/algora_web/components/header.ex

@@ -21,7 +21,7 @@ defmodule AlgoraWeb.Components.Header do
     <header class="absolute inset-x-0 top-0 z-50">
       <AlgoraWeb.Components.Banner.banner />
       <nav
-        class="-mt-4 mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
+        class="-mt-3 mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
         aria-label="Global"
       >
         <div class="flex">
@@ -68,8 +68,9 @@ defmodule AlgoraWeb.Components.Header do
                 <span class="hidden xl:block text-foreground/80 group-hover:text-foreground">
                   Star
                 </span>
-                <span class="font-semibold text-foreground/90 group-hover:text-foreground">
+                <span class="font-semibold text-amber-300 flex items-center gap-1">
                   {Algora.Stargazer.count()}
+                  <.icon name="tabler-star-filled" class="h-3 w-3 shrink-0" />
                 </span>
               </div>
             </div>
@@ -129,8 +130,9 @@ defmodule AlgoraWeb.Components.Header do
                     class="mr-2 h-5 shrink-0 justify-start text-foreground/80 group-hover:text-foreground transition"
                   />
                   <span class="mr-1">Star</span>
-                  <span class="font-semibold text-foreground/80 group-hover:text-foreground">
+                  <span class="font-semibold text-amber-300 flex items-center gap-1">
                     {Algora.Stargazer.count()}
+                    <.icon name="tabler-star-filled" class="h-3 w-3 shrink-0" />
                   </span>
                 </.button>
                 <.button navigate={~p"/auth/signup"} class="w-full">

lib/algora_web/components/layouts/user.html.heex

@@ -85,8 +85,9 @@
                   class="mr-2 h-5 shrink-0 justify-start text-foreground/80 group-hover:text-foreground transition"
                 />
                 <span class="mr-1">Star</span>
-                <span class="font-semibold text-foreground/80 group-hover:text-foreground">
+                <span class="font-semibold text-amber-300 flex items-center gap-1">
                   {Algora.Stargazer.count()}
+                  <.icon name="tabler-star-filled" class="h-3 w-3 shrink-0" />
                 </span>
               </.button>
               <.button :if={!@current_user.handle} navigate={~p"/auth/signup"} class="w-full">
@@ -241,8 +242,9 @@
             <div class="flex w-full items-center justify-center gap-x-1">
               <AlgoraWeb.Components.Logos.github class="mr-0.5 h-5 shrink-0 justify-start text-gray-300 transition" />
               <span class="hidden sm:block">Star</span>
-              <span class="font-semibold text-gray-300">
+              <span class="font-semibold text-amber-300 flex items-center gap-1">
                 {Algora.Stargazer.count()}
+                <.icon name="tabler-star-filled" class="h-3 w-3 shrink-0" />
               </span>
             </div>
           </div>

lib/algora_web/live/home_live.ex

@@ -186,7 +186,7 @@ defmodule AlgoraWeb.HomeLive do
       <main class="bg-black relative overflow-hidden">
         <section class="relative isolate min-h-[100svh] bg-gradient-to-b from-background to-black">
           <.pattern />
-          <div class="mx-auto max-w-7xl pt-24 pb-12 xl:pt-20">
+          <div class="mx-auto max-w-7xl pt-24 pb-12 xl:pt-24">
             <div class="mx-auto lg:mx-0 lg:flex lg:max-w-none">
               <div class={
                 classes([