chore(server): clean mail-templates and add tailwind style (#11296)

With this commit I wanted to complete the react-mail structure by properly define the templates styles by including tailwind css framework. The framework is extended by both react-mail and tailwindcss-preset-email. Those packages help the rendering for various email clients. If in future there is the necessity to target specific mail clients the package `tailwindcss-email-variants` and `tailwindcss-mso` can help too. The latter has some workarounds for the Ms Outlook that is still lacking a lot of the CSS3 funcitonality. to target Signed-off-by: hitech95 <nicveronese@gmail.com>
2025-12-19 09:13:14 +03:00 · 2024-07-26 22:41:11 +02:00
parent a444ea7361
commit ee6f1a010c
11 changed files with 516 additions and 724 deletions
--- a/server/src/emails/components/immich.layout.tsx
+++ b/server/src/emails/components/immich.layout.tsx
@@ -0,0 +1,74 @@
+import { Body, Container, Font, Head, Hr, Html, Img, Preview, Section, Tailwind, Text } from '@react-email/components';
+import * as React from 'react';
+import { ImmichFooter } from './footer.template';
+
+interface ImmichLayoutProps {
+  children: React.ReactNode;
+  preview: string;
+}
+
+export const ImmichLayout = ({ children, preview }: ImmichLayoutProps) => (
+  <Html>
+    <Tailwind
+      config={{
+        presets: [require('tailwindcss-preset-email')],
+        theme: {
+          extend: {
+            colors: {
+              // Light Theme
+              'immich-primary': '#4250AF',
+              'immich-bg': 'white',
+              'immich-fg': 'black',
+              'immich-gray': '#F6F6F4',
+              'immich-footer': '#6A737D',
+            },
+            fontFamily: {
+              sans: ['Overpass', 'sans-serif'],
+              mono: ['Overpass Mono', 'monospace'],
+            },
+          },
+        },
+      }}
+    >
+      <Head>
+        <Font
+          fontFamily="Overpass"
+          fallbackFontFamily="sans-serif"
+          webFont={{
+            url: 'https://fonts.gstatic.com/s/overpass/v13/qFdH35WCmI96Ajtm81GrU9vyww.woff2',
+            format: 'woff2',
+          }}
+          fontWeight={'100 900'}
+          fontStyle="normal"
+        />
+      </Head>
+      <Preview>{preview}</Preview>
+      <Body className="my-auto mx-auto px-2 font-sans text-base text-immich-primary">
+        <Container className="my-[40px] mx-auto max-w-[465px]">
+          <Section className="my-6 p-12 border border-red-400 rounded-[50px] bg-slate-200">
+            <Section className="flex justify-center mb-12">
+              <Img
+                src="https://immich.app/img/immich-logo-inline-light.png"
+                className="h-12 antialiased rounded-none"
+                alt="Immich"
+              />
+            </Section>
+
+            {children}
+          </Section>
+
+          <Hr className="my-2 text-immich-gray" />
+
+          <ImmichFooter />
+        </Container>
+      </Body>
+    </Tailwind>
+  </Html>
+);
+
+ImmichLayout.PreviewProps = {
+  preview: 'This is the preview shown on some mail clients',
+  children: <Text>Email body goes here.</Text>,
+} as ImmichLayoutProps;
+
+export default ImmichLayout;