3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-07-12 14:07:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎨 Sort classes (#1750)

Browse source
This commit is contained in:
Luke Vella 2025-06-03 09:24:33 +01:00 • committed by GitHub
parent af7b0a82d1
commit dcc41eb0f1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
120 changed files with 374 additions and 365 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/landing/src/app/[locale]/(main)/blog/[slug]/page.tsx
View file

@ -24,7 +24,7 @@ export default async function Page(props: {
<div> <div>
<nav className="mb-2"> <nav className="mb-2">
<Link <Link
className="text-muted-foreground hover:text-primary inline-flex items-center gap-x-2 text-sm font-medium" className="inline-flex items-center gap-x-2 font-medium text-muted-foreground text-sm hover:text-primary"
href="/blog" href="/blog"
> >
<ArrowLeftIcon className="size-4" /> All Posts <ArrowLeftIcon className="size-4" /> All Posts
@ -47,7 +47,7 @@ export default async function Page(props: {
<div className="font-medium leading-none">Luke Vella</div> <div className="font-medium leading-none">Luke Vella</div>
<div> <div>
<Link <Link
className="text-muted-foreground hover:text-primary text-sm" className="text-muted-foreground text-sm hover:text-primary"
href="https://twitter.com/imlukevella" href="https://twitter.com/imlukevella"
> >
@imlukevella @imlukevella

2
apps/landing/src/app/[locale]/(main)/blog/layout.tsx
View file

@ -18,7 +18,7 @@ export default function BlogLayout({
</div> </div>
<div> <div>
<div className="font-medium">Want to stay up to date?</div> <div className="font-medium">Want to stay up to date?</div>
<div className="text-sm text-gray-500"> <div className="text-gray-500 text-sm">
Subscribe to our newsletter to get updates on new features and Subscribe to our newsletter to get updates on new features and
releases. releases.
</div> </div>

2
apps/landing/src/app/[locale]/(main)/blog/page.tsx
View file

@ -21,7 +21,7 @@ export default async function Page(props: {
return ( return (
<section className="space-y-12"> <section className="space-y-12">
<header className="sm:p-6"> <header className="sm:p-6">
<h1 className="text-4xl font-bold tracking-tight"> <h1 className="font-bold text-4xl tracking-tight">
<Trans <Trans
t={t} t={t}
ns="blog" ns="blog"

6
apps/landing/src/app/[locale]/(main)/blog/post-preview.tsx
View file

@ -18,12 +18,12 @@ export const PostPreview = ({ title, date, excerpt, slug }: Props) => {
return ( return (
<article className="flex flex-col gap-2 sm:flex-row sm:gap-8"> <article className="flex flex-col gap-2 sm:flex-row sm:gap-8">
<div> <div>
<div className="text-muted-foreground w-48 pt-1 sm:text-right"> <div className="w-48 pt-1 text-muted-foreground sm:text-right">
<time dateTime={date}>{dayjs(date).format("LL")}</time> <time dateTime={date}>{dayjs(date).format("LL")}</time>
</div> </div>
</div> </div>
<div className="grow"> <div className="grow">
<h3 className="mb-3 text-lg font-bold tracking-tight"> <h3 className="mb-3 font-bold text-lg tracking-tight">
<Link <Link
locale="en" locale="en"
as={`/blog/${slug}`} as={`/blog/${slug}`}
@ -33,7 +33,7 @@ export const PostPreview = ({ title, date, excerpt, slug }: Props) => {
{title} {title}
</Link> </Link>
</h3> </h3>
<p className="mb-4 text-lg leading-relaxed text-gray-600">{excerpt}</p> <p className="mb-4 text-gray-600 text-lg leading-relaxed">{excerpt}</p>
</div> </div>
</article> </article>
); );

16
apps/landing/src/app/[locale]/(main)/footer.tsx
View file

@ -68,7 +68,7 @@ export const Footer: React.FunctionComponent = () => {
height={30} height={30}
alt="Rallly" alt="Rallly"
/> />
<div className="my-8 text-sm text-gray-500"> <div className="my-8 text-gray-500 text-sm">
<p className="mb-4 leading-relaxed"> <p className="mb-4 leading-relaxed">
<Trans <Trans
ns="common" ns="common"
@ -76,7 +76,7 @@ export const Footer: React.FunctionComponent = () => {
components={{ components={{
a: ( a: (
<Link <Link
className="font-normal leading-loose text-gray-500 underline hover:text-gray-800 hover:underline" className="font-normal text-gray-500 leading-loose underline hover:text-gray-800 hover:underline"
href="https://support.rallly.co/contribute/donations" href="https://support.rallly.co/contribute/donations"
/> />
), ),
@ -90,7 +90,7 @@ export const Footer: React.FunctionComponent = () => {
components={{ components={{
a: ( a: (
<Link <Link
className="font-normal leading-loose text-gray-500 underline hover:text-gray-800 hover:underline" className="font-normal text-gray-500 leading-loose underline hover:text-gray-800 hover:underline"
href="https://twitter.com/imlukevella" href="https://twitter.com/imlukevella"
/> />
), ),
@ -102,7 +102,7 @@ export const Footer: React.FunctionComponent = () => {
<a <a
target="_blank" target="_blank"
href="https://twitter.com/ralllyco" href="https://twitter.com/ralllyco"
className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline" className="text-gray-500 text-sm hover:text-primary-600 hover:no-underline"
rel="noreferrer noopener" rel="noreferrer noopener"
> >
<TwitterIcon className="size-5" /> <TwitterIcon className="size-5" />
@ -110,7 +110,7 @@ export const Footer: React.FunctionComponent = () => {
<a <a
target="_blank" target="_blank"
href="https://discord.gg/uzg4ZcHbuM" href="https://discord.gg/uzg4ZcHbuM"
className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline" className="text-gray-500 text-sm hover:text-primary-600 hover:no-underline"
rel="noreferrer noopener" rel="noreferrer noopener"
> >
<DiscordIcon className="size-5" /> <DiscordIcon className="size-5" />
@ -118,7 +118,7 @@ export const Footer: React.FunctionComponent = () => {
<a <a
target="_blank" target="_blank"
href="https://www.linkedin.com/company/rallly" href="https://www.linkedin.com/company/rallly"
className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline" className="text-gray-500 text-sm hover:text-primary-600 hover:no-underline"
rel="noreferrer noopener" rel="noreferrer noopener"
> >
<LinkedinIcon className="size-5" /> <LinkedinIcon className="size-5" />
@ -126,7 +126,7 @@ export const Footer: React.FunctionComponent = () => {
<a <a
target="_blank" target="_blank"
href="https://github.com/lukevella/rallly" href="https://github.com/lukevella/rallly"
className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline" className="text-gray-500 text-sm hover:text-primary-600 hover:no-underline"
rel="noreferrer noopener" rel="noreferrer noopener"
> >
<GithubIcon className="size-5" /> <GithubIcon className="size-5" />
@ -261,7 +261,7 @@ export const Footer: React.FunctionComponent = () => {
</div> </div>
<a <a
href="https://support.rallly.co/contribute/translations" href="https://support.rallly.co/contribute/translations"
className="hover:border-primary-600 hover:text-primary-600 inline-flex items-center rounded-md border px-3 py-2 text-xs text-gray-500" className="inline-flex items-center rounded-md border px-3 py-2 text-gray-500 text-xs hover:border-primary-600 hover:text-primary-600"
> >
<LanguagesIcon className="mr-2 size-5" /> <LanguagesIcon className="mr-2 size-5" />
<Trans ns="common" i18nKey="volunteerTranslator" /> &rarr; <Trans ns="common" i18nKey="volunteerTranslator" /> &rarr;

2
apps/landing/src/app/[locale]/(main)/layout.tsx
View file

@ -42,7 +42,7 @@ export default async function Root(props: {
const { t } = await getTranslation(locale, "common"); const { t } = await getTranslation(locale, "common");
return ( return (
<div className="mx-auto relative z-10 flex min-h-full w-full max-w-7xl flex-col space-y-8 p-4 sm:p-8"> <div className="relative z-10 mx-auto flex min-h-full w-full max-w-7xl flex-col space-y-8 p-4 sm:p-8">
<header className="flex w-full items-center"> <header className="flex w-full items-center">
<div className="flex grow items-center gap-x-12"> <div className="flex grow items-center gap-x-12">
<Link className="inline-block rounded" href="/"> <Link className="inline-block rounded" href="/">

2
apps/landing/src/app/[locale]/(main)/nav-link.tsx
View file

@ -13,7 +13,7 @@ export const NavLink = ({
const isActive = pathname === props.href; const isActive = pathname === props.href;
return ( return (
<Button <Button
className={cn(isActive ? "text-foreground bg-gray-200" : "", className)} className={cn(isActive ? "bg-gray-200 text-foreground" : "", className)}
asChild asChild
variant="ghost" variant="ghost"
> >

6
apps/landing/src/app/[locale]/(main)/open-source-banner.tsx
View file

@ -23,7 +23,7 @@ export function OpenSourceBanner() {
return ( return (
<div <div
className={cn( className={cn(
"bg-gray-800 z-50 transition-transform h-11 overflow-hidden hover:underline fixed top-0 w-full flex items-center text-sm rounded-none text-gray-100 justify-center gap-4", "fixed top-0 z-50 flex h-11 w-full items-center justify-center gap-4 overflow-hidden rounded-none bg-gray-800 text-gray-100 text-sm transition-transform hover:underline",
{ {
"translate-y-0": visible, "translate-y-0": visible,
"-translate-y-full": !visible, "-translate-y-full": !visible,
@ -34,13 +34,13 @@ export function OpenSourceBanner() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
href="https://github.com/lukevella/rallly" href="https://github.com/lukevella/rallly"
className="flex absolute inset-0 justify-center items-center gap-3 px-4" className="absolute inset-0 flex items-center justify-center gap-3 px-4"
> >
<GithubIcon className="size-4" /> <GithubIcon className="size-4" />
<span className="truncate"> <span className="truncate">
<Trans i18nKey="openSource" defaults="We're Open Source!" /> <Trans i18nKey="openSource" defaults="We're Open Source!" />
</span> </span>
<span className="w-px h-4 bg-gray-500" /> <span className="h-4 w-px bg-gray-500" />
<span className="truncate"> <span className="truncate">
<Trans i18nKey="starOnGitHub" defaults="Star us on GitHub" /> <Trans i18nKey="starOnGitHub" defaults="Star us on GitHub" />
</span> </span>

28
apps/landing/src/app/[locale]/(main)/pricing/page.tsx
View file

@ -11,7 +11,7 @@ import { PriceTables } from "./pricing-table";
const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => { const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
return ( return (
<section> <section>
<h2 className="text-2xl font-bold"> <h2 className="font-bold text-2xl">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -19,7 +19,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
defaults="Frequently Asked Questions" defaults="Frequently Asked Questions"
/> />
</h2> </h2>
<h3 className="mb-2 mt-6 text-lg font-bold"> <h3 className="mt-6 mb-2 font-bold text-lg">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -27,7 +27,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
defaults="Can I use Rallly for free?" defaults="Can I use Rallly for free?"
/> />
</h3> </h3>
<p className="col-span-2 text-sm leading-relaxed text-slate-600"> <p className="col-span-2 text-slate-600 text-sm leading-relaxed">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -35,7 +35,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
defaults="Yes, most of Rallly's features are free and many users will never need to pay for anything. However, there are some features that are only available to paying customers. These features are designed to help you get the most out of Rallly." defaults="Yes, most of Rallly's features are free and many users will never need to pay for anything. However, there are some features that are only available to paying customers. These features are designed to help you get the most out of Rallly."
/> />
</p> </p>
<h3 className="mb-2 mt-6 text-lg font-bold"> <h3 className="mt-6 mb-2 font-bold text-lg">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -43,7 +43,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
defaults="Why should I upgrade?" defaults="Why should I upgrade?"
/> />
</h3> </h3>
<p className="col-span-2 text-sm leading-relaxed text-slate-600"> <p className="col-span-2 text-slate-600 text-sm leading-relaxed">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -51,7 +51,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
defaults="Upgrading to a paid plan makes sense if you use Rallly often or use it for work. The current subscription rate is a special early adopter rate and will increase in the future. By upgrading now, you will get early access to new, high-quality scheduling tools as they are released and lock in your subscription rate so you won't be affected by future price increases." defaults="Upgrading to a paid plan makes sense if you use Rallly often or use it for work. The current subscription rate is a special early adopter rate and will increase in the future. By upgrading now, you will get early access to new, high-quality scheduling tools as they are released and lock in your subscription rate so you won't be affected by future price increases."
/> />
</p> </p>
<h3 className="mb-2 mt-6 text-lg font-bold"> <h3 className="mt-6 mb-2 font-bold text-lg">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -59,7 +59,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
defaults="When does a poll become inactive?" defaults="When does a poll become inactive?"
/> />
</h3> </h3>
<p className="col-span-2 text-sm leading-relaxed text-slate-600"> <p className="col-span-2 text-slate-600 text-sm leading-relaxed">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -67,7 +67,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
defaults="Polls become inactive when all date options are in the past AND the poll has not been accessed for over 30 days. Inactive polls are automatically deleted if you do not have a paid subscription." defaults="Polls become inactive when all date options are in the past AND the poll has not been accessed for over 30 days. Inactive polls are automatically deleted if you do not have a paid subscription."
/> />
</p> </p>
<h3 className="mb-2 mt-6 text-lg font-bold"> <h3 className="mt-6 mb-2 font-bold text-lg">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -75,7 +75,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
defaults="How do I upgrade to a paid plan?" defaults="How do I upgrade to a paid plan?"
/> />
</h3> </h3>
<p className="col-span-2 text-sm leading-relaxed text-slate-600"> <p className="col-span-2 text-slate-600 text-sm leading-relaxed">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -93,7 +93,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
/> />
</p> </p>
<h3 className="mb-2 mt-6 text-lg font-bold"> <h3 className="mt-6 mb-2 font-bold text-lg">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -101,7 +101,7 @@ const FAQ = async ({ t }: { t: TFunction<"pricing"> }) => {
defaults="How do I cancel my subscription?" defaults="How do I cancel my subscription?"
/> />
</h3> </h3>
<p className="col-span-2 text-sm leading-relaxed text-slate-600"> <p className="col-span-2 text-slate-600 text-sm leading-relaxed">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -130,7 +130,7 @@ export default async function Page(props: {
return ( return (
<article className="mx-auto max-w-3xl space-y-6"> <article className="mx-auto max-w-3xl space-y-6">
<header className="space-y-2 sm:p-6 sm:text-center"> <header className="space-y-2 sm:p-6 sm:text-center">
<h1 className="text-2xl font-bold tracking-tight sm:text-4xl"> <h1 className="font-bold text-2xl tracking-tight sm:text-4xl">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -138,7 +138,7 @@ export default async function Page(props: {
defaults="Get started for free" defaults="Get started for free"
/> />
</h1> </h1>
<p className="text-muted-foreground text-lg"> <p className="text-lg text-muted-foreground">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"
@ -156,7 +156,7 @@ export default async function Page(props: {
<TrendingUpIcon className="size-6" /> <TrendingUpIcon className="size-6" />
</div> </div>
<div> <div>
<h3 className="mb-2 text-sm font-bold"> <h3 className="mb-2 font-bold text-sm">
<Trans <Trans
t={t} t={t}
ns="pricing" ns="pricing"

2
apps/landing/src/app/[locale]/(main)/terms-of-use/page.tsx
View file

@ -58,7 +58,7 @@ export default function TermsOfUse() {
<a href="mailto:support@rallly.co">support@rallly.co</a>. <a href="mailto:support@rallly.co">support@rallly.co</a>.
</p> </p>
<p className="text-sm font-semibold"> <p className="font-semibold text-sm">
Stack Snap Ltd. Stack Snap Ltd.
<br /> <br />
The Gallery 14 The Gallery 14

10
apps/landing/src/app/[locale]/licensing/thank-you/page.tsx
View file

@ -4,15 +4,15 @@ import Link from "next/link";
export default function LicensingThankYouPage() { export default function LicensingThankYouPage() {
return ( return (
<main className="p-4 sm:p-16 h-dvh flex flex-col sm:justify-center relative"> <main className="relative flex h-dvh flex-col p-4 sm:justify-center sm:p-16">
<div className="w-full relative z-10 max-w-2xl mx-auto space-y-6"> <div className="relative z-10 mx-auto w-full max-w-2xl space-y-6">
<div className="py-4"> <div className="py-4">
<Link className="inline-block rounded" href="/"> <Link className="inline-block rounded" href="/">
<Image src="/logo.svg" width={150} height={30} alt="rallly.co" /> <Image src="/logo.svg" width={150} height={30} alt="rallly.co" />
</Link> </Link>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<h1 className="text-2xl font-bold tracking-tight"> <h1 className="font-bold text-2xl tracking-tight">
<Trans <Trans
i18nKey="licensingThankYouTitle" i18nKey="licensingThankYouTitle"
defaults="Thank You for Your Purchase!" defaults="Thank You for Your Purchase!"
@ -27,7 +27,7 @@ export default function LicensingThankYouPage() {
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<h2 className="text-xl font-semibold"> <h2 className="font-semibold text-xl">
<Trans i18nKey="licensingThankYouLicense" defaults="Next Steps" /> <Trans i18nKey="licensingThankYouLicense" defaults="Next Steps" />
</h2> </h2>
<p className="text-gray-700 dark:text-gray-300"> <p className="text-gray-700 dark:text-gray-300">
@ -37,7 +37,7 @@ export default function LicensingThankYouPage() {
/> />
</p> </p>
<ul className="space-y-1 list-disc list-inside"> <ul className="list-inside list-disc space-y-1">
<li> <li>
<Link <Link
className="text-link" className="text-link"

4
apps/landing/src/components/blog/post-header.tsx
View file

@ -8,10 +8,10 @@ type Props = {
const PostHeader = ({ title, date }: Props) => { const PostHeader = ({ title, date }: Props) => {
return ( return (
<header> <header>
<h1 className="mb-2 text-center text-4xl font-bold tracking-tighter md:text-left md:leading-tight"> <h1 className="mb-2 text-center font-bold text-4xl tracking-tighter md:text-left md:leading-tight">
{title} {title}
</h1> </h1>
<div className="mb-2 text-center text-lg text-gray-400 sm:text-left"> <div className="mb-2 text-center text-gray-400 text-lg sm:text-left">
<DateFormatter dateString={date} /> <DateFormatter dateString={date} />
</div> </div>
</header> </header>

2
apps/landing/src/components/error-page.tsx
View file

@ -26,7 +26,7 @@ const ErrorPage: React.FunctionComponent<ComponentProps> = ({
{icon || ( {icon || (
<FileSearchIcon className="mb-4 inline-block size-24 text-gray-400" /> <FileSearchIcon className="mb-4 inline-block size-24 text-gray-400" />
)} )}
<div className="text-primary-600 mb-2 text-3xl font-bold"> <div className="mb-2 font-bold text-3xl text-primary-600">
{title} {title}
</div> </div>
<p className="text-gray-600">{description}</p> <p className="text-gray-600">{description}</p>

4
apps/landing/src/components/home/bonus-item.tsx
View file

@ -26,11 +26,11 @@ export const BonusItem = ({
> >
<div className="flex items-center justify-center gap-x-2.5 rounded-full border bg-gray-50 p-1 pr-6 shadow-sm"> <div className="flex items-center justify-center gap-x-2.5 rounded-full border bg-gray-50 p-1 pr-6 shadow-sm">
<span <span
className={cn("bg-primary rounded-full p-2 text-gray-50", className)} className={cn("rounded-full bg-primary p-2 text-gray-50", className)}
> >
{icon} {icon}
</span> </span>
<div className="text-sm font-semibold">{children}</div> <div className="font-semibold text-sm">{children}</div>
</div> </div>
</m.div> </m.div>
); );

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

@ -33,15 +33,15 @@ const Screenshot = () => {
style={{ style={{
backfaceVisibility: "hidden", backfaceVisibility: "hidden",
}} }}
className="shadow-huge relative z-20 mx-auto w-fit max-w-full rounded-full border bg-gray-800 px-3 py-2 text-sm text-gray-50 subpixel-antialiased" className="relative z-20 mx-auto w-fit max-w-full rounded-full border bg-gray-800 px-3 py-2 text-gray-50 text-sm subpixel-antialiased shadow-huge"
> >
<Trans <Trans
i18nKey="home:createPageLikeThis" i18nKey="home:createPageLikeThis"
defaults="Create a page like this in seconds!" defaults="Create a page like this in seconds!"
/> />
<span className="absolute left-1/2 top-full z-10 h-8 w-px -translate-x-1/2 bg-gray-800" /> <span className="-translate-x-1/2 absolute top-full left-1/2 z-10 h-8 w-px bg-gray-800" />
<span className="absolute -bottom-12 left-1/2 z-10 inline-block size-3 origin-right -translate-x-1/2 rounded-full bg-gray-800 ring-1 ring-gray-800 ring-offset-2" /> <span className="-bottom-12 -translate-x-1/2 absolute left-1/2 z-10 inline-block size-3 origin-right rounded-full bg-gray-800 ring-1 ring-gray-800 ring-offset-2" />
<span className="absolute -bottom-12 left-1/2 z-10 inline-block size-3 origin-right -translate-x-1/2 animate-ping rounded-full bg-gray-800 ring-1 ring-gray-800 ring-offset-2" /> <span className="-bottom-12 -translate-x-1/2 absolute left-1/2 z-10 inline-block size-3 origin-right animate-ping rounded-full bg-gray-800 ring-1 ring-gray-800 ring-offset-2" />
</m.div> </m.div>
<m.div <m.div
transition={{ transition={{
@ -55,7 +55,7 @@ const Screenshot = () => {
}} }}
initial="hidden" initial="hidden"
animate={isLoaded ? "visible" : "hidden"} animate={isLoaded ? "visible" : "hidden"}
className="shadow-huge mx-auto w-fit overflow-hidden rounded-md border" className="mx-auto w-fit overflow-hidden rounded-md border shadow-huge"
> >
<Image <Image
src="/static/images/hero-shot.png" src="/static/images/hero-shot.png"
@ -88,7 +88,7 @@ export const MarketingHero = ({
<Link <Link
locale="en" locale="en"
href="/blog/introducing-quick-create" href="/blog/introducing-quick-create"
className="group relative inline-flex items-center gap-x-2 rounded-full border bg-gray-50 py-1 pl-1 pr-4 text-sm leading-6 text-gray-600 hover:bg-white" className="group relative inline-flex items-center gap-x-2 rounded-full border bg-gray-50 py-1 pr-4 pl-1 text-gray-600 text-sm leading-6 hover:bg-white"
> >
<Badge variant="secondary"> <Badge variant="secondary">
<Trans ns="home" i18nKey="new" defaults="New" /> <Trans ns="home" i18nKey="new" defaults="New" />
@ -105,10 +105,10 @@ export const MarketingHero = ({
</span> </span>
</Link> </Link>
</div> </div>
<h1 className="mb-2 mt-6 text-pretty text-2xl font-bold tracking-tight sm:mb-4 sm:text-5xl"> <h1 className="mt-6 mb-2 text-pretty font-bold text-2xl tracking-tight sm:mb-4 sm:text-5xl">
{title} {title}
</h1> </h1>
<h2 className="mx-auto max-w-3xl text-pretty text-base text-gray-500 sm:text-xl font-normal sm:leading-relaxed"> <h2 className="mx-auto max-w-3xl text-pretty font-normal text-base text-gray-500 sm:text-xl sm:leading-relaxed">
{description} {description}
</h2> </h2>
<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">
@ -122,9 +122,9 @@ export const MarketingHero = ({
</Button> </Button>
<p <p
className={cn( className={cn(
"whitespace-nowrap text-center text-xs text-gray-600", "whitespace-nowrap text-center text-gray-600 text-xs",
handwritten.className, handwritten.className,
"decoration underline decoration-gray-300 decoration-2 underline-offset-8", "decoration underline decoration-2 decoration-gray-300 underline-offset-8",
)} )}
> >
<Trans <Trans

6
apps/landing/src/components/marketing.tsx
View file

@ -275,7 +275,7 @@ export const BigTestimonial = () => {
alt="5 stars" alt="5 stars"
/> />
<div className="text-center"> <div className="text-center">
<p className="max-w-xl text-center text-lg font-medium leading-normal"> <p className="max-w-xl text-center font-medium text-lg leading-normal">
<Trans <Trans
i18nKey="home:ericQuote" i18nKey="home:ericQuote"
defaults="“If your scheduling workflow lives in emails, I strongly encourage you to try and let Rallly simplify your scheduling tasks for a more organized and less stressful workday.”" defaults="“If your scheduling workflow lives in emails, I strongly encourage you to try and let Rallly simplify your scheduling tasks for a more organized and less stressful workday.”"
@ -284,7 +284,7 @@ export const BigTestimonial = () => {
<p className="mt-1"> <p className="mt-1">
<Link <Link
target="_blank" target="_blank"
className="text-sm text-gray-500 hover:underline" className="text-gray-500 text-sm hover:underline"
href="https://www.trustpilot.com/reviews/645e1d1976733924e89d8203" href="https://www.trustpilot.com/reviews/645e1d1976733924e89d8203"
> >
<Trans i18nKey="home:viaTrustpilot" defaults="via Trustpilot" /> <Trans i18nKey="home:viaTrustpilot" defaults="via Trustpilot" />
@ -302,7 +302,7 @@ export const BigTestimonial = () => {
/> />
<div> <div>
<div className="font-semibold">Eric Fletcher</div> <div className="font-semibold">Eric Fletcher</div>
<div className="text-sm text-gray-500"> <div className="text-gray-500 text-sm">
<Trans <Trans
i18nKey="home:ericJobTitle" i18nKey="home:ericJobTitle"
defaults="Executive Assistant at MIT" defaults="Executive Assistant at MIT"

4
apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx
View file

@ -43,7 +43,7 @@ export const LoginPage = ({ magicLink, email }: PageProps) => {
<Logo className="mx-auto" /> <Logo className="mx-auto" />
</div> </div>
<div className="w-48 space-y-8 text-center"> <div className="w-48 space-y-8 text-center">
<h1 className="text-xl font-bold"> <h1 className="font-bold text-xl">
<Trans i18nKey="continueAs" defaults="Continue as" /> <Trans i18nKey="continueAs" defaults="Continue as" />
</h1> </h1>
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
@ -56,7 +56,7 @@ export const LoginPage = ({ magicLink, email }: PageProps) => {
<div className="mb-1 h-6 font-medium"> <div className="mb-1 h-6 font-medium">
{data?.name ?? <Skeleton className="inline-block h-5 w-16" />} {data?.name ?? <Skeleton className="inline-block h-5 w-16" />}
</div> </div>
<div className="text-muted-foreground h-5 truncate text-sm"> <div className="h-5 truncate text-muted-foreground text-sm">
{data?.email ?? <Skeleton className="inline-block h-full w-20" />} {data?.email ?? <Skeleton className="inline-block h-full w-20" />}
</div> </div>
</div> </div>

4
apps/web/src/app/[locale]/(auth)/components/auth-page.tsx
View file

@ -16,7 +16,7 @@ export function AuthPageHeader({ children }: { children: React.ReactNode }) {
} }
export function AuthPageTitle({ children }: { children: React.ReactNode }) { export function AuthPageTitle({ children }: { children: React.ReactNode }) {
return <h1 className="text-2xl font-bold">{children}</h1>; return <h1 className="font-bold text-2xl">{children}</h1>;
} }
export function AuthPageDescription({ export function AuthPageDescription({
@ -33,6 +33,6 @@ export function AuthPageContent({ children }: { children: React.ReactNode }) {
export function AuthPageExternal({ children }: { children: React.ReactNode }) { export function AuthPageExternal({ children }: { children: React.ReactNode }) {
return ( return (
<p className="text-muted-foreground px-4 py-3 text-center">{children}</p> <p className="px-4 py-3 text-center text-muted-foreground">{children}</p>
); );
} }

4
apps/web/src/app/[locale]/(space)/app-card.tsx
View file

@ -12,7 +12,7 @@ export function AppCard({
return ( return (
<div <div
className={cn( className={cn(
"flex w-full flex-col justify-between rounded-lg border bg-white p-4 shadow-sm ring-1 ring-inset ring-white/50", "flex w-full flex-col justify-between rounded-lg border bg-white p-4 shadow-sm ring-1 ring-white/50 ring-inset",
className, className,
)} )}
> >
@ -94,7 +94,7 @@ export function AppCardDescription({
return ( return (
<p <p
className={cn( className={cn(
"text-muted-foreground mt-1 text-sm leading-relaxed", "mt-1 text-muted-foreground text-sm leading-relaxed",
className, className,
)} )}
> >

4
apps/web/src/app/[locale]/(space)/components/sidebar/app-sidebar.tsx
View file

@ -81,12 +81,12 @@ export async function AppSidebar({
{!user.isPro ? ( {!user.isPro ? (
<> <>
<div className="relative overflow-hidden rounded-xl border bg-gray-50 p-3 text-sm shadow-sm"> <div className="relative overflow-hidden rounded-xl border bg-gray-50 p-3 text-sm shadow-sm">
<SparklesIcon className="absolute -top-4 right-0 z-0 size-16 text-gray-200" /> <SparklesIcon className="-top-4 absolute right-0 z-0 size-16 text-gray-200" />
<div className="relative z-10"> <div className="relative z-10">
<h2 className="font-semibold"> <h2 className="font-semibold">
<Trans i18nKey="upgrade" defaults="Upgrade" /> <Trans i18nKey="upgrade" defaults="Upgrade" />
</h2> </h2>
<p className="text-muted-foreground mb-3 mt-1 text-sm"> <p className="mt-1 mb-3 text-muted-foreground text-sm">
<Trans <Trans
i18nKey="upgradeToProDesc" i18nKey="upgradeToProDesc"
defaults="Unlock all Pro features" defaults="Unlock all Pro features"

2
apps/web/src/app/[locale]/(space)/components/sidebar/nav-user.tsx
View file

@ -24,7 +24,7 @@ export function NavUser({
<OptimizedAvatarImage size="md" src={image} name={name} /> <OptimizedAvatarImage size="md" src={image} name={name} />
<div className="flex-1 truncate text-left"> <div className="flex-1 truncate text-left">
<div className="font-medium">{name}</div> <div className="font-medium">{name}</div>
<div className="text-muted-foreground mt-0.5 truncate font-normal"> <div className="mt-0.5 truncate font-normal text-muted-foreground">
{plan} {plan}
</div> </div>
</div> </div>

4
apps/web/src/app/[locale]/(space)/components/top-bar.tsx
View file

@ -10,7 +10,7 @@ export function TopBar({
return ( return (
<div <div
className={cn( className={cn(
"bg-background/90 sticky top-0 z-10 flex items-center gap-4 rounded-t-lg border-b px-4 py-3 backdrop-blur-md", "sticky top-0 z-10 flex items-center gap-4 rounded-t-lg border-b bg-background/90 px-4 py-3 backdrop-blur-md",
className, className,
)} )}
> >
@ -44,5 +44,5 @@ export function TopBarGroup({
} }
export function TopBarSeparator() { export function TopBarSeparator() {
return <div className="bg-border h-4 w-px" />; return <div className="h-4 w-px bg-border" />;
} }

2
apps/web/src/app/[locale]/(space)/events/events-tabbed-view.tsx
View file

@ -45,7 +45,7 @@ export function EventsTabbedView({ children }: { children: React.ReactNode }) {
key={tab} key={tab}
className={cn( className={cn(
"transition-opacity", "transition-opacity",
isPending ? "opacity-50 delay-200 pointer-events-none" : "", isPending ? "pointer-events-none opacity-50 delay-200" : "",
)} )}
> >
{children} {children}

6
apps/web/src/app/[locale]/(space)/feedback-alert.tsx
View file

@ -16,7 +16,7 @@ export function FeedbackAlert() {
} }
return ( return (
<div className="flex flex-col sm:flex-row items-start border text-sm bg-gray-50 border-gray-200 p-4 rounded-xl gap-4"> <div className="flex flex-col items-start gap-4 rounded-xl border border-gray-200 bg-gray-50 p-4 text-sm sm:flex-row">
<div className="hidden sm:block"> <div className="hidden sm:block">
<HeartIcon className="size-4 text-pink-600 opacity-75" /> <HeartIcon className="size-4 text-pink-600 opacity-75" />
</div> </div>
@ -24,14 +24,14 @@ export function FeedbackAlert() {
<h2 className="font-semibold leading-none"> <h2 className="font-semibold leading-none">
<Trans i18nKey="helpUsImprove" defaults="Help us improve" /> <Trans i18nKey="helpUsImprove" defaults="Help us improve" />
</h2> </h2>
<p className="opacity-75 mt-1.5"> <p className="mt-1.5 opacity-75">
<Trans <Trans
i18nKey="helpUsImproveDesc" i18nKey="helpUsImproveDesc"
defaults="Take a few minutes to share your feedback and help us shape the future of Rallly." defaults="Take a few minutes to share your feedback and help us shape the future of Rallly."
/> />
</p> </p>
</div> </div>
<div className="flex items-center flex-row-reverse sm:flex-row gap-2"> <div className="flex flex-row-reverse items-center gap-2 sm:flex-row">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => { onClick={() => {

2
apps/web/src/app/[locale]/(space)/mobile-navigation.tsx
View file

@ -15,7 +15,7 @@ import { usePathname } from "next/navigation";
function MobileNavigationIcon({ children }: { children: React.ReactNode }) { function MobileNavigationIcon({ children }: { children: React.ReactNode }) {
return ( return (
<Slot className="group-[.is-active]:text-primary group-focus:text-primary group-hover:text-foreground size-5 text-gray-500"> <Slot className="size-5 text-gray-500 group-hover:text-foreground group-focus:text-primary group-[.is-active]:text-primary">
{children} {children}
</Slot> </Slot>
); );

2
apps/web/src/app/[locale]/(space)/polls/polls-tabbed-view.tsx
View file

@ -49,7 +49,7 @@ export function PollsTabbedView({ children }: { children: React.ReactNode }) {
key={tab} key={tab}
className={cn( className={cn(
"transition-opacity", "transition-opacity",
isPending ? "opacity-50 delay-200 pointer-events-none" : "", isPending ? "pointer-events-none opacity-50 delay-200" : "",
)} )}
> >
{children} {children}

4
apps/web/src/app/[locale]/(space)/settings/billing/page.tsx
View file

@ -170,7 +170,7 @@ export default async function Page() {
{data.paymentMethods.length === 0 ? ( {data.paymentMethods.length === 0 ? (
<div> <div>
<div className="space-y-2"> <div className="space-y-2">
<div className="text-destructive flex items-center gap-x-2"> <div className="flex items-center gap-x-2 text-destructive">
<CircleAlertIcon className="size-4" /> <CircleAlertIcon className="size-4" />
<span className="font-medium"> <span className="font-medium">
<Trans <Trans
@ -217,7 +217,7 @@ export default async function Page() {
{data.customerId ? ( {data.customerId ? (
<div className="flex flex-col items-start justify-between gap-6 gap-x-4 rounded-lg border bg-gray-50 p-4 sm:flex-row"> <div className="flex flex-col items-start justify-between gap-6 gap-x-4 rounded-lg border bg-gray-50 p-4 sm:flex-row">
<div className="space-y-1"> <div className="space-y-1">
<h3 className="text-sm font-medium"> <h3 className="font-medium text-sm">
<Trans <Trans
i18nKey="needToMakeChanges" i18nKey="needToMakeChanges"
defaults="Need to make changes?" defaults="Need to make changes?"

6
apps/web/src/app/[locale]/(space)/settings/components/settings-layout.tsx
View file

@ -14,7 +14,7 @@ export const SettingsSection = (props: {
return ( return (
<section className="rounded-lg border p-4"> <section className="rounded-lg border p-4">
<header className="mb-6"> <header className="mb-6">
<h2 className="mb-2 text-base font-semibold leading-none"> <h2 className="mb-2 font-semibold text-base leading-none">
{props.title} {props.title}
</h2> </h2>
<p className="text-muted-foreground text-sm">{props.description}</p> <p className="text-muted-foreground text-sm">{props.description}</p>
@ -37,7 +37,7 @@ export const SettingsItemTitle = ({
}: React.PropsWithChildren<{ hint?: React.ReactNode }>) => { }: React.PropsWithChildren<{ hint?: React.ReactNode }>) => {
return ( return (
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<dt className="text-sm font-medium text-gray-500">{children}</dt> <dt className="font-medium text-gray-500 text-sm">{children}</dt>
{hint ? ( {hint ? (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
@ -56,5 +56,5 @@ export const SettingsItemValue = ({
children, children,
className, className,
}: React.PropsWithChildren<{ className?: string }>) => { }: React.PropsWithChildren<{ className?: string }>) => {
return <dd className={cn("text-sm text-gray-900", className)}>{children}</dd>; return <dd className={cn("text-gray-900 text-sm", className)}>{children}</dd>;
}; };

2
apps/web/src/app/[locale]/control-panel/layout.tsx
View file

@ -17,7 +17,7 @@ export default async function AdminLayout({
<ControlPanelSidebar /> <ControlPanelSidebar />
<SidebarInset> <SidebarInset>
<LicenseLimitWarning /> <LicenseLimitWarning />
<div className="min-w-0 flex-1 flex-col flex">{children}</div> <div className="flex min-w-0 flex-1 flex-col">{children}</div>
</SidebarInset> </SidebarInset>
</ControlPanelSidebarProvider> </ControlPanelSidebarProvider>
); );

10
apps/web/src/app/[locale]/control-panel/license/page.tsx
View file

@ -45,7 +45,7 @@ function DescriptionListTitle({
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return <dt className="text-xs mb-1 text-muted-foreground">{children}</dt>; return <dt className="mb-1 text-muted-foreground text-xs">{children}</dt>;
} }
function DescriptionListValue({ function DescriptionListValue({
@ -53,7 +53,7 @@ function DescriptionListValue({
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return <dd className="text-sm mb-4 font-mono">{children}</dd>; return <dd className="mb-4 font-mono text-sm">{children}</dd>;
} }
export default async function LicensePage() { export default async function LicensePage() {
@ -76,8 +76,8 @@ export default async function LicensePage() {
<Trans i18nKey="licenseType" defaults="License Type" /> <Trans i18nKey="licenseType" defaults="License Type" />
</DescriptionListTitle> </DescriptionListTitle>
<DescriptionListValue> <DescriptionListValue>
<span className="capitalize text-primary">{license.type}</span> <span className="text-primary capitalize">{license.type}</span>
<span className="text-muted-foreground ml-2"> <span className="ml-2 text-muted-foreground">
( (
<Trans <Trans
i18nKey="seatCount" i18nKey="seatCount"
@ -91,7 +91,7 @@ export default async function LicensePage() {
<Trans i18nKey="licenseKey" defaults="License Key" /> <Trans i18nKey="licenseKey" defaults="License Key" />
</DescriptionListTitle> </DescriptionListTitle>
<DescriptionListValue> <DescriptionListValue>
<span className="font-mono select-all text-sm"> <span className="select-all font-mono text-sm">
{license.licenseKey} {license.licenseKey}
</span> </span>
</DescriptionListValue> </DescriptionListValue>

4
apps/web/src/app/[locale]/control-panel/page.tsx
View file

@ -64,7 +64,7 @@ export default async function AdminPage() {
<Trans i18nKey="users" defaults="Users" /> <Trans i18nKey="users" defaults="Users" />
</TileTitle> </TileTitle>
</div> </div>
<div className="text-sm text-muted-foreground"> <div className="text-muted-foreground text-sm">
<span <span
className={cn({ className={cn({
"text-destructive": "text-destructive":
@ -93,7 +93,7 @@ export default async function AdminPage() {
<KeySquareIcon /> <KeySquareIcon />
</PageIcon> </PageIcon>
{tier ? ( {tier ? (
<span className="text-sm text-primary capitalize"> <span className="text-primary text-sm capitalize">
{tier} {tier}
</span> </span>
) : ( ) : (

2
apps/web/src/app/[locale]/control-panel/settings/disable-user-registration.tsx
View file

@ -25,7 +25,7 @@ export function DisableUserRegistration({
/> />
</Label> </Label>
</div> </div>
<p className="text-sm mt-2 text-muted-foreground"> <p className="mt-2 text-muted-foreground text-sm">
<Trans <Trans
i18nKey="disableUserRegistrationDescription" i18nKey="disableUserRegistrationDescription"
defaults="Prevent new users from registering an account." defaults="Prevent new users from registering an account."

4
apps/web/src/app/[locale]/control-panel/settings/page.tsx
View file

@ -35,9 +35,9 @@ export default async function SettingsPage() {
</FullWidthLayoutTitle> </FullWidthLayoutTitle>
</FullWidthLayoutHeader> </FullWidthLayoutHeader>
<FullWidthLayoutContent> <FullWidthLayoutContent>
<div className="flex flex-col lg:flex-row p-6 gap-6 rounded-lg border"> <div className="flex flex-col gap-6 rounded-lg border p-6 lg:flex-row">
<div className="lg:w-1/2"> <div className="lg:w-1/2">
<h2 className="text-base font-semibold"> <h2 className="font-semibold text-base">
<Trans <Trans
i18nKey="authenticationAndSecurity" i18nKey="authenticationAndSecurity"
defaults="Authentication & Security" defaults="Authentication & Security"

4
apps/web/src/app/[locale]/control-panel/users/user-row.tsx
View file

@ -55,9 +55,9 @@ export function UserRow({
<div> <div>
<OptimizedAvatarImage src={image} name={name} size="md" /> <OptimizedAvatarImage src={image} name={name} size="md" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<div className="font-semibold">{name}</div> <div className="font-semibold">{name}</div>
<div className="text-muted-foreground truncate">{email}</div> <div className="truncate text-muted-foreground">{email}</div>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<span className="capitalize">{role}</span> <span className="capitalize">{role}</span>

2
apps/web/src/app/[locale]/control-panel/users/users-tabbed-view.tsx
View file

@ -49,7 +49,7 @@ export function UsersTabbedView({ children }: { children: React.ReactNode }) {
key={tab} key={tab}
className={cn( className={cn(
"transition-opacity", "transition-opacity",
isPending ? "opacity-50 delay-200 pointer-events-none" : "", isPending ? "pointer-events-none opacity-50 delay-200" : "",
)} )}
> >
{children} {children}

10
apps/web/src/app/[locale]/invite/[urlId]/invite-page.tsx
View file

@ -21,12 +21,12 @@ const GoToApp = () => {
} }
return ( return (
<div className="border-primary-200 bg-primary-50/75 rounded-lg border p-2.5 text-sm sm:p-1.5"> <div className="rounded-lg border border-primary-200 bg-primary-50/75 p-2.5 text-sm sm:p-1.5">
<div className="flex items-start justify-between sm:items-center"> <div className="flex items-start justify-between sm:items-center">
<div className="flex gap-2.5 sm:items-center lg:px-2.5"> <div className="flex gap-2.5 sm:items-center lg:px-2.5">
<UserCircle2Icon className="text-primary-600 hidden size-4 sm:block" /> <UserCircle2Icon className="hidden size-4 text-primary-600 sm:block" />
<div className="flex grow flex-col gap-x-2.5 sm:flex-row"> <div className="flex grow flex-col gap-x-2.5 sm:flex-row">
<h4 className="text-primary-600 font-medium"> <h4 className="font-medium text-primary-600">
<Trans i18nKey="eventHostTitle" defaults="Manage Access" /> <Trans i18nKey="eventHostTitle" defaults="Manage Access" />
</h4> </h4>
<p className="text-primary-600/75"> <p className="text-primary-600/75">
@ -38,7 +38,7 @@ const GoToApp = () => {
</div> </div>
</div> </div>
<Link <Link
className="text-primary-600 hover:bg-primary-200/50 active:bg-primary-200 inline-flex h-9 items-center gap-x-2.5 rounded-md px-3 font-medium" className="inline-flex h-9 items-center gap-x-2.5 rounded-md px-3 font-medium text-primary-600 hover:bg-primary-200/50 active:bg-primary-200"
href={`/poll/${poll.id}`} href={`/poll/${poll.id}`}
> >
<Trans i18nKey="manage" /> <Trans i18nKey="manage" />
@ -53,7 +53,7 @@ export function InvitePage() {
const poll = usePoll(); const poll = usePoll();
return ( return (
<div className="sm:p-6 p-3"> <div className="p-3 sm:p-6">
<PollViewTracker pollId={poll.id} /> <PollViewTracker pollId={poll.id} />
<div className="mx-auto w-full max-w-4xl space-y-4"> <div className="mx-auto w-full max-w-4xl space-y-4">
<GoToApp /> <GoToApp />

2
apps/web/src/app/[locale]/invite/[urlId]/nav.tsx
View file

@ -23,7 +23,7 @@ export const Nav = () => {
className={poll.userId !== user.id ? "hidden" : ""} className={poll.userId !== user.id ? "hidden" : ""}
> >
<Link href={`/poll/${poll.id}`}> <Link href={`/poll/${poll.id}`}>
<ArrowUpLeftIcon className="text-muted-foreground size-4" /> <ArrowUpLeftIcon className="size-4 text-muted-foreground" />
<Trans i18nKey="manage" /> <Trans i18nKey="manage" />
</Link> </Link>
</Button> </Button>

2
apps/web/src/app/[locale]/not-found.tsx
View file

@ -14,7 +14,7 @@ export default async function Page() {
<div className="space-y-8"> <div className="space-y-8">
<div className="space-y-4 text-center"> <div className="space-y-4 text-center">
<FileSearchIcon className="mb-4 inline-block size-24 text-gray-400" /> <FileSearchIcon className="mb-4 inline-block size-24 text-gray-400" />
<div className="text-primary-600 mb-2 text-3xl font-bold"> <div className="mb-2 font-bold text-3xl text-primary-600">
{t("errors_notFoundTitle")} {t("errors_notFoundTitle")}
</div> </div>
<p className="text-gray-600">{t("errors_notFoundDescription")}</p> <p className="text-gray-600">{t("errors_notFoundDescription")}</p>

2
apps/web/src/app/[locale]/poll/[urlId]/guest-poll-alert.tsx
View file

@ -21,7 +21,7 @@ export const GuestPollAlert = () => {
} }
return ( return (
<Alert icon={InfoIcon}> <Alert icon={InfoIcon}>
<AlertTitle className="mb-1 text-sm font-medium tracking-normal"> <AlertTitle className="mb-1 font-medium text-sm tracking-normal">
<Trans <Trans
i18nKey="guestPollAlertTitle" i18nKey="guestPollAlertTitle"
defaults="Your administrator rights can be lost if you clear your cookies" defaults="Your administrator rights can be lost if you clear your cookies"

6
apps/web/src/app/[locale]/setup/page.tsx
View file

@ -18,17 +18,17 @@ export default async function SetupPage() {
} }
return ( return (
<div className="bg-background flex min-h-dvh justify-center p-4 sm:items-center"> <div className="flex min-h-dvh justify-center bg-background p-4 sm:items-center">
<div className="w-full max-w-sm"> <div className="w-full max-w-sm">
<article className="space-y-8 lg:space-y-10"> <article className="space-y-8 lg:space-y-10">
<div className="py-8"> <div className="py-8">
<Logo className="mx-auto" /> <Logo className="mx-auto" />
</div> </div>
<header className="text-center"> <header className="text-center">
<h1 className="text-2xl font-bold"> <h1 className="font-bold text-2xl">
<Trans i18nKey="setupFormTitle" defaults="Setup" /> <Trans i18nKey="setupFormTitle" defaults="Setup" />
</h1> </h1>
<p className="text-muted-foreground mt-1"> <p className="mt-1 text-muted-foreground">
<Trans <Trans
i18nKey="setupFormDescription" i18nKey="setupFormDescription"
defaults="Finish setting up your account." defaults="Finish setting up your account."

2
apps/web/src/app/[locale]/timezone-change-detector.tsx
View file

@ -62,7 +62,7 @@ export function TimeZoneChangeDetector() {
<Trans <Trans
i18nKey="timeZoneChangeDetectorMessage" i18nKey="timeZoneChangeDetectorMessage"
defaults="Your timezone has changed to <b>{currentTimeZone}</b>. Do you want to update your preferences?" defaults="Your timezone has changed to <b>{currentTimeZone}</b>. Do you want to update your preferences?"
components={{ b: <b className="text-foreground font-medium" /> }} components={{ b: <b className="font-medium text-foreground" /> }}
values={{ currentTimeZone }} values={{ currentTimeZone }}
/> />
</p> </p>

8
apps/web/src/app/components/page-icons.tsx
View file

@ -29,10 +29,10 @@ const pageIconVariants = cva("inline-flex items-center justify-center", {
purple: "bg-purple-500 text-white", purple: "bg-purple-500 text-white",
}, },
size: { size: {
sm: "size-7 [&_svg]:size-4 rounded-md", sm: "size-7 rounded-md [&_svg]:size-4",
md: "size-8 [&_svg]:size-5 rounded-lg", md: "size-8 rounded-lg [&_svg]:size-5",
lg: "size-9 [&_svg]:size-5 rounded-lg", lg: "size-9 rounded-lg [&_svg]:size-5",
xl: "size-10 [&_svg]:size-5 rounded-lg", xl: "size-10 rounded-lg [&_svg]:size-5",
}, },
}, },
defaultVariants: { defaultVariants: {

6
apps/web/src/app/components/page-layout.tsx
View file

@ -8,7 +8,7 @@ export function PageContainer({
className, className,
}: React.PropsWithChildren<{ className?: string }>) { }: React.PropsWithChildren<{ className?: string }>) {
return ( return (
<div className={cn("mx-auto w-full p-4 md:p-8 max-w-7xl", className)}> <div className={cn("mx-auto w-full max-w-7xl p-4 md:p-8", className)}>
{children} {children}
</div> </div>
); );
@ -24,7 +24,7 @@ export function PageTitle({
return ( return (
<h1 <h1
className={cn( className={cn(
"text-foreground flex items-center gap-3 truncate text-xl font-bold leading-none tracking-tight", "flex items-center gap-3 truncate font-bold text-foreground text-xl leading-none tracking-tight",
className, className,
)} )}
> >
@ -41,7 +41,7 @@ export function PageDescription({
className?: string; className?: string;
}) { }) {
return ( return (
<p className={cn("text-muted-foreground mt-4 text-sm", className)}> <p className={cn("mt-4 text-muted-foreground text-sm", className)}>
{children} {children}
</p> </p>
); );

2
apps/web/src/components/clock.tsx
View file

@ -110,7 +110,7 @@ export const ClockPreferences = ({ children }: React.PropsWithChildren) => {
/> />
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="bg-muted grid h-24 items-center justify-center rounded-md text-2xl font-bold"> <div className="grid h-24 items-center justify-center rounded-md bg-muted font-bold text-2xl">
<Clock /> <Clock />
</div> </div>
<TimePreferences /> <TimePreferences />

8
apps/web/src/components/cookie-consent.tsx
View file

@ -33,9 +33,9 @@ const CookieConsentPopover = () => {
initial={{ opacity: 0, y: 100 }} initial={{ opacity: 0, y: 100 }}
animate="enter" animate="enter"
exit="exit" exit="exit"
className="fixed bottom-8 right-8 z-50 w-60 rounded-lg bg-white p-4 pt-8 text-sm shadow-lg" className="fixed right-8 bottom-8 z-50 w-60 rounded-lg bg-white p-4 pt-8 text-sm shadow-lg"
> >
<CookiesIllustration className="absolute -top-6" /> <CookiesIllustration className="-top-6 absolute" />
<div className="mb-3"> <div className="mb-3">
Your privacy is important to us. We only use cookies to improve Your privacy is important to us. We only use cookies to improve
the browsing experience on this website. the browsing experience on this website.
@ -43,7 +43,7 @@ const CookieConsentPopover = () => {
<div className="flex items-center space-x-6"> <div className="flex items-center space-x-6">
<Link <Link
href="/privacy-policy" href="/privacy-policy"
className="hover:text-primary-600 text-gray-500" className="text-gray-500 hover:text-primary-600"
> >
Privacy Policy Privacy Policy
</Link> </Link>
@ -53,7 +53,7 @@ const CookieConsentPopover = () => {
Cookies.set("rallly_cookie_consent", "1", { expires: 365 }); Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
setVisible(false); setVisible(false);
}} }}
className="bg-primary-600 hover:bg-primary-600/90 focus:ring-primary-200 active:bg-primary-600/90 grow rounded-md px-5 py-1 font-semibold text-white shadow-sm transition-all focus:ring-2" className="grow rounded-md bg-primary-600 px-5 py-1 font-semibold text-white shadow-sm transition-all hover:bg-primary-600/90 focus:ring-2 focus:ring-primary-200 active:bg-primary-600/90"
> >
OK OK
</button> </button>

4
apps/web/src/components/date-card.tsx
View file

@ -20,10 +20,10 @@ const DateCard: React.FunctionComponent<DateCardProps> = ({
className, className,
)} )}
> >
<div className="text-muted-foreground border-b border-gray-200 text-xs font-normal leading-4"> <div className="border-gray-200 border-b font-normal text-muted-foreground text-xs leading-4">
{month} {month}
</div> </div>
<div className="flex grow items-center justify-center rounded-b-md bg-white text-lg font-semibold leading-none tracking-tight"> <div className="flex grow items-center justify-center rounded-b-md bg-white font-semibold text-lg leading-none tracking-tight">
{day} {day}
</div> </div>
</div> </div>

4
apps/web/src/components/date-icon.tsx
View file

@ -15,10 +15,10 @@ export const DateIconInner = (props: {
props.className, props.className,
)} )}
> >
<div className="text-muted-foreground border-b border-gray-200 text-xs font-normal leading-4"> <div className="border-gray-200 border-b font-normal text-muted-foreground text-xs leading-4">
{props.dow} {props.dow}
</div> </div>
<div className="flex grow items-center justify-center bg-white text-sm font-medium leading-none tracking-tight"> <div className="flex grow items-center justify-center bg-white font-medium text-sm leading-none tracking-tight">
{props.day} {props.day}
</div> </div>
</div> </div>

4
apps/web/src/components/description-list.tsx
View file

@ -24,7 +24,7 @@ export function DescriptionTerm({
{...props} {...props}
className={cn( className={cn(
className, className,
"col-start-1 border-t border-gray-800/5 pt-3 text-gray-500 first:border-none sm:border-t sm:border-gray-800/5 sm:py-3 dark:border-white/5 dark:text-gray-400 sm:dark:border-white/5", "col-start-1 border-gray-800/5 border-t pt-3 text-gray-500 first:border-none sm:border-gray-800/5 sm:border-t sm:py-3 dark:border-white/5 dark:text-gray-400 sm:dark:border-white/5",
)} )}
/> />
); );
@ -39,7 +39,7 @@ export function DescriptionDetails({
{...props} {...props}
className={cn( className={cn(
className, className,
"pb-3 pt-1 text-gray-800 sm:border-t sm:border-gray-800/5 sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none", "pt-1 pb-3 text-gray-800 sm:border-gray-800/5 sm:border-t sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none",
)} )}
/> />
); );

6
apps/web/src/components/discussion/discussion.tsx
View file

@ -223,7 +223,7 @@ function DiscussionInner() {
</div> </div>
{canDelete && ( {canDelete && (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger className="hover:text-foreground text-gray-500"> <DropdownMenuTrigger className="text-gray-500 hover:text-foreground">
<MoreHorizontalIcon className="size-4" /> <MoreHorizontalIcon className="size-4" />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="start"> <DropdownMenuContent align="start">
@ -267,7 +267,7 @@ function DiscussionInner() {
) : ( ) : (
<button <button
type="button" type="button"
className="border-input text-muted-foreground flex w-full rounded border bg-transparent px-2 py-2 text-left text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1" className="flex w-full rounded border border-input bg-transparent px-2 py-2 text-left text-muted-foreground text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1"
onClick={() => setIsWriting(true)} onClick={() => setIsWriting(true)}
> >
<Trans <Trans
@ -286,7 +286,7 @@ export default function Discussion() {
const poll = usePoll(); const poll = usePoll();
if (poll.disableComments) { if (poll.disableComments) {
return ( return (
<p className="text-muted-foreground rounded-lg bg-gray-100 p-4 text-center text-sm"> <p className="rounded-lg bg-gray-100 p-4 text-center text-muted-foreground text-sm">
<Icon> <Icon>
<MessageSquareOffIcon className="mr-2 inline-block" /> <MessageSquareOffIcon className="mr-2 inline-block" />
</Icon> </Icon>

6
apps/web/src/components/empty-state.tsx
View file

@ -11,7 +11,7 @@ export function EmptyState({
return ( return (
<div <div
className={cn( className={cn(
"flex flex-col items-center pt-16 pb-32 justify-center text-center", "flex flex-col items-center justify-center pt-16 pb-32 text-center",
className, className,
)} )}
> >
@ -29,7 +29,7 @@ export function EmptyStateIcon({ children }: { children: React.ReactNode }) {
} }
export function EmptyStateTitle({ children }: { children: React.ReactNode }) { export function EmptyStateTitle({ children }: { children: React.ReactNode }) {
return <p className="text-base font-semibold">{children}</p>; return <p className="font-semibold text-base">{children}</p>;
} }
export function EmptyStateDescription({ export function EmptyStateDescription({
@ -38,7 +38,7 @@ export function EmptyStateDescription({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<p className="text-muted-foreground mt-2 max-w-md text-pretty text-sm leading-relaxed"> <p className="mt-2 max-w-md text-pretty text-muted-foreground text-sm leading-relaxed">
{children} {children}
</p> </p>
); );

2
apps/web/src/components/error-page.tsx
View file

@ -22,7 +22,7 @@ const ErrorPage: React.FunctionComponent<ComponentProps> = ({
<div className="space-y-8"> <div className="space-y-8">
<div className="space-y-4 text-center"> <div className="space-y-4 text-center">
<Icon className="mb-4 inline-block size-24 text-gray-400" /> <Icon className="mb-4 inline-block size-24 text-gray-400" />
<div className="text-primary-600 mb-2 text-3xl font-bold"> <div className="mb-2 font-bold text-3xl text-primary-600">
{title} {title}
</div> </div>
<p className="text-gray-600">{description}</p> <p className="text-gray-600">{description}</p>

6
apps/web/src/components/event-card.tsx
View file

@ -42,11 +42,11 @@ export function EventCard() {
<CardContent className="space-y-4 sm:space-y-6"> <CardContent className="space-y-4 sm:space-y-6">
<div className="flex flex-col items-start gap-4 lg:flex-row lg:justify-between"> <div className="flex flex-col items-start gap-4 lg:flex-row lg:justify-between">
<div> <div>
<h1 data-testid="poll-title" className="text-lg font-semibold"> <h1 data-testid="poll-title" className="font-semibold text-lg">
{poll.title} {poll.title}
</h1> </h1>
<CardDescription> <CardDescription>
<span className="flex items-center gap-0.5 whitespace-nowrap text-sm text-gray-500"> <span className="flex items-center gap-0.5 whitespace-nowrap text-gray-500 text-sm">
<span> <span>
<Trans <Trans
i18nKey="createdBy" i18nKey="createdBy"
@ -80,7 +80,7 @@ export function EventCard() {
<div className="flex flex-col justify-between gap-4 sm:flex-row sm:flex-wrap sm:items-center"> <div className="flex flex-col justify-between gap-4 sm:flex-row sm:flex-wrap sm:items-center">
<IconGuide /> <IconGuide />
{poll.location ? ( {poll.location ? (
<p className="text-muted-foregroun truncate whitespace-nowrap text-sm"> <p className="truncate whitespace-nowrap text-muted-foregroun text-sm">
<Icon> <Icon>
<MapPinIcon className="-mt-0.5 mr-1.5 inline-block" /> <MapPinIcon className="-mt-0.5 mr-1.5 inline-block" />
</Icon> </Icon>

2
apps/web/src/components/feedback.tsx
View file

@ -20,7 +20,7 @@ import { Trans } from "@/components/trans";
const FeedbackButton = () => { const FeedbackButton = () => {
return ( return (
<DropdownMenu modal={false}> <DropdownMenu modal={false}>
<DropdownMenuTrigger className="shadow-huge fixed bottom-8 right-6 z-20 hidden size-12 items-center justify-center rounded-full bg-gray-800 hover:bg-gray-700 active:shadow-none sm:inline-flex"> <DropdownMenuTrigger className="fixed right-6 bottom-8 z-20 hidden size-12 items-center justify-center rounded-full bg-gray-800 shadow-huge hover:bg-gray-700 active:shadow-none sm:inline-flex">
<MegaphoneIcon className="h-5 text-white" /> <MegaphoneIcon className="h-5 text-white" />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent sideOffset={10} align="end"> <DropdownMenuContent sideOffset={10} align="end">

4
apps/web/src/components/forms/poll-details-form.tsx
View file

@ -54,7 +54,7 @@ export const PollDetailsForm = () => {
<FormLabel className="inline-block" htmlFor="location"> <FormLabel className="inline-block" htmlFor="location">
{t("location")} {t("location")}
</FormLabel> </FormLabel>
<span className="text-muted-foreground ml-1 text-sm"> <span className="ml-1 text-muted-foreground text-sm">
<Trans i18nKey="optionalLabel" defaults="(Optional)" /> <Trans i18nKey="optionalLabel" defaults="(Optional)" />
</span> </span>
</div> </div>
@ -71,7 +71,7 @@ export const PollDetailsForm = () => {
<FormLabel className="inline-block" htmlFor="description"> <FormLabel className="inline-block" htmlFor="description">
{t("description")} {t("description")}
</FormLabel> </FormLabel>
<span className="text-muted-foreground ml-1 text-sm"> <span className="ml-1 text-muted-foreground text-sm">
<Trans i18nKey="optionalLabel" defaults="(Optional)" /> <Trans i18nKey="optionalLabel" defaults="(Optional)" />
</span> </span>
</div> </div>

2
apps/web/src/components/forms/poll-options-form/date-navigation-toolbar.tsx
View file

@ -19,7 +19,7 @@ const DateNavigationToolbar: React.FunctionComponent<
return ( return (
<div className="flex h-14 w-full shrink-0 items-center px-4"> <div className="flex h-14 w-full shrink-0 items-center px-4">
<div className="grow font-semibold tracking-tight"> <div className="grow font-semibold tracking-tight">
<span className="mr-2 text-sm font-normal text-gray-500">{year}</span> <span className="mr-2 font-normal text-gray-500 text-sm">{year}</span>
<span className="font-semibold">{label}</span> <span className="font-semibold">{label}</span>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">

14
apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
View file

@ -93,7 +93,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
return ( return (
<div className="overflow-hidden md:flex"> <div className="overflow-hidden md:flex">
<div className="shrink-0 border-b p-3 sm:p-4 md:w-[380px] md:border-b-0 md:border-r"> <div className="shrink-0 border-b p-3 sm:p-4 md:w-[380px] md:border-r md:border-b-0">
<div> <div>
<div className="flex w-full flex-col"> <div className="flex w-full flex-col">
<div className="mb-3 flex items-center justify-center space-x-4"> <div className="mb-3 flex items-center justify-center space-x-4">
@ -116,7 +116,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
return ( return (
<div <div
key={dayOfWeek} key={dayOfWeek}
className="flex items-center justify-center pb-2 text-sm font-medium text-gray-500" className="flex items-center justify-center pb-2 font-medium text-gray-500 text-sm"
> >
{dayOfWeek.substring(0, 2)} {dayOfWeek.substring(0, 2)}
</div> </div>
@ -175,7 +175,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
} }
}} }}
className={cn( className={cn(
"group relative flex h-full w-full items-start justify-end rounded-none px-2.5 py-1.5 text-sm font-medium tracking-tight focus:z-10 focus:rounded", "group relative flex h-full w-full items-start justify-end rounded-none px-2.5 py-1.5 font-medium text-sm tracking-tight focus:z-10 focus:rounded",
{ {
"bg-gray-100 text-gray-400": day.isPast, "bg-gray-100 text-gray-400": day.isPast,
"text-rose-600": day.today && !day.selected, "text-rose-600": day.today && !day.selected,
@ -188,10 +188,10 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
<span <span
aria-hidden aria-hidden
className={cn( className={cn(
"absolute inset-1 -z-0 rounded-md border", "-z-0 absolute inset-1 rounded-md border",
day.selected day.selected
? "border-primary-300 group-hover:border-primary-400 border-dashed shadow-sm" ? "border-primary-300 border-dashed shadow-sm group-hover:border-primary-400"
: "border-dashed border-transparent group-hover:border-gray-400 group-active:bg-gray-200", : "border-transparent border-dashed group-hover:border-gray-400 group-active:bg-gray-200",
)} )}
/> />
<span className="z-10">{day.day}</span> <span className="z-10">{day.day}</span>
@ -215,7 +215,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
<div className="flex items-center space-x-3 p-3 sm:p-4"> <div className="flex items-center space-x-3 p-3 sm:p-4">
<div className="grow"> <div className="grow">
<div className="font-medium">{t("specifyTimes")}</div> <div className="font-medium">{t("specifyTimes")}</div>
<div className="text-sm text-gray-500"> <div className="text-gray-500 text-sm">
{t("specifyTimesDescription")} {t("specifyTimesDescription")}
</div> </div>
</div> </div>

4
apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx
View file

@ -75,7 +75,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span>{dayjs(option).format("LT")}</span> <span>{dayjs(option).format("LT")}</span>
{after ? ( {after ? (
<span className="text-sm text-gray-500"> <span className="text-gray-500 text-sm">
{getDuration(dayjs(after), dayjs(option))} {getDuration(dayjs(after), dayjs(option))}
</span> </span>
) : null} ) : null}
@ -88,7 +88,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span>{dayjs(value).format("LT")}</span> <span>{dayjs(value).format("LT")}</span>
{after ? ( {after ? (
<span className="text-sm text-gray-500"> <span className="text-gray-500 text-sm">
{getDuration(dayjs(after), dayjs(value))} {getDuration(dayjs(after), dayjs(value))}
</span> </span>
) : null} ) : null}

4
apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
View file

@ -243,7 +243,7 @@ const PollOptionsForm = ({
</Label> </Label>
<Tooltip> <Tooltip>
<TooltipTrigger type="button"> <TooltipTrigger type="button">
<InfoIcon className="text-muted-foreground size-4" /> <InfoIcon className="size-4 text-muted-foreground" />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent className="w-72"> <TooltipContent className="w-72">
<Trans <Trans
@ -262,7 +262,7 @@ const PollOptionsForm = ({
}} }}
variant="ghost" variant="ghost"
> >
<GlobeIcon className="text-muted-foreground size-4" /> <GlobeIcon className="size-4 text-muted-foreground" />
{field.value} {field.value}
</Button> </Button>
<CommandDialog <CommandDialog

6
apps/web/src/components/forms/poll-options-form/week-calendar.tsx
View file

@ -101,7 +101,7 @@ const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
<div <div
// onClick prop doesn't work properly. Seems like some other element is cancelling the event before it reaches this element // onClick prop doesn't work properly. Seems like some other element is cancelling the event before it reaches this element
onMouseUp={props.onClick} onMouseUp={props.onClick}
className="text-primary-500 border-primary-300 hover:border-primary-400 hover:text-primary-600 group absolute ml-1 flex max-h-full flex-col justify-between overflow-hidden rounded-lg border border-dashed bg-white/50 p-1 text-xs shadow-sm hover:cursor-pointer" className="group absolute ml-1 flex max-h-full flex-col justify-between overflow-hidden rounded-lg border border-primary-300 border-dashed bg-white/50 p-1 text-primary-500 text-xs shadow-sm hover:cursor-pointer hover:border-primary-400 hover:text-primary-600"
style={{ style={{
top: `calc(${props.style?.top}% + 4px)`, top: `calc(${props.style?.top}% + 4px)`,
height: `calc(${props.style?.height}% - 8px)`, height: `calc(${props.style?.height}% - 8px)`,
@ -109,7 +109,7 @@ const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
width: `calc(${props.style?.width}%)`, width: `calc(${props.style?.width}%)`,
}} }}
> >
<div className="absolute right-1.5 top-1.5 flex justify-end opacity-0 group-hover:opacity-100"> <div className="absolute top-1.5 right-1.5 flex justify-end opacity-0 group-hover:opacity-100">
<XIcon className="size-3" /> <XIcon className="size-3" />
</div> </div>
<div> <div>
@ -143,7 +143,7 @@ const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
children?: React.ReactNode; children?: React.ReactNode;
}) { }) {
return ( return (
<div className="h-6 text-xs leading-none text-gray-500"> <div className="h-6 text-gray-500 text-xs leading-none">
{children} {children}
</div> </div>
); );

2
apps/web/src/components/forms/poll-settings.tsx
View file

@ -40,7 +40,7 @@ const SettingTitle = ({
}>) => { }>) => {
return ( return (
<div className="flex min-w-0 items-center gap-x-2.5"> <div className="flex min-w-0 items-center gap-x-2.5">
<div className="text-sm font-medium">{children}</div> <div className="font-medium text-sm">{children}</div>
{pro ? ( {pro ? (
<div> <div>
<ProBadge /> <ProBadge />

4
apps/web/src/components/full-width-layout.tsx
View file

@ -6,7 +6,7 @@ export function FullWidthLayoutHeader({
children, children,
}: { children: React.ReactNode }) { }: { children: React.ReactNode }) {
return ( return (
<header className="py-4 rounded-t-lg bg-background/90 backdrop-blur-sm sticky top-0 z-10 px-6 border-b"> <header className="sticky top-0 z-10 rounded-t-lg border-b bg-background/90 px-6 py-4 backdrop-blur-sm">
{children} {children}
</header> </header>
); );
@ -25,7 +25,7 @@ export function FullWidthLayoutTitle({
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{icon} {icon}
<h1 className="text-xl font-semibold">{children}</h1> <h1 className="font-semibold text-xl">{children}</h1>
</div> </div>
); );
} }

2
apps/web/src/components/invite-dialog.tsx
View file

@ -66,7 +66,7 @@ export const InviteDialog = () => {
</DialogTrigger> </DialogTrigger>
<DialogContent data-testid="invite-participant-dialog"> <DialogContent data-testid="invite-participant-dialog">
<div className="flex"> <div className="flex">
<Share2Icon className="text-primary size-6" /> <Share2Icon className="size-6 text-primary" />
</div> </div>
<DialogHeader className=""> <DialogHeader className="">
<DialogTitle> <DialogTitle>

4
apps/web/src/components/new-participant-modal.tsx
View file

@ -144,7 +144,7 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
{...register("name")} {...register("name")}
/> />
{formState.errors.name?.message ? ( {formState.errors.name?.message ? (
<div className="mt-2 text-sm text-rose-500"> <div className="mt-2 text-rose-500 text-sm">
{formState.errors.name.message} {formState.errors.name.message}
</div> </div>
) : null} ) : null}
@ -162,7 +162,7 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
{...register("email")} {...register("email")}
/> />
{formState.errors.email?.message ? ( {formState.errors.email?.message ? (
<div className="mt-1 text-sm text-rose-500"> <div className="mt-1 text-rose-500 text-sm">
{formState.errors.email.message} {formState.errors.email.message}
</div> </div>
) : null} ) : null}

10
apps/web/src/components/page-dialog.tsx
View file

@ -8,7 +8,7 @@ export const PageDialog = (
<Container className="flex h-[calc(75vh)] items-center justify-center"> <Container className="flex h-[calc(75vh)] items-center justify-center">
<div className="text-center"> <div className="text-center">
{props.icon ? ( {props.icon ? (
<props.icon className="text-primary inline-block size-14" /> <props.icon className="inline-block size-14 text-primary" />
) : null} ) : null}
{props.children} {props.children}
</div> </div>
@ -17,11 +17,11 @@ export const PageDialog = (
}; };
export const PageDialogContent = (props: React.PropsWithChildren) => { export const PageDialogContent = (props: React.PropsWithChildren) => {
return <div className="mb-6 mt-4">{props.children}</div>; return <div className="mt-4 mb-6">{props.children}</div>;
}; };
export const PageDialogHeader = (props: React.PropsWithChildren) => { export const PageDialogHeader = (props: React.PropsWithChildren) => {
return <div className="mb-6 mt-4 space-y-2">{props.children}</div>; return <div className="mt-4 mb-6 space-y-2">{props.children}</div>;
}; };
export const PageDialogFooter = (props: React.PropsWithChildren) => { export const PageDialogFooter = (props: React.PropsWithChildren) => {
@ -32,12 +32,12 @@ export const PageDialogFooter = (props: React.PropsWithChildren) => {
); );
}; };
export const PageDialogTitle = (props: React.PropsWithChildren) => { export const PageDialogTitle = (props: React.PropsWithChildren) => {
return <h1 className="text-2xl font-bold">{props.children}</h1>; return <h1 className="font-bold text-2xl">{props.children}</h1>;
}; };
export const PageDialogDescription = (props: React.PropsWithChildren) => { export const PageDialogDescription = (props: React.PropsWithChildren) => {
return ( return (
<p className="text-muted-foreground max-w-xl text-sm leading-relaxed"> <p className="max-w-xl text-muted-foreground text-sm leading-relaxed">
{props.children} {props.children}
</p> </p>
); );

2
apps/web/src/components/pagination.tsx
View file

@ -50,7 +50,7 @@ export function Pagination({
return ( return (
<div className={cn("flex items-center justify-between", className)}> <div className={cn("flex items-center justify-between", className)}>
<div className="text-sm text-gray-500"> <div className="text-gray-500 text-sm">
<Trans <Trans
i18nKey="paginationItems" i18nKey="paginationItems"
defaults="Showing {startItem}–{endItem} of {totalItems}" defaults="Showing {startItem}–{endItem} of {totalItems}"

4
apps/web/src/components/participant-avatar-bar.tsx
View file

@ -35,7 +35,7 @@ export const ParticipantAvatarBar = ({
const hiddenCount = totalParticipants - visibleCount; const hiddenCount = totalParticipants - visibleCount;
return ( return (
<ul className="flex cursor-default items-center -space-x-1 rounded-full bg-white p-0.5"> <ul className="-space-x-1 flex cursor-default items-center rounded-full bg-white p-0.5">
{visibleParticipants.map((participant, index) => ( {visibleParticipants.map((participant, index) => (
// biome-ignore lint/suspicious/noArrayIndexKey: Fix this later // biome-ignore lint/suspicious/noArrayIndexKey: Fix this later
<Tooltip delayDuration={100} key={index}> <Tooltip delayDuration={100} key={index}>
@ -60,7 +60,7 @@ export const ParticipantAvatarBar = ({
<span <span
className={cn( className={cn(
"select-none", "select-none",
"rounded-full bg-gray-100 px-1.5 text-xs font-semibold", "rounded-full bg-gray-100 px-1.5 font-semibold text-xs",
"inline-flex h-5 items-center justify-center", "inline-flex h-5 items-center justify-center",
)} )}
> >

2
apps/web/src/components/participant-dropdown.tsx
View file

@ -79,7 +79,7 @@ export const ParticipantDropdown = ({
<div className="grid gap-0.5"> <div className="grid gap-0.5">
<div>{participant.name}</div> <div>{participant.name}</div>
{participant.email ? ( {participant.email ? (
<div className="text-muted-foreground text-xs font-normal"> <div className="font-normal text-muted-foreground text-xs">
{participant.email} {participant.email}
</div> </div>
) : null} ) : null}

2
apps/web/src/components/participant.tsx
View file

@ -57,7 +57,7 @@ export const ParticipantName = ({
setIsTruncated(false); setIsTruncated(false);
} }
}} }}
className={cn("truncate text-sm font-medium", { className={cn("truncate font-medium text-sm", {
"hover:-translate-x-2 hover:cursor-pointer hover:overflow-visible hover:whitespace-nowrap hover:rounded-md hover:bg-white hover:p-2": "hover:-translate-x-2 hover:cursor-pointer hover:overflow-visible hover:whitespace-nowrap hover:rounded-md hover:bg-white hover:p-2":
isTruncated, isTruncated,
})} })}

20
apps/web/src/components/pay-wall-dialog.tsx
View file

@ -39,7 +39,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
<Dialog {...dialog.dialogProps} {...forwardedProps}> <Dialog {...dialog.dialogProps} {...forwardedProps}>
{children} {children}
<DialogContent className="w-full max-w-[600px] overflow-hidden bg-gray-50 p-4 sm:p-6"> <DialogContent className="w-full max-w-[600px] overflow-hidden bg-gray-50 p-4 sm:p-6">
<SparklesIcon className="absolute -top-4 left-4 size-32 text-gray-500/10" /> <SparklesIcon className="-top-4 absolute left-4 size-32 text-gray-500/10" />
<div className="space-y-6"> <div className="space-y-6">
<header> <header>
<div className="flex justify-center"> <div className="flex justify-center">
@ -62,10 +62,10 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
</m.div> </m.div>
</div> </div>
</div> </div>
<DialogTitle className="mb-1 mt-2 text-center text-xl font-bold"> <DialogTitle className="mt-2 mb-1 text-center font-bold text-xl">
<Trans defaults="Upgrade to Pro" i18nKey="upgradePromptTitle" /> <Trans defaults="Upgrade to Pro" i18nKey="upgradePromptTitle" />
</DialogTitle> </DialogTitle>
<DialogDescription className="text-muted-foreground mb-4 text-center text-sm leading-relaxed"> <DialogDescription className="mb-4 text-center text-muted-foreground text-sm leading-relaxed">
<Trans <Trans
i18nKey="upgradeOverlaySubtitle3" i18nKey="upgradeOverlaySubtitle3"
defaults="Unlock these feature by upgrading to a Pro plan." defaults="Unlock these feature by upgrading to a Pro plan."
@ -73,7 +73,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
</DialogDescription> </DialogDescription>
</header> </header>
<section> <section>
<ul className="grid justify-center gap-2 text-center text-sm font-medium sm:grid-cols-2"> <ul className="grid justify-center gap-2 text-center font-medium text-sm sm:grid-cols-2">
<li> <li>
<CheckIcon className="mr-2 inline-block size-4 text-green-600" /> <CheckIcon className="mr-2 inline-block size-4 text-green-600" />
<Trans i18nKey="featureNameFinalize" defaults="Finalize Poll" /> <Trans i18nKey="featureNameFinalize" defaults="Finalize Poll" />
@ -106,13 +106,13 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
<li className="relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:bg-gray-100 focus-within:ring-gray-300 hover:bg-gray-100"> <li className="relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:bg-gray-100 focus-within:ring-gray-300 hover:bg-gray-100">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<RadioGroupItem id="monthly" value="monthly" /> <RadioGroupItem id="monthly" value="monthly" />
<label className="text-base font-semibold" htmlFor="monthly"> <label className="font-semibold text-base" htmlFor="monthly">
<span role="presentation" className="absolute inset-0" /> <span role="presentation" className="absolute inset-0" />
<Trans defaults="1 month" i18nKey="1month" /> <Trans defaults="1 month" i18nKey="1month" />
</label> </label>
</div> </div>
<p className="flex items-baseline gap-1"> <p className="flex items-baseline gap-1">
<span className="text-xl font-semibold">${monthlyPrice}</span> <span className="font-semibold text-xl">${monthlyPrice}</span>
<span className="text-muted-foreground text-sm">/ mo</span> <span className="text-muted-foreground text-sm">/ mo</span>
</p> </p>
</li> </li>
@ -122,7 +122,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
<RadioGroupItem id="yearly" value="yearly" /> <RadioGroupItem id="yearly" value="yearly" />
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<label <label
className="text-base font-semibold" className="font-semibold text-base"
htmlFor="yearly" htmlFor="yearly"
> >
<span <span
@ -140,7 +140,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
</Badge> </Badge>
</div> </div>
</div> </div>
<p className="text-muted-foreground pointer-events-none flex items-baseline gap-1.5 pl-8 text-sm"> <p className="pointer-events-none flex items-baseline gap-1.5 pl-8 text-muted-foreground text-sm">
<span>${yearlyPrice}</span> <span>${yearlyPrice}</span>
<span className="line-through opacity-50"> <span className="line-through opacity-50">
${((pricingData.monthly.amount * 12) / 100).toFixed(2)} ${((pricingData.monthly.amount * 12) / 100).toFixed(2)}
@ -148,7 +148,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
</p> </p>
</div> </div>
<p className="flex items-baseline gap-1"> <p className="flex items-baseline gap-1">
<span className="text-xl font-semibold"> <span className="font-semibold text-xl">
${monthlyPriceAnnualRate} ${monthlyPriceAnnualRate}
</span> </span>
<span className="text-muted-foreground text-sm">/ mo</span> <span className="text-muted-foreground text-sm">/ mo</span>
@ -166,7 +166,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
<Trans i18nKey="upgrade" defaults="Upgrade" /> <Trans i18nKey="upgrade" defaults="Upgrade" />
</UpgradeButton> </UpgradeButton>
</div> </div>
<p className="text-muted-foreground text-center text-sm"> <p className="text-center text-muted-foreground text-sm">
<Trans <Trans
i18nKey="cancelAnytime" i18nKey="cancelAnytime"
defaults="Cancel anytime from your <a>billing page</a>." defaults="Cancel anytime from your <a>billing page</a>."

8
apps/web/src/components/poll/desktop-poll.tsx
View file

@ -241,7 +241,7 @@ const DesktopPoll: React.FunctionComponent = () => {
<div <div
className={cn( className={cn(
expanded expanded
? "fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-gray-900/25 p-8" ? "fixed top-0 left-0 z-50 flex h-full w-full items-center justify-center bg-gray-900/25 p-8"
: "", : "",
)} )}
> >
@ -249,7 +249,7 @@ const DesktopPoll: React.FunctionComponent = () => {
className={cn( className={cn(
"flex max-h-full flex-col overflow-hidden rounded-md bg-white", "flex max-h-full flex-col overflow-hidden rounded-md bg-white",
{ {
"shadow-huge w-full max-w-7xl": expanded, "w-full max-w-7xl shadow-huge": expanded,
}, },
)} )}
ref={containerRef} ref={containerRef}
@ -287,7 +287,7 @@ const DesktopPoll: React.FunctionComponent = () => {
<div <div
aria-hidden="true" aria-hidden="true"
className={cn( className={cn(
"pointer-events-none absolute bottom-0 left-[235px] top-0 z-30 w-4 border-l bg-gradient-to-r from-gray-800/5 via-transparent to-transparent transition-opacity", "pointer-events-none absolute top-0 bottom-0 left-[235px] z-30 w-4 border-l bg-gradient-to-r from-gray-800/5 via-transparent to-transparent transition-opacity",
x > 0 ? "opacity-100" : "opacity-0", x > 0 ? "opacity-100" : "opacity-0",
)} )}
/> />
@ -345,7 +345,7 @@ const DesktopPoll: React.FunctionComponent = () => {
</tbody> </tbody>
</table> </table>
{mode === "new" ? ( {mode === "new" ? (
<div className="sticky border-l left-[235px] flex w-[calc(100%-235px)] items-center justify-between gap-4 border-t bg-gray-50 p-3"> <div className="sticky left-[235px] flex w-[calc(100%-235px)] items-center justify-between gap-4 border-t border-l bg-gray-50 p-3">
<Button <Button
onClick={() => { onClick={() => {
votingForm.cancel(); votingForm.cancel();

6
apps/web/src/components/poll/desktop-poll/participant-row-form.tsx
View file

@ -107,7 +107,7 @@ const ParticipantRowForm = ({
return ( return (
<td <td
key={optionId} key={optionId}
className="relative h-12 border-l border-t bg-gray-50" className="relative h-12 border-t border-l bg-gray-50"
> >
<Controller <Controller
control={form.control} control={form.control}
@ -121,7 +121,7 @@ const ParticipantRowForm = ({
type: toggleVote(field.value?.type), type: toggleVote(field.value?.type),
}); });
}} }}
className="absolute inset-0 flex cursor-pointer items-center justify-center hover:bg-gray-100 active:bg-gray-200/50 active:ring-1 active:ring-inset active:ring-gray-200" className="absolute inset-0 flex cursor-pointer items-center justify-center hover:bg-gray-100 active:bg-gray-200/50 active:ring-1 active:ring-gray-200 active:ring-inset"
> >
<VoteSelector <VoteSelector
value={field.value?.type} value={field.value?.type}
@ -135,7 +135,7 @@ const ParticipantRowForm = ({
</td> </td>
); );
})} })}
<td className="bg-diagonal-lines border-l" /> <td className="border-l bg-diagonal-lines" />
</tr> </tr>
); );
}; };

4
apps/web/src/components/poll/desktop-poll/participant-row.tsx
View file

@ -71,7 +71,7 @@ export const ParticipantRowView: React.FunctionComponent<{
// biome-ignore lint/suspicious/noArrayIndexKey: Fix this later // biome-ignore lint/suspicious/noArrayIndexKey: Fix this later
key={i} key={i}
className={cn( className={cn(
"h-12 border-l border-t", "h-12 border-t border-l",
!vote || vote === "no" ? "bg-gray-100" : "bg-white", !vote || vote === "no" ? "bg-gray-100" : "bg-white",
{ {
"bg-gray-100": vote === "no", "bg-gray-100": vote === "no",
@ -96,7 +96,7 @@ export const ParticipantRowView: React.FunctionComponent<{
</td> </td>
); );
})} })}
<td className="bg-diagonal-lines border-l" /> <td className="border-l bg-diagonal-lines" />
</tr> </tr>
); );
}; };

12
apps/web/src/components/poll/desktop-poll/poll-header.tsx
View file

@ -21,7 +21,7 @@ const TimeRange: React.FunctionComponent<{
return ( return (
<div <div
className={cn( className={cn(
"text-muted-foreground relative flex flex-col items-center gap-1.5 text-xs font-normal", "relative flex flex-col items-center gap-1.5 font-normal text-muted-foreground text-xs",
className, className,
)} )}
> >
@ -49,7 +49,7 @@ const TimelineRow = ({
<tr> <tr>
<th <th
style={{ minWidth: 235, top }} style={{ minWidth: 235, top }}
className="sticky left-0 z-30 bg-white pl-4 pr-4" className="sticky left-0 z-30 bg-white pr-4 pl-4"
/> />
{children} {children}
<th className="w-full min-w-4 border-l" /> <th className="w-full min-w-4 border-l" />
@ -83,7 +83,7 @@ const PollHeader: React.FunctionComponent = () => {
<div className="flex"> <div className="flex">
<div <div
className={cn( className={cn(
"inline-flex h-5 gap-1 px-2 py-0.5 text-xs font-medium uppercase", "inline-flex h-5 gap-1 px-2 py-0.5 font-medium text-xs uppercase",
firstOfMonth ? "opacity-100" : "opacity-0", firstOfMonth ? "opacity-100" : "opacity-0",
)} )}
> >
@ -124,10 +124,10 @@ const PollHeader: React.FunctionComponent = () => {
> >
{firstOfDay ? ( {firstOfDay ? (
<div className="mt-1 flex flex-col gap-1"> <div className="mt-1 flex flex-col gap-1">
<div className="text-muted-foreground text-xs font-normal"> <div className="font-normal text-muted-foreground text-xs">
{option.dow} {option.dow}
</div> </div>
<div className="text-sm font-medium">{option.day}</div> <div className="font-medium text-sm">{option.day}</div>
</div> </div>
) : null} ) : null}
</th> </th>
@ -150,7 +150,7 @@ const PollHeader: React.FunctionComponent = () => {
duration={option.duration} duration={option.duration}
/> />
) : ( ) : (
<p className="text-muted-foreground text-xs font-normal opacity-50"> <p className="font-normal text-muted-foreground text-xs opacity-50">
<Trans i18nKey="allDay" defaults="All-Day" /> <Trans i18nKey="allDay" defaults="All-Day" />
</p> </p>
)} )}

2
apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
View file

@ -174,7 +174,7 @@ export const FinalizePollForm = ({
<div className="flex gap-x-4"> <div className="flex gap-x-4">
<DateIcon start={option.startTime} /> <DateIcon start={option.startTime} />
<div className="grow whitespace-nowrap"> <div className="grow whitespace-nowrap">
<div className="text-sm font-medium"> <div className="font-medium text-sm">
{start.format("LL")} {start.format("LL")}
</div> </div>
<div className="text-muted-foreground text-sm"> <div className="text-muted-foreground text-sm">

2
apps/web/src/components/poll/mobile-poll/grouped-options.tsx
View file

@ -29,7 +29,7 @@ const GroupedOptions: React.FunctionComponent<GroupedOptionsProps> = ({
<div key={day}> <div key={day}>
<div <div
className={cn( className={cn(
"flex border-b bg-gray-50 px-4 py-2 text-xs font-medium uppercase", "flex border-b bg-gray-50 px-4 py-2 font-medium text-xs uppercase",
groupClassName, groupClassName,
)} )}
> >

8
apps/web/src/components/poll/mobile-poll/poll-option.tsx
View file

@ -42,7 +42,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
return ( return (
<div> <div>
{noVotes ? ( {noVotes ? (
<p className="rounded-lg bg-gray-50 p-2 text-center text-sm text-gray-500"> <p className="rounded-lg bg-gray-50 p-2 text-center text-gray-500 text-sm">
{t("noVotes")} {t("noVotes")}
</p> </p>
) : ( ) : (
@ -56,7 +56,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
<VoteIcon <VoteIcon
type="yes" type="yes"
size="sm" size="sm"
className="absolute bottom-full left-full -translate-x-1.5 translate-y-2.5 rounded-full bg-white" className="-translate-x-1.5 absolute bottom-full left-full translate-y-2.5 rounded-full bg-white"
/> />
</div> </div>
<div className="truncate text-sm">{name}</div> <div className="truncate text-sm">{name}</div>
@ -70,7 +70,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
<VoteIcon <VoteIcon
type="ifNeedBe" type="ifNeedBe"
size="sm" size="sm"
className="absolute bottom-full left-full -translate-x-1.5 translate-y-2.5 rounded-full bg-white" className="-translate-x-1.5 absolute bottom-full left-full translate-y-2.5 rounded-full bg-white"
/> />
</div> </div>
<div className="truncate text-sm"> {name}</div> <div className="truncate text-sm"> {name}</div>
@ -86,7 +86,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
<VoteIcon <VoteIcon
type="no" type="no"
size="sm" size="sm"
className="absolute bottom-full left-full -translate-x-1.5 translate-y-2.5 rounded-full bg-white" className="-translate-x-1.5 absolute bottom-full left-full translate-y-2.5 rounded-full bg-white"
/> />
</div> </div>
<div className="truncate text-sm">{name}</div> <div className="truncate text-sm">{name}</div>

4
apps/web/src/components/poll/poll-footer.tsx
View file

@ -4,7 +4,7 @@ import { Trans } from "@/components/trans";
export function PollFooter() { export function PollFooter() {
return ( return (
<div className="pb-12 pt-4 text-center text-sm text-gray-500"> <div className="pt-4 pb-12 text-center text-gray-500 text-sm">
<Trans <Trans
defaults="Powered by <a>{name}</a>" defaults="Powered by <a>{name}</a>"
i18nKey="poweredByRallly" i18nKey="poweredByRallly"
@ -12,7 +12,7 @@ export function PollFooter() {
components={{ components={{
a: ( a: (
<Link <Link
className="hover:text-primary-600 rounded-none border-b border-b-gray-500 font-semibold" className="rounded-none border-b border-b-gray-500 font-semibold hover:text-primary-600"
href="https://rallly.co" href="https://rallly.co"
/> />
), ),

8
apps/web/src/components/poll/scheduled-event.tsx
View file

@ -27,10 +27,10 @@ function DateIcon({ start }: { start: Date }) {
className="inline-flex size-12 flex-col rounded-lg border text-center" className="inline-flex size-12 flex-col rounded-lg border text-center"
dateTime={d.toISOString()} dateTime={d.toISOString()}
> >
<div className="border-b border-green-600/10 p-px text-xs"> <div className="border-green-600/10 border-b p-px text-xs">
{d.format("MMM")} {d.format("MMM")}
</div> </div>
<div className="inline-flex grow items-center justify-center text-sm font-bold"> <div className="inline-flex grow items-center justify-center font-bold text-sm">
{d.format("D")} {d.format("D")}
</div> </div>
</time> </time>
@ -81,7 +81,7 @@ export function ScheduledEvent() {
<div className="rounded-lg border bg-white p-0.5 shadow-sm"> <div className="rounded-lg border bg-white p-0.5 shadow-sm">
<div className="flex h-9 items-center gap-x-2 rounded-md bg-gray-100 px-2"> <div className="flex h-9 items-center gap-x-2 rounded-md bg-gray-100 px-2">
<CalendarIcon className="size-4" /> <CalendarIcon className="size-4" />
<h2 className="text-sm font-medium"> <h2 className="font-medium text-sm">
<Trans i18nKey="schedulateDate" defaults="Scheduled Date" /> <Trans i18nKey="schedulateDate" defaults="Scheduled Date" />
</h2> </h2>
</div> </div>
@ -92,7 +92,7 @@ export function ScheduledEvent() {
</div> </div>
<div className="items-center gap-x-4"> <div className="items-center gap-x-4">
<div className="space-y-1"> <div className="space-y-1">
<div className="text-sm font-medium"> <div className="font-medium text-sm">
<FinalDate start={event.start} /> <FinalDate start={event.start} />
</div> </div>
<div className="text-sm opacity-75"> <div className="text-sm opacity-75">

2
apps/web/src/components/poll/you-avatar.tsx
View file

@ -3,7 +3,7 @@ import { UserIcon } from "lucide-react";
export function YouAvatar() { export function YouAvatar() {
return ( return (
<div className="inline-flex size-5 items-center justify-center rounded-full bg-gray-200 text-xs font-medium"> <div className="inline-flex size-5 items-center justify-center rounded-full bg-gray-200 font-medium text-xs">
<Icon> <Icon>
<UserIcon /> <UserIcon />
</Icon> </Icon>

2
apps/web/src/components/router-loading-indicator.tsx
View file

@ -62,7 +62,7 @@ export const RouterLoadingIndicator = () => {
return ( return (
<div <div
className={cn( className={cn(
"fixed left-0 right-0 top-0 z-50 w-full", "fixed top-0 right-0 left-0 z-50 w-full",
isLoading ? "opacity-100" : "opacity-0", isLoading ? "opacity-100" : "opacity-0",
)} )}
> >

2
apps/web/src/components/spinner.tsx
View file

@ -5,7 +5,7 @@ export const Spinner = (props: { className?: string }) => {
return ( return (
<Loader2Icon <Loader2Icon
className={cn( className={cn(
"text-muted-foreground inline-block h-5 animate-spin", "inline-block h-5 animate-spin text-muted-foreground",
props.className, props.className,
)} )}
/> />

4
apps/web/src/components/steps/steps.tsx
View file

@ -18,7 +18,7 @@ const Steps: React.FunctionComponent<StepsProps> = ({
return ( return (
<div className={cn("inline-flex items-center gap-2.5", className)}> <div className={cn("inline-flex items-center gap-2.5", className)}>
<div className="text-sm font-medium tracking-tight"> <div className="font-medium text-sm tracking-tight">
{t("stepSummary", { {t("stepSummary", {
current: current + 1, current: current + 1,
total, total,
@ -33,7 +33,7 @@ const Steps: React.FunctionComponent<StepsProps> = ({
className={cn("h-2 w-2 rounded-full transition-all", { className={cn("h-2 w-2 rounded-full transition-all", {
"bg-primary-400": i <= current, "bg-primary-400": i <= current,
"bg-gray-300": i > current, "bg-gray-300": i > current,
"ring-primary-200 animate-pulse ring-4": i === current, "animate-pulse ring-4 ring-primary-200": i === current,
})} })}
/> />
); );

22
apps/web/src/components/user-dropdown.tsx
View file

@ -61,7 +61,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
<div className="grow"> <div className="grow">
<div>{user.isGuest ? <Trans i18nKey="guest" /> : user.name}</div> <div>{user.isGuest ? <Trans i18nKey="guest" /> : user.name}</div>
{user.email ? ( {user.email ? (
<div className="text-muted-foreground text-xs font-normal"> <div className="font-normal text-muted-foreground text-xs">
{user.email} {user.email}
</div> </div>
) : null} ) : null}
@ -70,7 +70,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem asChild={true}> <DropdownMenuItem asChild={true}>
<Link href="/polls" className="flex items-center gap-x-2 sm:hidden"> <Link href="/polls" className="flex items-center gap-x-2 sm:hidden">
<ListIcon className="text-muted-foreground size-4" /> <ListIcon className="size-4 text-muted-foreground" />
<Trans i18nKey="polls" defaults="Polls" /> <Trans i18nKey="polls" defaults="Polls" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -80,7 +80,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
href="/settings/profile" href="/settings/profile"
className="flex items-center gap-x-2" className="flex items-center gap-x-2"
> >
<UserIcon className="text-muted-foreground size-4" /> <UserIcon className="size-4 text-muted-foreground" />
<Trans i18nKey="profile" defaults="Profile" /> <Trans i18nKey="profile" defaults="Profile" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -90,7 +90,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
href="/settings/preferences" href="/settings/preferences"
className="flex items-center gap-x-2" className="flex items-center gap-x-2"
> >
<Settings2Icon className="text-muted-foreground size-4" /> <Settings2Icon className="size-4 text-muted-foreground" />
<Trans i18nKey="preferences" defaults="Preferences" /> <Trans i18nKey="preferences" defaults="Preferences" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -100,7 +100,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
href="/settings/billing" href="/settings/billing"
className="flex items-center gap-x-2" className="flex items-center gap-x-2"
> >
<CreditCardIcon className="text-muted-foreground size-4" /> <CreditCardIcon className="size-4 text-muted-foreground" />
<Trans i18nKey="Billing" defaults="Billing" /> <Trans i18nKey="Billing" defaults="Billing" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -111,7 +111,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
href="https://support.rallly.co" href="https://support.rallly.co"
className="flex items-center gap-x-2" className="flex items-center gap-x-2"
> >
<LifeBuoyIcon className="text-muted-foreground size-4" /> <LifeBuoyIcon className="size-4 text-muted-foreground" />
<Trans i18nKey="support" defaults="Support" /> <Trans i18nKey="support" defaults="Support" />
<Icon> <Icon>
<ArrowUpRight /> <ArrowUpRight />
@ -125,7 +125,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
href="https://support.rallly.co/self-hosting/pricing" href="https://support.rallly.co/self-hosting/pricing"
className="flex items-center gap-x-2" className="flex items-center gap-x-2"
> >
<GemIcon className="text-muted-foreground size-4" /> <GemIcon className="size-4 text-muted-foreground" />
<Trans i18nKey="pricing" defaults="Pricing" /> <Trans i18nKey="pricing" defaults="Pricing" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -137,7 +137,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
href="https://feedback.rallly.co" href="https://feedback.rallly.co"
className="flex items-center gap-x-2" className="flex items-center gap-x-2"
> >
<MegaphoneIcon className="text-muted-foreground size-4" /> <MegaphoneIcon className="size-4 text-muted-foreground" />
<Trans i18nKey="feedback" defaults="Feedback" /> <Trans i18nKey="feedback" defaults="Feedback" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -146,13 +146,13 @@ export const UserDropdown = ({ className }: { className?: string }) => {
<IfGuest> <IfGuest>
<DropdownMenuItem asChild={true}> <DropdownMenuItem asChild={true}>
<LoginLink className="flex items-center gap-x-2"> <LoginLink className="flex items-center gap-x-2">
<LogInIcon className="text-muted-foreground size-4" /> <LogInIcon className="size-4 text-muted-foreground" />
<Trans i18nKey="login" defaults="login" /> <Trans i18nKey="login" defaults="login" />
</LoginLink> </LoginLink>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem asChild={true}> <DropdownMenuItem asChild={true}>
<RegisterLink className="flex items-center gap-x-2"> <RegisterLink className="flex items-center gap-x-2">
<UserPlusIcon className="text-muted-foreground size-4" /> <UserPlusIcon className="size-4 text-muted-foreground" />
<Trans i18nKey="createAnAccount" defaults="Register" /> <Trans i18nKey="createAnAccount" defaults="Register" />
</RegisterLink> </RegisterLink>
</DropdownMenuItem> </DropdownMenuItem>
@ -164,7 +164,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
}} }}
className="flex items-center gap-x-2" className="flex items-center gap-x-2"
> >
<LogOutIcon className="text-muted-foreground size-4" /> <LogOutIcon className="size-4 text-muted-foreground" />
<Trans i18nKey="logout" /> <Trans i18nKey="logout" />
</DropdownMenuItem> </DropdownMenuItem>
</IfAuthenticated> </IfAuthenticated>

2
apps/web/src/features/licensing/components/license-limit-warning.tsx
View file

@ -21,7 +21,7 @@ export async function LicenseLimitWarning() {
} }
return ( return (
<div className="bg-muted p-2 text-center text-sm rounded-md m-1 text-muted-foreground"> <div className="m-1 rounded-md bg-muted p-2 text-center text-muted-foreground text-sm">
<Trans <Trans
i18nKey="licenseLimitWarning" i18nKey="licenseLimitWarning"
defaults="You have exceeded the limits of your license. Please <a>upgrade</a>." defaults="You have exceeded the limits of your license. Please <a>upgrade</a>."

4
apps/web/src/features/poll/components/poll-list.tsx
View file

@ -24,10 +24,10 @@ export function PollListItem({
}) { }) {
return ( return (
<StackedListItem> <StackedListItem>
<div className="relative -m-4 flex min-w-0 flex-1 items-center gap-2 p-4"> <div className="-m-4 relative flex min-w-0 flex-1 items-center gap-2 p-4">
<PollStatusIcon status={status} showTooltip={false} /> <PollStatusIcon status={status} showTooltip={false} />
<Link <Link
className="focus:ring-ring min-w-0 text-sm font-medium hover:underline focus-visible:ring-2" className="min-w-0 font-medium text-sm hover:underline focus:ring-ring focus-visible:ring-2"
href={pollLink} href={pollLink}
> >
<span className="absolute inset-0" /> <span className="absolute inset-0" />

8
apps/web/src/features/quick-create/quick-create-widget.tsx
View file

@ -16,7 +16,7 @@ export async function QuickCreateWidget() {
return ( return (
<div className="space-y-8"> <div className="space-y-8">
<div className="space-y-6"> <div className="space-y-6">
<div className="text-primary inline-flex items-center justify-center gap-2 rounded-md font-medium"> <div className="inline-flex items-center justify-center gap-2 rounded-md font-medium text-primary">
<ZapIcon className="size-5" /> <ZapIcon className="size-5" />
<h2> <h2>
<Trans <Trans
@ -27,7 +27,7 @@ export async function QuickCreateWidget() {
/> />
</h2> </h2>
</div> </div>
<p className="text-muted-foreground text-pretty"> <p className="text-pretty text-muted-foreground">
<Trans <Trans
t={t} t={t}
ns="app" ns="app"
@ -57,7 +57,7 @@ export async function QuickCreateWidget() {
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="truncate font-medium">{poll.title}</div> <div className="truncate font-medium">{poll.title}</div>
<div className="text-muted-foreground whitespace-nowrap text-sm"> <div className="whitespace-nowrap text-muted-foreground text-sm">
<RelativeDate date={poll.createdAt} /> <RelativeDate date={poll.createdAt} />
</div> </div>
</div> </div>
@ -94,7 +94,7 @@ export async function QuickCreateWidget() {
/> />
</h3> </h3>
</div> </div>
<ul className="text-muted-foreground space-y-2"> <ul className="space-y-2 text-muted-foreground">
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Icon variant="success" size="lg"> <Icon variant="success" size="lg">
<CheckIcon /> <CheckIcon />

2
apps/web/src/features/scheduled-event/components/scheduled-event-list.tsx
View file

@ -43,7 +43,7 @@ export function ScheduledEventListItem({
format="LL" format="LL"
/> />
</div> </div>
<div className="text-muted-foreground mt-1"> <div className="mt-1 text-muted-foreground">
{allDay ? ( {allDay ? (
<Trans i18nKey="allDay" defaults="All day" /> <Trans i18nKey="allDay" defaults="All day" />
) : ( ) : (

9
biome.json
View file

@ -15,6 +15,15 @@
"level": "error", "level": "error",
"fix": "unsafe" "fix": "unsafe"
} }
},
"nursery": {
"useSortedClasses": {
"options": {
"functions": ["cn", "clsx", "cva", "tw"]
},
"level": "error",
"fix": "safe"
}
} }
} }
}, },

4
packages/ui/src/accordion.tsx
View file

@ -47,12 +47,12 @@ const AccordionContent = React.forwardRef<
<AccordionPrimitive.Content <AccordionPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all", "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
className, className,
)} )}
{...props} {...props}
> >
<div className="pb-4 pt-0">{children}</div> <div className="pt-0 pb-4">{children}</div>
</AccordionPrimitive.Content> </AccordionPrimitive.Content>
)); ));
AccordionContent.displayName = AccordionPrimitive.Content.displayName; AccordionContent.displayName = AccordionPrimitive.Content.displayName;

2
packages/ui/src/action-bar.tsx
View file

@ -42,7 +42,7 @@ const ActionBarContainer = React.forwardRef<
<div <div
ref={ref} ref={ref}
className={cn( className={cn(
"bg-action-bar text-action-bar-foreground pointer-events-auto z-50 mx-auto inline-flex w-full max-w-2xl items-center gap-4 rounded-xl p-2 shadow-lg", "pointer-events-auto z-50 mx-auto inline-flex w-full max-w-2xl items-center gap-4 rounded-xl bg-action-bar p-2 text-action-bar-foreground shadow-lg",
className, className,
)} )}
{...props} {...props}

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

@ -4,13 +4,13 @@ import * as React from "react";
import { cn } from "./lib/utils"; import { cn } from "./lib/utils";
const alertVariants = cva( const alertVariants = cva(
"flex sm:flex-row flex-col gap-x-3 gap-y-2 rounded-md border p-4", "flex flex-col gap-x-3 gap-y-2 rounded-md border p-4 sm:flex-row",
{ {
variants: { variants: {
variant: { variant: {
default: "bg-gray-50 text-foreground", default: "bg-gray-50 text-foreground",
destructive: destructive:
"text-destructive bg-rose-50 border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive", "border-destructive/50 bg-rose-50 text-destructive dark:border-destructive [&>svg]:text-destructive",
}, },
}, },
defaultVariants: { defaultVariants: {
@ -33,7 +33,7 @@ const Alert = React.forwardRef<
{...props} {...props}
> >
{Icon ? ( {Icon ? (
<Icon className="text-muted-foreground -mt-0.5 mb-2 size-5" /> <Icon className="-mt-0.5 mb-2 size-5 text-muted-foreground" />
) : null} ) : null}
<div>{children}</div> <div>{children}</div>
</div> </div>
@ -48,7 +48,7 @@ const AlertTitle = React.forwardRef<
<h5 <h5
ref={ref} ref={ref}
className={cn( className={cn(
"mb-2 text-sm font-semibold leading-none tracking-tight", "mb-2 font-semibold text-sm leading-none tracking-tight",
className, className,
)} )}
{...props} {...props}

10
packages/ui/src/badge.tsx
View file

@ -4,20 +4,20 @@ import type * as React from "react";
import { cn } from "./lib/utils"; import { cn } from "./lib/utils";
const badgeVariants = cva( const badgeVariants = cva(
"inline-flex group whitespace-nowrap items-center rounded-full justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "group inline-flex items-center justify-center whitespace-nowrap rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{ {
variants: { variants: {
variant: { variant: {
primary: "bg-primary text-primary-50", primary: "bg-primary text-primary-50",
default: "bg-gray-50 border", default: "border bg-gray-50",
destructive: "bg-destructive text-destructive-foreground", destructive: "bg-destructive text-destructive-foreground",
outline: "text-foreground", outline: "text-foreground",
green: "bg-green-600 text-white", green: "bg-green-600 text-white",
secondary: "text-primary bg-primary-50", secondary: "bg-primary-50 text-primary",
}, },
size: { size: {
md: "h-6 min-w-5 text-xs px-2", md: "h-6 min-w-5 px-2 text-xs",
lg: "h-7 text-sm min-w-7 px-2.5", lg: "h-7 min-w-7 px-2.5 text-sm",
}, },
}, },
defaultVariants: { defaultVariants: {

2
packages/ui/src/billing-plan.tsx
View file

@ -40,7 +40,7 @@ export const BillingPlanPrice = ({
}: React.PropsWithChildren<{ discount?: React.ReactNode }>) => { }: React.PropsWithChildren<{ discount?: React.ReactNode }>) => {
return ( return (
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<span className="text-3xl font-bold">{children}</span> <span className="font-bold text-3xl">{children}</span>
</div> </div>
); );
}; };

6
packages/ui/src/breadcrumb.tsx
View file

@ -19,7 +19,7 @@ const BreadcrumbList = React.forwardRef<
<ol <ol
ref={ref} ref={ref}
className={cn( className={cn(
"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5", "flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
className, className,
)} )}
{...props} {...props}
@ -50,7 +50,7 @@ const BreadcrumbLink = React.forwardRef<
return ( return (
<Comp <Comp
ref={ref} ref={ref}
className={cn("hover:text-foreground transition-colors", className)} className={cn("transition-colors hover:text-foreground", className)}
{...props} {...props}
/> />
); );
@ -65,7 +65,7 @@ const BreadcrumbPage = React.forwardRef<
ref={ref} ref={ref}
aria-disabled="true" aria-disabled="true"
aria-current="page" aria-current="page"
className={cn("text-foreground font-normal", className)} className={cn("font-normal text-foreground", className)}
{...props} {...props}
/> />
)); ));

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

@ -9,30 +9,30 @@ import { cn } from "./lib/utils";
const buttonVariants = cva( const buttonVariants = cva(
cn( cn(
"inline-flex border text-shadow font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap border", "inline-flex select-none items-center justify-center whitespace-nowrap border border font-medium text-shadow disabled:pointer-events-none disabled:opacity-50",
"focus-visible:shadow-none", "focus-visible:shadow-none",
), ),
{ {
variants: { variants: {
variant: { variant: {
primary: primary:
"focus-visible:ring-offset-1 border-primary bg-primary hover:bg-primary-500 disabled:bg-gray-400 disabled:border-transparent text-white", "border-primary bg-primary text-white hover:bg-primary-500 focus-visible:ring-offset-1 disabled:border-transparent disabled:bg-gray-400",
destructive: destructive:
"focus-visible:ring-offset-1 bg-destructive shadow-sm text-destructive-foreground active:bg-destructive border-destructive hover:bg-destructive/90", "border-destructive bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 focus-visible:ring-offset-1 active:bg-destructive",
default: "focus-visible:ring-offset-1 hover:bg-gray-50 bg-white", default: "bg-white hover:bg-gray-50 focus-visible:ring-offset-1",
secondary: secondary:
"focus-visible:ring-offset-1 border-secondary bg-secondary hover:bg-secondary/80 text-secondary-foreground", "border-secondary bg-secondary text-secondary-foreground hover:bg-secondary/80 focus-visible:ring-offset-1",
ghost: ghost:
"border-transparent bg-transparent data-[state=open]:bg-gray-500/20 text-gray-800 hover:bg-gray-500/10 active:bg-gray-500/20", "border-transparent bg-transparent text-gray-800 hover:bg-gray-500/10 active:bg-gray-500/20 data-[state=open]:bg-gray-500/20",
actionBar: actionBar:
"border-transparent bg-transparent data-[state=open]:bg-gray-500/20 text-gray-800 hover:bg-gray-700 active:bg-gray-700/50", "border-transparent bg-transparent text-gray-800 hover:bg-gray-700 active:bg-gray-700/50 data-[state=open]:bg-gray-500/20",
link: "underline-offset-4 border-transparent hover:underline text-primary", link: "border-transparent text-primary underline-offset-4 hover:underline",
}, },
size: { size: {
default: "h-9 px-2.5 gap-x-2 text-sm rounded-md", default: "h-9 gap-x-2 rounded-md px-2.5 text-sm",
sm: "h-8 text-sm px-2 gap-x-1.5 rounded-md", sm: "h-8 gap-x-1.5 rounded-md px-2 text-sm",
lg: "h-12 text-base gap-x-3 px-4 rounded-lg", lg: "h-12 gap-x-3 rounded-lg px-4 text-base",
icon: "size-7 text-sm gap-x-1.5 rounded-md", icon: "size-7 gap-x-1.5 rounded-md text-sm",
"icon-lg": "size-8 rounded-full", "icon-lg": "size-8 rounded-full",
}, },
}, },

6
packages/ui/src/card.tsx
View file

@ -9,7 +9,7 @@ const Card = React.forwardRef<
<div <div
ref={ref} ref={ref}
className={cn( className={cn(
"bg-card text-card-foreground overflow-hidden rounded-lg border-x border-y shadow-sm", "overflow-hidden rounded-lg border-x border-y bg-card text-card-foreground shadow-sm",
className, className,
)} )}
{...props} {...props}
@ -39,7 +39,7 @@ const CardTitle = React.forwardRef<
<h3 <h3
ref={ref} ref={ref}
className={cn( className={cn(
"flex items-center gap-x-2.5 text-base font-semibold", "flex items-center gap-x-2.5 font-semibold text-base",
className, className,
)} )}
{...props} {...props}
@ -53,7 +53,7 @@ const CardDescription = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<p <p
ref={ref} ref={ref}
className={cn("text-muted-foreground mt-0.5 text-sm", className)} className={cn("mt-0.5 text-muted-foreground text-sm", className)}
{...props} {...props}
/> />
)); ));

2
packages/ui/src/checkbox.tsx
View file

@ -14,7 +14,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn(
"data-[state=checked]:bg-primary data-[state=checked]:border-primary-700 data-[state=checked]:active:bg-primary-700 data-[state=indeterminate]:active:bg-primary-700 data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground peer size-5 shrink-0 rounded-md border border-gray-300 focus-visible:outline-none focus-visible:ring-1 active:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:active:border-gray-300", "peer size-5 shrink-0 rounded-md border border-gray-300 focus-visible:outline-none focus-visible:ring-1 active:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary-700 data-[state=indeterminate]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground data-[state=unchecked]:active:border-gray-300 data-[state=checked]:active:bg-primary-700 data-[state=indeterminate]:active:bg-primary-700",
className, className,
)} )}
checked={checked} checked={checked}

14
packages/ui/src/command.tsx
View file

@ -34,9 +34,9 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
hideCloseButton={true} hideCloseButton={true}
size="xl" size="xl"
position="top" position="top"
className="shadow-huge p-0" className="p-0 shadow-huge"
> >
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-4 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:p-2 [&_[cmdk-item]_svg]:size-4"> <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-4 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:p-2 [&_[cmdk-item]_svg]:size-4">
{children} {children}
</Command> </Command>
</DialogContent> </DialogContent>
@ -58,7 +58,7 @@ const CommandInput = React.forwardRef<
<CommandPrimitive.Input <CommandPrimitive.Input
ref={ref} ref={ref}
className={cn( className={cn(
"placeholder:text-foreground-muted flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50", "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-foreground-muted focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
className, className,
)} )}
{...props} {...props}
@ -87,7 +87,7 @@ const CommandEmpty = React.forwardRef<
>((props, ref) => ( >((props, ref) => (
<CommandPrimitive.Empty <CommandPrimitive.Empty
ref={ref} ref={ref}
className="text-muted-foreground py-6 text-center text-sm" className="py-6 text-center text-muted-foreground text-sm"
{...props} {...props}
/> />
)); ));
@ -101,7 +101,7 @@ const CommandGroup = React.forwardRef<
<CommandPrimitive.Group <CommandPrimitive.Group
ref={ref} ref={ref}
className={cn( className={cn(
"overflow-hidden p-2 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:text-gray-500", "overflow-hidden p-2 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-gray-500 [&_[cmdk-group-heading]]:text-sm",
className, className,
)} )}
{...props} {...props}
@ -116,7 +116,7 @@ const CommandSeparator = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<CommandPrimitive.Separator <CommandPrimitive.Separator
ref={ref} ref={ref}
className={cn("bg-border -mx-1 h-px", className)} className={cn("-mx-1 h-px bg-border", className)}
{...props} {...props}
/> />
)); ));
@ -161,7 +161,7 @@ const CommandShortcut = ({
return ( return (
<span <span
className={cn( className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest", "ml-auto text-muted-foreground text-xs tracking-widest",
className, className,
)} )}
{...props} {...props}

16
packages/ui/src/dialog.tsx
View file

@ -26,7 +26,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay <DialogPrimitive.Overlay
ref={ref} ref={ref}
className={cn( className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-gray-900/10", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-gray-900/10 data-[state=closed]:animate-out data-[state=open]:animate-in",
className, className,
)} )}
{...props} {...props}
@ -37,18 +37,18 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const dialogContentVariants = cva( const dialogContentVariants = cva(
cn( cn(
//style //style
"bg-background sm:rounded-lg sm:border shadow-lg p-4 gap-4", "gap-4 bg-background p-4 shadow-lg sm:rounded-lg sm:border",
// position // position
"fixed z-50 grid w-full top-0 left-1/2 -translate-x-1/2", "-translate-x-1/2 fixed top-0 left-1/2 z-50 grid w-full",
// animation // animation
"duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=closed]:slide-out-to-left-1/2", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=closed]:slide-out-to-left-1/2 duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in",
), ),
{ {
variants: { variants: {
position: { position: {
top: "sm:top-48 data-[state=closed]:slide-out-to-top-[10%] data-[state=open]:slide-in-from-top-[10%]", top: "data-[state=closed]:slide-out-to-top-[10%] data-[state=open]:slide-in-from-top-[10%] sm:top-48",
center: center:
"sm:top-[50%] sm:translate-y-[-50%] data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]", "data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] sm:top-[50%] sm:translate-y-[-50%]",
}, },
size: { size: {
sm: "sm:max-w-sm", sm: "sm:max-w-sm",
@ -87,7 +87,7 @@ const DialogContent = React.forwardRef<
> >
{children} {children}
{!hideCloseButton ? ( {!hideCloseButton ? (
<DialogClose asChild className="absolute right-4 top-4"> <DialogClose asChild className="absolute top-4 right-4">
<Button size="icon" variant="ghost"> <Button size="icon" variant="ghost">
<Icon> <Icon>
<XIcon /> <XIcon />
@ -131,7 +131,7 @@ const DialogTitle = React.forwardRef<
<DialogPrimitive.Title <DialogPrimitive.Title
ref={ref} ref={ref}
className={cn( className={cn(
"text-base font-semibold leading-none tracking-tight", "font-semibold text-base leading-none tracking-tight",
className, className,
)} )}
{...props} {...props}

18
packages/ui/src/dropdown-menu.tsx
View file

@ -39,7 +39,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger <DropdownMenuPrimitive.SubTrigger
ref={ref} ref={ref}
className={cn( className={cn(
"focus:bg-accent data-[state=open]:bg-accent data-[disabled]:opacity-50 text-sm gap-2 flex cursor-default select-none items-center rounded-sm px-2 py-1.5 outline-none", "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent data-[disabled]:opacity-50",
inset && "pl-8", inset && "pl-8",
className, className,
)} )}
@ -59,7 +59,7 @@ const DropdownMenuSubContent = React.forwardRef<
<DropdownMenuPrimitive.SubContent <DropdownMenuPrimitive.SubContent
ref={ref} ref={ref}
className={cn( className={cn(
"bg-popover text-popover-foreground animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md", "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 min-w-[8rem] animate-in overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
className, className,
)} )}
{...props} {...props}
@ -77,7 +77,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref} ref={ref}
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"bg-popover text-popover-foreground animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[140px] overflow-hidden rounded-md border p-1 shadow-md", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[140px] animate-in overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
className, className,
)} )}
{...props} {...props}
@ -96,7 +96,7 @@ const DropdownMenuItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"flex items-center gap-x-2.5", "flex items-center gap-x-2.5",
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm font-medium outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded px-2 py-1.5 font-medium text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8", inset && "pl-8",
className, className,
)} )}
@ -112,7 +112,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem <DropdownMenuPrimitive.CheckboxItem
ref={ref} ref={ref}
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className, className,
)} )}
checked={checked} checked={checked}
@ -138,7 +138,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem <DropdownMenuPrimitive.RadioItem
ref={ref} ref={ref}
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 font-medium text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className, className,
)} )}
{...props} {...props}
@ -164,7 +164,7 @@ const DropdownMenuLabel = React.forwardRef<
<DropdownMenuPrimitive.Label <DropdownMenuPrimitive.Label
ref={ref} ref={ref}
className={cn( className={cn(
"px-2 py-1.5 text-sm font-semibold", "px-2 py-1.5 font-semibold text-sm",
inset && "pl-8", inset && "pl-8",
className, className,
)} )}
@ -179,7 +179,7 @@ const DropdownMenuSeparator = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator <DropdownMenuPrimitive.Separator
ref={ref} ref={ref}
className={cn("bg-muted -mx-1 my-1 h-px", className)} className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props} {...props}
/> />
)); ));
@ -225,7 +225,7 @@ export const DropdownMenuItemIconLabel = ({
}) => { }) => {
return ( return (
<span className="flex items-center gap-2.5"> <span className="flex items-center gap-2.5">
<Icon className="text-muted-foreground size-4" /> <Icon className="size-4 text-muted-foreground" />
{children} {children}
</span> </span>
); );

Some files were not shown because too many files have changed in this diff Show more