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-26 01:11:47 +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/button.component.tsx
+++ b/server/src/emails/components/button.component.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Button, ButtonProps } from '@react-email/components';
+
+interface ImmichButtonProps extends ButtonProps {}
+
+export const ImmichButton = ({ children, ...props }: ImmichButtonProps) => (
+  <Button
+    {...props}
+    className="py-3 px-8 border bg-immich-primary rounded-full no-underline hover:no-underline text-white hover:text-gray-50 font-bold uppercase"
+  >
+    {children}
+  </Button>
+);
--- a/server/src/emails/components/footer.template.tsx
+++ b/server/src/emails/components/footer.template.tsx
@@ -0,0 +1,25 @@
+import { Column, Img, Link, Row, Text } from '@react-email/components';
+import * as React from 'react';
+
+export const ImmichFooter = () => (
+  <>
+    <Row className="h-18 w-full">
+      <Column align="center" className="w-6/12 sm:w-full">
+        <Link href="https://play.google.com/store/apps/details?id=app.alextran.immich">
+          <Img className="h-full max-w-full" src={`https://immich.app/img/google-play-badge.png`} />
+        </Link>
+      </Column>
+      <Column align="center" className="w-6/12 sm:w-full">
+        <div className="h-full p-3">
+          <Link href="https://apps.apple.com/sg/app/immich/id1613945652">
+            <Img src={`https://immich.app/img/ios-app-store-badge.png`} alt="Immich" className="max-w-full" />
+          </Link>
+        </div>
+      </Column>
+    </Row>
+
+    <Text className="text-center text-sm text-immich-footer">
+      <Link href="https://immich.app">Immich</Link> project is available under GNU AGPL v3 license.
+    </Text>
+  </>
+);
--- a/server/src/emails/components/futo.layout.tsx
+++ b/server/src/emails/components/futo.layout.tsx
@@ -0,0 +1,102 @@
+import {
+  Body,
+  Container,
+  Font,
+  Head,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+import * as React from 'react';
+import { ImmichFooter } from './footer.template';
+
+interface FutoLayoutProps {
+  children: React.ReactNode;
+  preview: string;
+}
+
+export const FutoLayout = ({ children, preview }: FutoLayoutProps) => (
+  <Html>
+    <Tailwind
+      config={{
+        presets: [require('tailwindcss-preset-email')],
+        theme: {
+          extend: {
+            colors: {
+              // Light Theme
+              'immich-primary': '#4250AF',
+              'futo-primary': '#000000',
+              'futo-bg': '#F4F4f4',
+              'futo-gray': '#F6F6F4',
+              'futo-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="bg-futo-bg my-auto mx-auto px-2 font-sans text-base text-futo-primary">
+        <Container className="my-[40px] mx-auto max-w-[465px]">
+          <Section className="my-6 p-12 border border-red-400 rounded-[50px] bg-gray-50">
+            <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>
+
+          <Section className="flex justify-center my-6">
+            <Link href="https://futo.org">
+              <Img
+                className="h-6"
+                src="https://futo.org/images/FutoMainLogo.svg"
+                alt="FUTO"
+                // style={{
+                //   height: '24px',
+                //   marginTop: '25px',
+                //   marginBottom: '25px',
+                // }}
+              />
+            </Link>
+          </Section>
+
+          <Hr className="my-2 text-futo-gray" />
+
+          <ImmichFooter />
+        </Container>
+      </Body>
+    </Tailwind>
+  </Html>
+);
+
+FutoLayout.PreviewProps = {
+  preview: 'This is the preview shown on some mail clients',
+  children: <Text>Email body goes here.</Text>,
+} as FutoLayoutProps;
+
+export default FutoLayout;
--- 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;