Merge pull request #1843 from CachetHQ/improve-emails

Improve email designs, use theme colours
2016-05-28 18:36:55 +01:00
parent 11d82a22c3 48ccc02799
commit 6a6c8d866e
18 changed files with 520 additions and 192 deletions
--- a/app/Bus/Handlers/Events/Component/SendComponentUpdateEmailNotificationHandler.php
+++ b/app/Bus/Handlers/Events/Component/SendComponentUpdateEmailNotificationHandler.php
@@ -57,7 +57,7 @@ class SendComponentUpdateEmailNotificationHandler
     */
    public function handle(ComponentWasUpdatedEvent $event)
    {
-        $component = AutoPresenter::decorate($event->component);
+        $component = $event->component;

        // First notify all global subscribers.
        $globalSubscribers = $this->subscriber->isVerified()->isGlobal()->get();
@@ -92,6 +92,8 @@ class SendComponentUpdateEmailNotificationHandler
     */
    public function notify(Component $component, Subscriber $subscriber)
    {
+        $component = AutoPresenter::decorate($component);
+
        $mail = [
            'subject'                => trans('cachet.subscriber.email.component.subject'),
            'component_name'         => $component->name,
--- a/app/Bus/Handlers/Events/Incident/SendIncidentEmailNotificationHandler.php
+++ b/app/Bus/Handlers/Events/Incident/SendIncidentEmailNotificationHandler.php
@@ -107,9 +107,14 @@ class SendIncidentEmailNotificationHandler

        $mail = [
            'email'            => $subscriber->email,
-            'subject'          => 'New incident reported.',
+            'subject'          => trans('cachet.subscriber.email.incident.subject', [
+                'status' => $incident->human_status,
+                'name'   => $incident->name,
+            ]),
            'has_component'    => ($event->incident->component) ? true : false,
            'component_name'   => $component ? $component->name : null,
+            'name'             => $incident->name,
+            'timestamp'        => $incident->created_at_formatted,
            'status'           => $incident->human_status,
            'html_content'     => $incident->formattedMessage,
            'text_content'     => $incident->message,
--- a/app/Bus/Handlers/Events/Incident/SendMaintenanceEmailNotificationHandler.php
+++ b/app/Bus/Handlers/Events/Incident/SendMaintenanceEmailNotificationHandler.php
@@ -107,9 +107,13 @@ class SendMaintenanceEmailNotificationHandler

        $mail = [
            'email'            => $subscriber->email,
-            'subject'          => 'Scheduled maintenance.',
+            'subject'          => trans('cachet.subscriber.email.maintenance.subject', [
+                'name'   => $incident->name,
+            ]),
            'has_component'    => ($event->incident->component) ? true : false,
            'component_name'   => $component ? $component->name : null,
+            'name'             => $incident->name,
+            'timestamp'        => $incident->scheduled_at_formatted,
            'status'           => $incident->human_status,
            'html_content'     => $incident->formattedMessage,
            'text_content'     => $incident->message,
--- a/app/Foundation/Providers/ComposerServiceProvider.php
+++ b/app/Foundation/Providers/ComposerServiceProvider.php
@@ -34,7 +34,7 @@ class ComposerServiceProvider extends ServiceProvider
        $factory->composer('*', CurrentUserComposer::class);
        $factory->composer(['index'], MetricsComposer::class);
        $factory->composer(['index', 'single-incident', 'subscribe', 'signup'], StatusPageComposer::class);
-        $factory->composer(['index', 'single-incident', 'subscribe.*', 'signup', 'dashboard.settings.theme'], ThemeComposer::class);
+        $factory->composer(['index', 'single-incident', 'subscribe.*', 'signup', 'dashboard.settings.theme', 'emails.*'], ThemeComposer::class);
        $factory->composer('dashboard.*', DashboardComposer::class);
        $factory->composer(['setup', 'dashboard.settings.localization'], TimezoneLocaleComposer::class);
    }
--- a/composer.json
+++ b/composer.json
@@ -29,6 +29,7 @@
        "backup-manager/laravel": "^1.1",
        "barryvdh/laravel-cors": "^0.8",
        "doctrine/dbal": "^2.5",
+        "fedeisas/laravel-mail-css-inliner": "^1.5",
        "fideloper/proxy": "^3.1",
        "graham-campbell/binput": "^3.4",
        "graham-campbell/core": "^5.1",
--- a/composer.lock
+++ b/composer.lock
@@ -4,8 +4,8 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
        "This file is @generated automatically"
    ],
-    "hash": "d58416fb0d16c8b7fc9b936b6f642c39",
-    "content-hash": "226b91629f9aa94bb32446a4e963600c",
+    "hash": "9d38d3ba627f866fa276370913d9bf70",
+    "content-hash": "b75a2ca8a01159ff0a136823a7f26e88",
    "packages": [
        {
            "name": "alt-three/badger",
@@ -1150,6 +1150,58 @@
            ],
            "time": "2014-09-09 13:34:57"
        },
+        {
+            "name": "fedeisas/laravel-mail-css-inliner",
+            "version": "1.5",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/fedeisas/laravel-mail-css-inliner.git",
+                "reference": "8c3cd958634e865a90fc398900ea59c427dd35cc"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/fedeisas/laravel-mail-css-inliner/zipball/8c3cd958634e865a90fc398900ea59c427dd35cc",
+                "reference": "8c3cd958634e865a90fc398900ea59c427dd35cc",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/support": "~5.0",
+                "php": ">=5.4.0",
+                "tijsverkoyen/css-to-inline-styles": "~1.2"
+            },
+            "require-dev": {
+                "jakub-onderka/php-console-highlighter": "0.3.*",
+                "jakub-onderka/php-parallel-lint": "0.8.*",
+                "phpmd/phpmd": "~1.5",
+                "phpunit/phpunit": "~4.0",
+                "satooshi/php-coveralls": "~0.7@dev",
+                "squizlabs/php_codesniffer": "~1.5",
+                "swiftmailer/swiftmailer": "~5.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Fedeisas\\LaravelMailCssInliner\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fede Isas",
+                    "email": "fedeisas@hotmail.com"
+                }
+            ],
+            "description": "Inline the CSS of your HTML emails using Laravel",
+            "keywords": [
+                "css",
+                "laravel",
+                "mailer"
+            ],
+            "time": "2016-04-19 07:02:48"
+        },
        {
            "name": "fideloper/proxy",
            "version": "3.1.0",
@@ -2988,6 +3040,59 @@
            "homepage": "https://symfony.com",
            "time": "2016-04-28 09:48:42"
        },
+        {
+            "name": "symfony/css-selector",
+            "version": "v3.0.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/css-selector.git",
+                "reference": "65e764f404685f2dc20c057e889b3ad04b2e2db0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/css-selector/zipball/65e764f404685f2dc20c057e889b3ad04b2e2db0",
+                "reference": "65e764f404685f2dc20c057e889b3ad04b2e2db0",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.5.9"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.0-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\CssSelector\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jean-François Simon",
+                    "email": "jeanfrancois.simon@sensiolabs.com"
+                },
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony CssSelector Component",
+            "homepage": "https://symfony.com",
+            "time": "2016-03-04 07:55:57"
+        },
        {
            "name": "symfony/debug",
            "version": "v3.0.6",
@@ -3707,6 +3812,53 @@
            ],
            "time": "2016-04-25 11:17:47"
        },
