Issue #8681 resolved

Email notices have bad colour combinations

Iain Stevenson
created an issue

Emails notifications sent in response to various events and actions have unhelpful color combinations.

I have had several complains from collaborator's about this.

An example of this is a White lettering on a Silver background, making this difficult to see. This has occurred on Export and Group invitation notifications.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>
  <body style="font: 14px/1.4285714 Arial, sans-serif; color: #333;">
    <table style="width: 100%; border-collapse: collapse;">
      <tbody>
        <tr>
          <td style="background: #f5f5f5; padding: 10px 10px 0; font: 14px/1.4285714 Arial, sans-serif;">
            <table style="width: 100%; border-collapse: collapse;">
              <tbody>





                     <tr><td id="main" style="font: 14px/1.4285714 Arial, sans-serif; padding: 0">
    <div style="background: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 20px">
      <table style="width: 100%; border-collapse: collapse"><tbody><tr><td style="font: 14px/1.4285714 Arial, sans-serif; padding: 0">


              Your issue export for the repository
              <a href="https://bitbucket.org/<User>/<project>" style="color: #3b73af; text-decoration: none"><User>/<project>.support</a>
              has finished successfully.

          </td>
        </tr><tr><td class="call-to-action" style="font: 14px/1.4285714 Arial, sans-serif; padding: 15px 0 0">
  <table style="width: auto; border-collapse: collapse"><tbody><tr><td class="call-to-action-inner" style="font: 14px/1.4285714 Arial, sans-serif; padding: 0">
          <div style="border: 1px solid #486582; border-radius: 3px; background: #3068a2">
            <table style="width: auto; border-collapse: collapse"><tr><td style="font: 14px/1.4285714 Arial, sans-serif; padding: 4px 10px">

            <a href="https://bitbucket.org/api/1.0/repositories/<User>/<project>/issues/export/zip" style="color: white; text-decoration: none; font-weight: bold">Download export</a>

                </td>
              </tr></table></div>
        </td>
      </tr></tbody></table></td>

        </tr></tbody></table></div>
  </td>
</tr>


                <tr>


<td style="padding: 20px 0; color: #707070;">
  <table style="width: 100%; border-collapse: collapse;">
    <tbody>
      <tr>
        <td style="padding: 0">




              <a style="color: #3b73af; text-decoration: none;" href="https://bitbucket.org/account/user/<User>/notifications/">Configure email notifications</a>


        </td>
        <td style="padding: 0">



  <img width="1" height="1" src="https://bitbucket.org/account/notifications/mark-read/40702569/5ee138561791edcfb179c3925f47ec43a7458d84/">



        </td>
        <td style="text-align: right; width: 100px; padding: 0">
          <a href="https://bitbucket.org" style="color: #3b73af; text-decoration: none;">
            <img width="100" height="18" src="https://d3oaxc4q5k2d6q.cloudfront.net/m/348207fa22b7/img/email/logo.gif" alt="Bitbucket" />
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</td>

                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Comments (8)

  1. Michael Frauenholtz staff

    Hi Iain,

    The style shown in your sample image is not what we intended to present. Pasting that email content into JSFiddle gives the following output:

    fiddle

    I believe this is a technical issue. Can you let me know which email client you're seeing this in? And if possible, could you try any other client to see if you're seeing the same things there as well? We'll take a look and try to get this fixed shortly.

    Cheers,
    Michael

  2. Iain Stevenson reporter

    It works fine in IE 11...It displays as per your response. So its clearly an Outlook 2010 issue. I don't have a more recent outlook version to try it on.

  3. Iain Stevenson reporter

    Yeah I see now its because the button background blue is missing , Outlook 2010 is not translating the html correctly. When I saved the emails viewed source as html to my desktop as a file and then viewed that in IE11 it works fine....

  4. Michael Frauenholtz staff

    Hi Iain,

    We updated our CSS to make our HTML emails render content in Outlook a little better. All emails should be readable now and display how we intend. Please let us know if we missed anything!

    Cheers, Michael

  5. Log in to comment