emails: improved styling, and fixed problems with some email clients

- fixes  #5620

rhodecode/apps/debug_style/views.py

@@ -1,402 +1,419 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2016-2020 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 import os
 import logging
 import datetime
 
 from pyramid.view import view_config
 from pyramid.renderers import render_to_response
 from rhodecode.apps._base import BaseAppView
 from rhodecode.lib.celerylib import run_task, tasks
 from rhodecode.lib.utils2 import AttributeDict
 from rhodecode.model.db import User
 from rhodecode.model.notification import EmailNotificationModel
 
 log = logging.getLogger(__name__)
 
 
 class DebugStyleView(BaseAppView):
     def load_default_context(self):
         c = self._get_local_tmpl_context()
 
         return c
 
     @view_config(
         route_name='debug_style_home', request_method='GET',
         renderer=None)
     def index(self):
         c = self.load_default_context()
         c.active = 'index'
 
         return render_to_response(
             'debug_style/index.html', self._get_template_context(c),
             request=self.request)
 
     @view_config(
         route_name='debug_style_email', request_method='GET',
         renderer=None)
     @view_config(
         route_name='debug_style_email_plain_rendered', request_method='GET',
         renderer=None)
     def render_email(self):
         c = self.load_default_context()
         email_id = self.request.matchdict['email_id']
         c.active = 'emails'
 
         pr = AttributeDict(
             pull_request_id=123,
             title='digital_ocean: fix redis, elastic search start on boot, '
                   'fix fd limits on supervisor, set postgres 11 version',
             description='''
 Check if we should use full-topic or mini-topic.
 
 - full topic produces some problems with merge states etc
 - server-mini-topic needs probably tweeks.            
             ''',
             repo_name='foobar',
             source_ref_parts=AttributeDict(type='branch', name='fix-ticket-2000'),
             target_ref_parts=AttributeDict(type='branch', name='master'),
         )
         target_repo = AttributeDict(repo_name='repo_group/target_repo')
         source_repo = AttributeDict(repo_name='repo_group/source_repo')
         user = User.get_by_username(self.request.GET.get('user')) or self._rhodecode_db_user
         # file/commit changes for PR update
         commit_changes = AttributeDict({
             'added': ['aaaaaaabbbbb', 'cccccccddddddd'],
             'removed': ['eeeeeeeeeee'],
         })
         file_changes = AttributeDict({
             'added': ['a/file1.md', 'file2.py'],
             'modified': ['b/modified_file.rst'],
             'removed': ['.idea'],
         })
 
         exc_traceback = {
             'exc_utc_date': '2020-03-26T12:54:50.683281',
             'exc_id': 139638856342656,
             'exc_timestamp': '1585227290.683288',
             'version': 'v1',
             'exc_message': 'Traceback (most recent call last):\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/tweens.py", line 41, in excview_tween\n    response = handler(request)\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/router.py", line 148, in handle_request\n    registry, request, context, context_iface, view_name\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/view.py", line 667, in _call_view\n    response = view_callable(context, request)\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/config/views.py", line 188, in attr_view\n    return view(context, request)\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/config/views.py", line 214, in predicate_wrapper\n    return view(context, request)\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/viewderivers.py", line 401, in viewresult_to_response\n    result = view(context, request)\n  File "/nix/store/s43k2r9rysfbzmsjdqnxgzvvb7zjhkxb-python2.7-pyramid-1.10.4/lib/python2.7/site-packages/pyramid/viewderivers.py", line 132, in _class_view\n    response = getattr(inst, attr)()\n  File "/mnt/hgfs/marcink/workspace/rhodecode-enterprise-ce/rhodecode/apps/debug_style/views.py", line 355, in render_email\n    template_type, **email_kwargs.get(email_id, {}))\n  File "/mnt/hgfs/marcink/workspace/rhodecode-enterprise-ce/rhodecode/model/notification.py", line 402, in render_email\n    body = email_template.render(None, **_kwargs)\n  File "/mnt/hgfs/marcink/workspace/rhodecode-enterprise-ce/rhodecode/lib/partial_renderer.py", line 95, in render\n    return self._render_with_exc(tmpl, args, kwargs)\n  File "/mnt/hgfs/marcink/workspace/rhodecode-enterprise-ce/rhodecode/lib/partial_renderer.py", line 79, in _render_with_exc\n    return render_func.render(*args, **kwargs)\n  File "/nix/store/dakh34sxz4yfr435c0cwjz0sd6hnd5g3-python2.7-mako-1.1.0/lib/python2.7/site-packages/mako/template.py", line 476, in render\n    return runtime._render(self, self.callable_, args, data)\n  File "/nix/store/dakh34sxz4yfr435c0cwjz0sd6hnd5g3-python2.7-mako-1.1.0/lib/python2.7/site-packages/mako/runtime.py", line 883, in _render\n    **_kwargs_for_callable(callable_, data)\n  File "/nix/store/dakh34sxz4yfr435c0cwjz0sd6hnd5g3-python2.7-mako-1.1.0/lib/python2.7/site-packages/mako/runtime.py", line 920, in _render_context\n    _exec_template(inherit, lclcontext, args=args, kwargs=kwargs)\n  File "/nix/store/dakh34sxz4yfr435c0cwjz0sd6hnd5g3-python2.7-mako-1.1.0/lib/python2.7/site-packages/mako/runtime.py", line 947, in _exec_template\n    callable_(context, *args, **kwargs)\n  File "rhodecode_templates_email_templates_base_mako", line 63, in render_body\n  File "rhodecode_templates_email_templates_exception_tracker_mako", line 43, in render_body\nAttributeError: \'str\' object has no attribute \'get\'\n',
             'exc_type': 'AttributeError'
         }
         email_kwargs = {
             'test': {},
             'message': {
                 'body': 'message body !'
             },
             'email_test': {
                 'user': user,
                 'date': datetime.datetime.now(),
             },
             'exception': {
                 'email_prefix': '[RHODECODE ERROR]',
                 'exc_id': exc_traceback['exc_id'],
                 'exc_url': 'http://server-url/{}'.format(exc_traceback['exc_id']),
                 'exc_type_name': 'NameError',
                 'exc_traceback': exc_traceback,
             },
             'password_reset': {
                 'password_reset_url': 'http://example.com/reset-rhodecode-password/token',
 
                 'user': user,
                 'date': datetime.datetime.now(),
                 'email': '[e-mail]',
                 'first_admin_email': User.get_first_super_admin().email
             },
             'password_reset_confirmation': {
                 'new_password': 'new-password-example',
                 'user': user,
                 'date': datetime.datetime.now(),
                 'email': '[e-mail]',
                 'first_admin_email': User.get_first_super_admin().email
             },
             'registration': {
                 'user': user,
                 'date': datetime.datetime.now(),
             },
 
             'pull_request_comment': {
                 'user': user,
 
                 'status_change': None,
                 'status_change_type': None,
 
                 'pull_request': pr,
                 'pull_request_commits': [],
 
                 'pull_request_target_repo': target_repo,
                 'pull_request_target_repo_url': 'http://target-repo/url',
 
                 'pull_request_source_repo': source_repo,
                 'pull_request_source_repo_url': 'http://source-repo/url',
 
                 'pull_request_url': 'http://localhost/pr1',
                 'pr_comment_url': 'http://comment-url',
                 'pr_comment_reply_url': 'http://comment-url#reply',
 
                 'comment_file': None,
                 'comment_line': None,
                 'comment_type': 'note',
                 'comment_body': 'This is my comment body. *I like !*',
                 'comment_id': 2048,
                 'renderer_type': 'markdown',
                 'mention': True,
 
             },
             'pull_request_comment+status': {
                 'user': user,
 
                 'status_change': 'approved',
                 'status_change_type': 'approved',
 
                 'pull_request': pr,
                 'pull_request_commits': [],
 
                 'pull_request_target_repo': target_repo,
                 'pull_request_target_repo_url': 'http://target-repo/url',
 
                 'pull_request_source_repo': source_repo,
                 'pull_request_source_repo_url': 'http://source-repo/url',
 
                 'pull_request_url': 'http://localhost/pr1',
                 'pr_comment_url': 'http://comment-url',
                 'pr_comment_reply_url': 'http://comment-url#reply',
 
                 'comment_type': 'todo',
                 'comment_file': None,
                 'comment_line': None,
                 'comment_body': '''
 I think something like this would be better
 
 ```py
+// markdown renderer
 
 def db():
    global connection
    return connection
 
 ```
                 
                 ''',
                 'comment_id': 2048,
                 'renderer_type': 'markdown',
                 'mention': True,
 
             },
             'pull_request_comment+file': {
                 'user': user,
 
                 'status_change': None,
                 'status_change_type': None,
 
                 'pull_request': pr,
                 'pull_request_commits': [],
 
                 'pull_request_target_repo': target_repo,
                 'pull_request_target_repo_url': 'http://target-repo/url',
 
                 'pull_request_source_repo': source_repo,
                 'pull_request_source_repo_url': 'http://source-repo/url',
 
                 'pull_request_url': 'http://localhost/pr1',
 
                 'pr_comment_url': 'http://comment-url',
                 'pr_comment_reply_url': 'http://comment-url#reply',
 
                 'comment_file': 'rhodecode/model/get_flow_commits',
                 'comment_line': 'o1210',
                 'comment_type': 'todo',
                 'comment_body': '''
 I like this !
 
-But please check this code::
+But please check this code
+
+.. code-block:: javascript
+
+  // THIS IS RST CODE
+
+  this.createResolutionComment = function(commentId) {
+    // hide the trigger text
+    $('#resolve-comment-{0}'.format(commentId)).hide();
     
-    def main():
-        print 'ok'
+    var comment = $('#comment-'+commentId);
+    var commentData = comment.data();
+    if (commentData.commentInline) {
+        this.createComment(comment, commentId)
+    } else {
+        Rhodecode.comments.createGeneralComment('general', "$placeholder", commentId)
+    }
+
+    return false;
+  };
 
 This should work better !
                 ''',
                 'comment_id': 2048,
                 'renderer_type': 'rst',
                 'mention': True,
 
             },
 
             'pull_request_update': {
                 'updating_user': user,
 
                 'status_change': None,
                 'status_change_type': None,
 
                 'pull_request': pr,
                 'pull_request_commits': [],
 
                 'pull_request_target_repo': target_repo,
                 'pull_request_target_repo_url': 'http://target-repo/url',
 
                 'pull_request_source_repo': source_repo,
                 'pull_request_source_repo_url': 'http://source-repo/url',
 
                 'pull_request_url': 'http://localhost/pr1',
 
                 # update comment links
                 'pr_comment_url': 'http://comment-url',
                 'pr_comment_reply_url': 'http://comment-url#reply',
                 'ancestor_commit_id': 'f39bd443',
                 'added_commits': commit_changes.added,
                 'removed_commits': commit_changes.removed,
                 'changed_files': (file_changes.added + file_changes.modified + file_changes.removed),
                 'added_files': file_changes.added,
                 'modified_files': file_changes.modified,
                 'removed_files': file_changes.removed,
             },
 
             'cs_comment': {
                 'user': user,
                 'commit': AttributeDict(idx=123, raw_id='a'*40, message='Commit message'),
                 'status_change': None,
                 'status_change_type': None,
 
                 'commit_target_repo_url': 'http://foo.example.com/#comment1',
                 'repo_name': 'test-repo',
                 'comment_type': 'note',
                 'comment_file': None,
                 'comment_line': None,
                 'commit_comment_url': 'http://comment-url',
                 'commit_comment_reply_url': 'http://comment-url#reply',
                 'comment_body': 'This is my comment body. *I like !*',
                 'comment_id': 2048,
                 'renderer_type': 'markdown',
                 'mention': True,
             },
             'cs_comment+status': {
                 'user': user,
                 'commit': AttributeDict(idx=123, raw_id='a' * 40, message='Commit message'),
                 'status_change': 'approved',
                 'status_change_type': 'approved',
 
                 'commit_target_repo_url': 'http://foo.example.com/#comment1',
                 'repo_name': 'test-repo',
                 'comment_type': 'note',
                 'comment_file': None,
                 'comment_line': None,
                 'commit_comment_url': 'http://comment-url',
                 'commit_comment_reply_url': 'http://comment-url#reply',
                 'comment_body': '''
 Hello **world**
 
 This is a multiline comment :)
 
 - list
 - list2
                 ''',
                 'comment_id': 2048,
                 'renderer_type': 'markdown',
                 'mention': True,
             },
             'cs_comment+file': {
                 'user': user,
                 'commit': AttributeDict(idx=123, raw_id='a' * 40, message='Commit message'),
                 'status_change': None,
                 'status_change_type': None,
 
                 'commit_target_repo_url': 'http://foo.example.com/#comment1',
                 'repo_name': 'test-repo',
 
                 'comment_type': 'note',
                 'comment_file': 'test-file.py',
                 'comment_line': 'n100',
 
                 'commit_comment_url': 'http://comment-url',
                 'commit_comment_reply_url': 'http://comment-url#reply',
                 'comment_body': 'This is my comment body. *I like !*',
                 'comment_id': 2048,
                 'renderer_type': 'markdown',
                 'mention': True,
             },
             
             'pull_request': {
                 'user': user,
                 'pull_request': pr,
                 'pull_request_commits': [
                     ('472d1df03bf7206e278fcedc6ac92b46b01c4e21', '''\
 my-account: moved email closer to profile as it's similar data just moved outside.                    
                     '''),
                     ('cbfa3061b6de2696c7161ed15ba5c6a0045f90a7', '''\
 users: description edit fixes
 
 - tests
 - added metatags info                    
                     '''),
                 ],
 
                 'pull_request_target_repo': target_repo,
                 'pull_request_target_repo_url': 'http://target-repo/url',
 
                 'pull_request_source_repo': source_repo,
                 'pull_request_source_repo_url': 'http://source-repo/url',
 
                 'pull_request_url': 'http://code.rhodecode.com/_pull-request/123',
             }
 
         }
 
         template_type = email_id.split('+')[0]
         (c.subject, c.headers, c.email_body,
          c.email_body_plaintext) = EmailNotificationModel().render_email(
             template_type, **email_kwargs.get(email_id, {}))
 
         test_email = self.request.GET.get('email')
         if test_email:
             recipients = [test_email]
             run_task(tasks.send_email, recipients, c.subject,
                      c.email_body_plaintext, c.email_body)
 
         if self.request.matched_route.name == 'debug_style_email_plain_rendered':
             template = 'debug_style/email_plain_rendered.mako'
         else:
             template = 'debug_style/email.mako'
         return render_to_response(
             template, self._get_template_context(c),
             request=self.request)
 
     @view_config(
         route_name='debug_style_template', request_method='GET',
         renderer=None)
     def template(self):
         t_path = self.request.matchdict['t_path']
         c = self.load_default_context()
         c.active = os.path.splitext(t_path)[0]
         c.came_from = ''
         c.email_types = {
             'cs_comment+file': {},
             'cs_comment+status': {},
 
             'pull_request_comment+file': {},
             'pull_request_comment+status': {},
 
             'pull_request_update': {},
         }
         c.email_types.update(EmailNotificationModel.email_types)
 
         return render_to_response(
             'debug_style/' + t_path, self._get_template_context(c),
             request=self.request)
 

