email styling and update pw reset email

6a311860 · Maz Ameli · 0e87dfd2 · 6a311860 · 6a311860 · 6a311860
Commit 6a311860 authored 7 years ago by Maz Ameli
--- 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}
            >

--- 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}}

--- 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: 1rem; color: #616D75; padding: 1em;">
+<body class="{{emailType}}" style="font-family: 'Lato', '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;">
+  <div class="container" style="margin: 0 auto; padding: 0 0 2em 0; max-width: 500px; font-size: 16px; line-height: 24px; color: #616D75;">
--- a/src/metabase/email/password_reset.mustache
+++ b/src/metabase/email/password_reset.mustache
 {{> 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 }}