feat: upgrade to tailwind@4

This commit is contained in:
Lucas Smith
2026-06-29 13:26:14 +10:00
parent 187b612568
commit b79895b38c
289 changed files with 1477 additions and 1941 deletions
@@ -98,7 +98,7 @@ export const DisableAuthenticatorAppDialog = () => {
return (
<Dialog open={isOpen} onOpenChange={onCloseTwoFactorDisableDialog}>
<DialogTrigger asChild={true}>
<Button className="flex-shrink-0" variant="destructive">
<Button className="shrink-0" variant="destructive">
<Trans>Disable 2FA</Trans>
</Button>
</DialogTrigger>
@@ -139,7 +139,7 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild={true}>
<Button
className="flex-shrink-0"
className="shrink-0"
loading={isSettingUp2FA}
onClick={(e) => {
e.preventDefault();
@@ -75,7 +75,7 @@ export const ViewRecoveryCodesDialog = () => {
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button className="flex-shrink-0">
<Button className="shrink-0">
<Trans>View Codes</Trans>
</Button>
</DialogTrigger>
@@ -120,7 +120,7 @@ export const ViewRecoveryCodesDialog = () => {
</DialogDescription>
</DialogHeader>
<fieldset className="flex flex-col space-y-4" disabled={form.formState.isSubmitting}>
<fieldset className="twv3-space-y-4 flex flex-col" disabled={form.formState.isSubmitting}>
<FormField
name="token"
control={form.control}
@@ -500,7 +500,7 @@ export function BrandingPreferencesForm({
<Accordion type="single" collapsible>
<AccordionItem value="custom-css" className="border-none">
<AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-muted/40 hover:no-underline">
<AccordionTrigger className="rounded-sm border px-3 py-2 text-left text-foreground hover:bg-muted/40 hover:no-underline">
<Trans>Advanced Custom CSS</Trans>
</AccordionTrigger>
@@ -538,7 +538,7 @@ export function BrandingPreferencesForm({
</div>
)}
<div className="flex flex-row justify-end space-x-4">
<div className="twv3-space-x-4 flex flex-row justify-end">
<Button type="submit" loading={form.formState.isSubmitting}>
<Trans>Update</Trans>
</Button>
@@ -552,7 +552,7 @@ export const DocumentPreferencesForm = ({
)}
{(field.value !== null || !canInherit) && (
<div className="space-y-4">
<div className="twv3-space-y-4">
<DefaultRecipientsMultiSelectCombobox
listValues={recipients}
onChange={field.onChange}
@@ -756,7 +756,7 @@ export const DocumentPreferencesForm = ({
/>
)}
<div className="flex flex-row justify-end space-x-4">
<div className="twv3-space-x-4 flex flex-row justify-end">
<Button type="submit" loading={form.formState.isSubmitting}>
<Trans>Update</Trans>
</Button>
@@ -272,7 +272,7 @@ export const EditorFieldCheckboxForm = ({
<EditorGenericReadOnlyField formControl={form.control} />
<section className="space-y-2">
<section className="twv3-space-y-2">
<div className="-mx-4 mt-2 mb-4">
<Separator />
</div>
@@ -287,7 +287,7 @@ export const EditorFieldCheckboxForm = ({
</button>
</div>
<ul className="space-y-2">
<ul className="twv3-space-y-2">
{(formValues.values || []).map((value, index) => (
<li key={`checkbox-value-${index}`} className="flex flex-row items-center gap-2">
<FormField
@@ -190,7 +190,7 @@ export const EditorFieldDropdownForm = ({
<EditorGenericReadOnlyField formControl={form.control} />
<section className="space-y-2">
<section className="twv3-space-y-2">
<div className="-mx-4 mt-2 mb-4">
<Separator />
</div>
@@ -205,7 +205,7 @@ export const EditorFieldDropdownForm = ({
</button>
</div>
<ul className="space-y-2">
<ul className="twv3-space-y-2">
{(formValues.values || []).map((value, index) => (
<li key={`dropdown-value-${index}`} className="flex flex-row gap-2">
<FormField
@@ -237,7 +237,7 @@ export const EditorGenericRequiredField = ({
control={formControl}
name="required"
render={({ field }) => (
<FormItem className={cn('flex items-center space-x-2', className)}>
<FormItem className={cn('twv3-space-x-2 flex items-center', className)}>
<FormControl>
<div className="flex items-center">
<Checkbox
@@ -281,7 +281,7 @@ export const EditorGenericReadOnlyField = ({
control={formControl}
name="readOnly"
render={({ field }) => (
<FormItem className={cn('flex items-center space-x-2', className)}>
<FormItem className={cn('twv3-space-x-2 flex items-center', className)}>
<FormControl>
<div className="flex items-center">
<Checkbox
@@ -230,7 +230,7 @@ export const EditorFieldNumberForm = ({
<EditorGenericReadOnlyField formControl={form.control} />
{/* Validation section */}
<section className="space-y-2">
<section className="twv3-space-y-2">
<div className="-mx-4 mt-2 mb-4">
<Separator />
</div>
@@ -149,7 +149,7 @@ export const EditorFieldRadioForm = ({
<EditorGenericReadOnlyField formControl={form.control} />
<section className="space-y-2">
<section className="twv3-space-y-2">
<div className="-mx-4 mt-2 mb-4">
<Separator />
</div>
@@ -164,7 +164,7 @@ export const EditorFieldRadioForm = ({
</button>
</div>
<ul className="space-y-2">
<ul className="twv3-space-y-2">
{(formValues.values || []).map((value, index) => (
<li key={`radio-value-${index}`} className="flex flex-row items-center gap-2">
<FormField
@@ -185,7 +185,7 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
)}
{field.value && (
<div className="space-y-2 rounded-md border p-4">
<div className="twv3-space-y-2 rounded-md border p-4">
<DocumentEmailCheckboxes
value={field.value ?? DEFAULT_DOCUMENT_EMAIL_SETTINGS}
onChange={(value) => field.onChange(value)}
@@ -203,7 +203,7 @@ export const EmailPreferencesForm = ({ settings, onFormSubmit, canInherit }: Ema
)}
/>
<div className="flex flex-row justify-end space-x-4">
<div className="twv3-space-x-4 flex flex-row justify-end">
<Button type="submit" loading={form.formState.isSubmitting}>
<Trans>Update</Trans>
</Button>
@@ -67,7 +67,7 @@ export const EmailTransportForm = ({
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onFormSubmit)}>
<fieldset disabled={form.formState.isSubmitting} className="space-y-4">
<fieldset disabled={form.formState.isSubmitting} className="twv3-space-y-4">
<FormField
control={form.control}
name="name"
@@ -137,7 +137,7 @@ export const OrganisationUpdateForm = () => {
)}
/>
<div className="flex flex-row justify-end space-x-4">
<div className="twv3-space-x-4 flex flex-row justify-end">
<AnimatePresence>
{form.formState.isDirty && (
<motion.div
@@ -148,7 +148,7 @@ export const PublicProfileForm = ({ className, profile, onProfileUpdate }: Publi
<Button
type="button"
variant="none"
className="h-7 rounded bg-neutral-50 pr-0.5 pl-2 font-normal dark:border dark:border-neutral-500 dark:bg-neutral-600"
className="h-7 rounded-sm bg-neutral-50 pr-0.5 pl-2 font-normal dark:border dark:border-neutral-500 dark:bg-neutral-600"
onClick={async () => onCopy()}
>
<p>
@@ -156,7 +156,7 @@ export const PublicProfileForm = ({ className, profile, onProfileUpdate }: Publi
<span className="font-semibold">{field.value}</span>
</p>
<div className="ml-1 flex h-6 w-6 items-center justify-center rounded transition-all hover:bg-neutral-200 hover:active:bg-neutral-300 dark:hover:bg-neutral-500 dark:hover:active:bg-neutral-400">
<div className="ml-1 flex h-6 w-6 items-center justify-center rounded-sm transition-all hover:bg-neutral-200 hover:active:bg-neutral-300 dark:hover:bg-neutral-500 dark:hover:active:bg-neutral-400">
<AnimatePresence mode="wait" initial={false}>
<motion.div
key={copiedTimeout ? 'copied' : 'copy'}
@@ -228,7 +228,7 @@ export const PublicProfileForm = ({ className, profile, onProfileUpdate }: Publi
}}
/>
<div className="flex flex-row justify-end space-x-4">
<div className="twv3-space-x-4 flex flex-row justify-end">
<AnimatePresence>
{form.formState.isDirty && (
<motion.div
+1 -1
View File
@@ -209,7 +209,7 @@ export const SignUpForm = ({
return (
<div className={cn('flex justify-center gap-x-12', className)}>
<div className="relative hidden flex-1 overflow-hidden rounded-xl border border-border xl:flex">
<div className="absolute -inset-8 -z-[2] backdrop-blur">
<div className="absolute -inset-8 -z-[2] backdrop-blur-sm">
<img
src={communityCardsImage}
alt="community-cards"
@@ -72,7 +72,7 @@ export const SubscriptionClaimForm = ({
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onFormSubmit)}>
<fieldset disabled={form.formState.isSubmitting} className="space-y-4">
<fieldset disabled={form.formState.isSubmitting} className="twv3-space-y-4">
<FormField
control={form.control}
name="name"
@@ -190,7 +190,7 @@ export const SubscriptionClaimForm = ({
<Trans>Feature Flags</Trans>
</FormLabel>
<div className="mt-2 space-y-2 rounded-md border p-4">
<div className="twv3-space-y-2 mt-2 rounded-md border p-4">
{Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).map(({ key, label, isEnterprise }) => {
const isRestrictedFeature = isEnterprise && !licenseFlags?.[key as keyof TLicenseClaim]; // eslint-disable-line @typescript-eslint/consistent-type-assertions
@@ -200,7 +200,7 @@ export const SubscriptionClaimForm = ({
control={form.control}
name={`flags.${key}`}
render={({ field }) => (
<FormItem className="flex items-center space-x-2">
<FormItem className="twv3-space-x-2 flex items-center">
<FormControl>
<div className="flex items-center">
<Checkbox
@@ -135,7 +135,7 @@ export const TeamUpdateForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
)}
/>
<div className="flex flex-row justify-end space-x-4">
<div className="twv3-space-x-4 flex flex-row justify-end">
<AnimatePresence>
{form.formState.isDirty && (
<motion.div