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..29cba594fbe 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, @@ -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 diff --git a/emails/assets/css/style.css b/emails/assets/css/style.css index 47a5213e33e..7d5d7a7f759 100644 --- a/emails/assets/css/style.css +++ b/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 diff --git a/emails/templates/invited_to_org.html b/emails/templates/invited_to_org.html index 5aac6e28de3..bb79b141dcf 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,22 @@
-

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..86948a665f6 100644 --- a/emails/templates/new_user_invite.html +++ b/emails/templates/new_user_invite.html @@ -9,7 +9,7 @@ @@ -25,20 +25,25 @@
-

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:

+ + + + +
Accept Invitation
+
+

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

+
- - - - + \ No newline at end of file diff --git a/public/emails/invited_to_org.html b/public/emails/invited_to_org.html index fb61438b441..f4a2bf6a8dd 100644 --- a/public/emails/invited_to_org.html +++ b/public/emails/invited_to_org.html @@ -19,47 +19,35 @@ 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; -} -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; +color: #E67612 !important; } body { font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; } +a:hover { +color: #ff8f2b !important; +} +a:active { +color: #F2821E !important; +} +a:visited { +color: #E67612 !important; +} +.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; +} @media only screen and (max-width: 600px) { table[class="body"] img { width: auto !important; height: auto !important; @@ -127,7 +115,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 +124,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-
@@ -152,10 +140,22 @@ 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 +173,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..d3f0c615993 100644 --- a/public/emails/new_user_invite.html +++ b/public/emails/new_user_invite.html @@ -19,47 +19,35 @@ 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; -} -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; +color: #E67612 !important; } body { font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; } +a:hover { +color: #ff8f2b !important; +} +a:active { +color: #F2821E !important; +} +a:visited { +color: #E67612 !important; +} +.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; +} @media only screen and (max-width: 600px) { table[class="body"] img { width: auto !important; height: auto !important; @@ -136,7 +124,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans- @@ -152,24 +140,28 @@ 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:

+ + + + +
Accept Invitation
+
+

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

+
- - - - @@ -179,7 +171,7 @@ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans- diff --git a/public/emails/reset_password.html b/public/emails/reset_password.html index 3aed7f76c69..49b4a28ae7b 100644 --- a/public/emails/reset_password.html +++ b/public/emails/reset_password.html @@ -3,7 +3,7 @@ - +

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