mirror of
https://github.com/lukevella/rallly.git
synced 2025-04-29 18:26:34 +02:00
💄 More consistent styling
This commit is contained in:
Luke Vella
parent
d15cbd32d4
commit
377b0c60fb
4 changed files with 63 additions and 59 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue