mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-05-24 02:14:21 -04:00
New email design (#3386)
This commit is contained in:
Benjamin Beganović
GitHub
parent
b2f4e51b55
commit
aef6135e30
@ -3114,18 +3114,13 @@ $LANG = array(
|
||||
'cycles_remaining' => 'Cycles remaining',
|
||||
'i_understand_delete' => 'I understand, delete',
|
||||
|
||||
|
||||
|
||||
'download_files' => 'Download Files',
|
||||
'download_timeframe' => 'Use this link to download your files, the link will expire in 1 hour.',
|
||||
'new_signup' => 'New Signup',
|
||||
'new_signup_text' => 'A new account has been created by :user - :email - from IP address: :ip'
|
||||
|
||||
|
||||
|
||||
|
||||
'new_signup_text' => 'A new account has been created by :user - :email - from IP address: :ip',
|
||||
|
||||
|
||||
'email_link_not_working' => 'If button above isn\'t working for you, please click on the link',
|
||||
);
|
||||
|
||||
return $LANG;
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
<a href="{{ $url }}" target="_blank">
|
||||
<button class="text-white text-sm tracking-wide bg-blue-500 hover:bg-blue-600 hover:shadow rounded w-full my-8 p-4 uppercase">
|
||||
{{ $slot }}
|
||||
</button>
|
||||
</a>
|
||||
<div class="px-10 py-6 flex flex-col items-center">
|
||||
<a href="{{ $url }}" class="bg-green-500 px-4 py-3 text-white leading-tight hover:bg-green-600" style="color: white !important;">{{ $slot }}</a>
|
||||
</div>
|
||||
|
||||
@isset($show_link)
|
||||
<div class="flex flex-col">
|
||||
<p>{{ ctrans('texts.email_link_not_working') }}:</p>
|
||||
<a class="text-green-700 hover:text-green-800" href="{{ $url }}">{{ $url }}</a>
|
||||
</div>
|
||||
@endisset
|
||||
File diff suppressed because one or more lines are too long
@ -1,498 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
</head>
|
||||
|
||||
<style>
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
main {
|
||||
display: block
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: .67em 0
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bolder
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
button {
|
||||
text-transform: none
|
||||
}
|
||||
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit],
|
||||
button {
|
||||
-webkit-appearance: button
|
||||
}
|
||||
|
||||
[type=button]::-moz-focus-inner,
|
||||
[type=reset]::-moz-focus-inner,
|
||||
[type=submit]::-moz-focus-inner,
|
||||
button::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
[type=button]:-moz-focusring,
|
||||
[type=reset]:-moz-focusring,
|
||||
[type=submit]:-moz-focusring,
|
||||
button:-moz-focusring {
|
||||
outline: 1px dotted ButtonText
|
||||
}
|
||||
|
||||
legend {
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
white-space: normal
|
||||
}
|
||||
|
||||
[type=checkbox],
|
||||
[type=radio],
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
[type=number]::-webkit-inner-spin-button,
|
||||
[type=number]::-webkit-outer-spin-button {
|
||||
height: auto
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px
|
||||
}
|
||||
|
||||
[type=search]::-webkit-search-decoration {
|
||||
-webkit-appearance: none
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none
|
||||
}
|
||||
|
||||
h1,
|
||||
h3,
|
||||
p {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: border-box;
|
||||
border: 0 solid #e2e8f0
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #a0aec0
|
||||
}
|
||||
|
||||
input::-moz-placeholder {
|
||||
color: #a0aec0
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder {
|
||||
color: #a0aec0
|
||||
}
|
||||
|
||||
input::-ms-input-placeholder {
|
||||
color: #a0aec0
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #a0aec0
|
||||
}
|
||||
|
||||
[role=button],
|
||||
button {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse
|
||||
}
|
||||
|
||||
h1,
|
||||
h3 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
color: inherit
|
||||
}
|
||||
|
||||
canvas,
|
||||
object {
|
||||
display: block;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
background-color: #f7fafc
|
||||
}
|
||||
|
||||
.bg-gray-200 {
|
||||
background-color: #edf2f7
|
||||
}
|
||||
|
||||
.bg-gray-800 {
|
||||
background-color: #2d3748
|
||||
}
|
||||
|
||||
.bg-gray-900 {
|
||||
background-color: #1a202c
|
||||
}
|
||||
|
||||
.bg-blue-500 {
|
||||
background-color: #4299e1
|
||||
}
|
||||
|
||||
.bg-blue-600 {
|
||||
background-color: #3182ce
|
||||
}
|
||||
|
||||
.bg-blue-700 {
|
||||
background-color: #2b6cb0
|
||||
}
|
||||
|
||||
.bg-blue-800 {
|
||||
background-color: #2c5282
|
||||
}
|
||||
|
||||
.bg-blue-900 {
|
||||
background-color: #2a4365
|
||||
}
|
||||
|
||||
.hover\:bg-blue-600:hover {
|
||||
background-color: #3182ce
|
||||
}
|
||||
|
||||
.hover\:bg-blue-700:hover {
|
||||
background-color: #2b6cb0
|
||||
}
|
||||
|
||||
.border-blue-100 {
|
||||
border-color: #ebf8ff
|
||||
}
|
||||
|
||||
.border-blue-800 {
|
||||
border-color: #2c5282
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: .25rem
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom-width: 1px
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.font-sans {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.h-64 {
|
||||
height: 16rem
|
||||
}
|
||||
|
||||
.leading-normal {
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
.leading-loose {
|
||||
line-height: 2
|
||||
}
|
||||
|
||||
.my-8 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto
|
||||
}
|
||||
|
||||
.-mx-8 {
|
||||
margin-left: -2rem;
|
||||
margin-right: -2rem
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem
|
||||
}
|
||||
|
||||
.mt-8 {
|
||||
margin-top: 2rem
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem
|
||||
}
|
||||
|
||||
.-mt-8 {
|
||||
margin-top: -2rem
|
||||
}
|
||||
|
||||
.max-w-md {
|
||||
max-width: 28rem
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: .25rem
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem
|
||||
}
|
||||
|
||||
.p-8 {
|
||||
padding: 2rem
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem
|
||||
}
|
||||
|
||||
.static {
|
||||
position: static
|
||||
}
|
||||
|
||||
.hover\:shadow:hover,
|
||||
.shadow {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
|
||||
}
|
||||
|
||||
.table-auto {
|
||||
table-layout: auto
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.text-gray-200 {
|
||||
color: #edf2f7
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
color: #4a5568
|
||||
}
|
||||
|
||||
.text-blue-500 {
|
||||
color: #4299e1
|
||||
}
|
||||
|
||||
.hover\:text-blue-600:hover {
|
||||
color: #3182ce
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: .875rem
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: 1rem
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem
|
||||
}
|
||||
|
||||
.text-4xl {
|
||||
font-size: 2.25rem
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.antialiased {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
|
||||
.tracking-wide {
|
||||
letter-spacing: .025em
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
@media (min-width:640px) {
|
||||
.sm\:text-lg {
|
||||
font-size: 1.125rem
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="antialiased font-sans bg-gray-800">
|
||||
<div class="app font-sans min-w-screen min-h-screen bg-grey-lighter py-8 px-4">
|
||||
|
||||
<div class="max-w-md mx-auto">
|
||||
|
||||
<div class="bg-white p-8 shadow">
|
||||
|
||||
{{ $header }}
|
||||
|
||||
<div class="py-8 border-b">
|
||||
|
||||
@isset($greeting)
|
||||
{{ $greeting }}
|
||||
@endisset
|
||||
|
||||
<div class="mt-4">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
@isset($signature)
|
||||
<p class="text-sm">Sincerely,</p>
|
||||
<p class="text-sm">{{ $signature }}</p>
|
||||
@endisset
|
||||
|
||||
</div>
|
||||
|
||||
@isset($footer)
|
||||
{{ $footer }}
|
||||
@endisset
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-center text-sm mt-8">
|
||||
|
||||
<div class="meta__help">
|
||||
@isset($below_card)
|
||||
{!! $below_card !!}
|
||||
@endisset
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,498 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
</head>
|
||||
|
||||
<style>
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
main {
|
||||
display: block
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: .67em 0
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bolder
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
button {
|
||||
text-transform: none
|
||||
}
|
||||
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit],
|
||||
button {
|
||||
-webkit-appearance: button
|
||||
}
|
||||
|
||||
[type=button]::-moz-focus-inner,
|
||||
[type=reset]::-moz-focus-inner,
|
||||
[type=submit]::-moz-focus-inner,
|
||||
button::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
[type=button]:-moz-focusring,
|
||||
[type=reset]:-moz-focusring,
|
||||
[type=submit]:-moz-focusring,
|
||||
button:-moz-focusring {
|
||||
outline: 1px dotted ButtonText
|
||||
}
|
||||
|
||||
legend {
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
white-space: normal
|
||||
}
|
||||
|
||||
[type=checkbox],
|
||||
[type=radio],
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
[type=number]::-webkit-inner-spin-button,
|
||||
[type=number]::-webkit-outer-spin-button {
|
||||
height: auto
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px
|
||||
}
|
||||
|
||||
[type=search]::-webkit-search-decoration {
|
||||
-webkit-appearance: none
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none
|
||||
}
|
||||
|
||||
h1,
|
||||
h3,
|
||||
p {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: border-box;
|
||||
border: 0 solid #e2e8f0
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #a0aec0
|
||||
}
|
||||
|
||||
input::-moz-placeholder {
|
||||
color: #a0aec0
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder {
|
||||
color: #a0aec0
|
||||
}
|
||||
|
||||
input::-ms-input-placeholder {
|
||||
color: #a0aec0
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #a0aec0
|
||||
}
|
||||
|
||||
[role=button],
|
||||
button {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse
|
||||
}
|
||||
|
||||
h1,
|
||||
h3 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
color: inherit
|
||||
}
|
||||
|
||||
canvas,
|
||||
object {
|
||||
display: block;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
background-color: #f7fafc
|
||||
}
|
||||
|
||||
.bg-gray-200 {
|
||||
background-color: #edf2f7
|
||||
}
|
||||
|
||||
.bg-gray-800 {
|
||||
background-color: #2d3748
|
||||
}
|
||||
|
||||
.bg-gray-900 {
|
||||
background-color: #1a202c
|
||||
}
|
||||
|
||||
.bg-blue-500 {
|
||||
background-color: #4299e1
|
||||
}
|
||||
|
||||
.bg-blue-600 {
|
||||
background-color: #3182ce
|
||||
}
|
||||
|
||||
.bg-blue-700 {
|
||||
background-color: #2b6cb0
|
||||
}
|
||||
|
||||
.bg-blue-800 {
|
||||
background-color: #2c5282
|
||||
}
|
||||
|
||||
.bg-blue-900 {
|
||||
background-color: #2a4365
|
||||
}
|
||||
|
||||
.hover\:bg-blue-600:hover {
|
||||
background-color: #3182ce
|
||||
}
|
||||
|
||||
.hover\:bg-blue-700:hover {
|
||||
background-color: #2b6cb0
|
||||
}
|
||||
|
||||
.border-blue-100 {
|
||||
border-color: #ebf8ff
|
||||
}
|
||||
|
||||
.border-blue-800 {
|
||||
border-color: #2c5282
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: .25rem
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom-width: 1px
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.font-sans {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.h-64 {
|
||||
height: 16rem
|
||||
}
|
||||
|
||||
.leading-normal {
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
.leading-loose {
|
||||
line-height: 2
|
||||
}
|
||||
|
||||
.my-8 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto
|
||||
}
|
||||
|
||||
.-mx-8 {
|
||||
margin-left: -2rem;
|
||||
margin-right: -2rem
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem
|
||||
}
|
||||
|
||||
.mt-8 {
|
||||
margin-top: 2rem
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem
|
||||
}
|
||||
|
||||
.-mt-8 {
|
||||
margin-top: -2rem
|
||||
}
|
||||
|
||||
.max-w-md {
|
||||
max-width: 28rem
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: .25rem
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem
|
||||
}
|
||||
|
||||
.p-8 {
|
||||
padding: 2rem
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem
|
||||
}
|
||||
|
||||
.static {
|
||||
position: static
|
||||
}
|
||||
|
||||
.hover\:shadow:hover,
|
||||
.shadow {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
|
||||
}
|
||||
|
||||
.table-auto {
|
||||
table-layout: auto
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.text-gray-200 {
|
||||
color: #edf2f7
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
color: #4a5568
|
||||
}
|
||||
|
||||
.text-blue-500 {
|
||||
color: #4299e1
|
||||
}
|
||||
|
||||
.hover\:text-blue-600:hover {
|
||||
color: #3182ce
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: .875rem
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: 1rem
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem
|
||||
}
|
||||
|
||||
.text-4xl {
|
||||
font-size: 2.25rem
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.antialiased {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
|
||||
.tracking-wide {
|
||||
letter-spacing: .025em
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
@media (min-width:640px) {
|
||||
.sm\:text-lg {
|
||||
font-size: 1.125rem
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="antialiased font-sans bg-gray-200">
|
||||
<div class="app font-sans min-w-screen min-h-screen bg-grey-lighter py-8 px-4">
|
||||
|
||||
<div class="max-w-md mx-auto">
|
||||
|
||||
<div class="bg-white p-8 shadow">
|
||||
|
||||
{{ $header }}
|
||||
|
||||
<div class="py-8 border-b">
|
||||
|
||||
@isset($greeting)
|
||||
{{ $greeting }}
|
||||
@endisset
|
||||
|
||||
<div class="mt-4">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
@isset($signature)
|
||||
<p class="text-sm">Sincerely,</p>
|
||||
<p class="text-sm">{{ $signature }}</p>
|
||||
@endisset
|
||||
|
||||
</div>
|
||||
|
||||
@isset($footer)
|
||||
{{ $footer }}
|
||||
@endisset
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-center text-sm mt-8">
|
||||
|
||||
<div class="meta__help">
|
||||
@isset($below_card)
|
||||
{!! $below_card !!}
|
||||
@endisset
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,12 +1,7 @@
|
||||
{{-- @if()
|
||||
@component('email.components.layout-dark')
|
||||
@endif
|
||||
--}}
|
||||
|
||||
@component('email.components.layout')
|
||||
@component('email.template.master', ['design' => 'light'])
|
||||
|
||||
@slot('header')
|
||||
@component('email.components.header', ['p' => 'Your upgrade has completed!', 'image' => 'https://www.invoiceninja.com/wp-content/uploads/2019/01/InvoiceNinja-Logo-Round-300x300.png'])
|
||||
@component('email.components.header', ['p' => 'Your upgrade has completed!', 'logo' => 'https://www.invoiceninja.com/wp-content/uploads/2019/01/InvoiceNinja-Logo-Round-300x300.png'])
|
||||
Upgrade!
|
||||
@endcomponent
|
||||
|
||||
@ -18,7 +13,7 @@
|
||||
|
||||
Hello, this is really tiny template. We just want to inform you that upgrade has been completed.
|
||||
|
||||
@component('email.components.button', ['url' => 'https://invoiceninja.com'])
|
||||
@component('email.components.button', ['url' => 'https://invoiceninja.com', 'show_link' => true])
|
||||
Visit InvoiceNinja
|
||||
@endcomponent
|
||||
|
||||
|
||||
@ -1,342 +1,52 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>@yield('title')</title>
|
||||
<style>
|
||||
/* -------------------------------------
|
||||
GLOBAL RESETS
|
||||
------------------------------------- */
|
||||
|
||||
/*All the styling goes here*/
|
||||
|
||||
img {
|
||||
border: none;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
max-width: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #f6f6f6;
|
||||
font-family: sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
table {
|
||||
border-collapse: separate;
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
width: 100%; }
|
||||
table td {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
}
|
||||
/* -------------------------------------
|
||||
BODY & CONTAINER
|
||||
------------------------------------- */
|
||||
.body {
|
||||
background-color: #f6f6f6;
|
||||
width: 100%;
|
||||
}
|
||||
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
|
||||
.container {
|
||||
display: block;
|
||||
margin: 0 auto !important;
|
||||
/* makes it centered */
|
||||
max-width: 580px;
|
||||
padding: 10px;
|
||||
width: 580px;
|
||||
}
|
||||
/* This should also be a block element, so that it will fill 100% of the .container */
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 580px;
|
||||
padding: 10px;
|
||||
}
|
||||
/* -------------------------------------
|
||||
HEADER, FOOTER, MAIN
|
||||
------------------------------------- */
|
||||
.main {
|
||||
background: #ffffff;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
.wrapper {
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
.content-block {
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.footer {
|
||||
clear: both;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.footer td,
|
||||
.footer p,
|
||||
.footer span,
|
||||
.footer a {
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
/* -------------------------------------
|
||||
TYPOGRAPHY
|
||||
------------------------------------- */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: #000000;
|
||||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
p li,
|
||||
ul li,
|
||||
ol li {
|
||||
list-style-position: inside;
|
||||
margin-left: 5px;
|
||||
}
|
||||
a {
|
||||
color: #3498db;
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* -------------------------------------
|
||||
BUTTONS
|
||||
------------------------------------- */
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
width: 100%; }
|
||||
.btn > tbody > tr > td {
|
||||
padding-bottom: 15px; }
|
||||
.btn table {
|
||||
width: auto;
|
||||
}
|
||||
.btn table td {
|
||||
background-color: #ffffff;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.btn a {
|
||||
background-color: #ffffff;
|
||||
border: solid 1px #3498db;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 12px 25px;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.btn-primary table td {
|
||||
background-color: #3498db;
|
||||
}
|
||||
.btn-primary a {
|
||||
background-color: #3498db;
|
||||
border-color: #3498db;
|
||||
color: #ffffff;
|
||||
}
|
||||
/* -------------------------------------
|
||||
OTHER STYLES THAT MIGHT BE USEFUL
|
||||
------------------------------------- */
|
||||
.last {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
.align-center {
|
||||
text-align: center;
|
||||
}
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
.mt0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mb0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.preheader {
|
||||
color: transparent;
|
||||
display: none;
|
||||
height: 0;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
mso-hide: all;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
}
|
||||
.powered-by a {
|
||||
text-decoration: none;
|
||||
}
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #f6f6f6;
|
||||
margin: 20px 0;
|
||||
}
|
||||
/* -------------------------------------
|
||||
RESPONSIVE AND MOBILE FRIENDLY STYLES
|
||||
------------------------------------- */
|
||||
@media only screen and (max-width: 620px) {
|
||||
table[class=body] h1 {
|
||||
font-size: 28px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
table[class=body] p,
|
||||
table[class=body] ul,
|
||||
table[class=body] ol,
|
||||
table[class=body] td,
|
||||
table[class=body] span,
|
||||
table[class=body] a {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
table[class=body] .wrapper,
|
||||
table[class=body] .article {
|
||||
padding: 10px !important;
|
||||
}
|
||||
table[class=body] .content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
table[class=body] .container {
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
table[class=body] .main {
|
||||
border-left-width: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
table[class=body] .btn table {
|
||||
width: 100% !important;
|
||||
}
|
||||
table[class=body] .btn a {
|
||||
width: 100% !important;
|
||||
}
|
||||
table[class=body] .img-responsive {
|
||||
height: auto !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
/* -------------------------------------
|
||||
PRESERVE THESE STYLES IN THE HEAD
|
||||
------------------------------------- */
|
||||
@media all {
|
||||
.ExternalClass {
|
||||
width: 100%;
|
||||
}
|
||||
.ExternalClass,
|
||||
.ExternalClass p,
|
||||
.ExternalClass span,
|
||||
.ExternalClass font,
|
||||
.ExternalClass td,
|
||||
.ExternalClass div {
|
||||
line-height: 100%;
|
||||
}
|
||||
.apple-link a {
|
||||
color: inherit !important;
|
||||
font-family: inherit !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
line-height: inherit !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
#MessageViewBody a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
.btn-primary table td:hover {
|
||||
background-color: #34495e !important;
|
||||
}
|
||||
.btn-primary a:hover {
|
||||
background-color: #34495e !important;
|
||||
border-color: #34495e !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="">
|
||||
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
|
||||
<tr>
|
||||
<td>@include('email.partials.company_logo')</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td class="container">
|
||||
<div class="content">
|
||||
@php
|
||||
if(!isset($design))
|
||||
$design = 'light';
|
||||
@endphp
|
||||
|
||||
@yield('content')
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>@yield('title')</title>
|
||||
<style>
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}a{background-color:transparent}img{border-style:none}button{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[hidden]{display:none}h1,p{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}img{border-style:solid}[role=button],button{cursor:pointer}h1{font-size:inherit;font-weight:inherit}a{text-decoration:inherit}a,button{color:inherit}button{padding:0;line-height:inherit}img,object,svg{display:block;vertical-align:middle}img{max-width:100%;height:auto}.bg-white{background-color:#fff}.bg-gray-200{background-color:#edf2f7}.bg-gray-800{background-color:#2d3748}.bg-gray-900{background-color:#1a202c}.bg-green-500{background-color:#48bb78}.bg-blue-500{background-color:#4299e1}.bg-blue-700{background-color:#2b6cb0}.bg-blue-900{background-color:#2a4365}.hover\:bg-green-600:hover{background-color:#38a169}.hover\:bg-blue-600:hover{background-color:#3182ce}.border-gray-800{border-color:#2d3748}.border-green-500{border-color:#48bb78}.border-blue-500{border-color:#4299e1}.rounded-lg{border-radius:.5rem}.border-t-2{border-top-width:2px}.border-b{border-bottom-width:1px}.flex{display:flex}.grid{display:grid}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.font-sans{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.h-6{height:1.5rem}.h-32{height:8rem}.leading-tight{line-height:1.25}.my-4{margin-top:1rem;margin-bottom:1rem}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}.mt-5{margin-top:1.25rem}.mt-8{margin-top:2rem}.mb-8{margin-bottom:2rem}.mt-10{margin-top:2.5rem}.p-6{padding:1.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.static{position:static}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-white{color:#fff}.text-gray-400{color:#cbd5e0}.text-gray-700{color:#4a5568}.text-green-700{color:#2f855a}.hover\:text-green-800:hover{color:#276749}.text-2xl{font-size:1.5rem}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.col-span-4{grid-column:span 4/span 4}.col-start-2{grid-column-start:2}.transform{--transform-translate-x:0;--transform-translate-y:0;--transform-rotate:0;--transform-skew-x:0;--transform-skew-y:0;--transform-scale-x:1;--transform-scale-y:1;transform:translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))}p{margin-top:1rem}@media (min-width:768px){.md\:text-3xl{font-size:1.875rem}}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<!-- START FOOTER -->
|
||||
<div class="footer">
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td class="content-block">
|
||||
<span class="apple-link">Footerish stuff</span>
|
||||
@yield('footer')
|
||||
<br> Don't like these emails? <a href="#">Unsubscribe</a>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="content-block powered-by">
|
||||
Powered by <a href="#">InvoiceNinja</a>.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@if($design == 'dark')
|
||||
<style>
|
||||
* {
|
||||
color: #cbd5e0 !important;
|
||||
}
|
||||
</style>
|
||||
@endif
|
||||
|
||||
<body class="{{ $design == 'light' ? 'bg-gray-200' : 'bg-gray-800' }} my-10 font-sans {{ $design == 'light' ? 'text-gray-700' : 'text-gray-400' }}">
|
||||
<div class="grid grid-cols-6">
|
||||
<div class="col-start-2 col-span-4">
|
||||
<div class="{{ $design == 'light' ? 'bg-white' : 'bg-gray-900' }} shadow border-t-2 {{ $design == 'light' ? 'border-green-500' : 'border-gray-800' }}">
|
||||
{{ $header }}
|
||||
<div id="text" class="px-10 py-6 flex flex-col">
|
||||
@isset($greeting)
|
||||
<p>{{ $greeting }}</p>
|
||||
@endisset
|
||||
<p>
|
||||
{{ $slot }}
|
||||
</p>
|
||||
@isset($signature)
|
||||
<p>{{ $signature }}</p>
|
||||
@endisset
|
||||
</div>
|
||||
</div>
|
||||
<!-- END FOOTER -->
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
@isset($below_card)
|
||||
<div id="bottomText" class="text-center my-4 px-10">
|
||||
{{ $below_card }}
|
||||
</div>
|
||||
@endisset
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user