Redesigned emails

Emails now use the same colorscheme as the rest of the ui.
This commit is contained in:
Harvey Tindall 2020-07-15 23:33:58 +01:00
parent 290e6b3dca
commit 2551307877
6 changed files with 1541 additions and 526 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,34 +1,40 @@
<mjml> <mjml>
<mj-head> <mj-head>
<mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" /> <mj-attributes>
<mj-class name="bg" background-color="#101010" />
<mj-class name="bg2" background-color="#242424" />
<mj-class name="text" color="rgba(255,255,255,0.8)" />
<mj-class name="bold" color="rgba(255,255,255,0.87)" />
<mj-class name="secondary" color="rgb(153,153,153)" />
<mj-class name="blue" background-color="rgb(0,164,220)" />
</mj-attributes>
<mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
<mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
</mj-head> </mj-head>
<mj-body> <mj-body>
<mj-section background-color="#f0f0f0"> <mj-section mj-class="bg2">
<mj-column> <mj-column>
<mj-text font-style="bold" font-size="20px"> <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> Jellyfin </mj-text>
Jellyfin
</mj-text>
</mj-column> </mj-column>
</mj-section> </mj-section>
<mj-section> <mj-section mj-class="bg">
<mj-column> <mj-column>
<mj-text font-size="15px" font-family="Noto Sans, Helvetica, Arial, sans-serif"> <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
<p>Hi {{ username }},</p> <p>Hi {{ username }},</p>
<p> Someone has recently requested a password reset on Jellyfin.</p> <p> Someone has recently requested a password reset on Jellyfin.</p>
<p>If this was you, enter the below pin into the prompt.</p> <p>If this was you, enter the below pin into the prompt.</p>
<p>The code will expire on {{ expiry_date }}, at {{ expiry_time }}, which is in {{ expires_in }}.</p> <p>The code will expire on {{ expiry_date }}, at {{ expiry_time }}, which is in {{ expires_in }}.</p>
<p>If this wasn't you, please ignore this email.</p> <p>If this wasn't you, please ignore this email.</p>
</mj-text> </mj-text>
<mj-button>{{ pin }}</mj-button> <mj-button mj-class="blue bold">{{ pin }}</mj-button>
</mj-column> </mj-column>
</mj-section> </mj-section>
<mj-section background-color="#f0f0f0"> <mj-section mj-class="bg2">
<mj-column> <mj-column>
<mj-text font-style="italic" font-size="10px"> <mj-text mj-class="secondary" font-style="italic" font-size="14px">
{{ message }} {{ message }}
</mj-text> </mj-text>
</mj-column> </mj-column>
</mj-section> </mj-section>
</body> </body>
</mjml> </mjml>

File diff suppressed because one or more lines are too long

View File

@ -1,33 +1,39 @@
<mjml> <mjml>
<mj-head> <mj-head>
<mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" /> <mj-attributes>
<mj-class name="bg" background-color="#101010" />
<mj-class name="bg2" background-color="#242424" />
<mj-class name="text" color="rgba(255,255,255,0.8)" />
<mj-class name="bold" color="rgba(255,255,255,0.87)" />
<mj-class name="secondary" color="rgb(153,153,153)" />
<mj-class name="blue" background-color="rgb(0,164,220)" />
</mj-attributes>
<mj-font name="Quicksand" href="https://fonts.googleapis.com/css2?family=Quicksand" />
<mj-font name="Noto Sans" href="https://fonts.googleapis.com/css2?family=Noto+Sans" />
</mj-head> </mj-head>
<mj-body> <mj-body>
<mj-section background-color="#f0f0f0"> <mj-section mj-class="bg2">
<mj-column> <mj-column>
<mj-text font-style="bold" font-size="20px"> <mj-text mj-class="bold" font-size="25px" font-family="Quicksand, Noto Sans, Helvetica, Arial, sans-serif"> Jellyfin </mj-text>
Jellyfin
</mj-text>
</mj-column> </mj-column>
</mj-section> </mj-section>
<mj-section> <mj-section mj-class="bg">
<mj-column> <mj-column>
<mj-text font-size="15px" font-family="Noto Sans, Helvetica, Arial, sans-serif"> <mj-text mj-class="text" font-size="16px" font-family="Noto Sans, Helvetica, Arial, sans-serif">
<p>Hi,</p> <p>Hi,</p>
<h2>You've been invited to Jellyfin.</h2> <h3>You've been invited to Jellyfin.</h3>
<p>To join, click the button below.</p> <p>To join, click the button below.</p>
<p>This invite will expire on {{ expiry_date }}, at {{ expiry_time }}, which is in {{ expires_in }}, so act quick.</p> <p>This invite will expire on {{ expiry_date }}, at {{ expiry_time }}, which is in {{ expires_in }}, so act quick.</p>
</mj-text> </mj-text>
<mj-button href="{{ invite_link }}">Setup your account</mj-button> <mj-button mj-class="blue bold" href="{{ invite_link }}">Setup your account</mj-button>
</mj-column> </mj-column>
</mj-section> </mj-section>
<mj-section background-color="#f0f0f0"> <mj-section mj-class="bg2">
<mj-column> <mj-column>
<mj-text font-style="italic" font-size="10px"> <mj-text mj-class="secondary" font-style="italic" font-size="14px">
{{ message }} {{ message }}
</mj-text> </mj-text>
</mj-column> </mj-column>
</mj-section> </mj-section>
</body> </body>
</mjml> </mjml>

1443
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -21,6 +21,7 @@
"bootstrap": "^5.0.0-alpha1", "bootstrap": "^5.0.0-alpha1",
"bootstrap4": "npm:bootstrap@^4.5.0", "bootstrap4": "npm:bootstrap@^4.5.0",
"clean-css-cli": "^4.3.0", "clean-css-cli": "^4.3.0",
"mjml": "^4.6.3",
"postcss-cli": "^7.1.1" "postcss-cli": "^7.1.1"
} }
} }