Skip to content

N
nexpie-grafana-theme
Commit f7ea420a by Torkel Ödegaard
Options

Merge pull request #2521 from mattttt/email-tweaks 

Email tweaks
parents bb81248e 0651f134
Showing with 199 additions and 131 deletions
emails/README.md
- npm install
- gem install premailer
- grunt (default task will build new inlines email templates)
- grunt watch (will build on source html or css change)
......
emails/assets/css/ink.css
......@@ -332,9 +332,9 @@ h1, h2, h3, h4, h5, h6 {
h1 {font-size: 40px;}
h2 {font-size: 36px;}
h3 {font-size: 32px;}
h4 {font-size: 28px;}
h5 {font-size: 24px;}
h3 {font-size: 26px;}
h4 {font-size: 24px;}
h5 {font-size: 22px;}
h6 {font-size: 20px;}
body, table.body, p, td {font-size: 14px;line-height:19px;}
......@@ -351,21 +351,25 @@ small {
font-size: 10px;
}
.emphasis {
font-weight: 600;
}
a {
color: #2ba6cb;
color: #E67612;
text-decoration: none;
}
a:hover {
color: #2795b6 !important;
color: #ff8f2b !important;
}
a:active {
color: #2795b6 !important;
color: #F2821E !important;
}
a:visited {
color: #2ba6cb !important;
color: #E67612 !important;
}
h1 a,
......@@ -430,8 +434,8 @@ table.large-button td {
display: block;
width: auto !important;
text-align: center;
background: #2ba6cb;
border: 1px solid #2284a1;
background: #ff8f2b;
border: 1px solid #ff8f2b;
color: #ffffff;
padding: 8px 0;
}
......@@ -484,7 +488,7 @@ table.large-button td a {
table.button:hover td,
table.button:visited td,
table.button:active td {
background: #2795b6 !important;
background: #ff8f2b !important;
}
table.button:hover td a,
......@@ -498,7 +502,7 @@ table.tiny-button:hover td,
table.small-button:hover td,
table.medium-button:hover td,
table.large-button:hover td {
background: #2795b6 !important;
background: #F2821E !important;
}
table.button:hover td a,
......@@ -685,4 +689,4 @@ body.outlook p {
table[class="body"] .hide-for-desktop {
display: inherit !important;
}
}
}
\ No newline at end of file
emails/assets/css/style.css
......@@ -5,6 +5,37 @@ body, table.body, h1, h2, h3, h4, h5, h6, p, td {
-webkit-text-size-adjust: none;
}
h1 {font-size: 40px;}
h2 {font-size: 36px;}
h3 {
font-size: 22px;
margin-top: 20px;
}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}
.emphasis {
font-weight: 600;
}
a {
color: #E67612;
text-decoration: none;
}
a:hover {
color: #ff8f2b !important;
}
a:active {
color: #F2821E !important;
}
a:visited {
color: #E67612 !important;
}
table.facebook td {
background: #3b5998;
border-color: #2d4473;
......@@ -65,3 +96,40 @@ table.google-plus:hover td {
}
}
table.better-button {
margin-top: 10px;
margin-bottom: 20px;
}
table.columns td.better-button {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding-bottom: 0px;
}
.better-button a {
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding: 12px 25px;
border: 1px solid #ff8f2b;
display: inline-block;
color: #FFF;
}
.better-button:hover a {
color: #FFFFFF !important;
background-color: #F2821E;
border: 1px solid #F2821E;
}
.better-button:visited a {
color: #FFFFFF !important;
}
.better-button:active a {
color: #FFFFFF !important;
}
\ No newline at end of file
emails/templates/invited_to_org.html
<!-- This email is sent when an existing user is added to an organization -->
[[Subject .Subject "[[.InvitedBy]] has added you to the Grafana organization [[.OrgName]]"]]
[[Subject .Subject "[[.InvitedBy]] has added you to the [[.OrgName]] organization"]]
<table class="row">
<tr>
......@@ -9,7 +9,7 @@
<table class="twelve columns">
<tr>
<td>
<h3>You have been added to the Grafana organization [[.OrgName]]</h3>
<h3>You have been added to [[.OrgName]]</h3>
</td>
<td class="expander"></td>
</tr>
......@@ -25,10 +25,22 @@
<table class="twelve columns">
<tr>
<td class="center">
<p>You can switch organization in the left side menu, in the dropdown below your username.</p>
<p><span class="emphasis">[[.InvitedBy]]</span> has added you to the <span class="emphasis">[[.OrgName]]</span> organization in Grafana.
<p>Once logged in, [[.OrgName]] will be available in the left side menu, in the dropdown below your username.</p>
</td>
<td class="expander"></td>
</tr>
<tr>
<td class="center">
<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="better-button" bgcolor="#ff8f2b"><a href="[[.AppURL]]" target="_blank">Log in now</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
......
emails/templates/new_user_invite.html
......@@ -9,7 +9,7 @@
<table class="twelve columns">
<tr>
<td>
<h3>You're invited to sign up to Grafana and join organization [[.OrgName]]</h3>
<h3>You're invited to join [[.OrgName]]</h3>
</td>
<td class="expander"></td>
</tr>
......@@ -25,20 +25,25 @@
<table class="twelve columns">
<tr>
<td class="center">
<table class="button radius">
<tr>
<td>
<a href="[[.LinkUrl]]">Complete Sign Up</a>
</td>
</tr>
</table>
<p>You've been invited to join the <span class="emphasis">[[.OrgName]]</span> organization by <span class="emphasis">[[.InvitedBy]]</span>. To accept your invitation and join the team, please click the link below:</p>
</td>
</tr>
<tr>
<td class="center">
<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="better-button" bgcolor="#ff8f2b"><a href="[[.LinkUrl]]" target="_blank">Accept Invitation</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="center">
<p>You can also copy/paste this link into your browser directly: <a href="[[.LinkUrl]]">[[.LinkUrl]]</a></p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</table>
\ No newline at end of file
public/emails/reset_password.html
......@@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body style="-ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important"><style type="text/css">
body {
......@@ -19,46 +19,34 @@ body {
font-size: 14px; line-height: 19px;
}
a:hover {
color: #2795b6 !important;
color: #ff8f2b !important;
}
a:active {
color: #2795b6 !important;
color: #F2821E !important;
}
a:visited {
color: #2ba6cb !important;
}
table.button:hover td {
background: #2795b6 !important;
}
table.button:visited td {
background: #2795b6 !important;
}
table.button:active td {
background: #2795b6 !important;
color: #E67612 !important;
}
table.button:hover td a {
color: #fff !important;
}
table.button:visited td a {
color: #fff !important;
body {
font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;
}
table.button:active td a {
color: #fff !important;
a:hover {
color: #ff8f2b !important;
}
table.button:hover td {
background: #2795b6 !important;
a:active {
color: #F2821E !important;
}
table.button:hover td a {
color: #ffffff !important;
a:visited {
color: #E67612 !important;
}
table.button:active td a {
color: #ffffff !important;
.better-button:hover a {
color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E;
}
table.button td a:visited {
color: #ffffff !important;
.better-button:visited a {
color: #FFFFFF !important;
}
body {
font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;
.better-button:active a {
color: #FFFFFF !important;
}
@media only screen and (max-width: 600px) {
table[class="body"] img {
......@@ -134,7 +122,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
<h3 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 32px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; word-break: normal" align="left">Hi {{.Name}}</h3>
<h3 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: normal; line-height: 1.3; margin: 20px 0 0; padding: 0; text-align: left; word-break: normal" align="left">Hi {{.Name}}</h3>
</td>
<td class="expander" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; visibility: hidden; width: 0px; word-break: break-word" align="left" valign="top"></td>
</tr>
......@@ -154,7 +142,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
Please click the following link to reset your password within <strong>{{.EmailCodeValidHours}} hours</strong>.
</p>
<p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0; text-align: left" align="left">
<a href="{{.AppUrl}}user/password/reset?code={{.Code}}" style="color: #2ba6cb; text-decoration: none">{{.AppUrl}}user/password/reset?code={{.Code}}</a>
<a href="{{.AppUrl}}user/password/reset?code={{.Code}}" style="color: #E67612; text-decoration: none">{{.AppUrl}}user/password/reset?code={{.Code}}</a>
</p>
<p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0; text-align: left" align="left">Not working? Try copying and pasting it to your browser.</p>
</td>
......@@ -168,7 +156,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
<table class="row footer" style="border-collapse: collapse; border-spacing: 0; display: block; margin-top: 20px; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
......@@ -177,7 +165,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
<td align="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: left; vertical-align: top; word-break: break-word" valign="top">
<center style="min-width: 580px; width: 100%">
<p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0; text-align: center" align="center">
Sent by <a href="{{.AppUrl}}" style="color: #2ba6cb; text-decoration: none">Grafana v{{.BuildVersion}}</a>
Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none">Grafana v{{.BuildVersion}}</a>
</p>
</center>
</td>
......@@ -188,7 +176,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
</tr>
</table>
</td>
</tr>
......@@ -200,4 +188,3 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
</table>
</body>
</html>
public/emails/welcome_on_signup.html
......@@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body style="-ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important"><style type="text/css">
body {
......@@ -19,46 +19,34 @@ body {
font-size: 14px; line-height: 19px;
}
a:hover {
color: #2795b6 !important;
color: #ff8f2b !important;
}
a:active {
color: #2795b6 !important;
color: #F2821E !important;
}
a:visited {
color: #2ba6cb !important;
}
table.button:hover td {
background: #2795b6 !important;
}
table.button:visited td {
background: #2795b6 !important;
}
table.button:active td {
background: #2795b6 !important;
color: #E67612 !important;
}
table.button:hover td a {
color: #fff !important;
}
table.button:visited td a {
color: #fff !important;
body {
font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;
}
table.button:active td a {
color: #fff !important;
a:hover {
color: #ff8f2b !important;
}
table.button:hover td {
background: #2795b6 !important;
a:active {
color: #F2821E !important;
}
table.button:hover td a {
color: #ffffff !important;
a:visited {
color: #E67612 !important;
}
table.button:active td a {
color: #ffffff !important;
.better-button:hover a {
color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E;
}
table.button td a:visited {
color: #ffffff !important;
.better-button:visited a {
color: #FFFFFF !important;
}
body {
font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;
.better-button:active a {
color: #FFFFFF !important;
}
@media only screen and (max-width: 600px) {
table[class="body"] img {
......@@ -134,7 +122,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
<h3 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 32px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; word-break: normal" align="left">Hi {{.Name}}</h3>
<h3 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: normal; line-height: 1.3; margin: 20px 0 0; padding: 0; text-align: left; word-break: normal" align="left">Hi {{.Name}}</h3>
</td>
<td class="expander" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; visibility: hidden; width: 0px; word-break: break-word" align="left" valign="top"></td>
</tr>
......@@ -151,7 +139,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: center; vertical-align: top; word-break: break-word" align="center" valign="top">
<p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0; text-align: left" align="left">
If you are new to Grafana please read the <a href="http://docs.grafana.org/guides/gettingstarted/" style="color: #2ba6cb; text-decoration: none">Getting Started</a> guide.
If you are new to Grafana please read the <a href="http://docs.grafana.org/guides/gettingstarted/" style="color: #E67612; text-decoration: none">Getting Started</a> guide.
</p>
</td>
<td class="expander" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; visibility: hidden; width: 0px; word-break: break-word" align="left" valign="top"></td>
......@@ -163,7 +151,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
<table class="row footer" style="border-collapse: collapse; border-spacing: 0; display: block; margin-top: 20px; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
......@@ -172,7 +160,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
<td align="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: left; vertical-align: top; word-break: break-word" valign="top">
<center style="min-width: 580px; width: 100%">
<p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0; text-align: center" align="center">
Sent by <a href="{{.AppUrl}}" style="color: #2ba6cb; text-decoration: none">Grafana v{{.BuildVersion}}</a>
Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none">Grafana v{{.BuildVersion}}</a>
</p>
</center>
</td>
......@@ -183,7 +171,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
</tr>
</table>
</td>
</tr>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment