Merge pull request #615 from outline/jori/notification-emails

Email template updates

server/__snapshots__/mailer.test.js.snap

@@ -42,7 +42,7 @@ Object {
             <tr>
               <td align=\\"center\\">
                 <span style=\\"display: none !important; color: #FFFFFF; margin:0; padding:0; font-size:1px; line-height:1px;\\">Outline is a place for your team to build and share knowledge.</span>
-                <table width=\\"550\\" padding=\\"40\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td align=\\"left\\"><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"40px\\" style=\\"line-height:40px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table><p><strong>Welcome to Outline!</strong></p><p>Outline is a place for your team to build and share knowledge.</p><p>To get started, head to your dashboard and try creating a collection to help document your workflow, create playbooks or help with team onboarding.</p><p>You can also import existing Markdown document by drag and dropping them to your collections</p><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"10px\\" style=\\"line-height:10px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table><p><a href=\\"http://localhost:3000/dashboard\\" style=\\"display:inline-block;padding:10px 20px;color:#FFFFFF;background:#000000;border-radius:4px;font-weight:500;text-decoration:none;cursor:pointer\\">View my dashboard</a></p><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"40px\\" style=\\"line-height:40px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table></td></tr></tbody></table><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td style=\\"padding:20px 0;border-top:1px solid #E8EBED;color:#9BA6B2;font-size:14px\\"><a href=\\"http://localhost:3000\\" style=\\"color:#9BA6B2;font-weight:500;text-decoration:none;margin-right:10px\\">Outline</a><a href=\\"https://twitter.com/outlinewiki\\" style=\\"color:#9BA6B2;text-decoration:none;margin:0 10px\\">Twitter</a><a href=\\"https://spectrum.chat/outline\\" style=\\"color:#9BA6B2;text-decoration:none;margin:0 10px\\">Spectrum</a></td></tr></tbody></table></td></tr></tbody></table>
+                <table width=\\"550\\" padding=\\"40\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td align=\\"left\\"><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"40px\\" style=\\"line-height:40px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table><img src=\\"http://localhost:3000/email/header-logo.png\\" height=\\"55\\" width=\\"32\\"/></td></tr></tbody></table><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"20px\\" style=\\"line-height:20px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table><p><span style=\\"font-weight:500;font-size:18px\\">Welcome to Outline!</span></p><p>Outline is a place for your team to build and share knowledge.</p><p>To get started, head to your dashboard and try creating a collection to help document your workflow, create playbooks or help with team onboarding.</p><p>You can also import existing Markdown document by drag and dropping them to your collections</p><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"10px\\" style=\\"line-height:10px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table><p><a href=\\"http://localhost:3000/dashboard\\" style=\\"display:inline-block;padding:10px 20px;color:#FFFFFF;background:#000000;border-radius:4px;font-weight:500;text-decoration:none;cursor:pointer\\">View my dashboard</a></p><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"40px\\" style=\\"line-height:40px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table></td></tr></tbody></table><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td style=\\"padding:20px 0;border-top:1px solid #E8EBED;color:#9BA6B2;font-size:14px\\"><a href=\\"http://localhost:3000\\" style=\\"color:#9BA6B2;font-weight:500;text-decoration:none;margin-right:10px\\">Outline</a><a href=\\"https://twitter.com/outlinewiki\\" style=\\"color:#9BA6B2;text-decoration:none;margin:0 10px\\">Twitter</a><a href=\\"https://spectrum.chat/outline\\" style=\\"color:#9BA6B2;text-decoration:none;margin:0 10px\\">Spectrum</a></td></tr></tbody></table></td></tr></tbody></table>
               </td>
             </tr>
           </table>

server/emails/WelcomeEmail.js

@@ -3,6 +3,8 @@ import React from 'react';
 import EmailTemplate from './components/EmailLayout';
 import Body from './components/Body';
 import Button from './components/Button';
+import Heading from './components/Heading';
+import Header from './components/Header';
 import Footer from './components/Footer';
 import EmptySpace from './components/EmptySpace';
 
@@ -21,10 +23,10 @@ ${process.env.URL}/dashboard
 export const WelcomeEmail = () => {
   return (
     <EmailTemplate>
+      <Header />
+
       <Body>
-        <p>
-          <strong>Welcome to Outline!</strong>
-        </p>
+        <Heading>Welcome to Outline!</Heading>
 
         <p>Outline is a place for your team to build and share knowledge.</p>
         <p>

server/emails/components/Body.js

@@ -14,7 +14,7 @@ export default ({ children }: Props) => {
       <TBody>
         <TR>
           <TD>
-            <EmptySpace height={40} />
+            <EmptySpace height={20} />
             {children}
             <EmptySpace height={40} />
           </TD>

server/emails/components/Header.js

@@ -0,0 +1,24 @@
+// @flow
+import React from 'react';
+import { Table, TBody, TR, TD } from 'oy-vey';
+import EmptySpace from './EmptySpace';
+import { color } from '../../../shared/styles/constants';
+
+export default () => {
+  return (
+    <Table width="100%">
+      <TBody>
+        <TR>
+          <TD>
+            <EmptySpace height={40} />
+            <img
+              src={`${process.env.URL}/email/header-logo.png`}
+              height="55"
+              width="32"
+            />
+          </TD>
+        </TR>
+      </TBody>
+    </Table>
+  );
+};

server/emails/components/Heading.js

@@ -0,0 +1,17 @@
+// @flow
+import React from 'react';
+
+const style = {
+  fontWeight: 500,
+  fontSize: '18px',
+};
+
+type Props = {
+  children: React$Element<*>,
+};
+
+export default ({ children }: Props) => (
+  <p>
+    <span style={style}>{children}</span>
+  </p>
+);