Skip to content

Commit 749d0bf

Browse files
mckenzieartsmckenziearts
committed
💄 publication et modification des themes pour les email
1 parent 070deb6 commit 749d0bf

File tree

5 files changed

+170
-18
lines changed

5 files changed

+170
-18
lines changed

‎resources/views/vendor/mail/html/card.blade.php

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<table class="card" width="100%" cellpadding="0" cellspacing="0" role="presentation">
2+
<tr>
3+
<td class="card-content">
4+
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
5+
<tr>
6+
<td class="card-image">
7+
{{ $image ?? '' }}
8+
</td>
9+
<td class="card-description">
10+
<a href="{{ $url }}" style="display: inline-block;">
11+
<span style="position: absolute; top: 0; left: 0; right: 0; bottom: 0" aria-hidden="true"></span>
12+
<p class="card-title">{{ $title }}</p>
13+
</a>
14+
</td>
15+
</tr>
16+
</table>
17+
</td>
18+
</tr>
19+
</table>
20+

‎resources/views/vendor/mail/html/footer.blade.php

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,55 @@
66
{{ Illuminate\Mail\Markdown::parse($slot) }}
77
</td>
88
</tr>
9+
<tr>
10+
<td align="center" style="padding:10px 24px 46px">
11+
<table width="300" style="max-width:300px;margin:0 auto" cellpadding="0" cellspacing="0" align="center">
12+
<tbody>
13+
<tr>
14+
<td>
15+
<a href="{{ route('facebook') }}" target="_blank">
16+
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
17+
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
18+
</svg>
19+
</a>
20+
</td>
21+
<td width="30" style="font-size:1px;line-height:1px"></td>
22+
<td>
23+
<a href="{{ route('twitter') }}" target="_blank">
24+
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
25+
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
26+
</svg>
27+
</a>
28+
</td>
29+
<td width="30" style="font-size:1px;line-height:1px"></td>
30+
<td>
31+
<a href="{{ route('youtube') }}" target="_blank">
32+
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
33+
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0C.488 3.45.029 5.804 0 12c.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0C23.512 20.55 23.971 18.196 24 12c-.029-6.185-.484-8.549-4.385-8.816zM9 16V8l8 3.993L9 16z"/>
34+
</svg>
35+
</a>
36+
</td>
37+
<td width="30" style="font-size:1px;line-height:1px"></td>
38+
<td>
39+
<a href="{{ route('linkedin') }}" target="_blank">
40+
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
41+
<path d="M19 0H5a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5zM8 19H5V8h3v11zM6.5 6.732c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zM20 19h-3v-5.604c0-3.368-4-3.113-4 0V19h-3V8h3v1.765c1.396-2.586 7-2.777 7 2.476V19z"/>
42+
</svg>
43+
</a>
44+
</td>
45+
<td width="30" style="font-size:1px;line-height:1px"></td>
46+
<td>
47+
<a href="{{ route('github') }}" target="_blank">
48+
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
49+
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
50+
</svg>
51+
</a>
52+
</td>
53+
</tr>
54+
</tbody>
55+
</table>
56+
</td>
57+
</tr>
958
</table>
1059
</td>
1160
</tr>

‎resources/views/vendor/mail/html/header.blade.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<td class="header">
33
<a href="{{ $url }}" style="display: inline-block;">
44
@if (trim($slot) === 'Laravel')
5-
<img src="https://laravel.com/img/notification-logo.png" class="logo" alt="Laravel Logo">
5+
<img src="https://laravel.com/img/notification-logo.png" class="logo" alt="Laravel Cameroun logo">
66
@else
77
{{ $slot }}
88
@endif

‎resources/views/vendor/mail/html/message.blade.php

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,15 @@
22
{{-- Header --}}
33
@slot('header')
44
@component('mail::header', ['url' => config('app.url')])
5-
{{ config('app.name') }}
5+
<svg class="logo" width="32" height="33" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 33">
6+
<path d="M.16 3.316l6.08 3.473 6.08-3.473L6.24 0 .16 3.316z" fill="#099170"/>
7+
<path d="M19.84 7.105l5.92 3.316 6.08-3.316-6.08-3.473-5.92 3.473z" fill="#FFDC44"/>
8+
<path d="M0 25.895L12.48 33v-6.79l-6.56-3.79v-15L0 3.948v21.948z" fill="#099170"/>
9+
<path d="M26.08 11.053V18L32 14.526l-.016-6.79-5.904 3.317zM13.12 26.21V33l12.32-7.105v-6.79L13.12 26.21z" fill="#FFDC44"/>
10+
<path d="M6.56 7.421v14.21l5.92-3.473V3.948L6.56 7.42z" fill="#E21B30"/>
11+
<path d="M19.52 14.526L25.44 18v-6.947l-5.92-3.316v6.79z" fill="#FFDC44"/>
12+
<path d="M6.8 22.184l6 3.395 12.32-7.026L19.2 15 6.8 22.184z" fill="#E21B30"/>
13+
</svg>
614
@endcomponent
715
@endslot
816

@@ -21,7 +29,9 @@
2129
{{-- Footer --}}
2230
@slot('footer')
2331
@component('mail::footer')
24-
© {{ date('Y') }} {{ config('app.name') }}. @lang('All rights reserved.')
32+
<span style="display: block; margin: 0px 0px 10px 0px">Vous recevez cet e-mail car vous êtes devenu un membre précieux de la communauté Laravel Cameroun.</span>
33+
<span>© {{ date('Y') }} {{ config('app.name') }}. @lang('Tous droits reservés.')</span>
34+
<span style="display: block; margin: 10px 0px 0px 0px">Sable Bonamoussadi, Hotel Joanes Douala - Cameroun.</span>
2535
@endcomponent
2636
@endslot
2737

