Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2026-07-27 02:15:05 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrade to tailwind@4

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
packages/email/package.json
+3 -1
View File
@@ -44,6 +44,8 @@
},
"devDependencies": {
"@documenso/tsconfig": "*",
"@types/nodemailer": "^8.0.0"
"@tailwindcss/postcss": "^4.3.1",
"@types/nodemailer": "^8.0.0",
"tailwindcss": "^4.3.1"
}
}
packages/email/preview/app/app.css
+4 -3
View File
@@ -1,6 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
/* v4 no longer auto-detects the JS config; load the standalone preview config. */
@config "../tailwind.config.cjs";
html,
body {
packages/email/preview/app/components/playground.tsx
+4 -7
View File
@@ -123,7 +123,7 @@ export const EmailPlayground = ({ slug, fields, defaultProps }: PlaygroundProps)
return (
<div className="flex h-screen w-screen overflow-hidden bg-neutral-100 font-sans text-neutral-900">
{/* Sidebar */}
<aside className="flex h-full w-60 flex-shrink-0 flex-col overflow-y-auto border-neutral-200 border-r bg-white">
<aside className="flex h-full w-60 shrink-0 flex-col overflow-y-auto border-neutral-200 border-r bg-white">
<div className="border-neutral-200 border-b px-4 py-3">
<h1 className="font-semibold text-sm">Email Preview</h1>
<p className="text-neutral-500 text-xs">{Object.keys(templates).length} templates</p>
@@ -154,7 +154,7 @@ export const EmailPlayground = ({ slug, fields, defaultProps }: PlaygroundProps)
</aside>
{/* Props panel */}
<section className="flex h-full w-72 flex-shrink-0 flex-col overflow-y-auto border-neutral-200 border-r bg-white px-4 py-3">
<section className="flex h-full w-72 shrink-0 flex-col overflow-y-auto border-neutral-200 border-r bg-white px-4 py-3">
<h2 className="mb-3 font-medium text-neutral-500 text-xs uppercase tracking-wide">Props</h2>
<PropFields fields={fields} values={props} onChange={handlePropChange} />
</section>
@@ -180,10 +180,7 @@ export const EmailPlayground = ({ slug, fields, defaultProps }: PlaygroundProps)
theme === 'dark' ? 'bg-neutral-800' : 'bg-neutral-200'
}`}
>
<div
className="flex-shrink-0 overflow-hidden rounded-lg bg-white shadow-lg"
style={{ width: viewport.width }}
>
<div className="shrink-0 overflow-hidden rounded-lg bg-white shadow-lg" style={{ width: viewport.width }}>
<iframe
title={`${viewport.name} ${theme}`}
srcDoc={displayHtml}
@@ -330,7 +327,7 @@ const ColorInput = (props: ColorInputProps) => {
type="color"
value={props.value}
onChange={(event) => props.onChange(event.target.value)}
className="h-6 w-6 cursor-pointer rounded border border-neutral-300 bg-white p-0"
className="h-6 w-6 cursor-pointer rounded-sm border border-neutral-300 bg-white p-0"
/>
</label>
);
packages/email/preview/app/components/prop-fields.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ type PropFieldProps = {
};
const inputClass =
'w-full rounded-md border border-neutral-300 bg-white px-2 py-1 text-neutral-900 text-xs focus:border-neutral-500 focus:outline-none';
'w-full rounded-md border border-neutral-300 bg-white px-2 py-1 text-neutral-900 text-xs focus:border-neutral-500 focus:outline-hidden';
const PropField = ({ name, field, value, onChange }: PropFieldProps) => {
const id = `prop-${name}`;
packages/email/preview/postcss.config.cjs
+3 -2
View File
@@ -1,6 +1,7 @@
module.exports = {
plugins: {
tailwindcss: { config: './tailwind.config.cjs' },
autoprefixer: {},
// The JS config is loaded via `@config` in app/app.css; v4 auto-prefixes,
// so autoprefixer is no longer needed.
'@tailwindcss/postcss': {},
},
};
packages/email/preview/vite.config.ts
+4 -3
View File
@@ -1,8 +1,7 @@
import path from 'node:path';
import { lingui } from '@lingui/vite-plugin';
import { reactRouter } from '@react-router/dev/vite';
import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';
import tailwindcss from '@tailwindcss/postcss';
import { defineConfig } from 'vite';
import macrosPlugin from 'vite-plugin-babel-macros';
import { viteStaticCopy } from 'vite-plugin-static-copy';
@@ -19,7 +18,9 @@ export default defineConfig({
root: __dirname,
css: {
postcss: {
plugins: [tailwindcss(path.join(__dirname, 'tailwind.config.cjs')), autoprefixer],
// The JS config is loaded via `@config` in app/app.css (v4 no longer
// auto-detects it or accepts a path argument here).
plugins: [tailwindcss()],
},
},
server: {
packages/email/templates/access-auth-2fa.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export const AccessAuth2FAEmailTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/admin-user-created.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const AdminUserCreatedTemplate = ({
<Preview>{_(previewText)}</Preview>
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="mb-4 h-6" />
packages/email/templates/bulk-send-complete.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export const BulkSendCompleteEmail = ({
<Preview>{_(msg`Bulk send operation complete for template "${templateName}"`)}</Preview>
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<Text className="text-sm">
<Trans>Hi {userName},</Trans>
packages/email/templates/confirm-email.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const ConfirmEmailTemplate = ({
<Preview>{_(previewText)}</Preview>
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/confirm-team-email.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export const ConfirmTeamEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/document-cancel.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const DocumentCancelTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-completed.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export const DocumentCompletedEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<Section className="p-2">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-created-from-direct-template.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<Section className="p-2">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-invite.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ export const DocumentInviteEmailTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-pending.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const DocumentPendingEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-recipient-signed.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export const DocumentRecipientSignedEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<Section className="p-2">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-rejected.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export function DocumentRejectedEmail({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-rejection-confirmed.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export function DocumentRejectionConfirmedEmail({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-reminder.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export const DocumentReminderEmailTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-self-signed.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const DocumentSelfSignedEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<Section className="p-2">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-super-delete.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const DocumentSuperDeleteEmailTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/forgot-password.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const ForgotPasswordTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/organisation-account-link-confirmation.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const OrganisationAccountLinkConfirmationTemplate = ({
<Preview>{_(previewText)}</Preview>
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/organisation-delete.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const OrganisationDeleteEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/organisation-invite.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const OrganisationInviteEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/organisation-join.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export const OrganisationJoinEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/organisation-leave.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export const OrganisationLeaveEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/organisation-limit-alert.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const OrganisationLimitAlertEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section className="p-2 text-muted-foreground">
packages/email/templates/recipient-expired.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const RecipientExpiredTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/recipient-removed-from-document.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export const RecipientRemovedFromDocumentTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/reset-password.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export const ResetPasswordTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/team-delete.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const TeamDeleteEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/team-email-removed.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export const TeamEmailRemovedTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>