diff --git a/emails/README.md b/emails/README.md index 61ff6af6ad2..9702abce7e6 100644 --- a/emails/README.md +++ b/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) diff --git a/emails/assets/css/ink.css b/emails/assets/css/ink.css index e65aed19194..8a9cd6194e7 100644 --- a/emails/assets/css/ink.css +++ b/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, @@ -413,6 +417,38 @@ h6 a:visited { /* Buttons */ +.better-button td{ + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; +} + +.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; +} + table.button, table.tiny-button, table.small-button, @@ -430,8 +466,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 +520,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 +534,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, diff --git a/emails/templates/invited_to_org.html b/emails/templates/invited_to_org.html index 5aac6e28de3..3779978f797 100644 --- a/emails/templates/invited_to_org.html +++ b/emails/templates/invited_to_org.html @@ -1,6 +1,6 @@ -[[Subject .Subject "[[.InvitedBy]] has added you to the Grafana organization [[.OrgName]]"]] +[[Subject .Subject "[[.InvitedBy]] has added you to the [[.OrgName]] organization"]] @@ -9,7 +9,7 @@
@@ -25,10 +25,30 @@
-

You have been added to the Grafana organization [[.OrgName]]

+

You have been added to [[.OrgName]]
+ + +
-

You can switch organization in the left side menu, in the dropdown below your username.

+

[[.InvitedBy]] has added you to the [[.OrgName]] organization in Grafana. +

Once logged in, [[.OrgName]] will be available in the left side menu, in the dropdown below your username.
+ + + + + + +
Log in now
+ + +
diff --git a/emails/templates/new_user_invite.html b/emails/templates/new_user_invite.html index 1368ba5a457..946536e3b73 100644 --- a/emails/templates/new_user_invite.html +++ b/emails/templates/new_user_invite.html @@ -9,7 +9,7 @@ @@ -25,18 +25,33 @@
-

You're invited to sign up to Grafana and join organization [[.OrgName]]

+

You're invited to join [[.OrgName]]
- +

You've been invited to join the [[.OrgName]] organization by [[.InvitedBy]]

+

To accept your invitation and join the team, please click the link below:

+ + + + + + +
+ + + + + +
Complete Sign Up
+

You can also copy/paste this link into your browser directly: [[.LinkUrl]]

+
-
diff --git a/public/emails/invited_to_org.html b/public/emails/invited_to_org.html index fb61438b441..62ef6f738a3 100644 --- a/public/emails/invited_to_org.html +++ b/public/emails/invited_to_org.html @@ -19,43 +19,22 @@ 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; +.better-button:hover a { +color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E; } -table.button:visited td { -background: #2795b6 !important; +.better-button:visited a { +color: #FFFFFF !important; } -table.button:active td { -background: #2795b6 !important; -} -table.button:hover td a { -color: #fff !important; -} -table.button:visited td a { -color: #fff !important; -} -table.button:active td a { -color: #fff !important; -} -table.button:hover td { -background: #2795b6 !important; -} -table.button:hover td a { -color: #ffffff !important; -} -table.button:active td a { -color: #ffffff !important; -} -table.button td a:visited { -color: #ffffff !important; +.better-button:active 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; @@ -127,7 +106,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans- -{{Subject .Subject "{{.InvitedBy}} has added you to the Grafana organization {{.OrgName}}"}} +{{Subject .Subject "{{.InvitedBy}} has added you to the {{.OrgName}} organization"}} @@ -136,7 +115,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
@@ -152,10 +131,24 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
-

You have been added to the Grafana organization {{.OrgName}}

+

You have been added to {{.OrgName}}
+ + +
-

You can switch organization in the left side menu, in the dropdown below your username.

+

{{.InvitedBy}} has added you to the {{.OrgName}} organization in Grafana. +

Once logged in, {{.OrgName}} will be available in the left side menu, in the dropdown below your username.
+ + + + + + +
Log in now
+ + +
@@ -173,7 +166,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-

- Sent by Grafana v{{.BuildVersion}} + Sent by Grafana v{{.BuildVersion}}

diff --git a/public/emails/new_user_invite.html b/public/emails/new_user_invite.html index aeadbb98d7b..80c63f6458a 100644 --- a/public/emails/new_user_invite.html +++ b/public/emails/new_user_invite.html @@ -19,43 +19,22 @@ 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; +.better-button:hover a { +color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E; } -table.button:visited td { -background: #2795b6 !important; +.better-button:visited a { +color: #FFFFFF !important; } -table.button:active td { -background: #2795b6 !important; -} -table.button:hover td a { -color: #fff !important; -} -table.button:visited td a { -color: #fff !important; -} -table.button:active td a { -color: #fff !important; -} -table.button:hover td { -background: #2795b6 !important; -} -table.button:hover td a { -color: #ffffff !important; -} -table.button:active td a { -color: #ffffff !important; -} -table.button td a:visited { -color: #ffffff !important; +.better-button:active 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; @@ -136,7 +115,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans- @@ -152,18 +131,27 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
-

You're invited to sign up to Grafana and join organization {{.OrgName}}

+

You're invited to join {{.OrgName}}
+ + + + + +
- - - - -
- Complete Sign Up -
+

You've been invited to join the {{.OrgName}} organization by {{.InvitedBy}}

+

To accept your invitation and join the team, please click the link below:

+ + + + + +
Complete Sign Up
+
+

You can also copy/paste this link into your browser directly: {{.LinkUrl}}

+
- @@ -179,7 +167,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-

- Sent by Grafana v{{.BuildVersion}} + Sent by Grafana v{{.BuildVersion}}

diff --git a/public/emails/reset_password.html b/public/emails/reset_password.html index 3aed7f76c69..2e4a5e20bd6 100644 --- a/public/emails/reset_password.html +++ b/public/emails/reset_password.html @@ -3,7 +3,7 @@ - +