Remove inline styling, add css classes (#10077)
diff --git a/erpnext/public/css/email.css b/erpnext/public/css/email.css
new file mode 100644
index 0000000..8cf1a31
--- /dev/null
+++ b/erpnext/public/css/email.css
@@ -0,0 +1,29 @@
+.panel-header {
+ background-color: #fafbfc;
+ border: 1px solid #d1d8dd;
+ border-radius: 3px 3px 0 0;
+}
+.panel-body {
+ background-color: #fff;
+ border: 1px solid #d1d8dd;
+ border-top: none;
+ border-radius: 0 0 3px 3px;
+ overflow-wrap: break-word;
+}
+.sender-avatar {
+ width: 24px;
+ height: 24px;
+ border-radius: 3px;
+ vertical-align: middle;
+}
+.sender-avatar-placeholder {
+ width: 24px;
+ height: 24px;
+ border-radius: 3px;
+ vertical-align: middle;
+ line-height: 24px;
+ text-align: center;
+ color: #d1d8dd;
+ border: 1px solid #d1d8dd;
+ background-color: #fff;
+}
diff --git a/erpnext/public/less/email.less b/erpnext/public/less/email.less
new file mode 100644
index 0000000..4077c49
--- /dev/null
+++ b/erpnext/public/less/email.less
@@ -0,0 +1,32 @@
+@import "../../../../frappe/frappe/public/less/variables.less";
+
+.panel-header {
+ background-color: @light-bg;
+ border: 1px solid @border-color;
+ border-radius: 3px 3px 0 0;
+}
+
+.panel-body {
+ background-color: #fff;
+ border: 1px solid @border-color;
+ border-top: none;
+ border-radius: 0 0 3px 3px;
+ overflow-wrap: break-word;
+}
+
+.sender-avatar {
+ width: 24px;
+ height: 24px;
+ border-radius: 3px;
+ vertical-align: middle;
+}
+
+.sender-avatar-placeholder {
+ .sender-avatar;
+
+ line-height: 24px;
+ text-align: center;
+ color: @border-color;
+ border: 1px solid @border-color;
+ background-color: #fff;
+}
\ No newline at end of file
diff --git a/erpnext/templates/emails/daily_work_summary.html b/erpnext/templates/emails/daily_work_summary.html
index 726de3b..a22e09c 100644
--- a/erpnext/templates/emails/daily_work_summary.html
+++ b/erpnext/templates/emails/daily_work_summary.html
@@ -1,28 +1,25 @@
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
- <div style="color: #333; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; word-wrap: break-word; overflow-wrap: break-word;">
- <h3>{{ title }}</h3>
- </div>
+ <h3>{{ title }}</h3>
</tr>
</table>
{% for reply in replies %}
-<table border="0" cellpadding="0" cellspacing="0" width="100%"
- style="background-color: #fafbfc; border: 1px solid #d1d8dd; border-radius: 3px 3px 0 0">
+<table class="panel-header" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr height="10"></tr>
<tr>
<td width="15"></td>
<td valign="top" width="24">
{% if reply.image %}
- <img width="24" height="24" embed="{{ reply.image }}" style="border-radius: 3px; vertical-align: middle;" />
+ <img class="sender-avatar" width="24" height="24" embed="{{ reply.image }}"/>
{% else %}
- <div style="width: 24px; height: 24px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;background: #fff; border-radius: 3px; border: 1px solid #d1d8dd; text-align: center; line-height: 24px; color: #d1d8dd;">
+ <div class="sender-avatar-placeholder">
{{ reply.sender_name[0] }}
</div>
{% endif %}
</td>
<td width="10"></td>
<td>
- <div style="font-size: 12px; color: #8D99A6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; word-wrap: break-word; line-height: 22px; overflow-wrap: break-word; text-decoration: none;">
+ <div class="text-medium text-muted">
<span>{{ reply.sender_name }}</span>
</div>
</td>
@@ -30,13 +27,12 @@
</tr>
<tr height="10"></tr>
</table>
-<table border="0" cellpadding="0" cellspacing="0" width="100%"
- style="background-color: #fff; border: 1px solid #d1d8dd; border-top: none; border-radius: 0 0 3px 3px">
+<table class="panel-body" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr height="10"></tr>
<tr>
<td width="15"></td>
<td>
- <div style="font-size: 14px; color: #333; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; word-wrap: break-word; line-height: 22px; overflow-wrap: break-word; text-decoration: none;">
+ <div>
{{ reply.content }}
</div>
</td>
@@ -51,7 +47,7 @@
{% if did_not_reply %}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
- <div style="font-size: 14px; color: #8D99A6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; word-wrap: break-word; line-height: 22px; overflow-wrap: break-word; text-decoration: none;">
+ <div class="text-muted">
<p>{{ did_not_reply_title }}: {{ did_not_reply }}</p>
</div>
</tr>