diff --git a/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx b/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx
index 03022d287bc3af57e72a9e242113f992ed5b9db4..77c02e6a6ce737796d8f171a4383b950f7f15042 100644
--- a/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx
+++ b/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx
@@ -306,7 +306,7 @@ export default class PeopleListingApp extends Component {
return (
<Modal small
- title={user.first_name+"'s Password Has Been Reset"}
+ title={user.first_name+"'s password has been reset"}
footer={<button className="Button Button--primary mr2" onClick={this.onCloseModal}>Done</button>}
onClose={this.onCloseModal}
>
@@ -325,7 +325,7 @@ export default class PeopleListingApp extends Component {
return (
<Modal
small
- title={user.first_name+"'s Password Has Been Reset"}
+ title={user.first_name+"'s password has been reset"}
footer={<Button primary onClick={this.onCloseModal}>Done</Button>}
onClose={this.onCloseModal}
>
diff --git a/src/metabase/email/_footer.mustache b/src/metabase/email/_footer.mustache
index a8f2b8a0277481b0f3213ce77ee14bd02be93154..fffd414890ec1b324f0b6e7429f2aec86637bb54 100644
--- a/src/metabase/email/_footer.mustache
+++ b/src/metabase/email/_footer.mustache
@@ -3,7 +3,7 @@
<div style="padding-top: 2em; padding-bottom: 1em; text-align: center; color: #CCCCCC; font-size: small;">"{{quotation}}"<br/>- {{quotationAuthor}}</div>
{{/quotation}}
{{#logoFooter}}
- <div style="padding-bottom: 1em; padding-top: 1em; text-align: center;">
+ <div style="padding-bottom: 2em; padding-top: 1em; text-align: center;">
<img width="32" height="40" src="http://static.metabase.com/email_logo.png"/>
</div>
{{/logoFooter}}
diff --git a/src/metabase/email/_header.mustache b/src/metabase/email/_header.mustache
index 8cda8c15ba0da367951bf81091040a39f4319d7f..9541f783cac427b737057b370af6a5eae331689a 100644
--- a/src/metabase/email/_header.mustache
+++ b/src/metabase/email/_header.mustache
@@ -8,10 +8,10 @@
}
</style>
</head>
-<body class="{{emailType}}" style="font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 0.875rem; color: #727479; padding: 1em; background-color: #F9FBFC; ">
+<body class="{{emailType}}" style="font-family: 'Helvetica Neue', Helvetica, sans-serif; padding: 1em;">
{{#logoHeader}}
<div style="padding-bottom: 2em; padding-top: 1em; text-align: center;">
- <img width="32" height="40" src="http://static.metabase.com/email_logo.png"/>
+ <img width="47" height="60" src="http://static.metabase.com/email_logo.png"/>
</div>
{{/logoHeader}}
- <div class="container" style="margin: 0 auto; padding: 0; max-width: 660px; color: #9F9F9F;">
+ <div class="container" style="margin: 0 auto; padding: 0 0 2em 0; max-width: 500px; font-size: 16px; line-height: 24px; color: #616D75;">
diff --git a/src/metabase/email/new_user_invite.mustache b/src/metabase/email/new_user_invite.mustache
index 38a0a9c8328df780bacffd832093163a8917c0b9..0480b1161106f9d523639b97e5f25861293b6397 100644
--- a/src/metabase/email/new_user_invite.mustache
+++ b/src/metabase/email/new_user_invite.mustache
@@ -1,29 +1,25 @@
{{> metabase/email/_header }}
- <div style="padding: 2em 4em; border: 1px solid #dddddd; border-radius: 2px; background-color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); text-align: center;">
+ <div style="text-align: center;">
<div style="padding-bottom: 1em;">
- <h2 style="font-weight: normal; color: #4C545B;line-height: 1.65rem;">{{invitedName}}, you're invited to {{company}}'s Metabase</h2>
- <h4 style="font-weight: normal;"><a style="color: #4A90E2; text-decoration: none;" href="mailto:{{invitorEmail}}">{{invitorName}} ({{invitorEmail}})</a> invited you to join them.</h4>
+ <h2 style="font-weight: normal; color: #4C545B; line-height: 2rem;">{{invitorName}} wants you to join them on Metabase</h2>
</div>
- <div style="border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; padding: 3em 0em 2em 0em; text-align: center; margin-left: auto; margin-right: auto; max-width: 400px; position: relative;">
+ <div style="padding: 0.25em 0em .25em 0em; text-align: center; margin-left: auto; margin-right: auto; max-width: 400px; position: relative;">
<table width="296" height="141" cellpadding="0" cellspacing="0" style="display:block;margin:0 auto;">
<tr><td colspan="3"><img src="http://static.metabase.com/email_graph_top.png" width="296" height="73" style="display:block" /></td></tr>
<tr>
<td height="15" width="60"><img src="http://static.metabase.com/email_graph_left.png" width="60" height="15" style="display:block" /></td>
- <td height="15" width="68" valign="middle" align="center" style="font-weight: bold; font-size: 0.72rem; line-height:15px;color: #fff; background-color:#333">{{{today}}}</td>
+ <td height="15" width="68" valign="middle" align="center" style="font-weight: bold; font-size: 0.6rem; line-height:15px;color: #fff; background-color:#333">{{{today}}}</td>
<td height="15" width="168"><img src="http://static.metabase.com/email_graph_right.png" width="168" height="15" style="display:block" /></td></tr>
<tr><td colspan="3" height="46"><img src="http://static.metabase.com/email_graph_bottom.png" width="296" height="56" style="display:block" /></td></tr>
</table>
- <p style="line-height: 1.3rem;">{{invitedName}}'s Happiness and Productivity Over Time</p>
+ <p style="line-height: 1.3rem; font-size: small">{{invitedName}}'s Happiness and Productivity Over Time</p>
</div>
- <div style="max-width: 400px; margin-left: auto; margin-right: auto; padding-top: 1em; line-height: 1.2rem;">
- <p>Metabase is a simple and powerful analytics tool which lets <span style="color: #595959;">anyone</span> learn and <span style="color: #595959;">make decisions</span> from their company's data.</p>
+ <div style="max-width: 450px; margin-left: auto; margin-right: auto; line-height: 1.2rem;">
+ <p>Metabase is a simple and powerful analytics tool which lets <b>anyone</b> learn and <b>make decisions</b> from their company's data.</p>
<p>No technical knowledge required!</p>
</div>
- <div style="padding: 1em;">
- <a style="display: inline-block; box-sizing: border-box; text-decoration: none; font-size: 1.063rem; padding: 0.5rem 1.375rem; background: #FBFCFD; border: 1px solid #ddd; color: #444; cursor: pointer; text-decoration: none; font-weight: bold; border-radius: 4px; background-color: #4990E2; border-color: #4990E2; color: #fff;" href="{{joinUrl}}">Join Now</a>
- </div>
- <div style="padding-bottom: 2em; font-size: x-small;">
- Or you can paste this link into your browser:<br/>{{joinUrl}}
+ <div style="padding: 1em 0 1em 0;">
+ <a style="display: inline-block; box-sizing: border-box; text-decoration: none; font-size: 1.063rem; padding: 0.8rem 2.25rem; background: #FBFCFD; border: 1px solid #ddd; color: #444; cursor: pointer; text-decoration: none; font-weight: bold; border-radius: 4px; background-color: #4990E2; border-color: #4990E2; color: #fff;" href="{{joinUrl}}">Join now</a>
</div>
</div>
{{> metabase/email/_footer }}
diff --git a/src/metabase/email/password_reset.mustache b/src/metabase/email/password_reset.mustache
index 87158ed55bd84f7904da3b03a41aa1e96d1ea9e4..80f349b80ba627b92f67f9afc3a8cb5a2f304a5b 100644
--- a/src/metabase/email/password_reset.mustache
+++ b/src/metabase/email/password_reset.mustache
@@ -1,16 +1,15 @@
{{> metabase/email/_header }}
- <div style="padding: 2em 4em; border: 1px solid #dddddd; border-radius: 2px; background-color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, .08);">
- <p>
- You're receiving this e-mail because you or someone else has requested a password for your user account at {{hostname}}.
- It can be safely ignored if you did not request a password reset.
- </p>
+ <div>
{{#sso}}
<p>You're using Google to log in to Metabase, so you don't have a password. You can log in to Metabase by clicking "Sign in with Google"</p>
<a href="{{hostname}}">Go to Metabase</a>
{{/sso}}
{{^sso}}
- <p>Click the link below to reset your password.</p>
- <a href="{{passwordResetUrl}}">{{passwordResetUrl}}</a>
+ <div style="text-align: center">
+ <p>Click the button below to reset the password for your Metabase account at {{hostname}}.</p>
+ <a style="display: inline-block; box-sizing: border-box; text-decoration: none; font-size: 1.063rem; padding: 0.5rem 1.375rem; background: #FBFCFD; border: 1px solid #ddd; color: #444; cursor: pointer; text-decoration: none; border-radius: 4px; background-color: #4990E2; border-color: #4990E2; color: #fff;" href="{{passwordResetUrl}}">Reset password</a>
+ <p style="padding-top: 2em; font-size: small;">Didn't request this password reset? It's safe to ignore it.</p>
+ </div>
{{/sso}}
</div>
{{> metabase/email/footer }}