‎resources/views/vendor/mail/html/themes/default.css

Lines changed: 88 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@ body *:not(html):not(style):not(br):not(tr):not(code) {
1616
--color-text-inverted: #111827;
1717
--color-text-inverted-muted: #1F2937;
1818
--color-bg-light: #FF9FAFB;
19+
--color-bg-gray: #F3F4F6;
20+
--color-border: #E5E7EB
1921
}
2022

2123
body {
2224
-webkit-text-size-adjust: none;
23-
background-color: #F3F4F6;
25+
background-color: var(--color-bg-gray);
2426
color: var(--color-text-base);
2527
height: 100%;
2628
line-height: 1.4;
@@ -41,10 +43,25 @@ a {
4143
color: var(--color-text-primary);
4244
}
4345

46+
hr {
47+
border: 0;
48+
border-bottom: 1px solid var(--color-border);
49+
margin: 20px 0;
50+
}
51+
4452
a img {
4553
border: none;
4654
}
4755

56+
img {
57+
max-width: 100%;
58+
border-radius: 12px;
59+
}
60+
61+
strong {
62+
color: var(--color-text-inverted);
63+
}
64+
4865
/* Typography */
4966

5067
h1 {
@@ -125,6 +142,13 @@ img {
125142
height: 75px;
126143
max-height: 75px;
127144
width: 75px;
145+
margin: 0 auto;
146+
}
147+
148+
.social-icon {
149+
height: 24px;
150+
width: 24px;
151+
color: var(--color-text-base)
128152
}
129153

130154
/* Body */
@@ -133,9 +157,9 @@ img {
133157
-premailer-cellpadding: 0;
134158
-premailer-cellspacing: 0;
135159
-premailer-width: 100%;
136-
background-color: #edf2f7;
137-
border-bottom: 1px solid #edf2f7;
138-
border-top: 1px solid #edf2f7;
160+
background-color: var(--color-bg-gray);
161+
border-bottom: 1px solid var(--color-bg-gray);
162+
border-top: 1px solid var(--color-bg-gray);
139163
margin: 0;
140164
padding: 0;
141165
width: 100%;
@@ -167,6 +191,10 @@ img {
167191
font-size: 14px;
168192
}
169193

194+
.subcopy pre {
195+
display: none;
196+
}
197+
170198
/* Footer */
171199

172200
.footer {
@@ -180,13 +208,13 @@ img {
180208
}
181209

182210
.footer p {
183-
color: #b0adc5;
184-
font-size: 12px;
211+
color: var(--color-text-base);
212+
font-size: 14px;
185213
text-align: center;
186214
}
187215

188216
.footer a {
189-
color: #b0adc5;
217+
color: var(--color-text-inverted-muted);
190218
text-decoration: underline;
191219
}
192220

@@ -251,11 +279,16 @@ img {
251279

252280
.button-green,
253281
.button-success {
254-
background-color: #48bb78;
255-
border-bottom: 8px solid #48bb78;
256-
border-left: 18px solid #48bb78;
257-
border-right: 18px solid #48bb78;
258-
border-top: 8px solid #48bb78;
282+
background-color: var(--color-text-primary);
283+
border-bottom: 8px solid var(--color-text-primary);
284+
border-left: 18px solid var(--color-text-primary);
285+
border-right: 18px solid var(--color-text-primary);
286+
border-top: 8px solid var(--color-text-primary);
287+
}
288+
289+
.button-green:hover,
290+
.button-success:hover {
291+
background-color: var(--color-text-primary-hover);
259292
}
260293

261294
.button-red,
@@ -275,13 +308,13 @@ img {
275308
}
276309

277310
.panel-content {
278-
background-color: #edf2f7;
279-
color: #718096;
311+
background-color: #fff;
312+
color: var(--color-text-base);
280313
padding: 16px;
281314
}
282315

283316
.panel-content p {
284-
color: #718096;
317+
color: var(--color-text-base);
285318
}
286319

287320
.panel-item {
@@ -293,6 +326,46 @@ img {
293326
padding-bottom: 0;
294327
}
295328

329+
/* Cards */
330+
.card {
331+
border-top: var(--color-border) solid 1px;
332+
padding: 1.5rem 0;
333+
}
334+
335+
.card-content {
336+
position: relative;
337+
}
338+
339+
.card-image {
340+
background-color: #f5f5f5;
341+
border-radius: 4px;
342+
display: block;
343+
height: auto;
344+
overflow: hidden;
345+
padding: 0;
346+
width: 100%;
347+
}
348+
349+
.card-description {
350+
color: var(--color-text-base);
351+
}
352+
353+
.card-description p {
354+
margin-bottom: 4px;
355+
}
356+
357+
.card-description p:last-of-type {
358+
margin-bottom: 0;
359+
padding-bottom: 0;
360+
}
361+
362+
.card-title {
363+
color: var(--color-text-primary);
364+
text-decoration: underline;
365+
font-size: 16px;
366+
font-weight: bold;
367+
}
368+
296369
/* Utilities */
297370

298371
.break-all {

0 commit comments

Comments
 (0)