Skip to content

Commit

Permalink
ui: update email template design
Browse files Browse the repository at this point in the history
  • Loading branch information
@wryonik
wryonik committed Sep 30, 2024
1 parent d49b16b commit b507b2f
Show file tree
Hide file tree
Showing 9 changed files with 573 additions and 347 deletions.
85 changes: 41 additions & 44 deletions packages/relayer/eml_templates/acceptance_request.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@
<html>
<style>
@font-face {
font-family: "Space Grotesk";
src: url("https://storage.googleapis.com/email-templates-artifacts/space-grotesk/SpaceGrotesk-Regular.otf") format("opentype");
font-family: "Fustat";
src: url("https://storage.googleapis.com/email-templates-artifacts/Fustat/Fustat-Regular.ttf") format('truetype');
font-weight: 400;
}
@font-face {
font-family: "Space Grotesk";
src: url("https://storage.googleapis.com/email-templates-artifacts/space-grotesk/SpaceGrotesk-Medium.otf") format("opentype");
font-family: "Fustat";
src: url("https://storage.googleapis.com/email-templates-artifacts/Fustat/Fustat-Medium.ttf") format('truetype');
font-weight: 500;
}
@font-face {
font-family: "Space Grotesk";
src: url("https://storage.googleapis.com/email-templates-artifacts/space-grotesk/SpaceGrotesk-SemiBold.otf") format("opentype");
font-family: "Fustat";
src: url("https://storage.googleapis.com/email-templates-artifacts/Fustat/Fustat-SemiBold.ttf") format('truetype');
font-weight: 600;
}
@font-face {
font-family: "Space Grotesk";
src: url("https://storage.googleapis.com/email-templates-artifacts/space-grotesk/SpaceGrotesk-Bold.otf") format("opentype");
font-family: "Fustat";
src: url("https://storage.googleapis.com/email-templates-artifacts/Fustat/Fustat-Bold.ttf") format('truetype');
font-weight: 700;
}

Expand All @@ -31,7 +31,7 @@
line-height: 1.4;
padding: 0;
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-family: "Fustat", sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
Expand Down Expand Up @@ -72,14 +72,14 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="https://fonts.googleapis.com/css?family=Space+Grotesk&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Fustat&display=swap" rel="stylesheet" />
</head>
<body
style="
margin: 0;
padding: 0;
font-size: 16px;
font-family: 'Space Grotesk', sans-serif;
font-family: 'Fustat', sans-serif;
"
>
<table
Expand All @@ -97,28 +97,13 @@
<table
width="100%"
style="
background-image: url(https://storage.googleapis.com/email-templates-artifacts/Header.png);
background-image: url(https://storage.googleapis.com/email-templates-artifacts/Header.png?ignoreCache=1);
background-size: cover;
background-position: center;
height: 4.5rem;
border-radius: 8px 8px 0 0;
"
>
<tr>
<td align="center">
<p
style="
font-size: 44px;
font-weight: 500;
color: white;
line-height: 150%;
letter-spacing: -4px;
margin: 0;
"
>
ZK Email
</p>
</td>
</tr>
</table>

<!-- Content -->
Expand All @@ -136,7 +121,7 @@
</td>
</tr>
<tr>
<td style="padding-top: 15px; font-family: 'Space Grotesk', sans-serif;">
<td style="padding-top: 15px; font-family: 'Fustat', sans-serif;">
You have received an guardian request from the wallet address <strong>{{walletAddress}}</strong>. Reply "<strong>Confirm</strong>" to this email to accept the request.
Your request ID is #{{requestId}}.

Expand All @@ -159,19 +144,19 @@
<table
width="100%"
style="
background-image: url(https://storage.googleapis.com/email-templates-artifacts/Footer.png);
background-image: url(https://storage.googleapis.com/email-templates-artifacts/Footer.png?ignoreCache=1);
background-size: cover;
height: 4.5rem;
border-radius: 0 0 8px 8px;
"
>
<tr>
<td align="center" style="padding: 5px">
<p style="color: white; font-size: 12px; margin: 0; margin-bottom: 4px;">
<p style="color: #D4D4D4; font-weight: 500; font-size: 14px; margin: 0; margin-bottom: 4px;">
Powered by
<a
href="#"
style="color: white; font-weight: 700; font-size: 12px"
style="color: white; font-size: 14px; text-decoration: underline;"
>ZK Email</a
>
</p>
Expand All @@ -182,15 +167,18 @@
href="https://github.com/zkemail"
class="social-links-logo"
style=" border-radius: 50%;
background: #ffffff18;
border: 1px solid #bfbfbf20;
background: #161819;
border: 1px solid #3B3B3B;
backdrop-filter: blur(8px);
margin-left: 4px;
margin-right: 4px;
height: 24px;
width: 24px;
text-align: center;
line-height: 24px;
display: block"
><img
src="https://storage.googleapis.com/email-templates-artifacts/GithubLogo.png"
src="https://storage.googleapis.com/email-templates-artifacts/GithubLogo.png?ignoreCache=1"
alt="GitHub Logo"
style="height: 12px; width: 12px;"
/></a>
Expand All @@ -200,31 +188,37 @@
href="https://twitter.com/zkemail"
class="social-links-logo"
style=" border-radius: 50%;
background: #ffffff18;
border: 1px solid #bfbfbf20;
background: #161819;
border: 1px solid #3B3B3B;
backdrop-filter: blur(8px);
margin-left: 4px;
margin-right: 4px;
height: 24px;
width: 24px;
text-align: center;
line-height: 24px;
display: block"
><img
src="https://storage.googleapis.com/email-templates-artifacts/XLogo.png"
src="https://storage.googleapis.com/email-templates-artifacts/XLogo.png?ignoreCache=1"
alt="Twitter Logo"
style="height: 12px; width: 12px;"
/></a>
</td>
<td>
<a href="https://t.me/zkemail/1" class="social-links-logo"
style=" border-radius: 50%;
background: #ffffff18;
border: 1px solid #bfbfbf20;
background: #161819;
border: 1px solid #3B3B3B;
backdrop-filter: blur(8px);
margin-left: 4px;
margin-right: 4px;
height: 24px;
width: 24px;
text-align: center;
line-height: 24px;
display: block"
><img
src="https://storage.googleapis.com/email-templates-artifacts/TelegramLogo.png"
src="https://storage.googleapis.com/email-templates-artifacts/TelegramLogo.png?ignoreCache=1"
alt="Telegram Logo"
style="height: 12px; width: 12px;"
/></a>
Expand All @@ -234,15 +228,18 @@
href="https://discord.gg/XgAUbX3F4T"
class="social-links-logo"
style=" border-radius: 50%;
background: #ffffff18;
border: 1px solid #bfbfbf20;
background: #161819;
border: 1px solid #3B3B3B;
backdrop-filter: blur(8px);
margin-left: 4px;
margin-right: 4px;
height: 24px;
width: 24px;
text-align: center;
line-height: 24px;
display: block"
><img
src="https://storage.googleapis.com/email-templates-artifacts/DiscordLogo.png"
src="https://storage.googleapis.com/email-templates-artifacts/DiscordLogo.png?ignoreCache=1"
alt="Discord Logo"
style="height: 12px; width: 12px;"
/></a>
Expand Down
Loading

0 comments on commit b507b2f

Please sign in to comment.