Skip to content

Commit bfbbccd

Browse files
doshitandoshitan
committed
Update mail theme, tweak SASS file structure
Summary: Tweak the default mail theme to match the Madison color scheme. Test Plan: - Trigger an email notification - Look at the email Reviewers: sethetter Reviewed By: sethetter Maniphest Tasks: T287 Differential Revision: https://phabricator.opengovfoundation.org/D183
1 parent 65faecf commit bfbbccd

File tree

8 files changed

+308
-11
lines changed

8 files changed

+308
-11
lines changed

‎config/mail.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@
115115
|
116116
*/
117117
'markdown' => [
118-
'theme' => 'default',
118+
'theme' => 'opengov',
119119
'paths' => [
120120
resource_path('views/vendor/mail'),
121121
],

‎gulpfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ elixir.config.css.autoprefix.options.remove = false;
1616

1717
elixir((mix) => {
1818
mix.sass('app.scss')
19+
.sass('mail.scss', 'resources/views/vendor/mail/html/themes/opengov.css')
1920
.webpack('annotator-madison.js')
2021
.webpack('app.js')
2122
.webpack('document.js')

‎resources/assets/sass/app.scss‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
1+
@import "variables";
2+
13
/**
24
* Vendor
35
*/
4-
@import "variables";
5-
66
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
7-
8-
$fa-font-path: "/fonts";
97
@import "node_modules/font-awesome/scss/font-awesome";
108
@import "node_modules/select2/dist/css/select2";
119
@import "node_modules/select2-bootstrap-theme/src/select2-bootstrap";
1210

13-
@import "settings";
14-
1511
/**
1612
* Pages
1713
*/

‎resources/assets/sass/mail.scss‎

Lines changed: 287 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
@import "variables";
2+
3+
$laravel-white: #F2F4F6;
4+
$laravel-gray: #74787E;
5+
$laravel-gray-light: #9BA2AB;
6+
$laravel-gray-light-2: #AEAEAE;
7+
$laravel-gray-lighter: #EDEFF2;
8+
$laravel-blue: #3869D4;
9+
10+
/* Base */
11+
body, body *:not(html):not(style):not(br):not(tr):not(code) {
12+
font-family: Avenir, Helvetica, sans-serif;
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
background-color: $ogf-dark-blue;
18+
color: $laravel-gray;
19+
height: 100%;
20+
line-height: 1.4;
21+
margin: 0;
22+
width: 100% !important;
23+
-webkit-text-size-adjust: none;
24+
}
25+
26+
p,
27+
ul,
28+
ol,
29+
blockquote {
30+
line-height: 1.4;
31+
text-align: left;
32+
}
33+
34+
a {
35+
color: $link-color;
36+
}
37+
38+
a img {
39+
border: none;
40+
}
41+
42+
/* Typography */
43+
44+
h1 {
45+
color: $ogf-dark-blue;
46+
font-size: 19px;
47+
font-weight: bold;
48+
margin-top: 0;
49+
text-align: left;
50+
}
51+
52+
h2 {
53+
color: $ogf-dark-blue;
54+
font-size: 16px;
55+
font-weight: bold;
56+
margin-top: 0;
57+
text-align: left;
58+
}
59+
60+
h3 {
61+
color: $ogf-dark-blue;
62+
font-size: 14px;
63+
font-weight: bold;
64+
margin-top: 0;
65+
text-align: left;
66+
}
67+
68+
p {
69+
color: $text-color;
70+
font-size: 16px;
71+
line-height: 1.5em;
72+
margin-top: 0;
73+
text-align: left;
74+
}
75+
76+
p.sub {
77+
font-size: 12px;
78+
}
79+
80+
img {
81+
max-width: 100%;
82+
}
83+
84+
/* Layout */
85+
86+
.wrapper {
87+
background-color: $ogf-dark-blue;
88+
margin: 0;
89+
padding: 0;
90+
width: 100%;
91+
-premailer-cellpadding: 0;
92+
-premailer-cellspacing: 0;
93+
-premailer-width: 100%;
94+
}
95+
96+
.content {
97+
margin: 0;
98+
padding: 0;
99+
width: 100%;
100+
-premailer-cellpadding: 0;
101+
-premailer-cellspacing: 0;
102+
-premailer-width: 100%;
103+
}
104+
105+
/* Header */
106+
107+
.header {
108+
padding: 25px 0;
109+
text-align: center;
110+
}
111+
112+
.header a {
113+
color: white;
114+
font-size: 19px;
115+
font-weight: bold;
116+
text-decoration: none;
117+
}
118+
119+
/* Body */
120+
121+
.body {
122+
background-color: #FFFFFF;
123+
margin: 0;
124+
padding: 0;
125+
width: 100%;
126+
-premailer-cellpadding: 0;
127+
-premailer-cellspacing: 0;
128+
-premailer-width: 100%;
129+
}
130+
131+
.inner-body {
132+
background-color: #FFFFFF;
133+
margin: 0 auto;
134+
padding: 0;
135+
width: 570px;
136+
-premailer-cellpadding: 0;
137+
-premailer-cellspacing: 0;
138+
-premailer-width: 570px;
139+
}
140+
141+
/* Subcopy */
142+
143+
.subcopy {
144+
border-top: 1px solid $laravel-gray-lighter;
145+
margin-top: 25px;
146+
padding-top: 25px;
147+
}
148+
149+
.subcopy p {
150+
font-size: 12px;
151+
}
152+
153+
/* Footer */
154+
155+
.footer {
156+
margin: 0 auto;
157+
padding: 0;
158+
text-align: center;
159+
width: 570px;
160+
-premailer-cellpadding: 0;
161+
-premailer-cellspacing: 0;
162+
-premailer-width: 570px;
163+
}
164+
165+
.footer p {
166+
color: $laravel-gray-light-2;
167+
font-size: 12px;
168+
text-align: center;
169+
}
170+
171+
/* Tables */
172+
173+
.table table {
174+
margin: 30px auto;
175+
width: 100%;
176+
-premailer-cellpadding: 0;
177+
-premailer-cellspacing: 0;
178+
-premailer-width: 100%;
179+
}
180+
181+
.table th {
182+
border-bottom: 1px solid $laravel-gray-lighter;
183+
padding-bottom: 8px;
184+
}
185+
186+
.table td {
187+
color: $laravel-gray;
188+
font-size: 15px;
189+
line-height: 18px;
190+
padding: 10px 0;
191+
}
192+
193+
.content-cell {
194+
padding: 35px;
195+
}
196+
197+
/* Buttons */
198+
199+
.action {
200+
margin: 30px auto;
201+
padding: 0;
202+
text-align: center;
203+
width: 100%;
204+
-premailer-cellpadding: 0;
205+
-premailer-cellspacing: 0;
206+
-premailer-width: 100%;
207+
}
208+
209+
.button {
210+
border-radius: $btn-border-radius-base;
211+
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
212+
color: $btn-default-color;
213+
display: inline-block;
214+
text-decoration: none;
215+
-webkit-text-size-adjust: none;
216+
}
217+
218+
.button-blue {
219+
color: $btn-primary-color;
220+
background-color: $btn-primary-bg;
221+
border-top: 10px solid $btn-primary-bg;
222+
border-right: 18px solid $btn-primary-bg;
223+
border-bottom: 10px solid $btn-primary-bg;
224+
border-left: 18px solid $btn-primary-bg;
225+
}
226+
227+
.button-green {
228+
color: $btn-success-color;
229+
background-color: $btn-success-bg;
230+
border-top: 10px solid $btn-success-bg;
231+
border-right: 18px solid $btn-success-bg;
232+
border-bottom: 10px solid $btn-success-bg;
233+
border-left: 18px solid $btn-success-bg;
234+
}
235+
236+
.button-red {
237+
color: $btn-danger-color;
238+
background-color: $btn-danger-bg;
239+
border-top: 10px solid $btn-danger-bg;
240+
border-right: 18px solid $btn-danger-bg;
241+
border-bottom: 10px solid $btn-danger-bg;
242+
border-left: 18px solid $btn-danger-bg;
243+
}
244+
245+
/* Panels */
246+
247+
.panel {
248+
margin: 0 0 21px;
249+
}
250+
251+
.panel-content {
252+
background-color: $laravel-gray-lighter;
253+
padding: 16px;
254+
}
255+
256+
.panel-item {
257+
padding: 0;
258+
}
259+
260+
.panel-item p:last-of-type {
261+
margin-bottom: 0;
262+
padding-bottom: 0;
263+
}
264+
265+
/* Promotions */
266+
267+
.promotion {
268+
background-color: #FFFFFF;
269+
border: 2px dashed $laravel-gray-light;
270+
margin: 0;
271+
margin-bottom: 25px;
272+
margin-top: 25px;
273+
padding: 24px;
274+
width: 100%;
275+
-premailer-cellpadding: 0;
276+
-premailer-cellspacing: 0;
277+
-premailer-width: 100%;
278+
}
279+
280+
.promotion h1 {
281+
text-align: center;
282+
}
283+
284+
.promotion p {
285+
font-size: 15px;
286+
text-align: center;
287+
}

‎resources/assets/sass/settings.scss‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎resources/assets/sass/variables.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,11 @@ $breadcrumb-separator: "\00BB";
3535

3636
$jumbotron-color: white;
3737
$jumbotron-bg: $ogf-dark-blue;
38+
39+
$fa-font-path: "/fonts";
40+
41+
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
42+
43+
// Our custom transition.
44+
$transition-duration: 0.4s !default;
45+
$transition-easing: cubic-bezier(.62,.28,.23,.99) !default;

‎resources/views/emails/verify_email.blade.php‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1+
@php ($url = route('users.verify_email', [$user, $user->token]))
2+
13
@component('mail::message')
24
# @lang('messages.email_verification.ask')
35

46
@lang('messages.email_verification.reason')
57

6-
@component('mail::button', ['url' => route('users.verify_email', [$user, $user->token])])
8+
@component('mail::button', ['url' => $url])
79
@lang('messages.email_verification.action')
810
@endcomponent
911

1012
@lang('messages.notifications.salutation', ['name' => config('app.name')])
13+
14+
@component('mail::subcopy')
15+
@lang('messages.notifications.having_trouble', ['actionText' => trans('messages.email_verification.action')])
16+
[{{ $url }}]({{ $url }})
17+
@endcomponent
1118
@endcomponent

‎resources/views/vendor/notifications/email.blade.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
<!-- Subcopy -->
4545
@if (isset($actionText))
4646
@component('mail::subcopy')
47+
4748
@lang('messages.notifications.having_trouble', ['actionText' => $actionText])
4849
[{{ $actionUrl }}]({{ $actionUrl }})
4950

0 commit comments

Comments
 (0)