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

📦 Upgrade tailwind and start using size utility (#989)

Browse source
This commit is contained in:
Luke Vella 2024-01-19 14:43:09 +07:00 • committed by GitHub
parent 048c475cf7
commit d0b359afaf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
80 changed files with 177 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/landing/public/no.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="#94a3b8"> <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 20 20" fill="#94a3b8">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 369 B

After

Width:  |  Height:  |  Size: 368 B

Before After
Before After

2
apps/landing/public/yes.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="#22c55e"> <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 20 20" fill="#22c55e">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 287 B

After

Width:  |  Height:  |  Size: 286 B

Before After
Before After

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

@ -23,7 +23,7 @@ const ErrorPage: React.FunctionComponent<ComponentProps> = ({
</Head> </Head>
<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 h-24 w-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="text-primary-600 mb-2 text-3xl font-bold ">
{title} {title}
</div> </div>

2
apps/landing/src/components/home/bonus.tsx
View file

@ -36,7 +36,7 @@ const Item = ({
<span <span
className={cn("bg-primary rounded-full p-2 text-gray-50", className)} className={cn("bg-primary rounded-full p-2 text-gray-50", className)}
> >
<Icon className="h-4 w-4" /> <Icon className="size-4" />
</span> </span>
<div className="text-sm font-semibold">{children}</div> <div className="text-sm font-semibold">{children}</div>
</div> </div>

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

@ -38,8 +38,8 @@ const Screenshot = () => {
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="absolute left-1/2 top-full z-10 h-8 w-px -translate-x-1/2 bg-gray-800" />
<span className="absolute -bottom-12 left-1/2 z-10 inline-block h-3 w-3 origin-right -translate-x-1/2 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 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 h-3 w-3 origin-right -translate-x-1/2 animate-ping 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" />
</m.div> </m.div>
<m.div <m.div
transition={{ transition={{
@ -95,7 +95,7 @@ export const MarketingHero = ({
i18nKey="home:selfHostingBlog" i18nKey="home:selfHostingBlog"
defaults="Rallly 3.0 Self-Hosting" defaults="Rallly 3.0 Self-Hosting"
/> />
<ChevronRightIcon className="-mr-1 h-4 w-4" aria-hidden="true" /> <ChevronRightIcon className="-mr-1 size-4" aria-hidden="true" />
</span> </span>
</Link> </Link>
</div> </div>
@ -114,7 +114,7 @@ export const MarketingHero = ({
> >
<Link href={linkToApp("/new")}> <Link href={linkToApp("/new")}>
{callToAction} {callToAction}
<ChevronRightIcon className="-ml-1 h-5 w-5 transition-transform group-active:translate-x-1" /> <ChevronRightIcon className="-ml-1 size-5 transition-transform group-active:translate-x-1" />
</Link> </Link>
</Button> </Button>
<div className="whitespace-nowrap text-center text-sm font-medium text-gray-500"> <div className="whitespace-nowrap text-center text-sm font-medium text-gray-500">

2
apps/landing/src/components/layouts/blog-layout.tsx
View file

@ -11,7 +11,7 @@ export const BlogLayout = ({ children }: React.PropsWithChildren) => {
<div className="mt-16 overflow-hidden rounded-md border bg-gray-200/50 backdrop-blur-sm"> <div className="mt-16 overflow-hidden rounded-md border bg-gray-200/50 backdrop-blur-sm">
<div className="flex flex-col gap-x-4 gap-y-2 p-6 pb-0 sm:flex-row"> <div className="flex flex-col gap-x-4 gap-y-2 p-6 pb-0 sm:flex-row">
<div> <div>
<NewspaperIcon className="h-6 w-6" /> <NewspaperIcon className="size-6" />
</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>

4
apps/landing/src/components/layouts/page-layout.tsx
View file

@ -108,12 +108,12 @@ const PageLayout: React.FunctionComponent<PageLayoutProps> = ({ children }) => {
<span> <span>
<Trans i18nKey="goToApp" defaults="Go to app" /> <Trans i18nKey="goToApp" defaults="Go to app" />
</span> </span>
<ChevronRightIcon className="inline-block h-4 w-4 transition-all group-active:translate-x-1" /> <ChevronRightIcon className="inline-block size-4 transition-all group-active:translate-x-1" />
</Link> </Link>
<div className="flex items-center justify-center lg:hidden"> <div className="flex items-center justify-center lg:hidden">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger> <DropdownMenuTrigger>
<MenuIcon className="h-6 w-6" /> <MenuIcon className="size-6" />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" sideOffset={16}> <DropdownMenuContent align="end" sideOffset={16}>
<DropdownMenuItem asChild> <DropdownMenuItem asChild>

10
apps/landing/src/components/layouts/page-layout/footer.tsx
View file

@ -95,28 +95,28 @@ const Footer: React.FunctionComponent = () => {
href="https://twitter.com/ralllyco" href="https://twitter.com/ralllyco"
className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline" className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline"
> >
<TwitterIcon className="h-5 w-5" /> <TwitterIcon className="size-5" />
</Link> </Link>
<Link <Link
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="hover:text-primary-600 text-sm text-gray-500 hover:no-underline"
> >
<DiscordIcon className="h-5 w-5" /> <DiscordIcon className="size-5" />
</Link> </Link>
<Link <Link
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="hover:text-primary-600 text-sm text-gray-500 hover:no-underline"
> >
<LinkedinIcon className="h-5 w-5" /> <LinkedinIcon className="size-5" />
</Link> </Link>
<Link <Link
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="hover:text-primary-600 text-sm text-gray-500 hover:no-underline"
> >
<GithubIcon className="h-5 w-5" /> <GithubIcon className="size-5" />
</Link> </Link>
</div> </div>
</div> </div>
@ -219,7 +219,7 @@ const Footer: React.FunctionComponent = () => {
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="hover:border-primary-600 hover:text-primary-600 inline-flex items-center rounded-md border px-3 py-2 text-xs text-gray-500"
> >
<LanguagesIcon className="mr-2 h-5 w-5" /> <LanguagesIcon className="mr-2 size-5" />
<Trans i18nKey="volunteerTranslator" /> &rarr; <Trans i18nKey="volunteerTranslator" /> &rarr;
</Link> </Link>
</div> </div>

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

@ -104,7 +104,7 @@ import { Trans } from "@/components/trans";
// href="https://www.trustpilot.com/evaluate/rallly.co" // href="https://www.trustpilot.com/evaluate/rallly.co"
// > // >
// <span>Share your experience</span> // <span>Share your experience</span>
// <ArrowRight className="h-4 w-4" /> // <ArrowRight className="size-4" />
// </Link> // </Link>
// </Button> // </Button>
// </div> */} // </div> */}
@ -119,7 +119,7 @@ import { Trans } from "@/components/trans";
// }: React.PropsWithChildren<{ author: string; logo?: string }>) => { // }: React.PropsWithChildren<{ author: string; logo?: string }>) => {
// return ( // return (
// <div className="relative flex flex-col space-y-4 rounded-md bg-gray-50 px-4 py-3 shadow-sm"> // <div className="relative flex flex-col space-y-4 rounded-md bg-gray-50 px-4 py-3 shadow-sm">
// <QuoteIcon className="h-4 w-4 text-gray-400" /> // <QuoteIcon className="size-4 text-gray-400" />
// <div className="flex justify-between"> // <div className="flex justify-between">
// <div className="flex flex-col gap-2"> // <div className="flex flex-col gap-2">
// <div className="font-semibold">{author}</div> // <div className="font-semibold">{author}</div>
@ -131,7 +131,7 @@ import { Trans } from "@/components/trans";
// /> // />
// </div> // </div>
// {logo ? ( // {logo ? (
// <div className="relative h-16 w-16"> // <div className="relative size-16">
// <Image src={logo} fill alt="logo" /> // <Image src={logo} fill alt="logo" />
// </div> // </div>
// ) : null} // ) : null}
@ -289,7 +289,7 @@ const BigTestimonial = () => {
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" />
<ArrowUpRight className="ml-1 inline h-3 w-3" /> <ArrowUpRight className="ml-1 inline size-3" />
</Link> </Link>
</p> </p>
</div> </div>

2
apps/landing/src/pages/blog/[slug].tsx
View file

@ -56,7 +56,7 @@ const Page: NextPageWithLayout<Props> = ({ post }) => {
className="text-muted-foreground hover:text-primary inline-flex items-center gap-x-2 text-sm font-medium" className="text-muted-foreground hover:text-primary inline-flex items-center gap-x-2 text-sm font-medium"
href="/blog" href="/blog"
> >
<ArrowLeftIcon className="h-4 w-4" /> All Posts <ArrowLeftIcon className="size-4" /> All Posts
</Link> </Link>
</nav> </nav>
<article> <article>

2
apps/landing/src/pages/pricing.tsx
View file

@ -278,7 +278,7 @@ const Page: NextPageWithLayout = () => {
<PriceTables /> <PriceTables />
<div className="rounded-md border bg-gradient-to-b from-cyan-50 to-cyan-50/60 px-5 py-4 text-cyan-800"> <div className="rounded-md border bg-gradient-to-b from-cyan-50 to-cyan-50/60 px-5 py-4 text-cyan-800">
<div className="mb-2"> <div className="mb-2">
<TrendingUpIcon className="text-indigo mr-2 mt-0.5 h-6 w-6 shrink-0" /> <TrendingUpIcon className="text-indigo mr-2 mt-0.5 size-6 shrink-0" />
</div> </div>
<div className="mb-1 flex items-center gap-x-2"> <div className="mb-1 flex items-center gap-x-2">
<h3 className="text-sm"> <h3 className="text-sm">

2
apps/landing/src/style.css
View file

@ -69,7 +69,7 @@
@apply focus:ring-rose-500; @apply focus:ring-rose-500;
} }
.checkbox { .checkbox {
@apply text-primary-600 focus:ring-primary-600 h-4 w-4 rounded border-gray-300 shadow-sm; @apply text-primary-600 focus:ring-primary-600 size-4 rounded border-gray-300 shadow-sm;
} }
.btn { .btn {
@apply inline-flex h-9 select-none items-center justify-center gap-x-1.5 whitespace-nowrap rounded-md border px-2.5 text-sm font-medium; @apply inline-flex h-9 select-none items-center justify-center gap-x-1.5 whitespace-nowrap rounded-md border px-2.5 text-sm font-medium;

2
apps/web/src/app/[locale]/(admin)/layout.tsx
View file

@ -40,7 +40,7 @@ function MobileNavigation() {
</Link> </Link>
<Button asChild variant="ghost"> <Button asChild variant="ghost">
<Link href="/menu"> <Link href="/menu">
<MenuIcon className="text-muted-foreground h-4 w-4" /> <MenuIcon className="text-muted-foreground size-4" />
</Link> </Link>
</Button> </Button>
</div> </div>

2
apps/web/src/app/[locale]/(admin)/menu-item.tsx
View file

@ -32,7 +32,7 @@ export function MenuItem({
isCurrent isCurrent
? "text-indigo-600" ? "text-indigo-600"
: "text-gray-400 group-hover:text-indigo-600", : "text-gray-400 group-hover:text-indigo-600",
"h-5 w-5 shrink-0", "size-5 shrink-0",
)} )}
aria-hidden="true" aria-hidden="true"
/> />

2
apps/web/src/app/[locale]/(admin)/polls/layout.tsx
View file

@ -28,7 +28,7 @@ export default async function Layout({
</PageTitle> </PageTitle>
<Button asChild> <Button asChild>
<Link href="/new"> <Link href="/new">
<PenBoxIcon className="text-muted-foreground h-4 w-4" /> <PenBoxIcon className="text-muted-foreground size-4" />
<span className="hidden sm:inline"> <span className="hidden sm:inline">
<Trans t={t} i18nKey="newPoll" /> <Trans t={t} i18nKey="newPoll" />
</span> </span>

8
apps/web/src/app/[locale]/(admin)/polls/polls-list.tsx
View file

@ -22,7 +22,7 @@ const EmptyState = () => {
<div className="py-24"> <div className="py-24">
<div className="mx-auto w-full max-w-md rounded-md border-2 border-dashed border-gray-300 p-8 text-center"> <div className="mx-auto w-full max-w-md rounded-md border-2 border-dashed border-gray-300 p-8 text-center">
<div className="mb-4"> <div className="mb-4">
<InboxIcon className="inline-block h-10 w-10 text-gray-400" /> <InboxIcon className="inline-block size-10 text-gray-400" />
</div> </div>
<h3 className="font-semibold"> <h3 className="font-semibold">
<Trans i18nKey="noPolls" defaults="No polls" /> <Trans i18nKey="noPolls" defaults="No polls" />
@ -36,7 +36,7 @@ const EmptyState = () => {
<div className="mt-6"> <div className="mt-6">
<Button variant="primary" asChild={true}> <Button variant="primary" asChild={true}>
<Link href="/new"> <Link href="/new">
<PlusIcon className="h-5 w-5" /> <PlusIcon className="size-5" />
<Trans defaults="New Poll" i18nKey="newPoll" /> <Trans defaults="New Poll" i18nKey="newPoll" />
</Link> </Link>
</Button> </Button>
@ -88,7 +88,7 @@ export function PollsList() {
<h3 className="truncate font-semibold text-gray-600 group-hover:text-gray-900"> <h3 className="truncate font-semibold text-gray-600 group-hover:text-gray-900">
{row.original.title} {row.original.title}
</h3> </h3>
<ArrowRightIcon className="h-4 w-4 opacity-0 transition-all group-hover:opacity-100 group-focus:translate-x-2" /> <ArrowRightIcon className="size-4 opacity-0 transition-all group-hover:opacity-100 group-focus:translate-x-2" />
</div> </div>
{row.original.event ? ( {row.original.event ? (
<p className="text-muted-foreground text-sm"> <p className="text-muted-foreground text-sm">
@ -151,7 +151,7 @@ export function PollsList() {
return ( return (
<Tooltip delayDuration={100}> <Tooltip delayDuration={100}>
<TooltipTrigger className="text-muted-foreground flex items-center gap-x-2"> <TooltipTrigger className="text-muted-foreground flex items-center gap-x-2">
<UsersIcon className="h-4 w-4" /> <UsersIcon className="size-4" />
<span className="text-sm"> <span className="text-sm">
{row.original.participants.length} {row.original.participants.length}
</span> </span>

10
apps/web/src/app/[locale]/(admin)/settings/billing/billing-page.tsx
View file

@ -43,11 +43,11 @@ const BillingPortal = () => {
window.location.pathname, window.location.pathname,
)}`} )}`}
> >
<CreditCardIcon className="h-4 w-4" /> <CreditCardIcon className="size-4" />
<span> <span>
<Trans i18nKey="billingPortal" defaults="Billing Portal" /> <Trans i18nKey="billingPortal" defaults="Billing Portal" />
</span> </span>
<ArrowUpRight className="h-4 w-4" /> <ArrowUpRight className="size-4" />
</Link> </Link>
</Button> </Button>
</div> </div>
@ -183,7 +183,7 @@ const LegacyBilling = () => {
}} }}
> >
<Link href={userPaymentData.updateUrl}> <Link href={userPaymentData.updateUrl}>
<CreditCardIcon className="h-4 w-4" /> <CreditCardIcon className="size-4" />
<Trans <Trans
i18nKey="subscriptionUpdatePayment" i18nKey="subscriptionUpdatePayment"
defaults="Update Payment Details" defaults="Update Payment Details"
@ -226,7 +226,7 @@ const LegacyBilling = () => {
</p> </p>
<Button asChild> <Button asChild>
<Link href="mailto:support@rallly.co"> <Link href="mailto:support@rallly.co">
<SendIcon className="h-4 w-4" /> <SendIcon className="size-4" />
<Trans i18nKey="contactSupport" defaults="Contact Support" /> <Trans i18nKey="contactSupport" defaults="Contact Support" />
</Link> </Link>
</Button> </Button>
@ -272,7 +272,7 @@ export function BillingPage() {
</p> </p>
<Button asChild> <Button asChild>
<Link href="mailto:support@rallly.co"> <Link href="mailto:support@rallly.co">
<SendIcon className="h-4 w-4" /> <SendIcon className="size-4" />
<Trans i18nKey="contactSupport" defaults="Contact Support" /> <Trans i18nKey="contactSupport" defaults="Contact Support" />
</Link> </Link>
</Button> </Button>

4
apps/web/src/app/[locale]/(admin)/settings/menu-item.tsx
View file

@ -69,7 +69,7 @@ export function SettingsMenu() {
<div className="mb-4 hidden divide-x overflow-hidden rounded-md border bg-gray-50 shadow-sm lg:inline-flex"> <div className="mb-4 hidden divide-x overflow-hidden rounded-md border bg-gray-50 shadow-sm lg:inline-flex">
{menuItems.map((item, i) => ( {menuItems.map((item, i) => (
<MenuItem key={i} href={item.href}> <MenuItem key={i} href={item.href}>
<item.icon className="h-4 w-4" /> <item.icon className="size-4" />
{item.title} {item.title}
</MenuItem> </MenuItem>
))} ))}
@ -90,7 +90,7 @@ export function SettingsMenu() {
{menuItems.map((item, i) => ( {menuItems.map((item, i) => (
<SelectItem key={i} value={item.title}> <SelectItem key={i} value={item.title}>
<div className="flex items-center gap-x-2.5"> <div className="flex items-center gap-x-2.5">
<item.icon className="text-muted-foreground h-4 w-4" /> <item.icon className="text-muted-foreground size-4" />
<span className="font-medium">{item.title}</span> <span className="font-medium">{item.title}</span>
</div> </div>
</SelectItem> </SelectItem>

4
apps/web/src/app/[locale]/(admin)/settings/profile/profile-page.tsx
View file

@ -57,7 +57,7 @@ export const ProfilePage = () => {
</AlertDescription> </AlertDescription>
</Alert> </Alert>
<LogoutButton className="mt-6" variant="destructive"> <LogoutButton className="mt-6" variant="destructive">
<UserXIcon className="h-4 w-4" /> <UserXIcon className="size-4" />
<Trans i18nKey="forgetMe" /> <Trans i18nKey="forgetMe" />
</LogoutButton> </LogoutButton>
</SettingsSection> </SettingsSection>
@ -87,7 +87,7 @@ export const ProfilePage = () => {
} }
> >
<LogoutButton> <LogoutButton>
<LogOutIcon className="h-4 w-4" /> <LogOutIcon className="size-4" />
<Trans i18nKey="logout" defaults="Logout" /> <Trans i18nKey="logout" defaults="Logout" />
</LogoutButton> </LogoutButton>
</SettingsSection> </SettingsSection>

6
apps/web/src/app/[locale]/(admin)/sidebar.tsx
View file

@ -47,7 +47,7 @@ function NavItem({
<Icon <Icon
className={cn( className={cn(
current ? "text-gray-500" : "text-gray-400 group-hover:text-gray-500", current ? "text-gray-500" : "text-gray-400 group-hover:text-gray-500",
"h-5 w-5 shrink-0", "size-5 shrink-0",
)} )}
aria-hidden="true" aria-hidden="true"
/> />
@ -105,7 +105,7 @@ export function Sidebar() {
className="mb-4 grid rounded-md border border-gray-200 bg-gray-50 px-4 py-3 hover:border-gray-300 hover:bg-gray-200 active:bg-gray-300" className="mb-4 grid rounded-md border border-gray-200 bg-gray-50 px-4 py-3 hover:border-gray-300 hover:bg-gray-200 active:bg-gray-300"
> >
<span className="mb-2 flex items-center gap-x-2"> <span className="mb-2 flex items-center gap-x-2">
<SparklesIcon className="h-5 w-5 text-gray-400" /> <SparklesIcon className="size-5 text-gray-400" />
<span className="text-sm font-bold"> <span className="text-sm font-bold">
<Trans i18nKey="upgrade" /> <Trans i18nKey="upgrade" />
</span> </span>
@ -149,7 +149,7 @@ export function Sidebar() {
{user.email} {user.email}
</span> </span>
</span> </span>
<ChevronRightIcon className="text-muted-foreground h-4 w-4 opacity-0 group-hover:opacity-100" /> <ChevronRightIcon className="text-muted-foreground size-4 opacity-0 group-hover:opacity-100" />
</Link> </Link>
</Button> </Button>
</li> </li>

2
apps/web/src/app/[locale]/(auth)/login/login-form.tsx
View file

@ -134,7 +134,7 @@ export function LoginForm({ oidcConfig }: { oidcConfig?: { name: string } }) {
<IfCloudHosted> <IfCloudHosted>
<Button size="lg" asChild> <Button size="lg" asChild>
<Link href={callbackUrl}> <Link href={callbackUrl}>
<UserIcon className="h-4 w-4" /> <UserIcon className="size-4" />
<Trans i18nKey="continueAsGuest" /> <Trans i18nKey="continueAsGuest" />
</Link> </Link>
</Button> </Button>

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

@ -73,7 +73,7 @@ const GoToApp = () => {
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 h-4 w-4" /> <ArrowUpLeftIcon className="text-muted-foreground size-4" />
<Trans i18nKey="manage" /> <Trans i18nKey="manage" />
</Link> </Link>
</Button> </Button>

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 h-4 w-4" /> <ArrowUpLeftIcon className="text-muted-foreground size-4" />
<Trans i18nKey="manage" /> <Trans i18nKey="manage" />
</Link> </Link>
</Button> </Button>

2
apps/web/src/app/[locale]/menu/back-button.tsx
View file

@ -13,7 +13,7 @@ export function BackButton() {
router.back(); router.back();
}} }}
> >
<XIcon className="text-muted-foreground h-4 w-4" /> <XIcon className="text-muted-foreground size-4" />
</Button> </Button>
); );
} }

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

@ -13,7 +13,7 @@ export default async function Page() {
<div className="flex h-[calc(100vh-100px)] w-full items-center justify-center"> <div className="flex h-[calc(100vh-100px)] w-full items-center justify-center">
<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 h-24 w-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="text-primary-600 mb-2 text-3xl font-bold ">
{t("errors_notFoundTitle")} {t("errors_notFoundTitle")}
</div> </div>

2
apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx
View file

@ -5,7 +5,7 @@ export default function Loading() {
return ( return (
<PageContainer> <PageContainer>
<PageHeader className="flex items-center gap-x-4"> <PageHeader className="flex items-center gap-x-4">
<Skeleton className="h-9 w-9" /> <Skeleton className="size-9" />
<Skeleton className="h-5 w-48" /> <Skeleton className="h-5 w-48" />
</PageHeader> </PageHeader>
</PageContainer> </PageContainer>

2
apps/web/src/components/billing/billing-plans.tsx
View file

@ -129,7 +129,7 @@ export const BillingPlans = () => {
</Tabs> </Tabs>
<div className="rounded-md border border-cyan-200 bg-cyan-50 px-4 py-3 text-cyan-800"> <div className="rounded-md border border-cyan-200 bg-cyan-50 px-4 py-3 text-cyan-800">
<div className="mb-2"> <div className="mb-2">
<TrendingUpIcon className="text-indigo mr-2 mt-0.5 h-6 w-6 shrink-0" /> <TrendingUpIcon className="text-indigo mr-2 mt-0.5 size-6 shrink-0" />
</div> </div>
<div className="mb-2 flex items-center gap-x-2"> <div className="mb-2 flex items-center gap-x-2">
<h3 className="text-sm font-semibold"> <h3 className="text-sm font-semibold">

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

@ -44,9 +44,7 @@ export const LegacyButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
role="button" role="button"
disabled={disabled} disabled={disabled}
> >
{icon {icon ? React.cloneElement(icon, { className: "size-5 mr-1.5" }) : null}
? React.cloneElement(icon, { className: "h-5 w-5 mr-1.5" })
: null}
{children} {children}
</NewButton> </NewButton>
); );

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

@ -84,7 +84,7 @@ export const TimesShownIn = () => {
return ( return (
<ClockPreferences> <ClockPreferences>
<button className="inline-flex items-center gap-x-2 text-sm hover:underline"> <button className="inline-flex items-center gap-x-2 text-sm hover:underline">
<GlobeIcon className="h-4 w-4" /> <GlobeIcon className="size-4" />
<Trans i18nKey="timeShownIn" values={{ timeZone: timeZoneName }} /> <Trans i18nKey="timeShownIn" values={{ timeZone: timeZoneName }} />
</button> </button>
</ClockPreferences> </ClockPreferences>

4
apps/web/src/components/compact-button.tsx
View file

@ -15,10 +15,10 @@ const CompactButton = React.forwardRef<HTMLButtonElement, CompactButtonProps>(
<button <button
ref={ref} ref={ref}
type="button" type="button"
className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 text-gray-500 transition-colors hover:bg-gray-200 active:bg-gray-300 active:text-gray-500" className="inline-flex size-5 items-center justify-center rounded-full bg-gray-100 text-gray-500 transition-colors hover:bg-gray-200 active:bg-gray-300 active:text-gray-500"
onClick={onClick} onClick={onClick}
> >
{Icon ? <Icon className="h-3 w-3" /> : children} {Icon ? <Icon className="size-3" /> : children}
</button> </button>
); );
}, },

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

@ -19,7 +19,7 @@ const DateCard: React.FunctionComponent<DateCardProps> = ({
return ( return (
<div <div
className={clsx( className={clsx(
"relative inline-flex h-14 w-14 items-center justify-center rounded-md border border-gray-200 bg-white p-1 text-center", "relative inline-flex size-14 items-center justify-center rounded-md border border-gray-200 bg-white p-1 text-center",
className, className,
)} )}
> >

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

@ -10,7 +10,7 @@ export const DateIconInner = (props: {
return ( return (
<div <div
className={clsx( className={clsx(
"inline-flex h-12 w-12 flex-col overflow-hidden rounded-md border bg-gray-50 text-center text-slate-800", "inline-flex size-12 flex-col overflow-hidden rounded-md border bg-gray-50 text-center text-slate-800",
props.className, props.className,
)} )}
> >

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

@ -88,7 +88,7 @@ const Discussion: React.FunctionComponent = () => {
return ( return (
<div className="divide-y"> <div className="divide-y">
<div className="flex items-center gap-2 bg-gray-50 px-4 py-3 font-semibold"> <div className="flex items-center gap-2 bg-gray-50 px-4 py-3 font-semibold">
<MessageCircleIcon className="h-5 w-5" /> {t("comments")} ( <MessageCircleIcon className="size-5" /> {t("comments")} (
{comments.length}) {comments.length})
</div> </div>
{comments.length ? ( {comments.length ? (
@ -114,7 +114,7 @@ const Discussion: React.FunctionComponent = () => {
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild={true}> <DropdownMenuTrigger asChild={true}>
<button className="hover:text-foreground text-gray-500"> <button className="hover:text-foreground text-gray-500">
<MoreHorizontalIcon className="h-4 w-4" /> <MoreHorizontalIcon className="size-4" />
</button> </button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="start"> <DropdownMenuContent align="start">
@ -125,7 +125,7 @@ const Discussion: React.FunctionComponent = () => {
}); });
}} }}
> >
<TrashIcon className="mr-2 h-4 w-4" /> <TrashIcon className="mr-2 size-4" />
<Trans i18nKey="delete" /> <Trans i18nKey="delete" />
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>

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

@ -20,7 +20,7 @@ const ErrorPage: React.FunctionComponent<ComponentProps> = ({
<div className="flex h-[calc(100vh-100px)] w-full items-center justify-center"> <div className="flex h-[calc(100vh-100px)] w-full items-center justify-center">
<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 h-24 w-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="text-primary-600 mb-2 text-3xl font-bold ">
{title} {title}
</div> </div>

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

@ -105,7 +105,7 @@ export const EventCard = () => {
<div className="space-y-4 p-4 sm:px-6"> <div className="space-y-4 p-4 sm:px-6">
{poll.description ? ( {poll.description ? (
<div className="flex gap-4"> <div className="flex gap-4">
<TextIcon className="text-muted-foreground h-4 w-4 shrink-0 translate-y-1" /> <TextIcon className="text-muted-foreground size-4 shrink-0 translate-y-1" />
<div className="whitespace-pre-line"> <div className="whitespace-pre-line">
<TruncatedLinkify>{poll.description}</TruncatedLinkify> <TruncatedLinkify>{poll.description}</TruncatedLinkify>
</div> </div>
@ -113,12 +113,12 @@ export const EventCard = () => {
) : null} ) : null}
{poll.location ? ( {poll.location ? (
<div className="flex gap-4"> <div className="flex gap-4">
<MapPinIcon className="text-muted-foreground h-4 w-4 translate-y-1" /> <MapPinIcon className="text-muted-foreground size-4 translate-y-1" />
<TruncatedLinkify>{poll.location}</TruncatedLinkify> <TruncatedLinkify>{poll.location}</TruncatedLinkify>
</div> </div>
) : null} ) : null}
<div className="flex gap-4"> <div className="flex gap-4">
<MousePointerClickIcon className="text-muted-foreground h-4 w-4 shrink-0 translate-y-0.5" /> <MousePointerClickIcon className="text-muted-foreground size-4 shrink-0 translate-y-0.5" />
<div> <div>
<div className="flex gap-2.5"> <div className="flex gap-2.5">
<span className="inline-flex items-center space-x-1"> <span className="inline-flex items-center space-x-1">

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

@ -47,7 +47,7 @@ export const FeaturebaseChangelog = ({ className }: { className?: string }) => {
variant="ghost" variant="ghost"
data-featurebase-changelog data-featurebase-changelog
> >
<HelpCircleIcon className="h-4 w-4" /> <HelpCircleIcon className="size-4" />
<span <span
id="fb-update-badge" id="fb-update-badge"
className="bg-primary rounded-full px-2 py-px text-xs text-gray-100 empty:hidden" className="bg-primary rounded-full px-2 py-px text-xs text-gray-100 empty:hidden"

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

@ -19,7 +19,7 @@ import { Trans } from "next-i18next";
const FeedbackButton = () => { const FeedbackButton = () => {
return ( return (
<DropdownMenu modal={false}> <DropdownMenu modal={false}>
<DropdownMenuTrigger className="shadow-huge fixed bottom-8 right-6 z-20 hidden h-12 w-12 items-center justify-center rounded-full bg-gray-800 hover:bg-gray-700 active:shadow-none sm:inline-flex"> <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">
<MegaphoneIcon className="h-5 text-white" /> <MegaphoneIcon className="h-5 text-white" />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent sideOffset={10} align="end"> <DropdownMenuContent sideOffset={10} align="end">
@ -32,7 +32,7 @@ const FeedbackButton = () => {
href={`https://feedback.rallly.co/?b=feedback`} href={`https://feedback.rallly.co/?b=feedback`}
target={"_blank"} target={"_blank"}
> >
<SmileIcon className="mr-2 h-4 w-4" /> <SmileIcon className="mr-2 size-4" />
<Trans i18nKey="sendFeedback" defaults="Send Feedback" /> <Trans i18nKey="sendFeedback" defaults="Send Feedback" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -41,7 +41,7 @@ const FeedbackButton = () => {
href={`https://feedback.rallly.co/?b=feature-request`} href={`https://feedback.rallly.co/?b=feature-request`}
target={"_blank"} target={"_blank"}
> >
<LightbulbIcon className="mr-2 h-4 w-4" /> <LightbulbIcon className="mr-2 size-4" />
<Trans i18nKey={"featureRequest"} defaults={"Request a Feature"} /> <Trans i18nKey={"featureRequest"} defaults={"Request a Feature"} />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -50,14 +50,14 @@ const FeedbackButton = () => {
href={`https://feedback.rallly.co/?b=bug-reports`} href={`https://feedback.rallly.co/?b=bug-reports`}
target={"_blank"} target={"_blank"}
> >
<BugIcon className="mr-2 h-4 w-4" /> <BugIcon className="mr-2 size-4" />
<Trans i18nKey={"bugReport"} defaults={"Report an Issue"} /> <Trans i18nKey={"bugReport"} defaults={"Report an Issue"} />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link href={`https://support.rallly.co`} target={"_blank"}> <Link href={`https://support.rallly.co`} target={"_blank"}>
<LifeBuoyIcon className="mr-2 h-4 w-4" /> <LifeBuoyIcon className="mr-2 size-4" />
<Trans i18nKey={"getSupport"} defaults={"Get Support"} /> <Trans i18nKey={"getSupport"} defaults={"Get Support"} />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>

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

@ -24,11 +24,11 @@ const DateNavigationToolbar: React.FunctionComponent<
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<Button type="button" onClick={onPrevious}> <Button type="button" onClick={onPrevious}>
<ChevronLeftIcon className="h-4 w-4" /> <ChevronLeftIcon className="size-4" />
</Button> </Button>
<Button onClick={onToday}>{t("today")}</Button> <Button onClick={onToday}>{t("today")}</Button>
<Button onClick={onNext}> <Button onClick={onNext}>
<ChevronRightIcon className="h-4 w-4" /> <ChevronRightIcon className="size-4" />
</Button> </Button>
</div> </div>
</div> </div>

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

@ -422,7 +422,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
onChange(newOptions); onChange(newOptions);
}} }}
> >
<SparklesIcon className="mr-2 h-4 w-4" /> <SparklesIcon className="mr-2 size-4" />
<Trans i18nKey="applyToAllDates" /> <Trans i18nKey="applyToAllDates" />
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
@ -435,7 +435,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
); );
}} }}
> >
<XIcon className="mr-2 h-4 w-4" /> <XIcon className="mr-2 size-4" />
<Trans i18nKey="deleteDate" /> <Trans i18nKey="deleteDate" />
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
@ -474,7 +474,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
) : ( ) : (
<div className="flex h-full items-center justify-center py-12"> <div className="flex h-full items-center justify-center py-12">
<div className="text-center font-medium text-gray-400"> <div className="text-center font-medium text-gray-400">
<CalendarIcon className="mb-2 inline-block h-12 w-12" /> <CalendarIcon className="mb-2 inline-block size-12" />
<div>{t("noDatesSelected")}</div> <div>{t("noDatesSelected")}</div>
</div> </div>
</div> </div>

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

@ -87,7 +87,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
<Listbox.Button className="btn-default text-left"> <Listbox.Button className="btn-default text-left">
<span className="grow truncate">{dayjs(value).format("LT")}</span> <span className="grow truncate">{dayjs(value).format("LT")}</span>
<span className="pointer-events-none ml-2 flex"> <span className="pointer-events-none ml-2 flex">
<ChevronDownIcon className="h-5 w-5" /> <ChevronDownIcon className="size-5" />
</span> </span>
</Listbox.Button> </Listbox.Button>
</div> </div>

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

@ -117,11 +117,11 @@ const PollOptionsForm = ({ children }: React.PropsWithChildren) => {
<Tabs value={field.value} onValueChange={field.onChange}> <Tabs value={field.value} onValueChange={field.onChange}>
<TabsList className="w-full"> <TabsList className="w-full">
<TabsTrigger className="grow" value="month"> <TabsTrigger className="grow" value="month">
<CalendarIcon className="mr-2 h-4 w-4" /> <CalendarIcon className="size-4 mr-2" />
<Trans i18nKey="monthView" /> <Trans i18nKey="monthView" />
</TabsTrigger> </TabsTrigger>
<TabsTrigger className="grow" value="week"> <TabsTrigger className="grow" value="week">
<TableIcon className="mr-2 h-4 w-4" /> <TableIcon className="size-4 mr-2" />
<Trans i18nKey="weekView" /> <Trans i18nKey="weekView" />
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>

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

@ -102,7 +102,7 @@ const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
}} }}
> >
<div className="absolute right-1.5 top-1.5 flex justify-end opacity-0 group-hover:opacity-100"> <div className="absolute right-1.5 top-1.5 flex justify-end opacity-0 group-hover:opacity-100">
<XIcon className="h-3 w-3" /> <XIcon className="size-3" />
</div> </div>
<div> <div>
<div className="font-semibold">{start.format("LT")}</div> <div className="font-semibold">{start.format("LT")}</div>

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

@ -50,7 +50,7 @@ const SettingTitle = ({
{hint ? ( {hint ? (
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<InfoIcon className="text-muted-foreground h-4 w-4" /> <InfoIcon className="text-muted-foreground size-4" />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>{hint}</TooltipContent> <TooltipContent>{hint}</TooltipContent>
</Tooltip> </Tooltip>
@ -111,7 +111,7 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
name="disableComments" name="disableComments"
render={({ field }) => ( render={({ field }) => (
<Setting> <Setting>
<MessageCircleIcon className="h-5 w-5 shrink-0 translate-y-0.5" /> <MessageCircleIcon className="size-5 shrink-0 translate-y-0.5" />
<SettingContent> <SettingContent>
<SettingTitle htmlFor="disableComments"> <SettingTitle htmlFor="disableComments">
<Trans i18nKey="disableComments">Disable Comments</Trans> <Trans i18nKey="disableComments">Disable Comments</Trans>
@ -132,7 +132,7 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
name="requireParticipantEmail" name="requireParticipantEmail"
render={({ field }) => ( render={({ field }) => (
<Setting disabled={isFree}> <Setting disabled={isFree}>
<AtSignIcon className="h-5 w-5 shrink-0 translate-y-0.5" /> <AtSignIcon className="size-5 shrink-0 translate-y-0.5" />
<SettingContent> <SettingContent>
<SettingTitle pro> <SettingTitle pro>
<Trans <Trans
@ -156,7 +156,7 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
name="hideParticipants" name="hideParticipants"
render={({ field }) => ( render={({ field }) => (
<Setting disabled={isFree}> <Setting disabled={isFree}>
<EyeIcon className="h-5 w-5 shrink-0 translate-y-0.5" /> <EyeIcon className="size-5 shrink-0 translate-y-0.5" />
<SettingContent> <SettingContent>
<SettingTitle pro> <SettingTitle pro>
<Trans <Trans
@ -180,7 +180,7 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
name="hideScores" name="hideScores"
render={({ field }) => ( render={({ field }) => (
<Setting disabled={isFree}> <Setting disabled={isFree}>
<VoteIcon className="h-5 w-5 shrink-0 translate-y-0.5" /> <VoteIcon className="size-5 shrink-0 translate-y-0.5" />
<SettingContent> <SettingContent>
<SettingTitle htmlFor={field.name} pro> <SettingTitle htmlFor={field.name} pro>
<Trans <Trans

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

@ -64,7 +64,7 @@ export const InviteDialog = () => {
className="bg-gradient-to-b from-gray-100 via-white to-white sm:max-w-md" className="bg-gradient-to-b from-gray-100 via-white to-white sm:max-w-md"
> >
<div className="flex"> <div className="flex">
<Share2Icon className="text-primary h-6 w-6" /> <Share2Icon className="text-primary size-6" />
</div> </div>
<DialogHeader className=""> <DialogHeader className="">
<DialogTitle> <DialogTitle>
@ -86,7 +86,7 @@ export const InviteDialog = () => {
<div className="shrink-0"> <div className="shrink-0">
<Button asChild> <Button asChild>
<Link target="_blank" href={`/invite/${poll.id}`}> <Link target="_blank" href={`/invite/${poll.id}`}>
<ArrowUpRightIcon className="h-4 w-4" /> <ArrowUpRightIcon className="size-4" />
</Link> </Link>
</Button> </Button>
</div> </div>

12
apps/web/src/components/layouts/poll-layout.tsx
View file

@ -108,7 +108,7 @@ const StatusControl = () => {
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button> <Button>
<PollStatusLabel status={poll.status} /> <PollStatusLabel status={poll.status} />
<ChevronDownIcon className="h-4 w-4" /> <ChevronDownIcon className="size-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
@ -173,13 +173,13 @@ const Layout = ({ children }: React.PropsWithChildren) => {
{pathname === pollLink ? ( {pathname === pollLink ? (
<Button asChild> <Button asChild>
<Link href="/polls"> <Link href="/polls">
<ListIcon className="h-4 w-4" /> <ListIcon className="size-4" />
</Link> </Link>
</Button> </Button>
) : ( ) : (
<Button asChild> <Button asChild>
<Link href={pollLink}> <Link href={pollLink}>
<ArrowLeftIcon className="h-4 w-4" /> <ArrowLeftIcon className="size-4" />
</Link> </Link>
</Button> </Button>
)} )}
@ -226,20 +226,20 @@ export const PermissionGuard = ({ children }: React.PropsWithChildren) => {
{user.isGuest ? ( {user.isGuest ? (
<Button asChild variant="primary"> <Button asChild variant="primary">
<LoginLink> <LoginLink>
<LogInIcon className="-ml-1 h-4 w-4" /> <LogInIcon className="size-4 -ml-1" />
<Trans i18nKey="login" defaults="Login" /> <Trans i18nKey="login" defaults="Login" />
</LoginLink> </LoginLink>
</Button> </Button>
) : ( ) : (
<LogoutButton> <LogoutButton>
<LogOutIcon className="-ml-1 h-4 w-4" /> <LogOutIcon className="size-4 -ml-1" />
<Trans i18nKey="loginDifferent" defaults="Switch user" /> <Trans i18nKey="loginDifferent" defaults="Switch user" />
</LogoutButton> </LogoutButton>
)} )}
<Button asChild> <Button asChild>
<Link href={`/invite/${poll.id}`}> <Link href={`/invite/${poll.id}`}>
<Trans i18nKey="goToInvite" defaults="Go to Invite Page" /> <Trans i18nKey="goToInvite" defaults="Go to Invite Page" />
<ArrowUpRight className="h-4 w-4" /> <ArrowUpRight className="size-4" />
</Link> </Link>
</Button> </Button>
</PageDialogFooter> </PageDialogFooter>

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

@ -72,7 +72,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({
{showClose ? ( {showClose ? (
<button <button
role="button" role="button"
className="absolute right-2 top-2 z-10 inline-flex h-7 w-7 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-500/10 hover:text-gray-500 focus:ring-0 focus:ring-offset-0 active:bg-gray-500/20" className="absolute right-2 top-2 z-10 inline-flex size-7 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-500/10 hover:text-gray-500 focus:ring-0 focus:ring-offset-0 active:bg-gray-500/20"
onClick={onCancel} onClick={onCancel}
> >
<XIcon className="h-4" /> <XIcon className="h-4" />

2
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 h-14 w-14" /> <props.icon className="text-primary inline-block size-14" />
) : null} ) : null}
{props.children} {props.children}
</div> </div>

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

@ -16,7 +16,7 @@ const LabelWithIcon = ({
}) => { }) => {
return ( return (
<span className={cn("inline-flex items-center gap-1.5", className)}> <span className={cn("inline-flex items-center gap-1.5", className)}>
<Icon className="-ml-0.5 h-4 w-4" /> <Icon className="size-4 -ml-0.5" />
<span className="font-medium">{children}</span> <span className="font-medium">{children}</span>
</span> </span>
); );

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

@ -135,7 +135,7 @@ const DesktopPoll: React.FunctionComponent = () => {
</div> </div>
) : ( ) : (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Users2Icon className="h-5 w-5 shrink-0" /> <Users2Icon className="size-5 shrink-0" />
<div className="font-semibold"> <div className="font-semibold">
{t("participants", { count: participants.length })} ( {t("participants", { count: participants.length })} (
{participants.length}) {participants.length})
@ -163,7 +163,7 @@ const DesktopPoll: React.FunctionComponent = () => {
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button disabled={x === 0} onClick={goToPreviousPage}> <Button disabled={x === 0} onClick={goToPreviousPage}>
<ArrowLeftIcon className="h-4 w-4" /> <ArrowLeftIcon className="size-4" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
@ -182,7 +182,7 @@ const DesktopPoll: React.FunctionComponent = () => {
goToNextPage(); goToNextPage();
}} }}
> >
<ArrowRightIcon className="h-4 w-4" /> <ArrowRightIcon className="size-4" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>

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

@ -43,7 +43,7 @@ const ManagePoll: React.FunctionComponent<{
<DropdownMenuTrigger asChild={true}> <DropdownMenuTrigger asChild={true}>
<Button icon={SettingsIcon} disabled={disabled}> <Button icon={SettingsIcon} disabled={disabled}>
<Trans i18nKey="manage" /> <Trans i18nKey="manage" />
<ChevronDownIcon className="h-4 w-4" /> <ChevronDownIcon className="size-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">

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

@ -240,7 +240,7 @@ export const FinalizePollForm = ({
</FormDescription> </FormDescription>
{participantsWithoutEmails.length ? ( {participantsWithoutEmails.length ? (
<Alert> <Alert>
<AlertCircleIcon className="h-4 w-4" /> <AlertCircleIcon className="size-4" />
<AlertDescription> <AlertDescription>
<Trans <Trans
i18nKey="missingEmailsAlert" i18nKey="missingEmailsAlert"

2
apps/web/src/components/poll/notifications-toggle.tsx
View file

@ -55,7 +55,7 @@ const NotificationsToggle: React.FunctionComponent = () => {
const { t } = useTranslation(); const { t } = useTranslation();
if (!watchers) { if (!watchers) {
return <Skeleton className="h-9 w-9" />; return <Skeleton className="size-9" />;
} }
return ( return (

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

@ -64,7 +64,7 @@ export const ColoredAvatar = (props: {
return ( return (
<div <div
className={clsx( className={clsx(
"inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold uppercase", "inline-flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold uppercase",
requiresDarkText ? "text-gray-800" : "text-white", requiresDarkText ? "text-gray-800" : "text-white",
props.className, props.className,
)} )}

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

@ -57,7 +57,7 @@ export const ScoreSummary: React.FunctionComponent<PopularityScoreProps> =
opacity: Math.max(score / highScore, 0.2), opacity: Math.max(score / highScore, 0.2),
}} }}
> >
<User2Icon className="h-3 w-3" /> <User2Icon className="size-3" />
<AnimatePresence initial={false} mode="wait"> <AnimatePresence initial={false} mode="wait">
<m.span <m.span
transition={{ transition={{
@ -77,7 +77,7 @@ export const ScoreSummary: React.FunctionComponent<PopularityScoreProps> =
</m.span> </m.span>
</AnimatePresence> </AnimatePresence>
{highlight && ifNeedBeScore > 0 ? ( {highlight && ifNeedBeScore > 0 ? (
<span className="absolute -right-1 -top-0.5 h-2 w-2 rounded-full bg-amber-400 ring-2 ring-white" /> <span className="absolute -right-1 -top-0.5 size-2 rounded-full bg-amber-400 ring-2 ring-white" />
) : null} ) : null}
</div> </div>
); );

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

@ -109,7 +109,7 @@ export const YouAvatar = () => {
const you = t("you"); const you = t("you");
return ( return (
<span className="inline-flex items-center gap-x-2.5"> <span className="inline-flex items-center gap-x-2.5">
<span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-200 text-xs font-semibold uppercase"> <span className="inline-flex size-6 items-center justify-center rounded-full bg-gray-200 text-xs font-semibold uppercase">
{you[0]} {you[0]}
</span> </span>
{t("you")} {t("you")}

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

@ -13,7 +13,7 @@ const VoteIcon: React.FunctionComponent<{
return ( return (
<YesIcon <YesIcon
className={clsx("text-green-500", className, { className={clsx("text-green-500", className, {
"h-5 w-5": size === "md", "size-5": size === "md",
"h-3": size === "sm", "h-3": size === "sm",
})} })}
/> />
@ -23,7 +23,7 @@ const VoteIcon: React.FunctionComponent<{
return ( return (
<IfNeedBeIcon <IfNeedBeIcon
className={clsx("text-amber-400", className, { className={clsx("text-amber-400", className, {
"h-5 w-5": size === "md", "size-5": size === "md",
"h-3": size === "sm", "h-3": size === "sm",
})} })}
/> />
@ -33,7 +33,7 @@ const VoteIcon: React.FunctionComponent<{
return ( return (
<NoIcon <NoIcon
className={clsx("text-gray-400", className, { className={clsx("text-gray-400", className, {
"h-5 w-5": size === "md", "size-5": size === "md",
"h-3": size === "sm", "h-3": size === "sm",
})} })}
/> />
@ -43,7 +43,7 @@ const VoteIcon: React.FunctionComponent<{
return ( return (
<PendingIcon <PendingIcon
className={clsx("text-gray-300", className, { className={clsx("text-gray-300", className, {
"h-5 w-5": size === "md", "size-5": size === "md",
"h-3": size === "sm", "h-3": size === "sm",
})} })}
/> />

2
apps/web/src/components/settings/language-preference.tsx
View file

@ -70,7 +70,7 @@ export const LanguagePreference = () => {
href="https://support.rallly.co/contribute/translations" href="https://support.rallly.co/contribute/translations"
> >
<Trans i18nKey="becomeATranslator" defaults="Help translate" /> <Trans i18nKey="becomeATranslator" defaults="Help translate" />
<ArrowUpRight className="h-4 w-4" /> <ArrowUpRight className="size-4" />
</Link> </Link>
</Button> </Button>
</div> </div>

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

@ -51,7 +51,7 @@ export const SettingsItemTitle = ({
{hint ? ( {hint ? (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<InfoIcon className="inline-block h-4 w-4 text-gray-500" /> <InfoIcon className="size-4 inline-block text-gray-500" />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="right" className="max-w-sm"> <TooltipContent side="right" className="max-w-sm">
{hint} {hint}

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

@ -31,7 +31,7 @@ const Switch: React.FunctionComponent<SwitchProps> = ({
<span <span
aria-hidden="true" aria-hidden="true"
className={clsx( className={clsx(
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out", "pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out",
{ {
"translate-x-4": checked, "translate-x-4": checked,
"translate-x-0": !checked, "translate-x-0": !checked,

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

@ -141,7 +141,7 @@ export const Table = <
disabled={!table.getCanPreviousPage()} disabled={!table.getCanPreviousPage()}
> >
<ChevronLeftIcon <ChevronLeftIcon
className={cn("h-4 w-4", { className={cn("size-4", {
"text-gray-400": !table.getCanPreviousPage(), "text-gray-400": !table.getCanPreviousPage(),
})} })}
/> />
@ -162,7 +162,7 @@ export const Table = <
disabled={!table.getCanNextPage()} disabled={!table.getCanNextPage()}
> >
<ChevronRightIcon <ChevronRightIcon
className={cn("h-4 w-4", { className={cn("size-4", {
"text-gray-400": !table.getCanNextPage(), "text-gray-400": !table.getCanNextPage(),
})} })}
/> />

2
apps/web/src/components/time-zone-picker/time-zone-picker.tsx
View file

@ -211,7 +211,7 @@ const TimeZonePicker: React.FunctionComponent<{
{!query ? selectedTimeZone.label : null} {!query ? selectedTimeZone.label : null}
</span> </span>
<span className="pointer-events-none flex"> <span className="pointer-events-none flex">
<ChevronDownIcon className="h-5 w-5" /> <ChevronDownIcon className="size-5" />
</span> </span>
</Combobox.Button> </Combobox.Button>
<FloatingPortal> <FloatingPortal>

6
apps/web/src/components/time-zone-picker/time-zone-select.tsx
View file

@ -62,7 +62,7 @@ export const TimeZoneCommand = ({ onSelect, value }: TimeZoneCommandProps) => {
> >
<CheckIcon <CheckIcon
className={cn( className={cn(
"h-4 w-4 shrink-0", "size-4 shrink-0",
value === option.value ? "opacity-100" : "opacity-0", value === option.value ? "opacity-100" : "opacity-0",
)} )}
/> />
@ -154,7 +154,7 @@ export const TimeZoneSelect = React.forwardRef<HTMLButtonElement, SelectProps>(
aria-controls={popoverContentId} aria-controls={popoverContentId}
className="bg-input-background flex h-9 w-full min-w-0 items-center gap-x-1.5 rounded-md border px-2 py-2 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50" className="bg-input-background flex h-9 w-full min-w-0 items-center gap-x-1.5 rounded-md border px-2 py-2 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
> >
<GlobeIcon className="h-4 w-4" /> <GlobeIcon className="size-4" />
<span className="grow truncate text-left"> <span className="grow truncate text-left">
{fuzzyValue ? ( {fuzzyValue ? (
fuzzyValue.label fuzzyValue.label
@ -165,7 +165,7 @@ export const TimeZoneSelect = React.forwardRef<HTMLButtonElement, SelectProps>(
/> />
)} )}
</span> </span>
<ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronDownIcon className="size-4 ml-2 shrink-0 opacity-50" />
</button> </button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent

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

@ -49,7 +49,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
<CurrentUserAvatar size="sm" className="-ml-1 shrink-0 " /> <CurrentUserAvatar size="sm" className="-ml-1 shrink-0 " />
<span className="truncate">{user.name}</span> <span className="truncate">{user.name}</span>
</span> </span>
<ChevronDown className="text-muted-foreground h-4 w-4" /> <ChevronDown className="text-muted-foreground size-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
@ -67,7 +67,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 h-4 w-4" /> <ListIcon className="text-muted-foreground size-4" />
<Trans i18nKey="polls" defaults="Polls" /> <Trans i18nKey="polls" defaults="Polls" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -77,7 +77,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 h-4 w-4" /> <UserIcon className="text-muted-foreground size-4" />
<Trans i18nKey="profile" defaults="Profile" /> <Trans i18nKey="profile" defaults="Profile" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -87,7 +87,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 h-4 w-4" /> <Settings2Icon className="text-muted-foreground size-4" />
<Trans i18nKey="preferences" defaults="Preferences" /> <Trans i18nKey="preferences" defaults="Preferences" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -97,7 +97,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 h-4 w-4" /> <CreditCardIcon className="text-muted-foreground size-4" />
<Trans i18nKey="Billing" defaults="Billing" /> <Trans i18nKey="Billing" defaults="Billing" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -109,7 +109,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 h-4 w-4" /> <LifeBuoyIcon className="text-muted-foreground size-4" />
<Trans i18nKey="support" defaults="Support" /> <Trans i18nKey="support" defaults="Support" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -120,7 +120,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 h-4 w-4" /> <GemIcon className="text-muted-foreground size-4" />
<Trans i18nKey="pricing" defaults="Pricing" /> <Trans i18nKey="pricing" defaults="Pricing" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -132,7 +132,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 h-4 w-4" /> <MegaphoneIcon className="text-muted-foreground size-4" />
<Trans i18nKey="feedback" defaults="Feedback" /> <Trans i18nKey="feedback" defaults="Feedback" />
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -141,13 +141,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 h-4 w-4" /> <LogInIcon className="text-muted-foreground size-4" />
<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 h-4 w-4" /> <UserPlusIcon className="text-muted-foreground size-4" />
<Trans i18nKey="createAnAccount" defaults="Register" /> <Trans i18nKey="createAnAccount" defaults="Register" />
</RegisterLink> </RegisterLink>
</DropdownMenuItem> </DropdownMenuItem>
@ -158,7 +158,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
> >
{/* Don't use signOut() from next-auth. It doesn't work in vercel-production env. I don't know why. */} {/* Don't use signOut() from next-auth. It doesn't work in vercel-production env. I don't know why. */}
<a href="/logout"> <a href="/logout">
<RefreshCcwIcon className="text-muted-foreground h-4 w-4" /> <RefreshCcwIcon className="text-muted-foreground size-4" />
<Trans i18nKey="forgetMe" /> <Trans i18nKey="forgetMe" />
</a> </a>
</DropdownMenuItem> </DropdownMenuItem>
@ -167,7 +167,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
<DropdownMenuItem asChild className="flex items-center gap-x-2"> <DropdownMenuItem asChild className="flex items-center gap-x-2">
{/* Don't use signOut() from next-auth. It doesn't work in vercel-production env. I don't know why. */} {/* Don't use signOut() from next-auth. It doesn't work in vercel-production env. I don't know why. */}
<a href="/logout"> <a href="/logout">
<LogOutIcon className="text-muted-foreground h-4 w-4" /> <LogOutIcon className="text-muted-foreground size-4" />
<Trans i18nKey="logout" /> <Trans i18nKey="logout" />
</a> </a>
</DropdownMenuItem> </DropdownMenuItem>

12
apps/web/src/components/user.tsx
View file

@ -37,9 +37,9 @@ export const UserAvatar = ({
className={clsx( className={clsx(
"inline-flex items-center justify-center overflow-hidden rounded-full font-semibold", "inline-flex items-center justify-center overflow-hidden rounded-full font-semibold",
{ {
"h-6 w-6 text-sm": size === "sm", "size-6 text-sm": size === "sm",
"h-8 w-8 text-base": size === "md", "size-8 text-base": size === "md",
"h-14 w-14 text-2xl": size === "lg", "size-14 text-2xl": size === "lg",
}, },
!name !name
? "bg-gray-200" ? "bg-gray-200"
@ -57,9 +57,9 @@ export const UserAvatar = ({
) : ( ) : (
<UserIcon <UserIcon
className={clsx({ className={clsx({
"h-4 w-4": size === "sm", "size-4": size === "sm",
"h-6 w-6": size === "md", "size-6": size === "md",
"h-8 w-8": size === "lg", "size-8": size === "lg",
})} })}
/> />
)} )}

2
apps/web/src/style.css
View file

@ -56,7 +56,7 @@
@apply focus:ring-rose-500; @apply focus:ring-rose-500;
} }
.checkbox { .checkbox {
@apply text-primary-600 focus:ring-primary-600 h-4 w-4 rounded border-gray-300 shadow-sm; @apply text-primary-600 focus:ring-primary-600 size-4 rounded border-gray-300 shadow-sm;
} }
.btn { .btn {
@apply inline-flex h-9 select-none items-center justify-center gap-x-1.5 whitespace-nowrap rounded-md border px-2.5 text-sm font-medium; @apply inline-flex h-9 select-none items-center justify-center gap-x-1.5 whitespace-nowrap rounded-md border px-2.5 text-sm font-medium;

2
packages/icons/src/custom-icons/no.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 374 B

After

Width:  |  Height:  |  Size: 373 B

Before After
Before After

2
packages/icons/src/custom-icons/yes.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 292 B

After

Width:  |  Height:  |  Size: 291 B

Before After
Before After

2
packages/tailwind-config/package.json
View file

@ -5,7 +5,7 @@
"main": "tailwind.config.js", "main": "tailwind.config.js",
"types": "tailwind.config.d.ts", "types": "tailwind.config.d.ts",
"dependencies": { "dependencies": {
"tailwindcss": "^3.3.3" "tailwindcss": "^3.4.1"
}, },
"devDependencies": { "devDependencies": {
"tailwind-scrollbar": "^3.0.4", "tailwind-scrollbar": "^3.0.4",

2
packages/ui/accordion.tsx
View file

@ -34,7 +34,7 @@ const AccordionTrigger = React.forwardRef<
{...props} {...props}
> >
{children} {children}
<ChevronDown className="h-4 w-4 transition-transform duration-200" /> <ChevronDown className="size-4 transition-transform duration-200" />
</AccordionPrimitive.Trigger> </AccordionPrimitive.Trigger>
</AccordionPrimitive.Header> </AccordionPrimitive.Header>
)); ));

4
packages/ui/alert.tsx
View file

@ -32,9 +32,7 @@ const Alert = React.forwardRef<
className={cn(alertVariants({ variant }), className)} className={cn(alertVariants({ variant }), className)}
{...props} {...props}
> >
{Icon ? ( {Icon ? <Icon className="text-muted-foreground -mt-1 mb-2 size-6" /> : null}
<Icon className="text-muted-foreground -mt-1 mb-2 h-6 w-6" />
) : null}
<div>{children}</div> <div>{children}</div>
</div> </div>
)); ));

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

@ -71,7 +71,7 @@ export const BillingPlanPerk = ({
<li className="flex items-start gap-x-2.5"> <li className="flex items-start gap-x-2.5">
<CheckCircle2Icon <CheckCircle2Icon
className={cn( className={cn(
"mt-0.5 h-4 w-4 shrink-0", "size-4 mt-0.5 shrink-0",
!pro ? "text-gray-500" : "text-primary", !pro ? "text-gray-500" : "text-primary",
)} )}
/> />

4
packages/ui/button.tsx
View file

@ -77,9 +77,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
) : ( ) : (
<> <>
{loading ? ( {loading ? (
<Loader2Icon className="h-4 w-4 animate-spin" /> <Loader2Icon className="size-4 animate-spin" />
) : Icon ? ( ) : Icon ? (
<Icon className={cn("-ml-0.5 h-4 w-4")} /> <Icon className={cn("size-4 -ml-0.5")} />
) : null} ) : null}
{children} {children}
</> </>

4
packages/ui/checkbox.tsx
View file

@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn(
"data-[state=checked]:border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary peer h-5 w-5 shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-white", "data-[state=checked]:border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary peer size-5 shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-white",
className, className,
)} )}
{...props} {...props}
@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Indicator <CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")} className={cn("flex items-center justify-center text-current")}
> >
<CheckIcon className="h-4 w-4" /> <CheckIcon className="size-4" />
</CheckboxPrimitive.Indicator> </CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root> </CheckboxPrimitive.Root>
)); ));

2
packages/ui/command.tsx
View file

@ -42,7 +42,7 @@ const CommandInput = React.forwardRef<
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<div className="flex items-center border-b px-3" cmdk-input-wrapper=""> <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
<SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" /> <SearchIcon className="size-4 mr-2 shrink-0 opacity-50" />
<CommandPrimitive.Input <CommandPrimitive.Input
ref={ref} ref={ref}
className={cn( className={cn(

2
packages/ui/dialog.tsx
View file

@ -66,7 +66,7 @@ const DialogContent = React.forwardRef<
{!hideCloseButton ? ( {!hideCloseButton ? (
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"> <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
<> <>
<XIcon className="h-4 w-4" /> <XIcon className="size-4" />
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
</> </>
</DialogPrimitive.Close> </DialogPrimitive.Close>

8
packages/ui/dropdown-menu.tsx
View file

@ -34,7 +34,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
{...props} {...props}
> >
{children} {children}
<ChevronRightIcon className="ml-auto h-4 w-4" /> <ChevronRightIcon className="ml-auto size-4" />
</DropdownMenuPrimitive.SubTrigger> </DropdownMenuPrimitive.SubTrigger>
)); ));
DropdownMenuSubTrigger.displayName = DropdownMenuSubTrigger.displayName =
@ -107,7 +107,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
> >
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator> <DropdownMenuPrimitive.ItemIndicator>
<CheckIcon className="h-4 w-4" /> <CheckIcon className="size-4" />
</DropdownMenuPrimitive.ItemIndicator> </DropdownMenuPrimitive.ItemIndicator>
</span> </span>
{children} {children}
@ -130,7 +130,7 @@ const DropdownMenuRadioItem = React.forwardRef<
> >
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator> <DropdownMenuPrimitive.ItemIndicator>
<PlusCircleIcon className="h-2 w-2 fill-current" /> <PlusCircleIcon className="size-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator> </DropdownMenuPrimitive.ItemIndicator>
</span> </span>
{children} {children}
@ -208,7 +208,7 @@ export const DropdownMenuItemIconLabel = ({
}) => { }) => {
return ( return (
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<Icon className="h-4 w-4" /> <Icon className="size-4" />
{children} {children}
</span> </span>
); );

2
packages/ui/radio-group.tsx
View file

@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
<RadioGroupPrimitive.Item <RadioGroupPrimitive.Item
ref={ref} ref={ref}
className={cn( className={cn(
"border-border bg-background text-primary ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", "border-border bg-background text-primary ring-offset-background focus-visible:ring-ring size-4 aspect-square rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className, className,
)} )}
{...props} {...props}

4
packages/ui/select.tsx
View file

@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
> >
{children} {children}
<SelectPrimitive.Icon asChild> <SelectPrimitive.Icon asChild>
<ChevronDownIcon className="ml-2 h-4 w-4 opacity-50" /> <ChevronDownIcon className="size-4 ml-2 opacity-50" />
</SelectPrimitive.Icon> </SelectPrimitive.Icon>
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>
)); ));
@ -87,7 +87,7 @@ const SelectItem = React.forwardRef<
> >
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator> <SelectPrimitive.ItemIndicator>
<CheckIcon className="h-4 w-4" /> <CheckIcon className="size-4" />
</SelectPrimitive.ItemIndicator> </SelectPrimitive.ItemIndicator>
</span> </span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>

2
packages/ui/toast.tsx
View file

@ -81,7 +81,7 @@ const ToastClose = React.forwardRef<
toast-close="" toast-close=""
{...props} {...props}
> >
<X className="h-4 w-4" /> <X className="size-4" />
</ToastPrimitives.Close> </ToastPrimitives.Close>
)); ));
ToastClose.displayName = ToastPrimitives.Close.displayName; ToastClose.displayName = ToastPrimitives.Close.displayName;

33
yarn.lock
View file

@ -6359,7 +6359,7 @@ fast-folder-size@1.6.1:
dependencies: dependencies:
unzipper "^0.10.11" unzipper "^0.10.11"
fast-glob@^3.2.12, fast-glob@^3.2.9: fast-glob@^3.2.9:
version "3.2.12" version "3.2.12"
resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz" resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz"
integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w== integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
@ -6370,6 +6370,17 @@ fast-glob@^3.2.12, fast-glob@^3.2.9:
merge2 "^1.3.0" merge2 "^1.3.0"
micromatch "^4.0.4" micromatch "^4.0.4"
fast-glob@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
dependencies:
"@nodelib/fs.stat" "^2.0.2"
"@nodelib/fs.walk" "^1.2.3"
glob-parent "^5.1.2"
merge2 "^1.3.0"
micromatch "^4.0.4"
fast-glob@^3.3.1: fast-glob@^3.3.1:
version "3.3.1" version "3.3.1"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
@ -7703,10 +7714,10 @@ iterator.prototype@^1.1.2:
reflect.getprototypeof "^1.0.4" reflect.getprototypeof "^1.0.4"
set-function-name "^2.0.1" set-function-name "^2.0.1"
jiti@^1.18.2: jiti@^1.19.1:
version "1.19.1" version "1.21.0"
resolved "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz" resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
integrity sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg== integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
jju@^1.4.0: jju@^1.4.0:
version "1.4.0" version "1.4.0"
@ -10728,20 +10739,20 @@ tailwindcss-animate@^1.0.5:
resolved "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.5.tgz" resolved "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.5.tgz"
integrity sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw== integrity sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==
tailwindcss@^3.3.3: tailwindcss@^3.4.1:
version "3.3.3" version "3.4.1"
resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.1.tgz#f512ca5d1dd4c9503c7d3d28a968f1ad8f5c839d"
integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w== integrity sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==
dependencies: dependencies:
"@alloc/quick-lru" "^5.2.0" "@alloc/quick-lru" "^5.2.0"
arg "^5.0.2" arg "^5.0.2"
chokidar "^3.5.3" chokidar "^3.5.3"
didyoumean "^1.2.2" didyoumean "^1.2.2"
dlv "^1.1.3" dlv "^1.1.3"
fast-glob "^3.2.12" fast-glob "^3.3.0"
glob-parent "^6.0.2" glob-parent "^6.0.2"
is-glob "^4.0.3" is-glob "^4.0.3"
jiti "^1.18.2" jiti "^1.19.1"
lilconfig "^2.1.0" lilconfig "^2.1.0"
micromatch "^4.0.5" micromatch "^4.0.5"
normalize-path "^3.0.0" normalize-path "^3.0.0"