+        {
+            "name": "tijsverkoyen/css-to-inline-styles",
+            "version": "1.5.5",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/tijsverkoyen/CssToInlineStyles.git",
+                "reference": "9753fc340726e327e4d48b7c0604f85475ae0bc3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/tijsverkoyen/CssToInlineStyles/zipball/9753fc340726e327e4d48b7c0604f85475ae0bc3",
+                "reference": "9753fc340726e327e4d48b7c0604f85475ae0bc3",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.0",
+                "symfony/css-selector": "~2.1|~3.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "~4.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.5.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "TijsVerkoyen\\CssToInlineStyles\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD"
+            ],
+            "authors": [
+                {
+                    "name": "Tijs Verkoyen",
+                    "email": "css_to_inline_styles@verkoyen.eu",
+                    "role": "Developer"
+                }
+            ],
+            "description": "CssToInlineStyles is a class that enables you to convert HTML-pages/files into HTML-pages/files with inline styles. This is very useful when you're sending emails.",
+            "homepage": "https://github.com/tijsverkoyen/CssToInlineStyles",
+            "time": "2015-12-08 16:14:14"
+        },
        {
            "name": "twig/twig",
            "version": "v1.24.0",
@@ -5066,59 +5218,6 @@
            "homepage": "https://github.com/sebastianbergmann/version",
            "time": "2015-06-21 13:59:46"
        },
