Added email templating, and user welcome email

server/emails/components/Body.js

@@ -0,0 +1,25 @@
+// @flow
+import React from 'react';
+import { Table, TBody, TR, TD } from 'oy-vey';
+
+import EmptySpace from './EmptySpace';
+
+type Props = {
+  children: React$Element<*>,
+};
+
+export default ({ children }: Props) => {
+  return (
+    <Table width="100%">
+      <TBody>
+        <TR>
+          <TD>
+            <EmptySpace height={40} />
+            {children}
+            <EmptySpace height={40} />
+          </TD>
+        </TR>
+      </TBody>
+    </Table>
+  );
+};

server/emails/components/Button.js

@@ -0,0 +1,17 @@
+// @flow
+import React from 'react';
+
+export default (props: { href: string, children: React.Element<*> }) => {
+  const style = {
+    display: 'inline-block',
+    padding: '10px 20px',
+    color: '#FFFFFF',
+    background: '#000000',
+    borderRadius: '4px',
+    fontWeight: 500,
+    textDecoration: 'none',
+    cursor: 'pointer',
+  };
+
+  return <a {...props} style={style} />;
+};

server/emails/components/EmailLayout.js

@@ -0,0 +1,26 @@
+// @flow
+import React from 'react';
+import { Table, TBody, TR, TD } from 'oy-vey';
+import { fonts } from '../../../shared/styles/constants';
+
+type Props = {
+  children: React$Element<*>,
+};
+
+export default (props: Props) => (
+  <Table width="550" padding="40">
+    <TBody>
+      <TR>
+        <TD align="left">{props.children}</TD>
+      </TR>
+    </TBody>
+  </Table>
+);
+
+export const baseStyles = `
+  #__bodyTable__ {
+    font-family: ${fonts.regular};
+    font-size: 16px;
+    line-height: 1.5;
+  }
+`;

server/emails/components/EmptySpace.js

@@ -0,0 +1,29 @@
+// @flow
+import React from 'react';
+import { Table, TBody, TR, TD } from 'oy-vey';
+
+const EmptySpace = ({ height }: { height?: number }) => {
+  height = height || 16;
+  const style = {
+    lineHeight: `${height}px`,
+    fontSize: '1px',
+    msoLineHeightRule: 'exactly',
+  };
+
+  return (
+    <Table width="100%">
+      <TBody>
+        <TR>
+          <TD
+            width="100%"
+            height={`${height}px`}
+            style={style}
+            dangerouslySetInnerHTML={{ __html: '&nbsp;' }}
+          />
+        </TR>
+      </TBody>
+    </Table>
+  );
+};
+
+export default EmptySpace;

server/emails/components/Footer.js

@@ -0,0 +1,31 @@
+// @flow
+import React from 'react';
+import { Table, TBody, TR, TD } from 'oy-vey';
+
+export default () => {
+  const style = {
+    padding: '20px 0',
+    borderTop: '1px solid #e8e8e8',
+    color: '#9BA6B2',
+    fontSize: '14px',
+  };
+
+  const linkStyle = {
+    color: '#9BA6B2',
+    textDecoration: 'none',
+  };
+
+  return (
+    <Table width="100%">
+      <TBody>
+        <TR>
+          <TD width="75%" style={style}>
+            <a href={process.env.URL} style={linkStyle}>
+              Outline
+            </a>
+          </TD>
+        </TR>
+      </TBody>
+    </Table>
+  );
+};