Merge branch 'master' into fix-backend-reload-during-playwright-tests

[skip ci]

.dockerignore

@@ -6,5 +6,6 @@ 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,11 +28,9 @@ jobs:
         with:
           python-version-file: ".python-version"
       - name: Setup uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+          version: "latest-known"
-          # 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,11 +29,9 @@ jobs:
         with:
           python-version-file: ".python-version"
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+          version: "latest-known"
-          # 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@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          version: "0.11.18"
+          version: "latest-known"
       - name: Prepare database
         run: uv run bash scripts/prestart.sh
         working-directory: backend

.github/workflows/playwright.yml

@@ -66,11 +66,9 @@ jobs:
       with:
         limit-access-to-actor: true
     - name: Install uv
-      uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+      uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
       with:
-        # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+        version: "latest-known"
-        # 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,11 +46,9 @@ jobs:
         with:
           python-version-file: .python-version
       - name: Setup uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+          version: "latest-known"
-          # 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,11 +38,9 @@ jobs:
         with:
           python-version-file: ".python-version"
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+          version: "latest-known"
-          # 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,11 +24,9 @@ jobs:
         with:
           python-version-file: .python-version
       - name: Setup uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+          version: "latest-known"
-          # 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,13 +22,11 @@ jobs:
         with:
           python-version-file: .python-version
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
-          # Before upgrading uv version, make sure astral-sh/setup-uv knows its checksum.
+          version: "latest-known"
-          # 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 mailcatcher
+      - run: docker compose up -d db mailpit
       - name: Migrate DB
         run: uv run bash scripts/prestart.sh
         working-directory: backend

README.md

@@ -22,7 +22,8 @@
 - 🔒 Secure password hashing by default.
 - 🔑 JWT (JSON Web Token) authentication.
 - 📫 Email-based password recovery.
