Skip to content

Commit 377b0c6

Browse files
lukevellalukevella
committed
💄 More consistent styling
1 parent d15cbd3 commit 377b0c6

File tree

4 files changed

+63
-59
lines changed

4 files changed

+63
-59
lines changed

‎apps/landing/src/app/[locale]/layout.tsx

+49-42
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import {
77
DropdownMenu,
88
DropdownMenuContent,
99
DropdownMenuItem,
10+
DropdownMenuLabel,
1011
DropdownMenuSeparator,
1112
DropdownMenuTrigger,
1213
} from "@rallly/ui/dropdown-menu";
14+
import { Icon } from "@rallly/ui/icon";
1315
import { Analytics } from "@vercel/analytics/react";
1416
import { MenuIcon } from "lucide-react";
1517
import { domAnimation, LazyMotion } from "motion/react";
@@ -59,7 +61,7 @@ export default async function Root({
5961
alt="rallly.co"
6062
/>
6163
</Link>
62-
<nav className="hidden items-center space-x-8 lg:flex">
64+
<nav className="hidden items-center gap-2 lg:flex">
6365
<NavLink href="https://support.rallly.co/workflow/create">
6466
<Trans
6567
t={t}
@@ -79,32 +81,34 @@ export default async function Root({
7981
</nav>
8082
</div>
8183
<div className="flex items-center gap-4 sm:gap-8">
82-
<Link
83-
href={linkToApp("/login")}
84-
className="hover:text-primary text-muted-foreground hidden rounded text-sm font-medium hover:no-underline hover:underline-offset-2 lg:inline-flex"
85-
>
86-
<Trans t={t} i18nKey="login" defaults="Login" />
87-
</Link>
88-
<Button
89-
asChild
90-
variant="primary"
91-
className="rounded-full px-3"
92-
>
93-
<Link href={linkToApp("/register")}>
94-
<Trans t={t} i18nKey="signUp" defaults="Sign up" />
95-
</Link>
96-
</Button>
84+
<div className="hidden items-center gap-2 sm:flex">
85+
<Button variant="ghost" asChild>
86+
<Link href={linkToApp("/login")}>
87+
<Trans t={t} i18nKey="login" defaults="Login" />
88+
</Link>
89+
</Button>
90+
<Button asChild variant="primary">
91+
<Link href={linkToApp("/register")}>
92+
<Trans t={t} i18nKey="signUp" defaults="Sign up" />
93+
</Link>
94+
</Button>
95+
</div>
9796
<div className="flex items-center justify-center lg:hidden">
9897
<DropdownMenu>
99-
<DropdownMenuTrigger>
100-
<MenuIcon className="size-6" />
98+
<DropdownMenuTrigger asChild>
99+
<Button size="sm" variant="ghost">
100+
<Icon>
101+
<MenuIcon />
102+
</Icon>
103+
</Button>
101104
</DropdownMenuTrigger>
102-
<DropdownMenuContent align="end" sideOffset={16}>
105+
<DropdownMenuContent
106+
className="w-48"
107+
align="end"
108+
sideOffset={16}
109+
>
103110
<DropdownMenuItem asChild>
104-
<Link
105-
className="flex items-center gap-3 p-2 text-lg"
106-
href="https://support.rallly.co/workflow/create"
107-
>
111+
<Link href="https://support.rallly.co/workflow/create">
108112
<Trans
109113
t={t}
110114
i18nKey="howItWorks"
@@ -113,38 +117,41 @@ export default async function Root({
113117
</Link>
114118
</DropdownMenuItem>
115119
<DropdownMenuItem asChild>
116-
<Link
117-
className="flex items-center gap-3 p-2 text-lg"
118-
href="/pricing"
119-
>
120+
<Link href="/pricing">
120121
<Trans t={t} i18nKey="pricing" defaults="Pricing" />
121122
</Link>
122123
</DropdownMenuItem>
123124
<DropdownMenuItem asChild>
124-
<Link
125-
className="flex items-center gap-3 p-2 text-lg"
126-
href="/blog"
127-
>
125+
<Link href="/blog">
128126
<Trans t={t} i18nKey="blog" />
129127
</Link>
130128
</DropdownMenuItem>
131129
<DropdownMenuItem asChild>
132-
<Link
133-
className="flex items-center gap-3 p-2 text-lg"
134-
href="https://support.rallly.co"
135-
>
130+
<Link href="https://support.rallly.co">
136131
<Trans t={t} i18nKey="support" />
137132
</Link>
138133
</DropdownMenuItem>
139134
<DropdownMenuSeparator />
140-
<DropdownMenuItem asChild>
141-
<Link
142-
className="flex items-center gap-3 p-2 text-lg"
143-
href={linkToApp("/login")}
135+
<DropdownMenuLabel className="space-y-2">
136+
<Button
137+
variant="secondary"
138+
className="w-full"
139+
asChild
144140
>
145-
<Trans t={t} i18nKey="login" defaults="Login" />
146-
</Link>
147-
</DropdownMenuItem>
141+
<Link href={linkToApp("/login")}>
142+
<Trans t={t} i18nKey="login" defaults="Login" />
143+
</Link>
144+
</Button>
145+
<Button variant="primary" className="w-full" asChild>
146+
<Link href={linkToApp("/register")}>
147+
<Trans
148+
t={t}
149+
i18nKey="signUp"
150+
defaults="Sign up"
151+
/>
152+
</Link>
153+
</Button>
154+
</DropdownMenuLabel>
148155
</DropdownMenuContent>
149156
</DropdownMenu>
150157
</div>

‎apps/landing/src/app/[locale]/nav-link.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import { cn } from "@rallly/ui";
4+
import { Button } from "@rallly/ui/button";
45
import Link from "next/link";
56
import { usePathname } from "next/navigation";
67

@@ -11,13 +12,12 @@ export const NavLink = ({
1112
const pathname = usePathname();
1213
const isActive = pathname === props.href;
1314
return (
14-
<Link
15-
className={cn(
16-
"inline-flex items-center gap-x-2.5 rounded text-sm font-medium",
17-
isActive ? "" : "hover:text-primary text-muted-foreground",
18-
className,
19-
)}
20-
{...props}
21-
/>
15+
<Button
16+
className={cn(isActive ? "text-foreground bg-gray-200" : "", className)}
17+
asChild
18+
variant="ghost"
19+
>
20+
<Link {...props} />
21+
</Button>
2222
);
2323
};

‎apps/landing/src/components/home/hero.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -111,14 +111,11 @@ export const MarketingHero = ({
111111
<div className="mt-8 flex flex-col items-center justify-center gap-4">
112112
<Button
113113
size="lg"
114-
className="group rounded-full px-5 hover:shadow-md active:shadow-sm"
114+
className="transition-all hover:shadow-md active:translate-y-1 active:shadow-none"
115115
variant="primary"
116116
asChild
117117
>
118-
<Link href={linkToApp("/new")}>
119-
{callToAction}
120-
<ChevronRightIcon className="-ml-1 size-5 transition-transform group-active:translate-x-1" />
121-
</Link>
118+
<Link href={linkToApp("/new")}>{callToAction}</Link>
122119
</Button>
123120
<p
124121
className={cn(

‎packages/ui/src/button.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import { cn } from "./lib/utils";
99

1010
const buttonVariants = cva(
1111
cn(
12-
"inline-flex border font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap border",
12+
"inline-flex border text-shadow font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap border",
1313
"focus:shadow-none focus-visible:ring-2 focus-visible:ring-ring",
1414
),
1515
{
1616
variants: {
1717
variant: {
1818
primary:
19-
"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",
19+
"focus:ring-offset-1 border-primary bg-primary hover:bg-primary-500 disabled:bg-gray-400 disabled:border-transparent text-primary-foreground shadow-sm",
2020
destructive:
2121
"focus:ring-offset-1 bg-destructive shadow-sm text-destructive-foreground active:bg-destructive border-destructive hover:bg-destructive/90",
2222
default:
@@ -29,8 +29,8 @@ const buttonVariants = cva(
2929
},
3030
size: {
3131
default: "h-9 pl-2.5 pr-3 gap-x-2 text-sm rounded-md",
32-
sm: "h-7 text-sm px-1.5 gap-x-1.5 rounded-md",
33-
lg: "h-12 text-base gap-x-3 px-4 rounded-md",
32+
sm: "h-8 text-sm px-2 gap-x-1.5 rounded-md",
33+
lg: "h-12 text-base gap-x-3 px-4 rounded-lg",
3434
},
3535
},
3636
defaultVariants: {

0 commit comments

Comments
 (0)