3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-04-30 10:46:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 More consistent styling

Browse source
This commit is contained in:
Luke Vella 2025-03-29 16:12:33 +00:00
parent d15cbd32d4
commit 377b0c60fb
No known key found for this signature in database
GPG key ID: 469CAD687F0D784C
4 changed files with 63 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
apps/landing/src/app/[locale]/layout.tsx
View file

@ -7,9 +7,11 @@ import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@rallly/ui/dropdown-menu"; } from "@rallly/ui/dropdown-menu";
import { Icon } from "@rallly/ui/icon";
import { Analytics } from "@vercel/analytics/react"; import { Analytics } from "@vercel/analytics/react";
import { MenuIcon } from "lucide-react"; import { MenuIcon } from "lucide-react";
import { domAnimation, LazyMotion } from "motion/react"; import { domAnimation, LazyMotion } from "motion/react";
@ -59,7 +61,7 @@ export default async function Root({
alt="rallly.co" alt="rallly.co"
/> />
</Link> </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"> <NavLink href="https://support.rallly.co/workflow/create">
<Trans <Trans
t={t} t={t}
@ -79,32 +81,34 @@ export default async function Root({
</nav> </nav>
</div> </div>
<div className="flex items-center gap-4 sm:gap-8"> <div className="flex items-center gap-4 sm:gap-8">
<Link <div className="hidden items-center gap-2 sm:flex">
href={linkToApp("/login")} <Button variant="ghost" asChild>
className="hover:text-primary text-muted-foreground hidden rounded text-sm font-medium hover:no-underline hover:underline-offset-2 lg:inline-flex" <Link href={linkToApp("/login")}>
> <Trans t={t} i18nKey="login" defaults="Login" />
<Trans t={t} i18nKey="login" defaults="Login" /> </Link>
</Link> </Button>
<Button <Button asChild variant="primary">
asChild <Link href={linkToApp("/register")}>
variant="primary" <Trans t={t} i18nKey="signUp" defaults="Sign up" />
className="rounded-full px-3" </Link>
> </Button>
<Link href={linkToApp("/register")}> </div>
<Trans t={t} i18nKey="signUp" defaults="Sign up" />
</Link>
</Button>
<div className="flex items-center justify-center lg:hidden"> <div className="flex items-center justify-center lg:hidden">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger> <DropdownMenuTrigger asChild>
<MenuIcon className="size-6" /> <Button size="sm" variant="ghost">
<Icon>
<MenuIcon />
</Icon>
</Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" sideOffset={16}> <DropdownMenuContent
className="w-48"
align="end"
sideOffset={16}
>
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link <Link href="https://support.rallly.co/workflow/create">
className="flex items-center gap-3 p-2 text-lg"
href="https://support.rallly.co/workflow/create"
>
<Trans <Trans
t={t} t={t}
i18nKey="howItWorks" i18nKey="howItWorks"
@ -113,38 +117,41 @@ export default async function Root({
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link <Link href="/pricing">
className="flex items-center gap-3 p-2 text-lg"
href="/pricing"
>
<Trans t={t} i18nKey="pricing" defaults="Pricing" /> <Trans t={t} i18nKey="pricing" defaults="Pricing" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link <Link href="/blog">
className="flex items-center gap-3 p-2 text-lg"
href="/blog"
>
<Trans t={t} i18nKey="blog" /> <Trans t={t} i18nKey="blog" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link <Link href="https://support.rallly.co">
className="flex items-center gap-3 p-2 text-lg"
href="https://support.rallly.co"
>
<Trans t={t} i18nKey="support" /> <Trans t={t} i18nKey="support" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem asChild> <DropdownMenuLabel className="space-y-2">
<Link <Button
className="flex items-center gap-3 p-2 text-lg" variant="secondary"
href={linkToApp("/login")} className="w-full"
asChild
> >
<Trans t={t} i18nKey="login" defaults="Login" /> <Link href={linkToApp("/login")}>
</Link> <Trans t={t} i18nKey="login" defaults="Login" />
</DropdownMenuItem> </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> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>

16
apps/landing/src/app/[locale]/nav-link.tsx
View file

@ -1,6 +1,7 @@
"use client"; "use client";
import { cn } from "@rallly/ui"; import { cn } from "@rallly/ui";
import { Button } from "@rallly/ui/button";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
@ -11,13 +12,12 @@ export const NavLink = ({
const pathname = usePathname(); const pathname = usePathname();
const isActive = pathname === props.href; const isActive = pathname === props.href;
return ( return (
<Link <Button
className={cn( className={cn(isActive ? "text-foreground bg-gray-200" : "", className)}
"inline-flex items-center gap-x-2.5 rounded text-sm font-medium", asChild
isActive ? "" : "hover:text-primary text-muted-foreground", variant="ghost"
className, >
)} <Link {...props} />
{...props} </Button>
/>
); );
}; };

7
apps/landing/src/components/home/hero.tsx
View file

@ -111,14 +111,11 @@ export const MarketingHero = ({
<div className="mt-8 flex flex-col items-center justify-center gap-4"> <div className="mt-8 flex flex-col items-center justify-center gap-4">
<Button <Button
size="lg" 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" variant="primary"
asChild asChild
> >
<Link href={linkToApp("/new")}> <Link href={linkToApp("/new")}>{callToAction}</Link>
{callToAction}
<ChevronRightIcon className="-ml-1 size-5 transition-transform group-active:translate-x-1" />
</Link>
</Button> </Button>
<p <p
className={cn( className={cn(

8
packages/ui/src/button.tsx
View file

@ -9,14 +9,14 @@ import { cn } from "./lib/utils";
const buttonVariants = cva( const buttonVariants = cva(
cn( 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", "focus:shadow-none focus-visible:ring-2 focus-visible:ring-ring",
), ),
{ {
variants: { variants: {
variant: { variant: {
primary: 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: destructive:
"focus:ring-offset-1 bg-destructive shadow-sm text-destructive-foreground active:bg-destructive border-destructive hover:bg-destructive/90", "focus:ring-offset-1 bg-destructive shadow-sm text-destructive-foreground active:bg-destructive border-destructive hover:bg-destructive/90",
default: default:
@ -29,8 +29,8 @@ const buttonVariants = cva(
}, },
size: { size: {
default: "h-9 pl-2.5 pr-3 gap-x-2 text-sm rounded-md", 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", sm: "h-8 text-sm px-2 gap-x-1.5 rounded-md",
lg: "h-12 text-base gap-x-3 px-4 rounded-md", lg: "h-12 text-base gap-x-3 px-4 rounded-lg",
}, },
}, },
defaultVariants: { defaultVariants: {