lucas.mathieu/cachet-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1843 from CachetHQ/improve-emails

Browse Source 
Improve email designs, use theme colours
This commit is contained in:
Graham Campbell
2016-05-28 18:36:55 +01:00
parent 11d82a22c3 48ccc02799
commit 6a6c8d866e
18 changed files with 520 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/lang/en/cachet.php
+10 -16
View File
@@ -75,32 +75,27 @@ return [
'subscribe' => 'Subscribe to email updates.',
'subscribed' => 'You\'ve been subscribed to email notifications, please check your email to confirm your subscription.',
'verified' => 'Your email subscription has been confirmed. Thank you!',
'manage' => 'Manage your subscription.',
'manage' => 'Manage your subscription',
'unsubscribe' => 'Unsubscribe from email updates.',
'unsubscribed' => 'Your email subscription has been cancelled.',
'failure' => 'Something went wrong with the subscription.',
'already-subscribed' => 'Cannot subscribe :email because they\'re already subscribed.',
'verify' => [
'text' => "Please confirm your email subscription to :app_name status updates.\n:link\nThank you, :app_name",
'html-preheader' => 'Please confirm your email subscription to :app_name status updates.',
'html' => '<p>Please confirm your email subscription to :app_name status updates.</p><p><a href=":link">:link</a></p><p>Thank you, :app_name</p>',
'text' => "Please confirm your email subscription to :app_name status updates.\n:link",
'html' => '<p>Please confirm your email subscription to :app_name status updates.</p>',
'button' => 'Confirm Subscription',
],
'maintenance' => [
'text' => "New maintenance has been scheduled on :app_name.\nThank you, :app_name",
'html-preheader' => 'New maintenance has been scheduled on :app_name.',
'html' => '<p>New maintenance has been scheduled on :app_name.</p>',
'subject' => '[Maintenance Scheduled] :name',
],
'incident' => [
'text' => "New incident has been reported on :app_name.\nThank you, :app_name",
'html-preheader' => 'New incident has been reported on :app_name.',
'html' => '<p>New incident has been reported on :app_name.</p><p>Thank you, :app_name</p>',
'subject' => '[New Incident] :status: :name',
],
'component' => [
'subject' => 'Component Status Update',
'text' => 'The component :component_name has seen a status change. The component is now at :component_human_status.\nThank you, :app_name',
'html-preheader' => 'Component Update from :app_name',
'html' => '<p>The component :component_name has seen a status change. The component is now at :component_human_status.</p><p>Thank you, :app_name</p>',
'tooltip-title' => 'Subscribe to notifications for :component_name.',
'subject' => 'Component Status Update',
'text' => 'The component :component_name has seen a status change. The component is now at :component_human_status.\nThank you, :app_name',
'html' => '<p>The component :component_name has seen a status change. The component is now at :component_human_status.</p><p>Thank you, :app_name</p>',
'tooltip-title' => 'Subscribe to notifications for :component_name.',
],
],
],
@@ -109,7 +104,6 @@ return [
'email' => [
'invite' => [
'text' => "You have been invited to the team :app_name status page, to sign up follow the next link.\n:link\nThank you, :app_name",
'html-preheader' => 'You have been invited to the team :app_name.',
'html' => '<p>You have been invited to the team :app_name status page, to sign up follow the next link.</p><p><a href=":link">:link</a></p><p>Thank you, :app_name</p>',
],
],
resources/views/emails/components/update-html.blade.php
+14 -10
View File
@@ -1,16 +1,20 @@
@extends('layout.emails')
@section('preheader')
{!! trans('cachet.subscriber.email.component.html-preheader', ['app_name' => $app_name]) !!}
@stop
@section('content')
{!! trans('cachet.subscriber.email.component.html', ['component_name' => $component_name, 'component_human_status' => $component_human_status, 'app_name' => $app_name]) !!}
@if($show_support)
<p>{!! trans('cachet.powered_by', ['app' => $app_name]) !!}</p>
@endif
<p>
<small><a href="{{ $manage_link }}">{!! trans('cachet.subscriber.email.manage') !!}</a></small>
</p>
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div>
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $manage_link }}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
<v:fill type="tile" color="#22BC66" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:15px;">{!! trans('cachet.subscriber.email.manage') !!}</center>
</v:roundrect><![endif]-->
<a href="{{ $manage_link }}" class="button button--green">{!! trans('cachet.subscriber.email.manage') !!}</a>
</div>
</td>
</tr>
</table>
@stop
resources/views/emails/components/update-text.blade.php
+2 -2
View File
@@ -1,7 +1,7 @@
{!! trans('cachet.subscriber.email.component.text', ['component_name' => $component_name, 'component_human_status' => $component_human_status, 'app_name' => $app_name]) !!}
{!! trans('cachet.subscriber.email.manage') !!} {{ $manage_link }}
@if($show_support)
{!! trans('cachet.powered_by', ['app' => $app_name]) !!}
@endif
{!! trans('cachet.subscriber.email.manage') !!} {{ $manage_link }}
resources/views/emails/incidents/maintenance-html.blade.php
+33 -22
View File
@@ -1,29 +1,40 @@
@extends('layout.emails')
@section('preheader')
{!! trans('cachet.subscriber.email.maintenance.html-preheader', ['app_name' => $app_name]) !!}
@stop
@section('content')
{!! trans('cachet.subscriber.email.maintenance.html', ['app_name' => $app_name]) !!}
<h1 class="align-center">{!! $name !!}</h1>
<p>{{ $scheduled_at }}</p>
<table class="border-rounded" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<p class="compressed">
<strong>{!! $status !!} @if($has_component) ({{ $component_name }}) @endif</strong>
{!! $html_content !!}
{!! $timestamp !!}
</p>
</td>
<tr>
</table>
<p>
{!! $status !!}
</p>
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div>
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $manage_link }}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
<v:fill type="tile" color="#22BC66" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:15px;">{!! trans('cachet.subscriber.email.manage') !!}</center>
</v:roundrect><![endif]-->
<a href="{{ $manage_link }}" class="button button--green">{!! trans('cachet.subscriber.email.manage') !!}</a>
</div>
</td>
</tr>
</table>
<p>
{!! $html_content !!}
</p>
@if($show_support)
<p>{!! trans('cachet.powered_by', ['app' => $app_name]) !!}</p>
@endif
<p>
<small><a href="{{ $manage_link }}">{!! trans('cachet.subscriber.email.manage') !!}</a></small>
</p>
<p>
<small><a href="{{ $unsubscribe_link }}">{!! trans('cachet.subscriber.email.unsubscribe') !!}</a></small>
</p>
<table class="body-sub" align="center">
<tr>
<td align="center">
<p class="sub"><a href="{{ $unsubscribe_link }}">{!! trans('cachet.subscriber.email.unsubscribe') !!}</a></p>
</td>
</tr>
</table>
@stop
resources/views/emails/incidents/maintenance-text.blade.php
+9 -8
View File
@@ -1,15 +1,16 @@
{!! trans('cachet.subscriber.email.maintenance.text', ['app_name' => $app_name]) !!}
{{ $scheduled_at }}
{!! $name !!}
{!! $status !!}
{!! $text_content !!}
{!! $timestamp !!}
@if($has_component)
({{ $component_name }})
@endif
{!! trans('cachet.subscriber.email.manage') !!} {{ $manage_link }}
{!! trans('cachet.subscriber.email.unsubscribe') !!} {{ $unsubscribe_link }}
@if($show_support)
{!! trans('cachet.powered_by', ['app' => $app_name]) !!}
@endif
{!! trans('cachet.subscriber.email.manage') !!} {{ $manage_link }}
{!! trans('cachet.subscriber.email.unsubscribe') !!} {{ $unsubscribe_link }}
resources/views/emails/incidents/new-html.blade.php
+33 -23
View File
@@ -1,30 +1,40 @@
@extends('layout.emails')
@section('preheader')
{!! trans('cachet.subscriber.email.incident.html-preheader', ['app_name' => $app_name]) !!}
@stop
@section('content')
{!! trans('cachet.subscriber.email.incident.html-preheader', ['app_name' => $app_name]) !!}
<h1 class="align-center">{!! $name !!}</h1>
<p>
{!! $status !!}
@if($has_component)
({{ $component_name }})
@endif
</p>
<table class="border-rounded" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<p class="compressed">
<strong>{!! $status !!} @if($has_component) ({{ $component_name }}) @endif</strong>
{!! $html_content !!}
{!! $timestamp !!}
</p>
</td>
<tr>
</table>
<p>
{!! $html_content !!}
</p>
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div>
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $manage_link }}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
<v:fill type="tile" color="#22BC66" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:15px;">{!! trans('cachet.subscriber.email.manage') !!}</center>
</v:roundrect><![endif]-->
<a href="{{ $manage_link }}" class="button button--green">{!! trans('cachet.subscriber.email.manage') !!}</a>
</div>
</td>
</tr>
</table>
@if($show_support)
<p>{!! trans('cachet.powered_by', ['app' => $app_name]) !!}</p>
@endif
<p>
<small><a href="{{ $manage_link }}">{!! trans('cachet.subscriber.email.manage') !!}</a></small>
</p>
<p>
<small><a href="{{ $unsubscribe_link }}">{!! trans('cachet.subscriber.email.unsubscribe') !!}</a></small>
</p>
<table class="body-sub" align="center">
<tr>
<td align="center">
<p class="sub"><a href="{{ $unsubscribe_link }}">{!! trans('cachet.subscriber.email.unsubscribe') !!}</a></p>
</td>
</tr>
</table>
@stop
resources/views/emails/incidents/new-text.blade.php
+8 -7
View File
@@ -1,16 +1,17 @@
{!! trans('cachet.subscriber.email.incident.text', ['app_name' => $app_name]) !!}
{!! $name !!}
{!! $status !!}
{!! $text_content !!}
{!! $timestamp !!}
@if($has_component)
({{ $component_name }})
@endif
{!! $text_content !!}
@if($show_support)
{!! trans('cachet.powered_by', ['app' => $app_name]) !!}
@endif
{!! trans('cachet.subscriber.email.manage') !!} {{ $manage_link }}
{!! trans('cachet.subscriber.email.unsuscribe') !!} {{ $unsubscribe_link }}
@if($show_support)
{!! trans('cachet.powered_by', ['app' => $app_name]) !!}
@endif
resources/views/emails/subscribers/verify-html.blade.php
+15 -8
View File
@@ -1,13 +1,20 @@
@extends('layout.emails')
@section('preheader')
{!! trans('cachet.subscriber.email.verify.html-preheader', ['app_name' => $app_name]) !!}
@stop
@section('content')
{!! trans('cachet.subscriber.email.verify.html', ['app_name' => $app_name, 'link' => $link]) !!}
{!! trans('cachet.subscriber.email.verify.html', ['app_name' => $app_name]) !!}
@if($show_support)
<p>{!! trans('cachet.powered_by', ['app' => $app_name]) !!}</p>
@endif
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div>
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $link }}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
<v:fill type="tile" color="#22BC66" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:15px;">{{ trans('cachet.subscriber.email.verify.button') }}</center>
</v:roundrect><![endif]-->
<a href="{{ $link }}" class="button button--green">{{ trans('cachet.subscriber.email.verify.button') }}</a>
</div>
</td>
</tr>
</table>
@stop
resources/views/emails/users/invite-html.blade.php
+1 -9
View File
@@ -1,13 +1,5 @@
@extends('layout.emails')
@section('preheader')
{!! trans('cachet.users.email.invite.html-preheader', ['app_name' => $app_name]) !!}
@stop
@section('content')
{!! trans('cachet.users.email.invite.html', ['app_name' => $app_name, 'link' => $link]) !!}
@if($show_support)
<p>{!! trans('cachet.powered_by', ['app' => $app_name]) !!}</p>
@endif
{!! trans('cachet.users.email.invite.html', ['app_name' => $app_name, 'link' => $link]) !!}
@stop
resources/views/layout/emails.blade.php
+224 -28
View File
@@ -1,38 +1,234 @@
<!DOCTYPE html>
<html lang="en-GB">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="format-detection" content="address=no;=no;telephone=no" />
<title>{{ $app_name }}</title>
@include('partials.email-css')
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="address=no;=no;telephone=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{{ $app_name }}</title>
<style type="text/css" rel="stylesheet" media="all">
/* Base ------------------------------ */
*:not(br):not(tr):not(html) {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
width: 100% !important;
height: 100%;
margin: 0;
line-height: 1.4;
background-color: #F2F4F6;
color: #74787E;
-webkit-text-size-adjust: none;
}
a {
color: {{ $theme_links }};
}
a img {
color: none;
border: none;
}
/* Layout ------------------------------ */
.email-wrapper {
width: 100%;
margin: 0;
padding: 0;
background-color: #F2F4F6;
}
.email-content {
width: 100%;
margin: 0;
padding: 0;
}
/* Masthead ----------------------- */
.email-masthead {
padding: 25px 0;
text-align: center;
}
.email-masthead_logo {
max-width: 400px;
border: 0;
}
.email-masthead_name {
font-size: 40px;
font-weight: bold;
color: #bbbfc3;
text-decoration: none;
text-shadow: 0 1px 0 white;
}
/* Body ------------------------------ */
.email-body {
width: 100%;
margin: 0;
padding: 0;
border-top: 1px solid #EDEFF2;
border-bottom: 1px solid #EDEFF2;
background-color: #FFF;
}
.email-body_inner {
width: 570px;
margin: 0 auto;
padding: 0;
}
.email-footer {
width: 570px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.email-footer p {
color: #AEAEAE;
}
.email-footer img {
width: 30px;
}
.body-action {
width: 100%;
margin: 30px auto;
padding: 0;
text-align: center;
}
.body-sub {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #EDEFF2;
}
.content-cell {
padding: 35px;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.border-rounded {
border: 1px solid #EDEFF2;
border-radius: 3px;
padding: 12px;
}
/* Type ------------------------------ */
h1 {
margin-top: 0;
color: #2F3133;
font-size: 36px;
font-weight: bold;
text-align: left;
}
h2 {
margin-top: 0;
color: #2F3133;
font-size: 16px;
font-weight: bold;
text-align: left;
}
h3 {
margin-top: 0;
color: #2F3133;
font-size: 14px;
font-weight: bold;
text-align: left;
}
p {
margin-top: 0;
color: #74787E;
font-size: 16px;
line-height: 1.5em;
text-align: left;
}
p.compressed {
margin: 0;
}
p.sub {
font-size: 12px;
}
p.center {
text-align: center;
}
/* Buttons ------------------------------ */
.button {
display: inline-block;
width: 200px;
background-color: #3869D4;
border-radius: 3px;
color: #ffffff;
font-size: 15px;
line-height: 45px;
text-align: center;
text-decoration: none;
-webkit-text-size-adjust: none;
mso-hide: all;
}
.button--green {
background-color: {{ $theme_greens }};
}
.button--red {
background-color: {{ $theme_reds }};
}
.button--blue {
background-color: {{ $theme_blues }};
}
.button--yellow {
background-color: {{ $theme_yellows }};
}
/*Media Queries ------------------------------ */
@media only screen and (max-width: 600px) {
.email-body_inner,
.email-footer {
width: 100% !important;
}
}
@media only screen and (max-width: 500px) {
.button {
width: 100% !important;
}
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<table id="body" width="100%" border="0" cellspacing="0" cellpadding="0">
<body>
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" class="body-cell">
<table width="544" border="0" cellpadding="0" cellspacing="0" class="box">
@if($app_banner)
<td align="center">
<table class="email-content" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="header">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header-logo">
<a href="{{ $app_domain }}"><img src="{{ $message->embedData(base64_decode($app_banner), $app_name) }}"></a>
</td>
</tr>
</table>
</td>
</tr>
@endif
<tr>
<td class="body">
@yield('content')
<td class="email-masthead">
<a class="email-masthead_name">{{ $app_name}} </a>
</td>
</tr>
<tr>
<td class="footer">{{ $app_name }}</td>
<td class="email-body" width="100%">
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
<!-- Body content -->
<tr>
<td class="content-cell">
@yield('content')
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
<tr>
<td class="content-cell">
@if($show_support)
<p class="sub center">{!! trans('cachet.powered_by') !!}</p>
@endif
<p class="sub center">
<a href="https://cachethq.io"><img src="{{ asset('img/button-email--dark-grey.png') }}" alt="Cachet"></a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>