rhodecode/templates/email_templates/base.mako

@@ -1,603 +1,642 b''
 ## -*- coding: utf-8 -*-
 
 ## helpers
 <%def name="tag_button(text, tag_type=None)">
 <%
 color_scheme = {
     'default': 'border:1px solid #979797;color:#666666;background-color:#f9f9f9',
     'approved': 'border:1px solid #0ac878;color:#0ac878;background-color:#f9f9f9',
     'rejected': 'border:1px solid #e85e4d;color:#e85e4d;background-color:#f9f9f9',
     'under_review': 'border:1px solid #ffc854;color:#ffc854;background-color:#f9f9f9',
 }
 
 css_style = ';'.join([
     'display:inline',
     'border-radius:2px',
     'font-size:12px',
     'padding:.2em',
 ])
 
 %>
     <pre style="${css_style}; ${color_scheme.get(tag_type, color_scheme['default'])}">${text}</pre>
 </%def>
 
 <%def name="status_text(text, tag_type=None)">
     <%
     color_scheme = {
         'default': 'color:#666666',
         'approved': 'color:#0ac878',
         'rejected': 'color:#e85e4d',
         'under_review': 'color:#ffc854',
     }
     %>
     <span style="font-weight:bold;font-size:12px;padding:.2em;${color_scheme.get(tag_type, color_scheme['default'])}">${text}</span>
 </%def>
 
 <%def name="gravatar_img(email, size=16)">
 <%
 css_style = ';'.join([
     'padding: 0',
     'margin: -4px 0',
     'border-radius: 50%',
     'box-sizing: content-box',
     'display: inline',
     'line-height: 1em',
     'min-width: 16px',
     'min-height: 16px',
 ])
 %>
 
 <img alt="gravatar" style="${css_style}" src="${h.gravatar_url(email, size)}" height="${size}" width="${size}">
 </%def>
 
 <%def name="link_css()">\
 <%
 css_style = ';'.join([
     'color:#427cc9',
     'text-decoration:none',
     'cursor:pointer'
 ])
 %>\
 ${css_style}\
 </%def>
 
 ## Constants
 <%
 text_regular = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, sans-serif"
 text_monospace = "'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace"
 
 %>
 
 ## headers we additionally can set for email
 <%def name="headers()" filter="n,trim"></%def>
 
 <%def name="plaintext_footer()" filter="trim">
 ${_('This is a notification from RhodeCode.')} ${instance_url}
 </%def>
 
 <%def name="body_plaintext()" filter="n,trim">
 ## this example is not called itself but overridden in each template
 ## the plaintext_footer should be at the bottom of both html and text emails
 ${self.plaintext_footer()}
 </%def>
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>${self.subject()}</title>
     <style type="text/css">
         /* Based on The MailChimp Reset INLINE: Yes. */
         #outlook a {
             padding: 0;
         }
 
         /* Force Outlook to provide a "view in browser" menu link. */
         body {
             width: 100% !important;
             -webkit-text-size-adjust: 100%;
             -ms-text-size-adjust: 100%;
             margin: 0;
             padding: 0;
             font-family: ${text_regular|n};
+            color: #000000;
         }
 
         /* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/
         .ExternalClass {
             width: 100%;
         }
 
         /* Force Hotmail to display emails at full width */
         .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
             line-height: 100%;
         }
 
         /* Forces Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */
         #backgroundTable {
             margin: 0;
             padding: 0;
             line-height: 100% !important;
         }
 
         /* End reset */
 
         /* defaults for images*/
         img {
             outline: none;
             text-decoration: none;
             -ms-interpolation-mode: bicubic;
         }
 
         a img {
             border: none;
         }
 
         .image_fix {
             display: block;
         }
 
         body {
             line-height: 1.2em;
         }
 
         p {
             margin: 0 0 20px;
         }
 
         h1, h2, h3, h4, h5, h6 {
             color: #323232 !important;
         }
 
         a {
             color: #427cc9;
             text-decoration: none;
             outline: none;
             cursor: pointer;
         }
 
         a:focus {
             outline: none;
         }
 
         a:hover {
             color: #305b91;
         }
 
         h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
             color: #427cc9 !important;
             text-decoration: none !important;
         }
 
         h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
             color: #305b91 !important;
         }
 
         h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
             color: #305b91 !important;
         }
 
         table {
             font-size: 13px;
             border-collapse: collapse;
             mso-table-lspace: 0pt;
             mso-table-rspace: 0pt;
         }
 
         table tr {
             display: table-row;
             vertical-align: inherit;
             border-color: inherit;
             border-spacing: 0 3px;
         }
 
         table td {
             padding: .65em 1em .65em 0;
             border-collapse: collapse;
             vertical-align: top;
             text-align: left;
         }
 
         input {
             display: inline;
             border-radius: 2px;
             border: 1px solid #dbd9da;
             padding: .5em;
         }
 
         input:focus {
             outline: 1px solid #979797
         }
 
         code {
             font-family: ${text_monospace|n};
+            white-space: pre-line !important;
+            color: #000000;
+        }
+
+        ul.changes-ul {
+            list-style: none;
+            list-style-type: none;
+            padding: 0;
+            margin: 10px 0;
+        }
+        ul.changes-ul li {
+            list-style: none;
+            list-style-type: none;
+            margin: 2px 0;
         }
 
         @media only screen and (-webkit-min-device-pixel-ratio: 2) {
             /* Put your iPhone 4g styles in here */
         }
 
         /* Android targeting */
         @media only screen and (-webkit-device-pixel-ratio:.75){
         /* Put CSS for low density (ldpi) Android layouts in here */
         }
         @media only screen and (-webkit-device-pixel-ratio:1){
         /* Put CSS for medium density (mdpi) Android layouts in here */
         }
         @media only screen and (-webkit-device-pixel-ratio:1.5){
         /* Put CSS for high density (hdpi) Android layouts in here */
         }
         /* end Android targeting */
 
         /** MARKDOWN styling **/
         div.markdown-block {
             clear: both;
             overflow: hidden;
             margin: 0;
             padding: 3px 5px 3px
         }
 
