Fix conflicts

.dockerignore

@@ -6,6 +6,5 @@ frontend/blob-report
 frontend/dist
 frontend/node_modules
 frontend/playwright-report
-frontend/playwright/.auth
 frontend/test-results
 node_modules

.github/workflows/bump-pre-commit-hooks.yml

@@ -28,9 +28,11 @@ jobs:
         with:
           python-version-file: ".python-version"
       - name: Setup uv
-        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
+        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
         with:
-          version: "latest-known"
+          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+          # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
+          version: "0.11.18"
           cache-dependency-glob: |
             pyproject.toml
             uv.lock

.github/workflows/create-draft-release.yml

@@ -29,9 +29,11 @@ jobs:
         with:
           python-version-file: ".python-version"
       - name: Install uv
-        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
+        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
         with:
-          version: "latest-known"
+          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+          # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
+          version: "0.11.18"
       - name: Extract release details
         id: release-details
         run: |

.github/workflows/deploy.yml

@@ -35,9 +35,9 @@ jobs:
           # Override frontend/.env so the deployed frontend uses the same origin as the API
           VITE_API_URL: ""
       - name: Set up uv
-        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
+        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
         with:
-          version: "latest-known"
+          version: "0.11.18"
       - name: Prepare database
         run: uv run bash scripts/prestart.sh
         working-directory: backend

.github/workflows/playwright.yml

@@ -66,9 +66,11 @@ jobs:
       with:
         limit-access-to-actor: true
     - name: Install uv
-      uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
+      uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
       with:
-        version: "latest-known"
+        # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+        # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
+        version: "0.11.18"
     - run: uv sync
       working-directory: backend
     - run: bun ci

.github/workflows/pre-commit.yml

@@ -46,9 +46,11 @@ jobs:
         with:
           python-version-file: .python-version
       - name: Setup uv
-        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
+        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
         with:
-          version: "latest-known"
+          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+          # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
+          version: "0.11.18"
           cache-dependency-glob: |
             requirements**.txt
             pyproject.toml

.github/workflows/prepare-release.yml

@@ -38,9 +38,11 @@ jobs:
         with:
           python-version-file: ".python-version"
       - name: Install uv
-        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
+        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
         with:
-          version: "latest-known"
+          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+          # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
+          version: "0.11.18"
       - name: Prepare release
         env:
           BUMP: ${{ inputs.bump }}

.github/workflows/smokeshow.yml

@@ -24,9 +24,11 @@ jobs:
         with:
           python-version-file: .python-version
       - name: Setup uv
-        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
+        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
         with:
-          version: "latest-known"
+          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+          # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
+          version: "0.11.18"
           cache-dependency-glob: |
             pyproject.toml
             uv.lock

.github/workflows/test-backend.yml

@@ -22,9 +22,11 @@ jobs:
         with:
           python-version-file: .python-version
       - name: Install uv
-        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
+        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
         with:
-          version: "latest-known"
+          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+          # See: https://github.com/astral-sh/setup-uv/issues/851#issuecomment-4282017837
+          version: "0.11.18"
       - run: docker compose down -v --remove-orphans
       - run: docker compose up -d db mailpit
       - name: Migrate DB

README.md

@@ -22,7 +22,6 @@
 - 🔒 Secure password hashing by default.
 - 🔑 JWT (JSON Web Token) authentication.
 - 📫 Email-based password recovery.