-- 📬 [Mailcatcher](https://mailcatcher.me) for local email testing during development.
+- ✉️ [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.
 
@@ -42,6 +43,14 @@
 
 ![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)

backend/README.md

@@ -9,10 +9,10 @@
 
 Run the backend locally and connect it to PostgreSQL in Docker Compose.
 
-From the project root, start PostgreSQL and Mailcatcher:
+From the project root, start PostgreSQL and Mailpit:
 
 ```console
-$ docker compose up -d db mailcatcher
+$ docker compose up -d db mailpit
 ```
 
 Then, from `./backend/`, install the dependencies, prepare the database, and start the development server:

bun.lock

@@ -33,7 +33,6 @@
         "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",
@@ -844,8 +843,6 @@
 
     "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=="],

compose.override.yml

@@ -64,14 +64,14 @@ services:
       - ./backend/htmlcov:/app/backend/htmlcov
     environment:
       FASTAPI_ENV: "development"
-      SMTP_HOST: "mailcatcher"
+      SMTP_HOST: "mailpit"
       SMTP_PORT: "1025"
       SMTP_TLS: "false"
 
-  mailcatcher:
+  mailpit:
-    image: schickling/mailcatcher
+    image: axllent/mailpit
     ports:
-      - "1080:1080"
+      - "8025:8025"
       - "1025:1025"
 
   playwright:
@@ -83,13 +83,13 @@ services:
     ipc: host
     depends_on:
       - backend
-      - mailcatcher
+      - mailpit
     environment:
       - FIRST_SUPERUSER=${FIRST_SUPERUSER:?Variable not set}
       - FIRST_SUPERUSER_PASSWORD=${FIRST_SUPERUSER_PASSWORD:?Variable not set}
       - PLAYWRIGHT_BASE_URL=http://backend:8000
       - VITE_API_URL=http://backend:8000
-      - MAILCATCHER_HOST=http://mailcatcher:1080
+      - MAILPIT_HOST=http://mailpit:8025
       # For the reports when run locally
       - PLAYWRIGHT_HTML_HOST=0.0.0.0
       - CI=${CI:-}

development.md

@@ -2,12 +2,12 @@
 
 ## Local Development
 
-For local development, run PostgreSQL and Mailcatcher with Docker Compose, and run the FastAPI and Vite development servers locally.
+For local development, run PostgreSQL and Mailpit with Docker Compose, and run the FastAPI and Vite development servers locally.
 
 Start the supporting services:
 
 ```bash
-docker compose up -d db mailcatcher
+docker compose up -d db mailpit
 ```
 
 Then, from the `backend` directory, install the dependencies and prepare the database:
@@ -38,7 +38,7 @@ Backend API: <http://localhost:8000>
 
 Automatic interactive API documentation with Swagger UI: <http://localhost:8000/docs>
 
-Mailcatcher: <http://localhost:1080>
+Mailpit: <http://localhost:8025>
 
 The frontend development server uses the backend at `http://localhost:8000`, as configured in `frontend/.env`.
 
@@ -71,15 +71,15 @@ Adminer, database web administration: <http://localhost:8080>
 
 Traefik UI, to see how the routes are being handled by the proxy: <http://localhost:8090>
 
-Mailcatcher: <http://localhost:1080>
+Mailpit: <http://localhost:8025>
 
 Stop a locally running FastAPI server before starting the Compose backend because both use port `8000`.
 
 **Note**: The first time you start the stack, it might take a minute for all the services to be ready. To monitor it, use `docker compose logs`, or `docker compose logs backend` for the backend service.
 
-## Mailcatcher
+## Mailpit
 
-Mailcatcher captures emails sent during local development instead of delivering them. The local backend connects to it at `localhost:1025`, and the Compose backend connects to the `mailcatcher` service. Captured emails are available at <http://localhost:1080>.
+[Mailpit](https://mailpit.axllent.org) captures emails sent during local development instead of delivering them. The local backend connects to it at `localhost:1025`, and the Compose backend connects to the `mailpit` service. Captured emails are available at <http://localhost:8025>.
 
 ## Docker Compose Files and Environment Variables
 

frontend/.env

@@ -1,2 +1,2 @@
 VITE_API_URL=http://localhost:8000
-MAILCATCHER_HOST=http://localhost:1080
+MAILPIT_HOST=http://localhost:8025

frontend/package.json

@@ -37,7 +37,6 @@
     "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 "next-themes"
+import { useTheme } from "@/components/theme-provider"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme } = useTheme()
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={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 px-4">
+        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background 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,10 +1,12 @@
 import { expect, test } from "@playwright/test"
-import { findLastEmail } from "./utils/mailcatcher"
+import { waitForEmailHtml } 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")
 
@@ -44,23 +46,17 @@ test("User can reset password successfully using the link", async ({
 
   await page.getByRole("button", { name: "Continue" }).click()
 
-  const emailData = await findLastEmail({
+  const emailHtml = await waitForEmailHtml({
     request,
-    filter: (e) => e.recipients.includes(`<${email}>`),
+    query: `to:${email}`,
-    timeout: 5000,
   })
 
-  await page.goto(
+  expect(emailHtml).toContain(resetPath)
-    `${process.env.MAILCATCHER_HOST}/messages/${emailData.id}.html`,
+  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.pathname}${resetUrl.search}`)
+  await page.goto(resetUrl!)
 
   await page.getByTestId("new-password-input").fill(newPassword)
   await page.getByTestId("confirm-password-input").fill(newPassword)
@@ -97,22 +93,17 @@ test("Weak new password validation", async ({ page, request }) => {
   await page.getByTestId("email-input").fill(email)
   await page.getByRole("button", { name: "Continue" }).click()
 
-  const emailData = await findLastEmail({
+  const emailHtml = await waitForEmailHtml({
     request,
-    filter: (e) => e.recipients.includes(`<${email}>`),
+    query: `to:${email}`,
-    timeout: 5000,
   })
 
-  await page.goto(
+  expect(emailHtml).toContain(resetPath)
-    `${process.env.MAILCATCHER_HOST}/messages/${emailData.id}.html`,
+  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.pathname}${resetUrl.search}`)
+  await page.goto(resetUrl!)
   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/mailcatcher.ts

@@ -1,62 +0,0 @@
-import type { APIRequestContext } from "@playwright/test"
-
-type Email = {
-  id: number
-  recipients: string[]
-  subject: string
-}
-
-async function findEmail({
-  request,
-  filter,
-}: {
-  request: APIRequestContext
-  filter?: (email: Email) => boolean
-}) {
-  const response = await request.get(`${process.env.MAILCATCHER_HOST}/messages`)
-
-  let emails = await response.json()
-
-  if (filter) {
-    emails = emails.filter(filter)
-  }
-
-  const email = emails[emails.length - 1]
-
-  if (email) {
-    return email as Email
-  }
-
-  return null
-}
-
-export function findLastEmail({
-  request,
-  filter,
-  timeout = 5000,
-}: {
-  request: APIRequestContext
-  filter?: (email: Email) => boolean
-  timeout?: number
-}) {
-  const timeoutPromise = new Promise<never>((_, reject) =>
-    setTimeout(
-      () => reject(new Error("Timeout while trying to get latest email")),
-      timeout,
-    ),
-  )
-
-  const checkEmails = async () => {
-    while (true) {
-      const emailData = await findEmail({ request, filter })
-
-      if (emailData) {
-        return emailData
-      }
-      // Wait for 100ms before checking again
-      await new Promise((resolve) => setTimeout(resolve, 100))
-    }
-  }
-
-  return Promise.race([timeoutPromise, checkEmails()])
-}

frontend/tests/utils/mailpit.ts

@@ -0,0 +1,46 @@
+import type { APIRequestContext } from "@playwright/test"
+
+type EmailSummary = {
+  ID: string
+}
+
+export async function waitForEmailHtml({
+  request,
+  query,
+  timeout = 5000,
+}: {
+  request: APIRequestContext
+  query: string
+  timeout?: number
+}) {
+  const deadline = Date.now() + timeout
+
+  while (Date.now() < deadline) {
+    const response = await request.get(
+      `${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(
+        `${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))
+  }
+
+  throw new Error(`Timeout while trying to get the latest email for "${query}"`)
+}

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 className="text-[15px] leading-7 text-body">Hi,</Text>
+      <Text style={bodyTextStyle}>Hi,</Text>
-      <Text className="text-[15px] leading-7 text-body">
+      <Text style={bodyTextStyle}>
         Your account has been successfully created and is ready to use. These
         are your credentials:
       </Text>
@@ -34,18 +34,32 @@ export default function NewAccount({
         <Detail label="Username" value={username} />
         <Detail label="Password" value={password} />
       </Callout>
-      <Text className="text-[15px] leading-7 text-body">
+      <Text style={bodyTextStyle}>
         Get started by signing in to your dashboard:
       </Text>
       <LinkButton href={link}>Go to Dashboard</LinkButton>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         Or copy and paste this link into your browser:
         <br />
         <Link href={link}>{link}</Link>
       </Text>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         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,24 +24,38 @@ export default function ResetPassword({
       project_name={project_name}
     >
       <Heading>Reset your password</Heading>
-      <Text className="text-[15px] leading-7 text-body">Hi {username},</Text>
+      <Text style={bodyTextStyle}>Hi {username},</Text>
-      <Text className="text-[15px] leading-7 text-body">
+      <Text style={bodyTextStyle}>
         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 className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         Or copy and paste this link into your browser:
         <br />
         <Link href={link}>{link}</Link>
       </Text>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         This link will expire in {valid_hours} hours.
       </Text>
-      <Text className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         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,17 +19,31 @@ export default function TestEmail({
       project_name={project_name}
     >
       <Heading>Test email</Heading>
-      <Text className="text-[15px] leading-7 text-body">Hi,</Text>
+      <Text style={bodyTextStyle}>Hi,</Text>
-      <Text className="text-[15px] leading-7 text-body">
+      <Text style={bodyTextStyle}>
         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 className="text-sm leading-6 text-muted">
+      <Text style={supportingTextStyle}>
         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,10 +3,21 @@ import { Button } from "@react-email/components"
 type ButtonProps = React.PropsWithChildren & { href: string }
 
 export const LinkButton = ({ children, href }: ButtonProps) => (
-  <Button
+  <Button href={href} style={buttonStyle}>
-    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,20 +3,44 @@ import { Section, Text } from "@react-email/components"
 type CalloutProps = React.PropsWithChildren
 
 export const Callout = ({ children }: CalloutProps) => (
-  <Section className="border-0 border-l-2 border-solid border-brand pl-5 my-7">
+  <Section style={calloutStyle}>{children}</Section>
-    {children}
-  </Section>
 )
 
 type DetailProps = { label: string; value: string }
 
 export const Detail = ({ label, value }: DetailProps) => (
-  <Text className="m-0 my-3">
+  <Text style={detailStyle}>
-    <span className="block text-[11px] uppercase tracking-[0.08em] text-muted">
+    <span style={labelStyle}>{label}</span>
-      {label}
+    <br />
-    </span>
+    <span style={valueStyle}>{value}</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,10 +3,16 @@ import { Heading as BaseHeading } from "@react-email/components"
 type HeadingProps = React.PropsWithChildren
 
 export const Heading = ({ children }: HeadingProps) => (
-  <BaseHeading
+  <BaseHeading as="h1" style={headingStyle}>
-    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,11 +1,13 @@
 import {
   Body,
+  Column,
+  Container,
   Head,
   Hr,
   Html,
   Preview,
+  Row,
   Section,
-  Tailwind,
   Text,
 } from "@react-email/components"
 
@@ -22,64 +24,88 @@ export const Layout = ({
   children,
 }: LayoutProps) => {
   return (
-    <Tailwind
-      config={{
-        theme: {
-          extend: {
-            colors: {
-              surface: "#ffffff",
-              body: "#1e293b",
-              muted: "#64748b",
-              rule: "#e2e8f0",
-              brand: {
-                DEFAULT: "#009688",
-                dark: "#00695c",
-              },
-            },
-            fontFamily: {
-              sans: [
-                "-apple-system",
-                "BlinkMacSystemFont",
-                '"Segoe UI"',
-                "Roboto",
-                "Oxygen",
-                "Ubuntu",
-                "Cantarell",
-                '"Fira Sans"',
-                '"Droid Sans"',
-                '"Helvetica Neue"',
-                "sans-serif",
-              ],
-            },
-          },
-        },
-      }}
-    >
     <Html lang="en" dir="ltr">
       <Head>
         <title>{title}</title>
-          <meta
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-            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">
+      <Body style={bodyStyle}>
+        <Container style={containerStyle}>
+          <Row>
+            <Column style={contentStyle}>
               <Section>
-            <Hr className="border-0 border-t-2 border-solid border-brand w-8 m-0" />
+                <Hr style={brandRuleStyle} />
-            <Text className="text-body text-[13px] font-semibold uppercase tracking-[0.1em] mt-4 mb-9">
+                <Text style={brandStyle}>{project_name}</Text>
-              {project_name}
-            </Text>
               </Section>
               <Section>{children}</Section>
-          <Hr className="border-0 border-t border-solid border-rule mt-10 mb-5" />
+              <Hr style={footerRuleStyle} />
               <Section>
-            <Text className="text-xs leading-5 text-muted m-0">
+                <Text style={footerStyle}>
-              © {new Date().getFullYear()} {project_name}. All rights reserved.
+                  © {new Date().getFullYear()} {project_name}. All rights
+                  reserved.
                 </Text>
               </Section>
+            </Column>
+          </Row>
+        </Container>
       </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,7 +1,15 @@
+import { Link as EmailLink } from "@react-email/components"
+
 type LinkProps = React.PropsWithChildren & { href: string }
 
 export const Link = ({ children, href }: LinkProps) => (
-  <a href={href} className="text-brand-dark underline break-all">
+  <EmailLink href={href} style={linkStyle}>
     {children}
-  </a>
+  </EmailLink>
 )
+
+const linkStyle = {
+  color: "#00695c",
+  textDecoration: "underline",
+  wordBreak: "break-all" as const,
+}

release-notes.md

@@ -2,10 +2,26 @@
 
 ## 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