-        div.markdown-block h1, div.markdown-block h2, div.markdown-block h3, div.markdown-block h4, div.markdown-block h5, div.markdown-block h6 {
+        div.markdown-block h1,
+        div.markdown-block h2,
+        div.markdown-block h3,
+        div.markdown-block h4,
+        div.markdown-block h5,
+        div.markdown-block h6 {
             border-bottom: none !important;
             padding: 0 !important;
             overflow: visible !important
         }
 
-        div.markdown-block h1, div.markdown-block h2 {
+        div.markdown-block h1,
+        div.markdown-block h2 {
             border-bottom: 1px #e6e5e5 solid !important
         }
 
         div.markdown-block h1 {
             font-size: 32px;
             margin: 15px 0 15px 0 !important;
             padding-bottom: 5px !important
         }
 
         div.markdown-block h2 {
             font-size: 24px !important;
             margin: 34px 0 10px 0 !important;
             padding-top: 15px !important;
             padding-bottom: 8px !important
         }
 
         div.markdown-block h3 {
             font-size: 18px !important;
             margin: 30px 0 8px 0 !important;
             padding-bottom: 2px !important
         }
 
         div.markdown-block h4 {
             font-size: 13px !important;
             margin: 18px 0 3px 0 !important
         }
 
         div.markdown-block h5 {
             font-size: 12px !important;
             margin: 15px 0 3px 0 !important
         }
 
         div.markdown-block h6 {
             font-size: 12px;
             color: #777777;
             margin: 15px 0 3px 0 !important
         }
 
         div.markdown-block hr {
             border: 0;
             color: #e6e5e5;
             background-color: #e6e5e5;
             height: 3px;
             margin-bottom: 13px
         }
 
-        div.markdown-block ol, div.markdown-block ul, div.markdown-block p, div.markdown-block blockquote, div.markdown-block dl, div.markdown-block li, div.markdown-block table {
+        div.markdown-block ol,
+        div.markdown-block ul,
+        div.markdown-block p,
+        div.markdown-block blockquote,
+        div.markdown-block dl,
+        div.markdown-block li,
+        div.markdown-block table {
             margin: 3px 0 13px 0 !important;
             color: #424242 !important;
             font-size: 13px !important;
             font-family: ${text_regular|n};
             font-weight: normal !important;
             overflow: visible !important;
             line-height: 140% !important
         }
 
         div.markdown-block pre {
             margin: 3px 0 13px 0 !important;
             padding: .5em;
             color: #424242 !important;
             font-size: 13px !important;
             overflow: visible !important;
             line-height: 140% !important;
             background-color: #F5F5F5
         }
 
         div.markdown-block img {
             border-style: none;
             background-color: #fff;
             padding-right: 20px;
             max-width: 100%
         }
 
         div.markdown-block strong {
             font-weight: 600;
             margin: 0
         }
 
         div.markdown-block ul.checkbox, div.markdown-block ol.checkbox {
             padding-left: 20px !important;
             margin-top: 0 !important;
             margin-bottom: 18px !important
         }
 
         div.markdown-block ul, div.markdown-block ol {
             padding-left: 30px !important;
             margin-top: 0 !important;
             margin-bottom: 18px !important
         }
 
         div.markdown-block ul.checkbox li, div.markdown-block ol.checkbox li {
             list-style: none !important;
             margin: 6px !important;
             padding: 0 !important
         }
 
         div.markdown-block ul li, div.markdown-block ol li {
             list-style: disc !important;
             margin: 6px !important;
             padding: 0 !important
         }
 
         div.markdown-block ol li {
             list-style: decimal !important
         }
 
         div.markdown-block #message {
             -webkit-border-radius: 2px;
             -moz-border-radius: 2px;
             border-radius: 2px;
             border: 1px solid #dbd9da;
             display: block;
             width: 100%;
             height: 60px;
             margin: 6px 0
         }
 
         div.markdown-block button, div.markdown-block #ws {
             font-size: 13px;
             padding: 4px 6px;
             -webkit-border-radius: 2px;
             -moz-border-radius: 2px;
             border-radius: 2px;
             border: 1px solid #dbd9da;
             background-color: #eeeeee
         }
 
-        div.markdown-block code, div.markdown-block pre, div.markdown-block #ws, div.markdown-block #message {
+        div.markdown-block code,
+        div.markdown-block pre,
+        div.markdown-block #ws,
+        div.markdown-block #message {
             font-family: ${text_monospace|n};
             font-size: 11px;
             -webkit-border-radius: 2px;
             -moz-border-radius: 2px;
             border-radius: 2px;
-            background-color: white;
+            background-color: #FFFFFF;
             color: #7E7F7F
         }
 
         div.markdown-block code {
-            border: 1px solid #eeeeee;
+            border: 1px solid #7E7F7F;
             margin: 0 2px;
             padding: 0 5px
         }
 
         div.markdown-block pre {
-            border: 1px solid #dbd9da;
+            border: 1px solid #7E7F7F;
             overflow: auto;
             padding: .5em;
-            background-color: #F5F5F5
+            background-color: #FFFFFF;
         }
 
         div.markdown-block pre > code {
             border: 0;
             margin: 0;
             padding: 0
         }
 
         div.rst-block {
             clear: both;
             overflow: hidden;
             margin: 0;
             padding: 3px 5px 3px
         }
 
         div.rst-block h2 {
             font-weight: normal
         }
 