-- ✉️ [React Email](https://react.email) for email templates.
 - 📬 [Mailpit](https://mailpit.axllent.org) for local email testing during development.
 - ✅ Tests with [Pytest](https://pytest.org).
 - 🏭 CI (continuous integration) and CD (continuous deployment) based on GitHub Actions.
@@ -43,14 +42,6 @@
 
 ![Dark mode dashboard screenshot](img/dashboard-dark.png)
 
-### React Email Templates
-
-![Email templates screenshot](img/react-email.png)
-
-### Mailpit - Local Email Testing
-
-![Mailpit screenshot](img/mailpit.png)
-
 ### Interactive API Documentation
 
 ![API docs](img/docs.png)

bun.lock

@@ -33,6 +33,7 @@
         "clsx": "^2.1.1",
         "form-data": "4.0.6",
         "lucide-react": "^1.28.0",
+        "next-themes": "^0.4.6",
         "react": "^19.2.8",
         "react-dom": "^19.2.8",
         "react-error-boundary": "^6.1.2",
@@ -843,6 +844,8 @@
 
     "next": ["next@16.2.6", "", { "dependencies": { "@next/env": "16.2.6", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.2.6", "@next/swc-darwin-x64": "16.2.6", "@next/swc-linux-arm64-gnu": "16.2.6", "@next/swc-linux-arm64-musl": "16.2.6", "@next/swc-linux-x64-gnu": "16.2.6", "@next/swc-linux-x64-musl": "16.2.6", "@next/swc-win32-arm64-msvc": "16.2.6", "@next/swc-win32-x64-msvc": "16.2.6", "sharp": "^0.34.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-qOVgKJg1+At15NpeUP+eJgCHvTCgXsogweq87Ri/Ix7PkqQHg4sdaXmSFqKlgaIXE4kW0g25LE68W87UANlHtw=="],
 
+    "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
+
     "node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],
 
     "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],

frontend/package.json

@@ -37,6 +37,7 @@
     "clsx": "^2.1.1",
     "form-data": "4.0.6",
     "lucide-react": "^1.28.0",
+    "next-themes": "^0.4.6",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-error-boundary": "^6.1.2",

frontend/src/components/ui/sonner.tsx

@@ -7,15 +7,15 @@ import {
   OctagonXIcon,
   TriangleAlertIcon,
 } from "lucide-react"
-import { useTheme } from "@/components/theme-provider"
+import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme } = useTheme()
+  const { theme = "system" } = useTheme()
 
   return (
     <Sonner
-      theme={theme}
+      theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
         success: <CircleCheckIcon className="size-4" />,

frontend/src/routes/_layout.tsx

@@ -25,7 +25,7 @@ function Layout() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b px-4">
           <SidebarTrigger className="-ml-1 text-muted-foreground" />
         </header>
         <main className="flex-1 p-6 md:p-8">

frontend/tests/reset-password.spec.ts

@@ -1,12 +1,10 @@
 import { expect, test } from "@playwright/test"
-import { waitForEmailHtml } from "./utils/mailpit"
+import { emailUrl, findLastEmail } from "./utils/mailpit"
 import { randomEmail, randomPassword } from "./utils/random"
 import { logInUser, signUpNewUser } from "./utils/user"
 
 test.use({ storageState: { cookies: [], origins: [] } })
 
-const resetPath = "/reset-password?token="
-
 test("Password Recovery title is visible", async ({ page }) => {
   await page.goto("/recover-password")
 
@@ -46,17 +44,21 @@ test("User can reset password successfully using the link", async ({
 
   await page.getByRole("button", { name: "Continue" }).click()
 
-  const emailHtml = await waitForEmailHtml({
+  const emailData = await findLastEmail({
     request,
     query: `to:${email}`,
+    timeout: 5000,
   })
 
-  expect(emailHtml).toContain(resetPath)
+  await page.goto(emailUrl(emailData))
-  const resetUrl = emailHtml.match(/\/reset-password\?token=[^"]+/)?.[0]
+
-  expect(resetUrl).toBeDefined()
+  const selector = 'a[href*="/reset-password?token="]'
+
+  const url = await page.getAttribute(selector, "href")
+  const resetUrl = new URL(url!)
 
   // Set the new password and confirm it
-  await page.goto(resetUrl!)
+  await page.goto(`${resetUrl.pathname}${resetUrl.search}`)
 
   await page.getByTestId("new-password-input").fill(newPassword)
   await page.getByTestId("confirm-password-input").fill(newPassword)
@@ -93,17 +95,20 @@ test("Weak new password validation", async ({ page, request }) => {
   await page.getByTestId("email-input").fill(email)
   await page.getByRole("button", { name: "Continue" }).click()
 
-  const emailHtml = await waitForEmailHtml({
+  const emailData = await findLastEmail({
     request,
     query: `to:${email}`,
+    timeout: 5000,
   })
 
-  expect(emailHtml).toContain(resetPath)
+  await page.goto(emailUrl(emailData))
-  const resetUrl = emailHtml.match(/\/reset-password\?token=[^"]+/)?.[0]
+
-  expect(resetUrl).toBeDefined()
+  const selector = 'a[href*="/reset-password?token="]'
+  const url = await page.getAttribute(selector, "href")
+  const resetUrl = new URL(url!)
 
   // Set a weak new password
-  await page.goto(resetUrl!)
+  await page.goto(`${resetUrl.pathname}${resetUrl.search}`)
   await page.getByTestId("new-password-input").fill(weakPassword)
   await page.getByTestId("confirm-password-input").fill(weakPassword)
   await page.getByRole("button", { name: "Reset Password" }).click()

frontend/tests/utils/mailpit.ts

@@ -1,10 +1,36 @@
 import type { APIRequestContext } from "@playwright/test"
 
-type EmailSummary = {
+type Address = {
-  ID: string
+  Name: string
+  Address: string
 }
 
-export async function waitForEmailHtml({
+type Email = {
+  ID: string
+  To: Address[]
+  Subject: string
+}
+
+async function findEmail({
+  request,
+  query,
+}: {
+  request: APIRequestContext
+  query: string
+}) {
+  const response = await request.get(
+    `${process.env.MAILPIT_HOST}/api/v1/search`,
+    {
+      params: { query, limit: 1 },
+    },
+  )
+
+  const { messages }: { messages: Email[] } = await response.json()
+
+  return messages[0] ?? null
+}
+
+export async function findLastEmail({
   request,
   query,
   timeout = 5000,
@@ -16,27 +42,10 @@ export async function waitForEmailHtml({
   const deadline = Date.now() + timeout
 
   while (Date.now() < deadline) {
-    const response = await request.get(
+    const email = await findEmail({ request, query })
-      `${process.env.MAILPIT_HOST}/api/v1/search`,
-      {
-        params: { query, limit: 1 },
-      },
-    )
-    const { messages }: { messages: EmailSummary[] } = await response.json()
-    const email = messages[0]
 
     if (email) {
-      const htmlResponse = await request.get(
+      return email
-        `${process.env.MAILPIT_HOST}/view/${email.ID}.html`,
-      )
-
-      if (!htmlResponse.ok()) {
-        throw new Error(
-          `Could not get the HTML for email "${email.ID}": ${htmlResponse.status()}`,
-        )
-      }
-
-      return htmlResponse.text()
     }
 
     await new Promise((resolve) => setTimeout(resolve, 100))
@@ -44,3 +53,7 @@ export async function waitForEmailHtml({
 
   throw new Error(`Timeout while trying to get the latest email for "${query}"`)
 }
+
+export function emailUrl(email: Email) {
+  return `${process.env.MAILPIT_HOST}/view/${email.ID}.html`
+}

packages/react-email/emails/new_account.tsx

@@ -25,8 +25,8 @@ export default function NewAccount({
       project_name={project_name}
     >
       <Heading>Welcome to {project_name}!</Heading>
-      <Text style={bodyTextStyle}>Hi,</Text>
+      <Text className="text-[15px] leading-7 text-body">Hi,</Text>
-      <Text style={bodyTextStyle}>
+      <Text className="text-[15px] leading-7 text-body">
         Your account has been successfully created and is ready to use. These
         are your credentials:
       </Text>
@@ -34,32 +34,18 @@ export default function NewAccount({
         <Detail label="Username" value={username} />
         <Detail label="Password" value={password} />
       </Callout>
-      <Text style={bodyTextStyle}>
+      <Text className="text-[15px] leading-7 text-body">
         Get started by signing in to your dashboard:
       </Text>
       <LinkButton href={link}>Go to Dashboard</LinkButton>
-      <Text style={supportingTextStyle}>
+      <Text className="text-sm leading-6 text-muted">
         Or copy and paste this link into your browser:
         <br />
         <Link href={link}>{link}</Link>
       </Text>
-      <Text style={supportingTextStyle}>
+      <Text className="text-sm leading-6 text-muted">
         For security reasons, change your password after your first sign in.
       </Text>
     </Layout>
   )
 }
-
-const bodyTextStyle = {
-  color: "#334155",
-  fontSize: "15px",
-  lineHeight: "26px",
-  margin: "0 0 18px",
-}
-
-const supportingTextStyle = {
-  color: "#64748b",
-  fontSize: "14px",
-  lineHeight: "23px",
-  margin: "0 0 16px",
-}

packages/react-email/emails/reset_password.tsx

@@ -24,38 +24,24 @@ export default function ResetPassword({
       project_name={project_name}
     >
       <Heading>Reset your password</Heading>
-      <Text style={bodyTextStyle}>Hi {username},</Text>
+      <Text className="text-[15px] leading-7 text-body">Hi {username},</Text>
-      <Text style={bodyTextStyle}>
+      <Text className="text-[15px] leading-7 text-body">
         We've received a request to reset the password for your {project_name}{" "}
         account. Choose a new one by clicking the button below:
       </Text>
       <LinkButton href={link}>Reset password</LinkButton>
-      <Text style={supportingTextStyle}>
+      <Text className="text-sm leading-6 text-muted">
         Or copy and paste this link into your browser:
         <br />
         <Link href={link}>{link}</Link>
       </Text>
-      <Text style={supportingTextStyle}>
+      <Text className="text-sm leading-6 text-muted">
         This link will expire in {valid_hours} hours.
       </Text>
-      <Text style={supportingTextStyle}>
+      <Text className="text-sm leading-6 text-muted">
         If you didn't request a password recovery, you can safely ignore this
         email.
       </Text>
     </Layout>
   )
 }
-
-const bodyTextStyle = {
-  color: "#334155",
-  fontSize: "15px",
-  lineHeight: "26px",
-  margin: "0 0 18px",
-}
-
-const supportingTextStyle = {
-  color: "#64748b",
-  fontSize: "14px",
-  lineHeight: "23px",
-  margin: "0 0 16px",
-}

packages/react-email/emails/test_email.tsx

@@ -19,31 +19,17 @@ export default function TestEmail({
       project_name={project_name}
     >
       <Heading>Test email</Heading>
-      <Text style={bodyTextStyle}>Hi,</Text>
+      <Text className="text-[15px] leading-7 text-body">Hi,</Text>
-      <Text style={bodyTextStyle}>
+      <Text className="text-[15px] leading-7 text-body">
         This is a test email from {project_name}. If you're reading it, email
         delivery is configured correctly.
       </Text>
       <Callout>
         <Detail label="Sent to" value={email} />
       </Callout>
-      <Text style={supportingTextStyle}>
+      <Text className="text-sm leading-6 text-muted">
         If you weren't expecting this email, you can safely ignore it.
       </Text>
     </Layout>
   )
 }
-
-const bodyTextStyle = {
-  color: "#334155",
-  fontSize: "15px",
-  lineHeight: "26px",
-  margin: "0 0 18px",
-}
-
-const supportingTextStyle = {
-  color: "#64748b",
-  fontSize: "14px",
-  lineHeight: "23px",
-  margin: "0 0 16px",
-}

packages/react-email/ui/Button.tsx

@@ -3,21 +3,10 @@ import { Button } from "@react-email/components"
 type ButtonProps = React.PropsWithChildren & { href: string }
 
 export const LinkButton = ({ children, href }: ButtonProps) => (
-  <Button href={href} style={buttonStyle}>
+  <Button
+    href={href}
+    className="bg-brand text-white rounded-md font-semibold text-sm mt-2 mb-7 inline-block text-center no-underline px-7 py-3.5"
+  >
     {children}
   </Button>
 )
-
-const buttonStyle = {
-  backgroundColor: "#00796b",
-  borderRadius: "6px",
-  color: "#ffffff",
-  display: "inline-block",
-  fontSize: "14px",
-  fontWeight: "700",
-  lineHeight: "20px",
-  margin: "8px 0 28px",
-  padding: "13px 28px",
-  textAlign: "center" as const,
-  textDecoration: "none",
-}

packages/react-email/ui/Callout.tsx

@@ -3,44 +3,20 @@ import { Section, Text } from "@react-email/components"
 type CalloutProps = React.PropsWithChildren
 
 export const Callout = ({ children }: CalloutProps) => (
-  <Section style={calloutStyle}>{children}</Section>
+  <Section className="border-0 border-l-2 border-solid border-brand pl-5 my-7">
+    {children}
+  </Section>
 )
 
 type DetailProps = { label: string; value: string }
 
 export const Detail = ({ label, value }: DetailProps) => (
-  <Text style={detailStyle}>
+  <Text className="m-0 my-3">
-    <span style={labelStyle}>{label}</span>
+    <span className="block text-[11px] uppercase tracking-[0.08em] text-muted">
-    <br />
+      {label}
-    <span style={valueStyle}>{value}</span>
+    </span>
+    <span className="block text-sm font-semibold break-all font-mono mt-1">
+      {value}
+    </span>
   </Text>
 )
-
-const calloutStyle = {
-  backgroundColor: "#f2f8f7",
-  borderLeft: "3px solid #00897b",
-  margin: "24px 0 28px",
-  padding: "6px 18px",
-}
-
-const detailStyle = {
-  margin: "12px 0",
-}
-
-const labelStyle = {
-  color: "#64748b",
-  fontSize: "11px",
-  fontWeight: "700",
-  letterSpacing: "1px",
-  lineHeight: "16px",
-  textTransform: "uppercase" as const,
-}
-
-const valueStyle = {
-  color: "#1e293b",
-  fontFamily: 'Consolas, "Courier New", monospace',
-  fontSize: "14px",
-  fontWeight: "700",
-  lineHeight: "22px",
-  wordBreak: "break-all" as const,
-}

packages/react-email/ui/Heading.tsx

@@ -3,16 +3,10 @@ import { Heading as BaseHeading } from "@react-email/components"
 type HeadingProps = React.PropsWithChildren
 
 export const Heading = ({ children }: HeadingProps) => (
-  <BaseHeading as="h1" style={headingStyle}>
+  <BaseHeading
+    as="h1"
+    className="text-2xl leading-8 font-semibold tracking-[-0.02em] text-body m-0 mb-5"
+  >
     {children}
   </BaseHeading>
 )
-
-const headingStyle = {
-  color: "#17212b",
-  fontSize: "26px",
-  fontWeight: "700",
-  letterSpacing: "-0.3px",
-  lineHeight: "34px",
-  margin: "0 0 20px",
-}

packages/react-email/ui/Layout.tsx

@@ -1,13 +1,11 @@
 import {
   Body,
-  Column,
-  Container,
   Head,
   Hr,
   Html,
   Preview,
-  Row,
   Section,
+  Tailwind,
   Text,
 } from "@react-email/components"
 
@@ -24,88 +22,64 @@ export const Layout = ({
   children,
 }: LayoutProps) => {
   return (
-    <Html lang="en" dir="ltr">
+    <Tailwind
-      <Head>
+      config={{
-        <title>{title}</title>
+        theme: {
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          extend: {
-      </Head>
+            colors: {
-      {preview ? <Preview>{preview}</Preview> : null}
+              surface: "#ffffff",
-      <Body style={bodyStyle}>
+              body: "#1e293b",
-        <Container style={containerStyle}>
+              muted: "#64748b",
-          <Row>
+              rule: "#e2e8f0",
-            <Column style={contentStyle}>
+              brand: {
-              <Section>
+                DEFAULT: "#009688",
-                <Hr style={brandRuleStyle} />
+                dark: "#00695c",
-                <Text style={brandStyle}>{project_name}</Text>
+              },
-              </Section>
+            },
-              <Section>{children}</Section>
+            fontFamily: {
-              <Hr style={footerRuleStyle} />
+              sans: [
-              <Section>
+                "-apple-system",
-                <Text style={footerStyle}>
+                "BlinkMacSystemFont",
-                  © {new Date().getFullYear()} {project_name}. All rights
+                '"Segoe UI"',
-                  reserved.
+                "Roboto",
-                </Text>
+                "Oxygen",
-              </Section>
+                "Ubuntu",
-            </Column>
+                "Cantarell",
-          </Row>
+                '"Fira Sans"',
-        </Container>
+                '"Droid Sans"',
-      </Body>
+                '"Helvetica Neue"',
-    </Html>
+                "sans-serif",
+              ],
+            },
+          },
+        },
+      }}
+    >
+      <Html lang="en" dir="ltr">
+        <Head>
+          <title>{title}</title>
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+        </Head>
+        {preview ? <Preview>{preview}</Preview> : null}
+        <Body className="bg-surface font-sans text-body max-w-[560px] w-full mx-auto my-0 py-12 px-6">
+          <Section>
+            <Hr className="border-0 border-t-2 border-solid border-brand w-8 m-0" />
+            <Text className="text-body text-[13px] font-semibold uppercase tracking-[0.1em] mt-4 mb-9">
+              {project_name}
+            </Text>
+          </Section>
+          <Section>{children}</Section>
+          <Hr className="border-0 border-t border-solid border-rule mt-10 mb-5" />
+          <Section>
+            <Text className="text-xs leading-5 text-muted m-0">
+              © {new Date().getFullYear()} {project_name}. All rights reserved.
+            </Text>
+          </Section>
+        </Body>
+      </Html>
+    </Tailwind>
   )
 }
-
-const fontFamily =
-  '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
-
-const bodyStyle = {
-  backgroundColor: "#f4f7f6",
-  color: "#1e293b",
-  fontFamily,
-  margin: "0",
-  padding: "32px 12px",
-}
-
-const containerStyle = {
-  backgroundColor: "#ffffff",
-  border: "1px solid #dce7e5",
-  borderRadius: "8px",
-  boxSizing: "border-box" as const,
-  margin: "0 auto",
-  maxWidth: "560px",
-  width: "100%",
-}
-
-const contentStyle = {
-  padding: "40px 36px 32px",
-}
-
-const brandRuleStyle = {
-  border: "0",
-  borderTop: "3px solid #00897b",
-  margin: "0 0 16px",
-  width: "32px",
-}
-
-const brandStyle = {
-  color: "#334155",
-  fontSize: "13px",
-  fontWeight: "700",
-  letterSpacing: "1px",
-  lineHeight: "20px",
-  margin: "0 0 32px",
-  textTransform: "uppercase" as const,
-}
-
-const footerRuleStyle = {
-  border: "0",
-  borderTop: "1px solid #dce7e5",
-  margin: "36px 0 18px",
-  width: "100%",
-}
-
-const footerStyle = {
-  color: "#64748b",
-  fontSize: "12px",
-  lineHeight: "20px",
-  margin: "0",
-}

packages/react-email/ui/Link.tsx

@@ -1,15 +1,7 @@
-import { Link as EmailLink } from "@react-email/components"
-
 type LinkProps = React.PropsWithChildren & { href: string }
 
 export const Link = ({ children, href }: LinkProps) => (
-  <EmailLink href={href} style={linkStyle}>
+  <a href={href} className="text-brand-dark underline break-all">
     {children}
-  </EmailLink>
+  </a>
 )
-
-const linkStyle = {
-  color: "#00695c",
-  textDecoration: "underline",
-  wordBreak: "break-all" as const,
-}

release-notes.md

@@ -2,26 +2,10 @@
 
 ## Latest Changes
 
-### Fixes
-
-* 🐛 Fix Sonner toast theme sync. PR [#2450](https://github.com/fastapi/full-stack-fastapi-template/pull/2450) by [@chris-bs23](https://github.com/chris-bs23).
-* 🐛 Add background to the sticky layout header. PR [#2384](https://github.com/fastapi/full-stack-fastapi-template/pull/2384) by [@istoutjesdijk](https://github.com/istoutjesdijk).
-
-### Refactors
-
-* ✅ Simplify password reset E2E tests. PR [#2453](https://github.com/fastapi/full-stack-fastapi-template/pull/2453) by [@alejsdev](https://github.com/alejsdev).
-* 💄 Refactor email templates and components for improved styling. PR [#2451](https://github.com/fastapi/full-stack-fastapi-template/pull/2451) by [@alejsdev](https://github.com/alejsdev).
-* ♻️ Replace Mailcatcher with Mailpit for local email testing. PR [#2436](https://github.com/fastapi/full-stack-fastapi-template/pull/2436) by [@alejsdev](https://github.com/alejsdev).
-
 ### Docs
 
-* 📝 Update README.md with Mailpit and React Email. PR [#2452](https://github.com/fastapi/full-stack-fastapi-template/pull/2452) by [@alejsdev](https://github.com/alejsdev).
 * 📝 Simplify project documentation. PR [#2442](https://github.com/fastapi/full-stack-fastapi-template/pull/2442) by [@tiangolo](https://github.com/tiangolo).
 
-### Internal
-
-* ⬆️ Bump setup-uv action to 10.0.1. PR [#2458](https://github.com/fastapi/full-stack-fastapi-template/pull/2458) by [@YuriiMotov](https://github.com/YuriiMotov).
-
 ## 0.12.0 (2026-08-12)
 
 ### Features