Added social links (#535)

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;text-decoration:none\\">Outline</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><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>
               </td>
             </tr>
           </table>

server/emails/components/Footer.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { Table, TBody, TR, TD } from 'oy-vey';
 import { color } from '../../../shared/styles/constants';
+import { twitterUrl, spectrumUrl } from '../../../shared/utils/routeHelpers';
 
 export default () => {
   const style = {
@@ -13,7 +14,15 @@ export default () => {
 
   const linkStyle = {
     color: color.slate,
+    fontWeight: 500,
     textDecoration: 'none',
+    marginRight: '10px',
+  };
+
+  const externalLinkStyle = {
+    color: color.slate,
+    textDecoration: 'none',
+    margin: '0 10px',
   };
 
   return (
@@ -24,6 +33,12 @@ export default () => {
             <a href={process.env.URL} style={linkStyle}>
               Outline
             </a>
+            <a href={twitterUrl()} style={externalLinkStyle}>
+              Twitter
+            </a>
+            <a href={spectrumUrl()} style={externalLinkStyle}>
+              Spectrum
+            </a>
           </TD>
         </TR>
       </TBody>

server/pages/components/Navigation.js

@@ -9,6 +9,7 @@ import {
   about,
   privacy,
   githubUrl,
+  twitterUrl,
   spectrumUrl,
   blogUrl,
 } from '../../../shared/utils/routeHelpers';
@@ -25,6 +26,9 @@ function TopNavigation() {
         <MenuItemDesktop>
           <a href={about()}>About</a>
         </MenuItemDesktop>
+        <MenuItemDesktop>
+          <a href={twitterUrl()}>Twitter</a>
+        </MenuItemDesktop>
         <MenuItemDesktop>
           <a href={changelog()}>Changelog</a>
         </MenuItemDesktop>
@@ -45,6 +49,9 @@ function BottomNavigation() {
       <div>
         <a href={githubUrl()}>GitHub</a>
       </div>
+      <div>
+        <a href={twitterUrl()}>Twitter</a>
+      </div>
       <div>
         <a href={spectrumUrl()}>Spectrum</a>
       </div>

shared/utils/routeHelpers.js

@@ -34,7 +34,7 @@ export function blogUrl(): string {
 }
 
 export function twitterUrl(): string {
-  return 'https://twitter.com/getoutline';
+  return 'https://twitter.com/outlinewiki';
 }
 
 export function spectrumUrl(): string {