-        {
-            "name": "symfony/css-selector",
-            "version": "v3.0.6",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/css-selector.git",
-                "reference": "65e764f404685f2dc20c057e889b3ad04b2e2db0"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/css-selector/zipball/65e764f404685f2dc20c057e889b3ad04b2e2db0",
-                "reference": "65e764f404685f2dc20c057e889b3ad04b2e2db0",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=5.5.9"
-            },
-            "type": "library",
-            "extra": {
-                "branch-alias": {
-                    "dev-master": "3.0-dev"
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "Symfony\\Component\\CssSelector\\": ""
-                },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Jean-François Simon",
-                    "email": "jeanfrancois.simon@sensiolabs.com"
-                },
-                {
-                    "name": "Fabien Potencier",
-                    "email": "fabien@symfony.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "Symfony CssSelector Component",
-            "homepage": "https://symfony.com",
-            "time": "2016-03-04 07:55:57"
-        },
        {
            "name": "symfony/dom-crawler",
            "version": "v3.0.6",
--- a/config/app.php
+++ b/config/app.php
@@ -164,6 +164,7 @@ return [
        'AltThree\Emoji\EmojiServiceProvider',
        'BackupManager\Laravel\Laravel5ServiceProvider',
        'Barryvdh\Cors\ServiceProvider',
+        'Fedeisas\LaravelMailCssInliner\LaravelMailCssInlinerServiceProvider',
        'Fideloper\Proxy\TrustedProxyServiceProvider',
        'GrahamCampbell\Binput\BinputServiceProvider',
        'GrahamCampbell\Exceptions\ExceptionsServiceProvider',
--- a/public/img/button-email--dark-grey.png
+++ b/public/img/button-email--dark-grey.png
--- a/resources/lang/en/cachet.php
+++ b/resources/lang/en/cachet.php
@@ -75,30 +75,25 @@ 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.',
            ],
@@ -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>',
            ],
        ],
--- a/resources/views/emails/components/update-html.blade.php
+++ b/resources/views/emails/components/update-html.blade.php
@@ -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
--- a/resources/views/emails/components/update-text.blade.php
+++ b/resources/views/emails/components/update-text.blade.php
@@ -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 }}
--- a/resources/views/emails/incidents/maintenance-html.blade.php
+++ b/resources/views/emails/incidents/maintenance-html.blade.php
@@ -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>
-
-<p>
-    {!! $status !!}
-</p>
-
-<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 !!}
-</p>
+                {!! $timestamp !!}
+            </p>
+        </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-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>
+
+<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
--- a/resources/views/emails/incidents/maintenance-text.blade.php
+++ b/resources/views/emails/incidents/maintenance-text.blade.php
@@ -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 }}
--- a/resources/views/emails/incidents/new-html.blade.php
+++ b/resources/views/emails/incidents/new-html.blade.php
@@ -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>
-
-<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 !!}
-</p>
+                {!! $timestamp !!}
+            </p>
+        </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-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>
+
+<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
--- a/resources/views/emails/incidents/new-text.blade.php
+++ b/resources/views/emails/incidents/new-text.blade.php
@@ -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
--- a/resources/views/emails/subscribers/verify-html.blade.php
+++ b/resources/views/emails/subscribers/verify-html.blade.php
@@ -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
--- a/resources/views/emails/users/invite-html.blade.php
+++ b/resources/views/emails/users/invite-html.blade.php
@@ -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
--- a/resources/views/layout/emails.blade.php
+++ b/resources/views/layout/emails.blade.php
@@ -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">
+                        <td class="email-masthead">
+                            <a class="email-masthead_name">{{ $app_name}} </a>
+                        </td>
+                    </tr>
                    <tr>
-                                    <td class="header-logo">
-                                       <a href="{{ $app_domain }}"><img src="{{ $message->embedData(base64_decode($app_banner), $app_name) }}"></a>
+                        <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>
-                    @endif
                    <tr>
-                        <td class="body">
-                            @yield('content')
+                        <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>
-                    <tr>
-                        <td class="footer">{{ $app_name }}</td>
+                            </table>
+                        </td>
                    </tr>
                </table>
            </td>