From 15f5c63e88f34fb97aaaabd5338b493b23ade44d Mon Sep 17 00:00:00 2001 From: Terry Acker Date: Mon, 26 Sep 2016 17:35:02 -0500 Subject: [PATCH 01/66] Just getting started with Summary UI components --- src/server/emailSSR.js | 9 +- .../modules/email/components/Body/Body.js | 3 +- .../modules/email/components/Card/Card.js | 194 ++++++++++++++++++ .../modules/email/components/Footer/Footer.js | 3 +- .../containers/SummaryEmail/SummaryEmail.js | 146 +++++++++++++ .../email/containers/SummaryEmail/index.js | 14 ++ src/universal/styles/ui.js | 1 + .../email-card-action-border-bottom-left.png | Bin 0 -> 143 bytes ...mail-card-action-border-bottom-left@2x.png | Bin 0 -> 214 bytes ...mail-card-action-border-bottom-left@3x.png | Bin 0 -> 277 bytes .../email-card-action-border-bottom-right.png | Bin 0 -> 139 bytes ...ail-card-action-border-bottom-right@2x.png | Bin 0 -> 193 bytes ...ail-card-action-border-bottom-right@3x.png | Bin 0 -> 266 bytes .../email-card-action-border-top-left.png | Bin 0 -> 128 bytes .../email-card-action-border-top-left@2x.png | Bin 0 -> 175 bytes .../email-card-action-border-top-left@3x.png | Bin 0 -> 222 bytes .../email-card-action-border-top-right.png | Bin 0 -> 135 bytes .../email-card-action-border-top-right@2x.png | Bin 0 -> 198 bytes .../email-card-action-border-top-right@3x.png | Bin 0 -> 262 bytes .../email-card-active-border-top-left.png | Bin 0 -> 122 bytes .../email-card-active-border-top-left@2x.png | Bin 0 -> 173 bytes .../email-card-active-border-top-left@3x.png | Bin 0 -> 222 bytes .../email-card-active-border-top-right.png | Bin 0 -> 137 bytes .../email-card-active-border-top-right@2x.png | Bin 0 -> 194 bytes .../email-card-active-border-top-right@3x.png | Bin 0 -> 246 bytes .../email/email-card-border-bottom-left.png | Bin 0 -> 139 bytes .../email-card-border-bottom-left@2x.png | Bin 0 -> 218 bytes .../email-card-border-bottom-left@3x.png | Bin 0 -> 291 bytes .../email/email-card-border-bottom-right.png | Bin 0 -> 137 bytes .../email-card-border-bottom-right@2x.png | Bin 0 -> 196 bytes .../email-card-border-bottom-right@3x.png | Bin 0 -> 271 bytes .../email/email-card-done-border-top-left.png | Bin 0 -> 131 bytes .../email-card-done-border-top-left@2x.png | Bin 0 -> 201 bytes .../email-card-done-border-top-left@3x.png | Bin 0 -> 249 bytes .../email-card-done-border-top-right.png | Bin 0 -> 126 bytes .../email-card-done-border-top-right@2x.png | Bin 0 -> 190 bytes .../email-card-done-border-top-right@3x.png | Bin 0 -> 264 bytes .../email-card-future-border-top-left.png | Bin 0 -> 122 bytes .../email-card-future-border-top-left@2x.png | Bin 0 -> 182 bytes .../email-card-future-border-top-left@3x.png | Bin 0 -> 232 bytes .../email-card-future-border-top-right.png | Bin 0 -> 136 bytes .../email-card-future-border-top-right@2x.png | Bin 0 -> 202 bytes .../email-card-future-border-top-right@3x.png | Bin 0 -> 251 bytes .../email-card-stuck-border-top-left.png | Bin 0 -> 122 bytes .../email-card-stuck-border-top-left@2x.png | Bin 0 -> 182 bytes .../email-card-stuck-border-top-left@3x.png | Bin 0 -> 236 bytes .../email-card-stuck-border-top-right.png | Bin 0 -> 137 bytes .../email-card-stuck-border-top-right@2x.png | Bin 0 -> 197 bytes .../email-card-stuck-border-top-right@3x.png | Bin 0 -> 246 bytes 49 files changed, 364 insertions(+), 6 deletions(-) create mode 100644 src/universal/modules/email/components/Card/Card.js create mode 100644 src/universal/modules/email/containers/SummaryEmail/SummaryEmail.js create mode 100644 src/universal/modules/email/containers/SummaryEmail/index.js create mode 100644 static/images/email/email-card-action-border-bottom-left.png create mode 100644 static/images/email/email-card-action-border-bottom-left@2x.png create mode 100644 static/images/email/email-card-action-border-bottom-left@3x.png create mode 100644 static/images/email/email-card-action-border-bottom-right.png create mode 100644 static/images/email/email-card-action-border-bottom-right@2x.png create mode 100644 static/images/email/email-card-action-border-bottom-right@3x.png create mode 100644 static/images/email/email-card-action-border-top-left.png create mode 100644 static/images/email/email-card-action-border-top-left@2x.png create mode 100644 static/images/email/email-card-action-border-top-left@3x.png create mode 100644 static/images/email/email-card-action-border-top-right.png create mode 100644 static/images/email/email-card-action-border-top-right@2x.png create mode 100644 static/images/email/email-card-action-border-top-right@3x.png create mode 100644 static/images/email/email-card-active-border-top-left.png create mode 100644 static/images/email/email-card-active-border-top-left@2x.png create mode 100644 static/images/email/email-card-active-border-top-left@3x.png create mode 100644 static/images/email/email-card-active-border-top-right.png create mode 100644 static/images/email/email-card-active-border-top-right@2x.png create mode 100644 static/images/email/email-card-active-border-top-right@3x.png create mode 100644 static/images/email/email-card-border-bottom-left.png create mode 100644 static/images/email/email-card-border-bottom-left@2x.png create mode 100644 static/images/email/email-card-border-bottom-left@3x.png create mode 100644 static/images/email/email-card-border-bottom-right.png create mode 100644 static/images/email/email-card-border-bottom-right@2x.png create mode 100644 static/images/email/email-card-border-bottom-right@3x.png create mode 100644 static/images/email/email-card-done-border-top-left.png create mode 100644 static/images/email/email-card-done-border-top-left@2x.png create mode 100644 static/images/email/email-card-done-border-top-left@3x.png create mode 100644 static/images/email/email-card-done-border-top-right.png create mode 100644 static/images/email/email-card-done-border-top-right@2x.png create mode 100644 static/images/email/email-card-done-border-top-right@3x.png create mode 100644 static/images/email/email-card-future-border-top-left.png create mode 100644 static/images/email/email-card-future-border-top-left@2x.png create mode 100644 static/images/email/email-card-future-border-top-left@3x.png create mode 100644 static/images/email/email-card-future-border-top-right.png create mode 100644 static/images/email/email-card-future-border-top-right@2x.png create mode 100644 static/images/email/email-card-future-border-top-right@3x.png create mode 100644 static/images/email/email-card-stuck-border-top-left.png create mode 100644 static/images/email/email-card-stuck-border-top-left@2x.png create mode 100644 static/images/email/email-card-stuck-border-top-left@3x.png create mode 100644 static/images/email/email-card-stuck-border-top-right.png create mode 100644 static/images/email/email-card-stuck-border-top-right@2x.png create mode 100644 static/images/email/email-card-stuck-border-top-right@3x.png diff --git a/src/server/emailSSR.js b/src/server/emailSSR.js index d6d8e968fb9..727b6bd6e68 100644 --- a/src/server/emailSSR.js +++ b/src/server/emailSSR.js @@ -1,6 +1,7 @@ import React from 'react'; import Oy from 'oy-vey'; -import TeamInvite from 'universal/modules/email/containers/TeamInvite/TeamInvite'; +import SummaryEmail from 'universal/modules/email/containers/SummaryEmail/SummaryEmail'; +// import TeamInvite from 'universal/modules/email/containers/TeamInvite/TeamInvite'; // import WelcomeEmail from 'universal/modules/email/containers/WelcomeEmail/WelcomeEmail'; const demoInviteProps = { @@ -9,13 +10,13 @@ const demoInviteProps = { inviterFirstName: 'Jordan', inviterEmail: 'jordan@parabol.co', inviteeEmail: 'terry@parabol.co', - firstProject: 'Onboarding flow designed', - teamName: 'Engineering', + firstProject: 'Meeting summary email designed', + teamName: 'Parabol', teamLink: 'https://prbl.io/a/b7s8x9' }; export default function emailSSR(req, res) { - const html = Oy.renderTemplate(, { + const html = Oy.renderTemplate(, { title: 'Welcome to Action by Parabol', previewText: 'Welcome to Action by Parabol' }); diff --git a/src/universal/modules/email/components/Body/Body.js b/src/universal/modules/email/components/Body/Body.js index cfbdb9774e3..e16cbe4711f 100644 --- a/src/universal/modules/email/components/Body/Body.js +++ b/src/universal/modules/email/components/Body/Body.js @@ -1,11 +1,12 @@ import React, {PropTypes} from 'react'; import EmptySpace from '../EmptySpace/EmptySpace'; import theme from 'universal/styles/theme'; +import ui from 'universal/styles/ui'; const Body = (props) => { const textStyle = { color: theme.palette.dark, - backgroundColor: '#F9FAFB', + backgroundColor: ui.emailBackgroundColor, fontFamily: '"Karla", "Helvetica Neue", serif', fontSize: `${props.fontSize}px`, lineHeight: `${props.lineHeight}` diff --git a/src/universal/modules/email/components/Card/Card.js b/src/universal/modules/email/components/Card/Card.js new file mode 100644 index 00000000000..6c0e6c42c28 --- /dev/null +++ b/src/universal/modules/email/components/Card/Card.js @@ -0,0 +1,194 @@ +import React, {PropTypes} from 'react'; +import EmptySpace from '../EmptySpace/EmptySpace'; +import theme from 'universal/styles/theme'; +import labels from 'universal/styles/theme/labels'; +import ui from 'universal/styles/ui'; + +const Card = (props) => { + const {children, status, type} = props; + + let backgroundColor; + + if (type === 'project') { + backgroundColor = '#FFFFFF'; + } else { + backgroundColor = ui.actionCardBgColor; + } + + const textStyle = { + color: theme.palette.dark, + backgroundColor, + fontFamily: '"Karla", "Helvetica Neue", serif' + }; + + const borderStyle = { + backgroundColor: ui.cardBorderColor + }; + + const borderLeftStyle = { + backgroundColor, + borderLeft: `1px solid ${ui.cardBorderColor}`, + width: '3px' + }; + + const borderRightStyle = { + backgroundColor, + borderRight: `1px solid ${ui.cardBorderColor}`, + width: '3px' + }; + + const imageStyle = { + border: 0, + display: 'block' + }; + + const borderImageBottomLeftAction = '/static/images/email/email-card-action-border-bottom-left@3x.png'; + const borderImageBottomRightAction = '/static/images/email/email-card-action-border-bottom-right@3x.png'; + + const borderImageBottomLeftProject = '/static/images/email/email-card-border-bottom-left@3x.png'; + const borderImageBottomRightProject = '/static/images/email/email-card-border-bottom-right@3x.png'; + + const borderImageTopLeftAction = '/static/images/email/email-card-action-border-top-left@3x.png'; + const borderImageTopRightAction = '/static/images/email/email-card-action-border-top-right@3x.png'; + + const borderImageTopLeftActive = '/static/images/email/email-card-active-border-top-left@3x.png'; + const borderImageTopRightActive = '/static/images/email/email-card-active-border-top-right@3x.png'; + + const borderImageTopLeftDone = '/static/images/email/email-card-done-border-top-left@3x.png'; + const borderImageTopRightDone = '/static/images/email/email-card-done-border-top-right@3x.png'; + + const borderImageTopLeftFuture = '/static/images/email/email-card-future-border-top-left@3x.png'; + const borderImageTopRightFuture = '/static/images/email/email-card-future-border-top-right@3x.png'; + + const borderImageTopLeftStuck = '/static/images/email/email-card-stuck-border-top-left@3x.png'; + const borderImageTopRightStuck = '/static/images/email/email-card-stuck-border-top-right@3x.png'; + + let borderImageBottomLeft; + let borderImageBottomRight; + let borderImageTopLeft; + let borderImageTopRight; + + if (type === 'action') { + borderImageBottomLeft = borderImageBottomLeftAction; + borderImageBottomRight = borderImageBottomRightAction; + borderImageTopLeft = borderImageTopLeftAction; + borderImageTopRight = borderImageTopRightAction; + } else if (type === 'project') { + borderImageBottomLeft = borderImageBottomLeftProject; + borderImageBottomRight = borderImageBottomRightProject; + + if (status === 'active') { + borderImageTopLeft = borderImageTopLeftActive; + borderImageTopRight = borderImageTopRightActive; + } else if (status === 'done') { + borderImageTopLeft = borderImageTopLeftDone; + borderImageTopRight = borderImageTopRightDone; + } else if (status === 'future') { + borderImageTopLeft = borderImageTopLeftFuture; + borderImageTopRight = borderImageTopRightFuture; + } else if (status === 'stuck') { + borderImageTopLeft = borderImageTopLeftStuck; + borderImageTopRight = borderImageTopRightStuck; + } + } + + let borderTopStyle; + + if (type === 'project') { + borderTopStyle = { + backgroundColor: labels.projectStatus[status].color + }; + } else { + borderTopStyle = { + backgroundColor: labels.action.color + }; + } + + return ( + + + {/* card styled top border */} + + + + + + {/* card body */} + + + + + + {/* card footer */} + + + + + + +
+ + + +
+ + {children} + +
+ + + + + + +
+ 		+ +
+ ); +}; + +Card.propTypes = { + children: PropTypes.any, + status: PropTypes.oneOf([ + 'active', + 'done', + 'future', + 'stuck' + ]), + type: PropTypes.oneOf([ + 'project', + 'action' + ]) +}; + +Card.defaultProps = { + fontSize: 18, + lineHeight: 1.25, + type: 'action' +}; + +export default Card; diff --git a/src/universal/modules/email/components/Footer/Footer.js b/src/universal/modules/email/components/Footer/Footer.js index 57eb05e94f9..93f33719215 100644 --- a/src/universal/modules/email/components/Footer/Footer.js +++ b/src/universal/modules/email/components/Footer/Footer.js @@ -1,10 +1,11 @@ import React from 'react'; import EmptySpace from '../EmptySpace/EmptySpace'; import theme from 'universal/styles/theme'; +import ui from 'universal/styles/ui'; const Footer = (props) => { const style = { - backgroundColor: '#F9FAFB', + backgroundColor: ui.emailBackgroundColor, color: props.color }; diff --git a/src/universal/modules/email/containers/SummaryEmail/SummaryEmail.js b/src/universal/modules/email/containers/SummaryEmail/SummaryEmail.js new file mode 100644 index 00000000000..3cde205d038 --- /dev/null +++ b/src/universal/modules/email/containers/SummaryEmail/SummaryEmail.js @@ -0,0 +1,146 @@ +import React, {PropTypes} from 'react'; +import Layout from '../../components/Layout/Layout'; +import Button from '../../components/Button/Button'; +import EmptySpace from '../../components/EmptySpace/EmptySpace'; +import Body from '../../components/Body/Body'; +import Card from '../../components/Card/Card'; +import Footer from '../../components/Footer/Footer'; +import theme from 'universal/styles/theme'; + +const cardRowCell = { + padding: '10px' +}; + +const colorCool = { + color: theme.palette.cool +}; + +const colorWarm = { + color: theme.palette.warm +}; + +const boldLinkStyle = { + color: theme.palette.warm, + fontWeight: 'bold', + textDecoration: 'none' +}; + +const merryAndBold = { + color: theme.palette.cool, + fontFamily: '"Merriweather", "Georgia", serif', + fontStyle: 'italic', + fontWeight: 'bold' +}; + +const teamNameStyle = { + ...merryAndBold, + fontSize: '36px' +}; + +const projectNameStyle = { + ...merryAndBold, + fontSize: '24px' +}; + +const SummaryEmail = props => { + const { + inviterAvatar, + inviterName, + inviterEmail, + inviteeEmail, + firstProject, + teamName, + inviteLink + } = props; + + return ( + + + + + + + + +
+ +
+ + + + + + + + + +
+ + + {inviterName}
+ {inviterEmail} +
+ + + + + + + +
Outcome description printedOutcome description printedOutcome description printed
+ + + Hi {inviteeEmail}!
+ {inviterName} has invited you to join a team on Action: + + {teamName} + + Action +  is a place where you and your team
will develop your weekly rhythm.
+ + {firstProject && +
+ {inviterName} added one of your projects to Action: + + “{firstProject}” + +
+ } + + + Or go to: {inviteLink} + +