Files
Ivan VasilovandJordi Enric 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2026-04-30 10:53:24 +00:00

66 lines
2.4 KiB
TypeScript

import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
import { Calendar } from 'lucide-react'
import Link from 'next/link'
import { getPITRRetentionDuration } from './PITR.utils'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { FormPanel } from '@/components/ui/Forms/FormPanel'
import { useProjectAddonsQuery } from '@/data/subscriptions/project-addons-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
export const PITRNotice = () => {
const { ref: projectRef } = useParams()
const { data: addonsResponse } = useProjectAddonsQuery({ projectRef })
const retentionPeriod = getPITRRetentionDuration(addonsResponse?.selected_addons ?? [])
const { can: canUpdateSubscription } = useAsyncCheckPermissions(
PermissionAction.BILLING_WRITE,
'stripe.subscriptions'
)
return (
<FormPanel
disabled={true}
footer={
<div className="flex items-center justify-between p-6">
<span className="text-sm text-foreground-light">
You can also increase your recovery retention period updating your PITR add-on
</span>
<ButtonTooltip
asChild
disabled={!canUpdateSubscription}
type="default"
tooltip={{
content: {
side: 'bottom',
text: !canUpdateSubscription
? 'You need additional permissions to amend subscriptions'
: undefined,
},
}}
>
<Link href={`/project/${projectRef}/settings/addons?panel=pitr`}>
Increase retention period
</Link>
</ButtonTooltip>
</div>
}
>
<div className="flex p-6 space-x-6">
<div className="flex items-center justify-center w-10 h-10 rounded-sm bg-border-strong">
<Calendar strokeWidth={2} />
</div>
<div className="space-y-2">
<p className="text-sm">Recovery retention period</p>
<p className="text-sm text-foreground-light">
Database changes are logged every <span className="text-foreground">2 minutes</span>,
with a total recovery period of up to{' '}
<span className="text-brand">{retentionPeriod} days</span>.
</p>
</div>
</div>
</FormPanel>
)
}