From 377b0c60fbfa39e0109b2f9c1f640f2684897f59 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Sat, 29 Mar 2025 16:12:33 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20More=20consistent=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/landing/src/app/[locale]/layout.tsx   | 91 ++++++++++++----------
 apps/landing/src/app/[locale]/nav-link.tsx | 16 ++--
 apps/landing/src/components/home/hero.tsx  |  7 +-
 packages/ui/src/button.tsx                 |  8 +-
 4 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/apps/landing/src/app/[locale]/layout.tsx b/apps/landing/src/app/[locale]/layout.tsx
index dbcbb1a7f..dc0a8579c 100644
--- a/apps/landing/src/app/[locale]/layout.tsx
+++ b/apps/landing/src/app/[locale]/layout.tsx
@@ -7,9 +7,11 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@rallly/ui/dropdown-menu";
+import { Icon } from "@rallly/ui/icon";
 import { Analytics } from "@vercel/analytics/react";
 import { MenuIcon } from "lucide-react";
 import { domAnimation, LazyMotion } from "motion/react";
@@ -59,7 +61,7 @@ export default async function Root({
                       alt="rallly.co"
                     />
                   </Link>
-                  <nav className="hidden items-center space-x-8 lg:flex">
+                  <nav className="hidden items-center gap-2 lg:flex">
                     <NavLink href="https://support.rallly.co/workflow/create">
                       <Trans
                         t={t}
@@ -79,32 +81,34 @@ export default async function Root({
                   </nav>
                 </div>
                 <div className="flex items-center gap-4 sm:gap-8">
-                  <Link
-                    href={linkToApp("/login")}
-                    className="hover:text-primary text-muted-foreground hidden rounded text-sm font-medium hover:no-underline hover:underline-offset-2 lg:inline-flex"
-                  >
-                    <Trans t={t} i18nKey="login" defaults="Login" />
-                  </Link>
-                  <Button
-                    asChild
-                    variant="primary"
-                    className="rounded-full px-3"
-                  >
-                    <Link href={linkToApp("/register")}>
-                      <Trans t={t} i18nKey="signUp" defaults="Sign up" />
-                    </Link>
-                  </Button>
+                  <div className="hidden items-center gap-2 sm:flex">
+                    <Button variant="ghost" asChild>
+                      <Link href={linkToApp("/login")}>
+                        <Trans t={t} i18nKey="login" defaults="Login" />
+                      </Link>
+                    </Button>
+                    <Button asChild variant="primary">
+                      <Link href={linkToApp("/register")}>
+                        <Trans t={t} i18nKey="signUp" defaults="Sign up" />
+                      </Link>
+                    </Button>
+                  </div>
                   <div className="flex items-center justify-center lg:hidden">
                     <DropdownMenu>
-                      <DropdownMenuTrigger>
-                        <MenuIcon className="size-6" />
+                      <DropdownMenuTrigger asChild>
+                        <Button size="sm" variant="ghost">
+                          <Icon>
+                            <MenuIcon />
+                          </Icon>
+                        </Button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end" sideOffset={16}>
+                      <DropdownMenuContent
+                        className="w-48"
+                        align="end"
+                        sideOffset={16}
+                      >
                         <DropdownMenuItem asChild>
-                          <Link
-                            className="flex items-center gap-3 p-2 text-lg"
-                            href="https://support.rallly.co/workflow/create"
-                          >
+                          <Link href="https://support.rallly.co/workflow/create">
                             <Trans
                               t={t}
                               i18nKey="howItWorks"
@@ -113,38 +117,41 @@ export default async function Root({
                           </Link>
                         </DropdownMenuItem>
                         <DropdownMenuItem asChild>
-                          <Link
-                            className="flex items-center gap-3 p-2 text-lg"
-                            href="/pricing"
-                          >
+                          <Link href="/pricing">
                             <Trans t={t} i18nKey="pricing" defaults="Pricing" />
                           </Link>
                         </DropdownMenuItem>
                         <DropdownMenuItem asChild>
-                          <Link
-                            className="flex items-center gap-3 p-2 text-lg"
-                            href="/blog"
-                          >
+                          <Link href="/blog">
                             <Trans t={t} i18nKey="blog" />
                           </Link>
                         </DropdownMenuItem>
                         <DropdownMenuItem asChild>
-                          <Link
-                            className="flex items-center gap-3 p-2 text-lg"
-                            href="https://support.rallly.co"
-                          >
+                          <Link href="https://support.rallly.co">
                             <Trans t={t} i18nKey="support" />
                           </Link>
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
-                        <DropdownMenuItem asChild>
-                          <Link
-                            className="flex items-center gap-3 p-2 text-lg"
-                            href={linkToApp("/login")}
+                        <DropdownMenuLabel className="space-y-2">
+                          <Button
+                            variant="secondary"
+                            className="w-full"
+                            asChild
                           >
-                            <Trans t={t} i18nKey="login" defaults="Login" />
-                          </Link>
-                        </DropdownMenuItem>
+                            <Link href={linkToApp("/login")}>
+                              <Trans t={t} i18nKey="login" defaults="Login" />
+                            </Link>
+                          </Button>
+                          <Button variant="primary" className="w-full" asChild>
+                            <Link href={linkToApp("/register")}>
+                              <Trans
+                                t={t}
+                                i18nKey="signUp"
+                                defaults="Sign up"
+                              />
+                            </Link>
+                          </Button>
+                        </DropdownMenuLabel>
                       </DropdownMenuContent>
                     </DropdownMenu>
                   </div>
diff --git a/apps/landing/src/app/[locale]/nav-link.tsx b/apps/landing/src/app/[locale]/nav-link.tsx
index cbc07d447..2af6ed722 100644
--- a/apps/landing/src/app/[locale]/nav-link.tsx
+++ b/apps/landing/src/app/[locale]/nav-link.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@rallly/ui";
+import { Button } from "@rallly/ui/button";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
@@ -11,13 +12,12 @@ export const NavLink = ({
   const pathname = usePathname();
   const isActive = pathname === props.href;
   return (
-    <Link
-      className={cn(
-        "inline-flex items-center gap-x-2.5 rounded text-sm font-medium",
-        isActive ? "" : "hover:text-primary text-muted-foreground",
-        className,
-      )}
-      {...props}
-    />
+    <Button
+      className={cn(isActive ? "text-foreground bg-gray-200" : "", className)}
+      asChild
+      variant="ghost"
+    >
+      <Link {...props} />
+    </Button>
   );
 };
diff --git a/apps/landing/src/components/home/hero.tsx b/apps/landing/src/components/home/hero.tsx
index dedfc4737..cfe78470d 100644
--- a/apps/landing/src/components/home/hero.tsx
+++ b/apps/landing/src/components/home/hero.tsx
@@ -111,14 +111,11 @@ export const MarketingHero = ({
         <div className="mt-8 flex flex-col items-center justify-center gap-4">
           <Button
             size="lg"
-            className="group rounded-full px-5 hover:shadow-md active:shadow-sm"
+            className="transition-all hover:shadow-md active:translate-y-1 active:shadow-none"
             variant="primary"
             asChild
           >
-            <Link href={linkToApp("/new")}>
-              {callToAction}
-              <ChevronRightIcon className="-ml-1 size-5 transition-transform group-active:translate-x-1" />
-            </Link>
+            <Link href={linkToApp("/new")}>{callToAction}</Link>
           </Button>
           <p
             className={cn(
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index 9ec902c74..1c1b25180 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -9,14 +9,14 @@ import { cn } from "./lib/utils";
 
 const buttonVariants = cva(
   cn(
-    "inline-flex border font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap border",
+    "inline-flex border text-shadow font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap border",
     "focus:shadow-none focus-visible:ring-2 focus-visible:ring-ring",
   ),
   {
     variants: {
       variant: {
         primary:
-          "focus:ring-offset-1 border-primary-700 bg-primary hover:bg-primary-500 disabled:bg-gray-400 disabled:border-transparent text-primary-foreground shadow-sm",
+          "focus:ring-offset-1 border-primary bg-primary hover:bg-primary-500 disabled:bg-gray-400 disabled:border-transparent text-primary-foreground shadow-sm",
         destructive:
           "focus:ring-offset-1 bg-destructive shadow-sm text-destructive-foreground active:bg-destructive border-destructive hover:bg-destructive/90",
         default:
@@ -29,8 +29,8 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 pl-2.5 pr-3 gap-x-2 text-sm rounded-md",
-        sm: "h-7 text-sm px-1.5 gap-x-1.5 rounded-md",
-        lg: "h-12 text-base gap-x-3 px-4 rounded-md",
+        sm: "h-8 text-sm px-2 gap-x-1.5 rounded-md",
+        lg: "h-12 text-base gap-x-3 px-4 rounded-lg",
       },
     },
     defaultVariants: {