-        div.rst-block h1, div.rst-block h2, div.rst-block h3, div.rst-block h4, div.rst-block h5, div.rst-block h6 {
+        div.rst-block h1,
+        div.rst-block h2,
+        div.rst-block h3,
+        div.rst-block h4,
+        div.rst-block h5,
+        div.rst-block h6 {
             border-bottom: 0 !important;
             margin: 0 !important;
             padding: 0 !important;
             line-height: 1.5em !important
         }
 
         div.rst-block h1:first-child {
             padding-top: .25em !important
         }
 
         div.rst-block h2, div.rst-block h3 {
             margin: 1em 0 !important
         }
 
         div.rst-block h1, div.rst-block h2 {
             border-bottom: 1px #e6e5e5 solid !important
         }
 
         div.rst-block h2 {
             margin-top: 1.5em !important;
             padding-top: .5em !important
         }
 
         div.rst-block p {
             color: black !important;
             margin: 1em 0 !important;
             line-height: 1.5em !important
         }
 
         div.rst-block ul {
             list-style: disc !important;
             margin: 1em 0 1em 2em !important;
             clear: both
         }
 
         div.rst-block ol {
             list-style: decimal;
             margin: 1em 0 1em 2em !important
         }
 
         div.rst-block pre, div.rst-block code {
             font: 12px "Bitstream Vera Sans Mono", "Courier", monospace
         }
 
         div.rst-block code {
             font-size: 12px !important;
             background-color: ghostWhite !important;
             color: #444 !important;
             padding: 0 .2em !important;
-            border: 1px solid #dedede !important
+            border: 1px solid #7E7F7F !important
         }
 
         div.rst-block pre code {
             padding: 0 !important;
             font-size: 12px !important;
             background-color: #eee !important;
             border: none !important
         }
 
         div.rst-block pre {
             margin: 1em 0;
             padding: 15px;
-            border: 1px solid #eeeeee;
+            border: 1px solid #7E7F7F;
             -webkit-border-radius: 2px;
             -moz-border-radius: 2px;
             border-radius: 2px;
             overflow: auto;
             font-size: 12px;
             color: #444;
-            background-color: #F5F5F5
+            background-color: #FFFFFF;
+        }
+
+        .clear-both {
+            clear:both;
         }
 
         /*elasticmatch is custom rhodecode tag*/
         .codehilite .c-ElasticMatch {
                 background-color: #faffa6;
                 padding: 0.2em;
         }
 
         .codehilite .c-ElasticMatch { background-color: #faffa6; padding: 0.2em;}
         .codehilite .hll { background-color: #ffffcc }
         .codehilite .c { color: #408080; font-style: italic } /* Comment */
         .codehilite .err { border: none } /* Error */
         .codehilite .k { color: #008000; font-weight: bold } /* Keyword */
         .codehilite .o { color: #666666 } /* Operator */
         .codehilite .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
         .codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */
         .codehilite .cp { color: #BC7A00 } /* Comment.Preproc */
         .codehilite .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
         .codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */
         .codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */
         .codehilite .gd { color: #A00000 } /* Generic.Deleted */
         .codehilite .ge { font-style: italic } /* Generic.Emph */
         .codehilite .gr { color: #FF0000 } /* Generic.Error */
         .codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
         .codehilite .gi { color: #00A000 } /* Generic.Inserted */
         .codehilite .go { color: #888888 } /* Generic.Output */
         .codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
         .codehilite .gs { font-weight: bold } /* Generic.Strong */
         .codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
         .codehilite .gt { color: #0044DD } /* Generic.Traceback */
         .codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
         .codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
         .codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
         .codehilite .kp { color: #008000 } /* Keyword.Pseudo */
         .codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
         .codehilite .kt { color: #B00040 } /* Keyword.Type */
         .codehilite .m { color: #666666 } /* Literal.Number */
         .codehilite .s { color: #BA2121 } /* Literal.String */
         .codehilite .na { color: #7D9029 } /* Name.Attribute */
         .codehilite .nb { color: #008000 } /* Name.Builtin */
         .codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */
         .codehilite .no { color: #880000 } /* Name.Constant */
         .codehilite .nd { color: #AA22FF } /* Name.Decorator */
         .codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */
         .codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
         .codehilite .nf { color: #0000FF } /* Name.Function */
         .codehilite .nl { color: #A0A000 } /* Name.Label */
         .codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
         .codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
         .codehilite .nv { color: #19177C } /* Name.Variable */
         .codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
         .codehilite .w { color: #bbbbbb } /* Text.Whitespace */
         .codehilite .mb { color: #666666 } /* Literal.Number.Bin */
         .codehilite .mf { color: #666666 } /* Literal.Number.Float */
         .codehilite .mh { color: #666666 } /* Literal.Number.Hex */
         .codehilite .mi { color: #666666 } /* Literal.Number.Integer */
         .codehilite .mo { color: #666666 } /* Literal.Number.Oct */
         .codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
         .codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
         .codehilite .sc { color: #BA2121 } /* Literal.String.Char */
         .codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
         .codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
         .codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
         .codehilite .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
         .codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
         .codehilite .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
         .codehilite .sx { color: #008000 } /* Literal.String.Other */
         .codehilite .sr { color: #BB6688 } /* Literal.String.Regex */
         .codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
         .codehilite .ss { color: #19177C } /* Literal.String.Symbol */
         .codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
         .codehilite .fm { color: #0000FF } /* Name.Function.Magic */
         .codehilite .vc { color: #19177C } /* Name.Variable.Class */
         .codehilite .vg { color: #19177C } /* Name.Variable.Global */
         .codehilite .vi { color: #19177C } /* Name.Variable.Instance */
         .codehilite .vm { color: #19177C } /* Name.Variable.Magic */
         .codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */
 
     </style>
 
 </head>
 <body>
 
 <div>
 <!-- Wrapper/Container Table: Use a wrapper table to control the width and the background color consistently of your email. Use this approach instead of setting attributes on the body tag. -->
 <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="left" style="margin:1%;width:97%;padding:0;font-family:${text_regular|n};font-weight:100;border:1px solid #dbd9da">
     <tr>
         <td valign="top" style="padding:0;">
             <table cellpadding="0" cellspacing="0" border="0" align="left" width="100%">
                 <tr>
                     <td style="width:100%;padding:10px 15px;background-color:#202020" valign="top">
                         <a style="color:#eeeeee;text-decoration:none;" href="${instance_url}">
                             ${_('RhodeCode')}
                             % if rhodecode_instance_name:
                                 - ${rhodecode_instance_name}
                             % endif
                         </a>
                     </td>
                 </tr>
-                <tr>
+                <tr style="background-color: #fff">
                     <td style="padding:15px;" valign="top">${self.body()}</td>
                 </tr>
             </table>
         </td>
     </tr>
 </table>  
 <!-- End of wrapper table -->
 </div>
 
 <div style="width:100%; clear: both; height: 1px">&nbsp;</div>
 
 <div style="margin-left:1%;font-weight:100;font-size:11px;color:#666666;text-decoration:none;font-family:${text_monospace};">
     ${_('This is a notification from RhodeCode.')}
     <a style="font-weight:100;font-size:11px;color:#666666;text-decoration:none;font-family:${text_monospace};" href="${instance_url}">
         ${instance_url}
     </a>
 </div>
 </body>
 </html>

rhodecode/templates/email_templates/commit_comment.mako

@@ -1,170 +1,172 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="base.mako"/>
 <%namespace name="base" file="base.mako"/>
 
 ## EMAIL SUBJECT
 <%def name="subject()" filter="n,trim,whitespace_filter">
 <%
 data = {
     'user': '@'+h.person(user),
     'repo_name': repo_name,
     'status': status_change,
     'comment_file': comment_file,
     'comment_line': comment_line,
     'comment_type': comment_type,
     'comment_id': comment_id,
 
     'commit_id': h.show_id(commit),
 }
 %>
 
 
 % if comment_file:
     ${(_('[mention]') if mention else '')} ${_('{user} left a {comment_type} on file `{comment_file}` in commit `{commit_id}`').format(**data)} ${_('in the `{repo_name}` repository').format(**data) |n}
 % else:
     % if status_change:
     ${(_('[mention]') if mention else '')} ${_('[status: {status}] {user} left a {comment_type} on commit `{commit_id}`').format(**data) |n} ${_('in the `{repo_name}` repository').format(**data) |n}
     % else:
     ${(_('[mention]') if mention else '')} ${_('{user} left a {comment_type} on commit `{commit_id}`').format(**data) |n} ${_('in the `{repo_name}` repository').format(**data) |n}
     % endif
 % endif
 
 </%def>
 
 ## PLAINTEXT VERSION OF BODY
 <%def name="body_plaintext()" filter="n,trim">
 <%
 data = {
     'user': h.person(user),
     'repo_name': repo_name,
     'status': status_change,
     'comment_file': comment_file,
     'comment_line': comment_line,
     'comment_type': comment_type,
     'comment_id': comment_id,
 
     'commit_id': h.show_id(commit),
 }
 %>
 
 * ${_('Comment link')}: ${commit_comment_url}
 
 %if status_change:
 * ${_('Commit status')}: ${_('Status was changed to')}: *${status_change}*
 
 %endif
 * ${_('Commit')}: ${h.show_id(commit)}
 
 * ${_('Commit message')}: ${commit.message}
 
 %if comment_file:
 * ${_('File: {comment_file} on line {comment_line}').format(**data)}
 
 %endif
 % if comment_type == 'todo':
 ${('Inline' if comment_file else 'General')} ${_('`TODO` number')} ${comment_id}:
 % else:
 ${('Inline' if comment_file else 'General')} ${_('`Note` number')} ${comment_id}:
 % endif
 
 ${comment_body |n, trim}
 
 ---
 ${self.plaintext_footer()}
 </%def>
 
 
 <%
 data = {
     'user': h.person(user),
     'comment_file': comment_file,
     'comment_line': comment_line,
     'comment_type': comment_type,
     'comment_id': comment_id,
     'renderer_type': renderer_type or 'plain',
 
     'repo': commit_target_repo_url,
     'repo_name': repo_name,
     'commit_id': h.show_id(commit),
 }
 %>
 
+## header
 <table style="text-align:left;vertical-align:middle;width: 100%">
     <tr>
     <td style="width:100%;border-bottom:1px solid #dbd9da;">
 
-        <h4 style="margin: 0">
-            <div style="margin-bottom: 4px">
+        <div style="margin: 0; font-weight: bold">
+            <div class="clear-both" style="margin-bottom: 4px">
                 <span style="color:#7E7F7F">@${h.person(user.username)}</span>
                 ${_('left a')}
                 <a href="${commit_comment_url}" style="${base.link_css()}">
                     % if comment_file:
                         ${_('{comment_type} on file `{comment_file}` in commit.').format(**data)}
                     % else:
                         ${_('{comment_type} on commit.').format(**data) |n}
                     % endif
                 </a>
             </div>
             <div style="margin-top: 10px"></div>
             ${_('Commit')} <code>${data['commit_id']}</code> ${_('of repository')}: ${data['repo_name']}
-        </h4>
+        </div>
 
     </td>
     </tr>
 
 </table>
-
+<div class="clear-both"></div>
+## main body
 <table style="text-align:left;vertical-align:middle;width: 100%">
 
     ## spacing def
     <tr>
         <td style="width: 130px"></td>
         <td></td>
     </tr>
 
     % if status_change:
         <tr>
             <td style="padding-right:20px;">${_('Commit Status')}:</td>
             <td>
                 ${_('Status was changed to')}: ${base.status_text(status_change, tag_type=status_change_type)}
             </td>
         </tr>
     % endif
 
     <tr>
         <td style="padding-right:20px;">${_('Commit')}:</td>
         <td>
             <a href="${commit_comment_url}" style="${base.link_css()}">${h.show_id(commit)}</a>
         </td>
     </tr>
     <tr>
         <td style="padding-right:20px;">${_('Commit message')}:</td>
         <td style="white-space:pre-wrap">${h.urlify_commit_message(commit.message, repo_name)}</td>
     </tr>
 
     % if comment_file:
         <tr>
             <td style="padding-right:20px;">${_('File')}:</td>
             <td><a href="${commit_comment_url}" style="${base.link_css()}">${_('`{comment_file}` on line {comment_line}').format(**data)}</a></td>
         </tr>
     % endif
 
     <tr style="border-bottom:1px solid #dbd9da;">
         <td colspan="2" style="padding-right:20px;">
             % if comment_type == 'todo':
                 ${('Inline' if comment_file else 'General')} ${_('`TODO` number')} ${comment_id}:
             % else:
                 ${('Inline' if comment_file else 'General')} ${_('`Note` number')} ${comment_id}:
             % endif
         </td>
     </tr>
 
     <tr>
         <td colspan="2" style="background: #F7F7F7">${h.render(comment_body, renderer=data['renderer_type'], mentions=True)}</td>
     </tr>
 
     <tr>
         <td><a href="${commit_comment_reply_url}">${_('Reply')}</a></td>
         <td></td>
     </tr>
 </table>

rhodecode/templates/email_templates/pull_request_comment.mako

@@ -1,201 +1,203 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="base.mako"/>
 <%namespace name="base" file="base.mako"/>
 
 ## EMAIL SUBJECT
 <%def name="subject()" filter="n,trim,whitespace_filter">
 <%
 data = {
     'user': '@'+h.person(user),
     'repo_name': repo_name,
     'status': status_change,
     'comment_file': comment_file,
     'comment_line': comment_line,
     'comment_type': comment_type,
     'comment_id': comment_id,
 
     'pr_title': pull_request.title,
     'pr_id': pull_request.pull_request_id,
 }
 %>
 
 
 % if comment_file:
     ${(_('[mention]') if mention else '')} ${_('{user} left a {comment_type} on file `{comment_file}` in pull request !{pr_id}: "{pr_title}"').format(**data) |n}
 % else:
     % if status_change:
     ${(_('[mention]') if mention else '')} ${_('[status: {status}] {user} left a {comment_type} on pull request !{pr_id}: "{pr_title}"').format(**data) |n}
     % else:
     ${(_('[mention]') if mention else '')} ${_('{user} left a {comment_type} on pull request !{pr_id}: "{pr_title}"').format(**data) |n}
     % endif
 % endif
 
 </%def>
 
 ## PLAINTEXT VERSION OF BODY
 <%def name="body_plaintext()" filter="n,trim">
 <%
 data = {
     'user': h.person(user),
     'repo_name': repo_name,
     'status': status_change,
     'comment_file': comment_file,
     'comment_line': comment_line,
     'comment_type': comment_type,
     'comment_id': comment_id,
 
     'pr_title': pull_request.title,
     'pr_id': pull_request.pull_request_id,
     'source_ref_type': pull_request.source_ref_parts.type,
     'source_ref_name': pull_request.source_ref_parts.name,
     'target_ref_type': pull_request.target_ref_parts.type,
     'target_ref_name': pull_request.target_ref_parts.name,
     'source_repo': pull_request_source_repo.repo_name,
     'target_repo': pull_request_target_repo.repo_name,
     'source_repo_url': pull_request_source_repo_url,
     'target_repo_url': pull_request_target_repo_url,
 }
 %>
 
 * ${_('Comment link')}: ${pr_comment_url}
 
 * ${_('Pull Request')}: !${pull_request.pull_request_id}
 
 * ${h.literal(_('Commit flow: {source_ref_type}:{source_ref_name} of {source_repo_url} into {target_ref_type}:{target_ref_name} of {target_repo_url}').format(**data))}
 
 %if status_change and not closing_pr:
 * ${_('{user} submitted pull request !{pr_id} status: *{status}*').format(**data)}
 
 %elif status_change and closing_pr:
 * ${_('{user} submitted pull request !{pr_id} status: *{status} and closed*').format(**data)}
 
 %endif
 %if comment_file:
 * ${_('File: {comment_file} on line {comment_line}').format(**data)}
 
 %endif
 % if comment_type == 'todo':
 ${('Inline' if comment_file else 'General')} ${_('`TODO` number')} ${comment_id}:
 % else:
 ${('Inline' if comment_file else 'General')} ${_('`Note` number')} ${comment_id}:
 % endif
 
 ${comment_body |n, trim}
 
 ---
 ${self.plaintext_footer()}
 </%def>
 
 
 <%
 data = {
     'user': h.person(user),
     'comment_file': comment_file,
     'comment_line': comment_line,
     'comment_type': comment_type,
     'comment_id': comment_id,
     'renderer_type': renderer_type or 'plain',
 
     'pr_title': pull_request.title,
     'pr_id': pull_request.pull_request_id,
     'status': status_change,
     'source_ref_type': pull_request.source_ref_parts.type,
     'source_ref_name': pull_request.source_ref_parts.name,
     'target_ref_type': pull_request.target_ref_parts.type,
     'target_ref_name': pull_request.target_ref_parts.name,
     'source_repo': pull_request_source_repo.repo_name,
     'target_repo': pull_request_target_repo.repo_name,
     'source_repo_url': h.link_to(pull_request_source_repo.repo_name, pull_request_source_repo_url),
     'target_repo_url': h.link_to(pull_request_target_repo.repo_name, pull_request_target_repo_url),
 }
 %>
 
+## header
 <table style="text-align:left;vertical-align:middle;width: 100%">
     <tr>
     <td style="width:100%;border-bottom:1px solid #dbd9da;">
 
-        <h4 style="margin: 0">
-            <div style="margin-bottom: 4px">
+        <div style="margin: 0; font-weight: bold">
+            <div class="clear-both" style="margin-bottom: 4px">
                 <span style="color:#7E7F7F">@${h.person(user.username)}</span>
                 ${_('left a')}
                 <a href="${pr_comment_url}" style="${base.link_css()}">
                     % if comment_file:
                         ${_('{comment_type} on file `{comment_file}` in pull request.').format(**data)}
                     % else:
                         ${_('{comment_type} on pull request.').format(**data) |n}
                     % endif
                 </a>
             </div>
             <div style="margin-top: 10px"></div>
             ${_('Pull request')} <code>!${data['pr_id']}: ${data['pr_title']}</code>
-        </h4>
+        </div>
 
     </td>
     </tr>
 
 </table>
-
+<div class="clear-both"></div>
+## main body
 <table style="text-align:left;vertical-align:middle;width: 100%">
 
     ## spacing def
     <tr>
         <td style="width: 130px"></td>
         <td></td>
     </tr>
 
     % if status_change:
     <tr>
         <td style="padding-right:20px;">${_('Review Status')}:</td>
         <td>
             % if closing_pr:
                ${_('Closed pull request with status')}: ${base.status_text(status_change, tag_type=status_change_type)}
             % else:
                ${_('Submitted review status')}: ${base.status_text(status_change, tag_type=status_change_type)}
             % endif
         </td>
     </tr>
     % endif
     <tr>
         <td style="padding-right:20px;">${_('Pull request')}:</td>
         <td>
             <a href="${pull_request_url}" style="${base.link_css()}">
             !${pull_request.pull_request_id}
             </a>
         </td>
     </tr>
 
     <tr>
         <td style="padding-right:20px;line-height:20px;">${_('Commit Flow')}:</td>
         <td style="line-height:20px;">
             <code>${'{}:{}'.format(data['source_ref_type'], pull_request.source_ref_parts.name)}</code> ${_('of')} ${data['source_repo_url']}
             &rarr;
             <code>${'{}:{}'.format(data['target_ref_type'], pull_request.target_ref_parts.name)}</code> ${_('of')}  ${data['target_repo_url']}
         </td>
     </tr>
 
     % if comment_file:
         <tr>
             <td style="padding-right:20px;">${_('File')}:</td>
             <td><a href="${pr_comment_url}" style="${base.link_css()}">${_('`{comment_file}` on line {comment_line}').format(**data)}</a></td>
         </tr>
     % endif
 
     <tr style="border-bottom:1px solid #dbd9da;">
         <td colspan="2" style="padding-right:20px;">
             % if comment_type == 'todo':
                 ${('Inline' if comment_file else 'General')} ${_('`TODO` number')} ${comment_id}:
             % else:
                 ${('Inline' if comment_file else 'General')} ${_('`Note` number')} ${comment_id}:
             % endif
         </td>
     </tr>
 
     <tr>
         <td colspan="2" style="background: #F7F7F7">${h.render(comment_body, renderer=data['renderer_type'], mentions=True)}</td>
     </tr>
 
     <tr>
         <td><a href="${pr_comment_reply_url}">${_('Reply')}</a></td>
         <td></td>
     </tr>
 </table>

rhodecode/templates/email_templates/pull_request_review.mako

@@ -1,143 +1,144 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="base.mako"/>
 <%namespace name="base" file="base.mako"/>
 
 ## EMAIL SUBJECT
 <%def name="subject()" filter="n,trim,whitespace_filter">
 <%
 data = {
     'user': '@'+h.person(user),
     'pr_id': pull_request.pull_request_id,
     'pr_title': pull_request.title,
 }
 %>
 
 ${_('{user} requested a pull request review. !{pr_id}: "{pr_title}"').format(**data) |n}
 </%def>
 
 ## PLAINTEXT VERSION OF BODY
 <%def name="body_plaintext()" filter="n,trim">
 <%
 data = {
     'user': h.person(user),
     'pr_id': pull_request.pull_request_id,
     'pr_title': pull_request.title,
     'source_ref_type': pull_request.source_ref_parts.type,
     'source_ref_name': pull_request.source_ref_parts.name,
     'target_ref_type': pull_request.target_ref_parts.type,
     'target_ref_name': pull_request.target_ref_parts.name,
     'repo_url': pull_request_source_repo_url,
     'source_repo': pull_request_source_repo.repo_name,
     'target_repo': pull_request_target_repo.repo_name,
     'source_repo_url': pull_request_source_repo_url,
     'target_repo_url': pull_request_target_repo_url,
 }
 %>
 
 * ${_('Pull Request link')}: ${pull_request_url}
 
 * ${h.literal(_('Commit flow: {source_ref_type}:{source_ref_name} of {source_repo_url} into {target_ref_type}:{target_ref_name} of {target_repo_url}').format(**data))}
 
 * ${_('Title')}: ${pull_request.title}
 
 * ${_('Description')}:
 
 ${pull_request.description | trim}
 
 
 * ${_ungettext('Commit (%(num)s)', 'Commits (%(num)s)', len(pull_request_commits) ) % {'num': len(pull_request_commits)}}:
 
 % for commit_id, message in pull_request_commits:
     - ${h.short_id(commit_id)}
       ${h.chop_at_smart(message, '\n', suffix_if_chopped='...')}
 
 % endfor
 
 ---
 ${self.plaintext_footer()}
 </%def>
 <%
 data = {
     'user': h.person(user),
     'pr_id': pull_request.pull_request_id,
     'pr_title': pull_request.title,
     'source_ref_type': pull_request.source_ref_parts.type,
     'source_ref_name': pull_request.source_ref_parts.name,
     'target_ref_type': pull_request.target_ref_parts.type,
     'target_ref_name': pull_request.target_ref_parts.name,
     'repo_url': pull_request_source_repo_url,
     'source_repo': pull_request_source_repo.repo_name,
     'target_repo': pull_request_target_repo.repo_name,
     'source_repo_url': h.link_to(pull_request_source_repo.repo_name, pull_request_source_repo_url),
     'target_repo_url': h.link_to(pull_request_target_repo.repo_name, pull_request_target_repo_url),
 }
 %>
-
+## header
 <table style="text-align:left;vertical-align:middle;width: 100%">
     <tr>
     <td style="width:100%;border-bottom:1px solid #dbd9da;">
 
-        <h4 style="margin: 0">
-            <div style="margin-bottom: 4px">
+        <div style="margin: 0; font-weight: bold">
+            <div class="clear-both" class="clear-both" style="margin-bottom: 4px">
                 <span style="color:#7E7F7F">@${h.person(user.username)}</span>
                 ${_('requested a')}
                 <a href="${pull_request_url}" style="${base.link_css()}">
                 ${_('pull request review.').format(**data) }
                 </a>
             </div>
             <div style="margin-top: 10px"></div>
             ${_('Pull request')} <code>!${data['pr_id']}: ${data['pr_title']}</code>
-        </h4>
+        </div>
 
     </td>
     </tr>
 
 </table>
-
+<div class="clear-both"></div>
+## main body
 <table style="text-align:left;vertical-align:middle;width: 100%">
     ## spacing def
     <tr>
         <td style="width: 130px"></td>
         <td></td>
     </tr>
 
     <tr>
         <td style="padding-right:20px;">${_('Pull request')}:</td>
         <td>
             <a href="${pull_request_url}" style="${base.link_css()}">
             !${pull_request.pull_request_id}
             </a>
         </td>
     </tr>
 
     <tr>
         <td style="padding-right:20px;line-height:20px;">${_('Commit Flow')}:</td>
         <td style="line-height:20px;">
             <code>${'{}:{}'.format(data['source_ref_type'], pull_request.source_ref_parts.name)}</code> ${_('of')} ${data['source_repo_url']}
             &rarr;
             <code>${'{}:{}'.format(data['target_ref_type'], pull_request.target_ref_parts.name)}</code> ${_('of')}  ${data['target_repo_url']}
         </td>
     </tr>
 
     <tr>
         <td style="padding-right:20px;">${_('Description')}:</td>
         <td style="white-space:pre-wrap"><code>${pull_request.description | trim}</code></td>
     </tr>
     <tr>
         <td style="padding-right:20px;">${_ungettext('Commit (%(num)s)', 'Commits (%(num)s)', len(pull_request_commits)) % {'num': len(pull_request_commits)}}:</td>
         <td></td>
     </tr>
 
     <tr>
         <td colspan="2">
             <ol style="margin:0 0 0 1em;padding:0;text-align:left;">
                 % for commit_id, message in pull_request_commits:
                     <li style="margin:0 0 1em;">
                         <pre style="margin:0 0 .5em"><a href="${h.route_path('repo_commit', repo_name=pull_request_source_repo.repo_name, commit_id=commit_id)}" style="${base.link_css()}">${h.short_id(commit_id)}</a></pre>
                         ${h.chop_at_smart(message, '\n', suffix_if_chopped='...')}
                     </li>
                 % endfor
             </ol>
         </td>
     </tr>
 </table>

rhodecode/templates/email_templates/pull_request_update.mako

@@ -1,164 +1,170 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="base.mako"/>
 <%namespace name="base" file="base.mako"/>
 
 ## EMAIL SUBJECT
 <%def name="subject()" filter="n,trim,whitespace_filter">
 <%
 data = {
     'updating_user': '@'+h.person(updating_user),
     'pr_id': pull_request.pull_request_id,
     'pr_title': pull_request.title,
 }
 %>
 
 ${_('{updating_user} updated pull request. !{pr_id}: "{pr_title}"').format(**data) |n}
 </%def>
 
 ## PLAINTEXT VERSION OF BODY
 <%def name="body_plaintext()" filter="n,trim">
 <%
 data = {
     'updating_user': h.person(updating_user),
     'pr_id': pull_request.pull_request_id,
     'pr_title': pull_request.title,
     'source_ref_type': pull_request.source_ref_parts.type,
     'source_ref_name': pull_request.source_ref_parts.name,
     'target_ref_type': pull_request.target_ref_parts.type,
     'target_ref_name': pull_request.target_ref_parts.name,
     'repo_url': pull_request_source_repo_url,
     'source_repo': pull_request_source_repo.repo_name,
     'target_repo': pull_request_target_repo.repo_name,
     'source_repo_url': pull_request_source_repo_url,
     'target_repo_url': pull_request_target_repo_url,
 }
 %>
 
 * ${_('Pull Request link')}: ${pull_request_url}
 
 * ${h.literal(_('Commit flow: {source_ref_type}:{source_ref_name} of {source_repo_url} into {target_ref_type}:{target_ref_name} of {target_repo_url}').format(**data))}
 
 * ${_('Title')}: ${pull_request.title}
 
 * ${_('Description')}:
 
 ${pull_request.description | trim}
 
 * Changed commits:
 
  - Added: ${len(added_commits)}
  - Removed: ${len(removed_commits)}
 
 * Changed files:
 
 %if not changed_files:
  No file changes found
 %else:
 %for file_name in added_files:
  - A `${file_name}`
 %endfor
 %for file_name in modified_files:
  - M `${file_name}`
 %endfor
 %for file_name in removed_files:
  - R `${file_name}`
 %endfor
 %endif
 
 ---
 ${self.plaintext_footer()}
 </%def>
 <%
 data = {
     'updating_user': h.person(updating_user),
     'pr_id': pull_request.pull_request_id,
     'pr_title': pull_request.title,
     'source_ref_type': pull_request.source_ref_parts.type,
     'source_ref_name': pull_request.source_ref_parts.name,
     'target_ref_type': pull_request.target_ref_parts.type,
     'target_ref_name': pull_request.target_ref_parts.name,
     'repo_url': pull_request_source_repo_url,
     'source_repo': pull_request_source_repo.repo_name,
     'target_repo': pull_request_target_repo.repo_name,
     'source_repo_url': h.link_to(pull_request_source_repo.repo_name, pull_request_source_repo_url),
     'target_repo_url': h.link_to(pull_request_target_repo.repo_name, pull_request_target_repo_url),
 }
 %>
 
+## header
 <table style="text-align:left;vertical-align:middle;width: 100%">
     <tr>
     <td style="width:100%;border-bottom:1px solid #dbd9da;">
 
-        <h4 style="margin: 0">
-            <div style="margin-bottom: 4px">
+        <div style="margin: 0; font-weight: bold">
+            <div class="clear-both" style="margin-bottom: 4px">
                 <span style="color:#7E7F7F">@${h.person(updating_user.username)}</span>
                 ${_('updated')}
                 <a href="${pull_request_url}" style="${base.link_css()}">
                 ${_('pull request.').format(**data) }
                 </a>
             </div>
             <div style="margin-top: 10px"></div>
             ${_('Pull request')} <code>!${data['pr_id']}: ${data['pr_title']}</code>
-        </h4>
+        </div>
 
     </td>
     </tr>
 
 </table>
-
+<div class="clear-both"></div>
+## main body
 <table style="text-align:left;vertical-align:middle;width: 100%">
     ## spacing def
     <tr>
         <td style="width: 130px"></td>
         <td></td>
     </tr>
 
     <tr>
         <td style="padding-right:20px;">${_('Pull request')}:</td>
         <td>
             <a href="${pull_request_url}" style="${base.link_css()}">
             !${pull_request.pull_request_id}
             </a>
         </td>
     </tr>
 
     <tr>
         <td style="padding-right:20px;line-height:20px;">${_('Commit Flow')}:</td>
         <td style="line-height:20px;">
             <code>${'{}:{}'.format(data['source_ref_type'], pull_request.source_ref_parts.name)}</code> ${_('of')} ${data['source_repo_url']}
             &rarr;
             <code>${'{}:{}'.format(data['target_ref_type'], pull_request.target_ref_parts.name)}</code> ${_('of')}  ${data['target_repo_url']}
         </td>
     </tr>
 
     <tr>
         <td style="padding-right:20px;">${_('Description')}:</td>
         <td style="white-space:pre-wrap"><code>${pull_request.description | trim}</code></td>
     </tr>
     <tr>
         <td style="padding-right:20px;">${_('Changes')}:</td>
-        <td style="white-space:pre-line">\
+        <td>
             <strong>Changed commits:</strong>
-
-             - Added: ${len(added_commits)}
-             - Removed: ${len(removed_commits)}
+            <ul class="changes-ul">
+                <li>- Added: ${len(added_commits)}</li>
+                <li>- Removed: ${len(removed_commits)}</li>
+            </ul>
 
             <strong>Changed files:</strong>
+            <ul class="changes-ul">
 
             %if not changed_files:
-             No file changes found
+                <li>No file changes found</li>
             %else:
             %for file_name in added_files:
-             - A <a href="${pull_request_url + '#a_' + h.FID(ancestor_commit_id, file_name)}">${file_name}</a>
+                 <li>- A <a href="${pull_request_url + '#a_' + h.FID(ancestor_commit_id, file_name)}">${file_name}</a></li>
             %endfor
             %for file_name in modified_files:
-             - M <a href="${pull_request_url + '#a_' + h.FID(ancestor_commit_id, file_name)}">${file_name}</a>
+                 <li>-  M <a href="${pull_request_url + '#a_' + h.FID(ancestor_commit_id, file_name)}">${file_name}</a></li>
             %endfor
             %for file_name in removed_files:
-             - R <a href="${pull_request_url + '#a_' + h.FID(ancestor_commit_id, file_name)}">${file_name}</a>
+                 <li>-  R <a href="${pull_request_url + '#a_' + h.FID(ancestor_commit_id, file_name)}">${file_name}</a></li>
             %endfor
             %endif
+
+            </ul>
         </td>
     </tr>
 
 </table>

rhodecode/templates/email_templates/user_registration.mako

@@ -1,59 +1,60 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="base.mako"/>
 <%namespace name="base" file="base.mako"/>
 
 <%def name="subject()" filter="n,trim,whitespace_filter">
 RhodeCode new user registration: ${user.username}
 </%def>
 
 <%def name="body_plaintext()" filter="n,trim">
 
 A new user `${user.username}` has registered on ${h.format_date(date)}
 
 - Username: ${user.username}
 - Full Name: ${user.first_name} ${user.last_name}
 - Email: ${user.email}
 - Profile link: ${h.route_url('user_profile', username=user.username)}
 
 ---
 ${self.plaintext_footer()}
 </%def>
 
-
+## header
 <table style="text-align:left;vertical-align:middle;width: 100%">
     <tr>
     <td style="width:100%;border-bottom:1px solid #dbd9da;">
         <h4 style="margin: 0">
             <a href="${h.route_url('user_profile', username=user.username)}" style="${base.link_css()}">
                 ${_('New user {user} has registered on {date}').format(user=user.username, date=h.format_date(date))}
             </a>
         </h4>
     </td>
     </tr>
 </table>
-
+<div class="clear-both"></div>
+## main body
 <table style="text-align:left;vertical-align:middle;width: 100%">
     ## spacing def
     <tr>
         <td style="width: 130px"></td>
         <td></td>
     </tr>
     <tr>
         <td style="padding-right:20px;padding-top:20px;">${_('Username')}:</td>
         <td style="line-height:1;padding-top:20px;">${user.username}</td>
     </tr>
     <tr>
         <td style="padding-right:20px;">${_('Full Name')}:</td>
         <td>${user.first_name} ${user.last_name}</td>
     </tr>
     <tr>
         <td style="padding-right:20px;">${_('Email')}:</td>
         <td>${user.email}</td>
     </tr>
     <tr>
         <td style="padding-right:20px;">${_('Profile')}:</td>
         <td>
             <a href="${h.route_url('user_profile', username=user.username)}">${h.route_url('user_profile', username=user.username)}</a>
         </td>
     </tr>
 </table>