Merge pull request #2521 from mattttt/email-tweaks

Email tweaks

emails/README.md

@@ -1,5 +1,6 @@
 
 - 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;
   }
-}
+}

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

emails/templates/invited_to_org.html

@@ -1,6 +1,6 @@
 <!-- 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>

public/emails/invited_to_org.html

@@ -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;
+color: #E67612 !important;
 }
-table.button:hover td {
-background: #2795b6 !important;
-}
-table.button:visited td {
-background: #2795b6 !important;
-}
-table.button:active td {
-background: #2795b6 !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 {
@@ -127,7 +115,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
 							<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: 0; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
 								
 
-{{Subject .Subject "{{.InvitedBy}} has added you to the Grafana organization {{.OrgName}}"}}
+{{Subject .Subject "{{.InvitedBy}} has added you to the {{.OrgName}} organization"}}
 
 <table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
 	<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
@@ -136,7 +124,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">You have been added to the Grafana organization {{.OrgName}}</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">You have been added to {{.OrgName}}</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>
@@ -152,10 +140,22 @@ 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 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">You can switch organization in the left side menu, in the dropdown below your username.</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"><span class="emphasis" style="font-weight: 600">{{.InvitedBy}}</span> has added you to the <span class="emphasis" style="font-weight: 600">{{.OrgName}}</span> organization in Grafana. 
+						</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">Once logged in, {{.OrgName}} will be available in the left side menu, in the dropdown below your username.</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>
 				</tr>
+				<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">
+	                    <table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; margin-top: 10px; padding: 0; text-align: left; vertical-align: top">
+	                    	<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+	                          <td align="center" class="better-button" bgcolor="#ff8f2b" style="-moz-border-radius: 2px; -moz-hyphens: auto; -webkit-border-radius: 2px; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; border-radius: 2px; 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; text-align: left; vertical-align: top; word-break: break-word" valign="top"><a href="{{.AppURL}}" target="_blank" style="-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #ff8f2b; color: #FFF; display: inline-block; padding: 12px 25px; text-decoration: none">Log in now</a></td>
+	                        </tr>
+	                    </table>
+
+
+					</td>
+				</tr>				
 			</table>
 
 		</td>
@@ -173,7 +173,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>

public/emails/new_user_invite.html

@@ -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;
+color: #E67612 !important;
 }
-table.button:hover td {
-background: #2795b6 !important;
-}
-table.button:visited td {
-background: #2795b6 !important;
-}
-table.button:active td {
-background: #2795b6 !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 {
@@ -136,7 +124,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">You're invited to sign up to Grafana and join organization {{.OrgName}}</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">You're invited to join {{.OrgName}}</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>
@@ -152,24 +140,28 @@ 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 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">
-						<table class="button radius" style="border-collapse: collapse; border-spacing: 0; overflow: hidden; padding: 0; text-align: left; vertical-align: top; width: 100%">
-							<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
-								<td style="-moz-border-radius: 3px; -moz-hyphens: auto; -webkit-border-radius: 3px; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; background: #2ba6cb; border-collapse: collapse !important; border-radius: 3px; border: 1px solid #2284a1; color: #ffffff; display: block; 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: 8px 0; text-align: center; vertical-align: top; width: auto !important; word-break: break-word" align="center" bgcolor="#2ba6cb" valign="top">
-									<a href="{{.LinkUrl}}" style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; text-decoration: none">Complete Sign Up</a>
-								</td>
-							</tr>
-						</table>
+						<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">You've been invited to join the <span class="emphasis" style="font-weight: 600">{{.OrgName}}</span> organization by <span class="emphasis" style="font-weight: 600">{{.InvitedBy}}</span>. To accept your invitation and join the team, please click the link below:</p>
 					</td>
+				</tr>
+				<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">
+	                    <table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; margin-top: 10px; padding: 0; text-align: left; vertical-align: top">
+	                    	<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
+	                          <td align="center" class="better-button" bgcolor="#ff8f2b" style="-moz-border-radius: 2px; -moz-hyphens: auto; -webkit-border-radius: 2px; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; border-radius: 2px; 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; text-align: left; vertical-align: top; word-break: break-word" valign="top"><a href="{{.LinkUrl}}" target="_blank" style="-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #ff8f2b; color: #FFF; display: inline-block; padding: 12px 25px; text-decoration: none">Accept Invitation</a></td>
+	                        </tr>
+	                    </table>
+					</td>
+				</tr>
+				<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">You can also copy/paste this link into your browser directly: <a href="{{.LinkUrl}}" style="color: #E67612; text-decoration: none">{{.LinkUrl}}</a></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>
 				</tr>
 			</table>
-
 		</td>
 	</tr>
 </table>
-
-
-
 								
 								<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">
@@ -179,7 +171,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>

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>