🧑‍💻 (emails) Add decent emails management

Use mjml-react to generate emails. Put all emails in a independent package.

packages/emails/components/Button.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { MjmlButton } from '@faire/mjml-react'
+import { blue, grayLight } from '../theme'
+import { leadingTight, textBase, borderBase } from '../theme'
+
+type ButtonProps = {
+  link: string
+  children: React.ReactNode
+}
+
+export const Button = ({ link, children }: ButtonProps) => (
+  <MjmlButton
+    lineHeight={leadingTight}
+    fontSize={textBase}
+    fontWeight="700"
+    height={32}
+    padding="0"
+    align="left"
+    href={link}
+    backgroundColor={blue}
+    color={grayLight}
+    borderRadius={borderBase}
+  >
+    {children}
+  </MjmlButton>
+)

packages/emails/components/Head.tsx

@@ -0,0 +1,81 @@
+import React, { ReactElement } from 'react'
+import {
+  MjmlHead,
+  MjmlFont,
+  MjmlAttributes,
+  MjmlAll,
+  MjmlStyle,
+  MjmlRaw,
+} from '@faire/mjml-react'
+import { black, grayDark } from '../theme'
+
+type HeadProps = { children?: ReactElement }
+
+export const Head = ({ children }: HeadProps) => (
+  <MjmlHead>
+    <>
+      <MjmlRaw>
+        <meta name="color-scheme" content="light dark" />
+        <meta name="supported-color-schemes" content="light" />
+      </MjmlRaw>
+      <MjmlFont
+        name="Inter"
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700"
+      />
+      <MjmlStyle>{`
+        strong {
+          font-weight: 700;
+        }
+        .smooth {
+          -webkit-font-smoothing: antialiased;
+        }
+        .paragraph a {
+          color: ${black} !important;
+        }
+        .li {
+          text-indent: -18px;
+          margin-left: 24px;
+          display: inline-block;
+        }
+        .footer a {
+          text-decoration: none !important;
+          color: ${grayDark} !important;
+        }
+        .dark-mode {
+          display: none;
+        }
+        @media (min-width:480px) {
+          td.hero {
+            padding-left: 24px !important;
+            padding-right: 24px !important;
+          }
+        }
+        @media (prefers-color-scheme: dark) {
+          body {
+            background: ${black};
+          }
+          .logo > * {
+            filter: invert(1) !important;
+          }
+          .paragraph > *, .paragraph a, .li > div {
+            color: #fff !important;
+          }
+          .dark-mode {
+            display: inherit;
+          }
+          .light-mode {
+            display: none;
+          }
+        }
+      `}</MjmlStyle>
+      <MjmlAttributes>
+        <MjmlAll
+          font-family='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+            Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+          font-weight="400"
+        />
+      </MjmlAttributes>
+      {children}
+    </>
+  </MjmlHead>
+)

packages/emails/components/HeroImage.tsx

@@ -0,0 +1,15 @@
+import { MjmlImageProps, MjmlImage } from '@faire/mjml-react'
+import React from 'react'
+import { borderBase } from '../theme'
+
+export const HeroImage = (props: MjmlImageProps) => (
+  <MjmlImage
+    cssClass="hero"
+    padding="0"
+    align="left"
+    borderRadius={borderBase}
+    {...props}
+  >
+    {props.children}
+  </MjmlImage>
+)

packages/emails/components/Text.tsx

@@ -0,0 +1,15 @@
+import { MjmlText, MjmlTextProps, PaddingProps } from '@faire/mjml-react'
+import React from 'react'
+import { leadingRelaxed, textBase } from '../theme'
+
+export const Text = (props: MjmlTextProps & PaddingProps) => (
+  <MjmlText
+    padding="24px 0 0"
+    fontSize={textBase}
+    lineHeight={leadingRelaxed}
+    cssClass="paragraph"
+    {...props}
+  >
+    {props.children}
+  </MjmlText>
+)

packages/emails/components/index.ts

@@ -0,0 +1,4 @@
+export { Button } from './Button'
+export { Text } from './Text'
+export { HeroImage } from './HeroImage'
+export { Head } from './Head'