From d6c1fad2fc37b239df2db68478d67559e643d89b Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 9 Jan 2018 16:05:22 -0500
Subject: [PATCH] Improve display of message options

---
 UI/Templates/MailerUI/UIxMailViewTemplate.wox | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index a5365b9a1..93fce3470 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -244,27 +244,23 @@
           </sg-block-toggle>
 
           <!-- Load external images -->
-          <md-whiteframe class="md-whiteframe-z2 sg-no-print" layout="row" layout-align="space-between center"
-                         ng-show="viewer.message.$hasUnsafeContent">
-            <div layout="row" layout-align="start center" layout-fill="layout-fill">
-              <div class="md-tile-left">
-                <md-icon>collections</md-icon>
-              </div>
-              <p class="hide show-gt-md"><var:string label:value="This message contains external images."/></p>
-              <div class="md-flex"><!-- spacer --></div>
-              <md-button label:aria-label="Load Images"
-                         ng-click="viewer.message.loadUnsafeContent()">
-                <var:string label:value="Load Images"/>
-              </md-button>
-            </div>
-          </md-whiteframe>
+          <div class="sg-no-print" ng-show="viewer.message.$hasUnsafeContent">
+            <md-divider><!-- divider --></md-divider>
+            <md-list-item class="md-clickable" layout="row" layout-align="space-between center"
+                          label:aria-label="Load Images"
+                          ng-click="viewer.message.loadUnsafeContent()">
+              <md-icon class="md-warn">collections</md-icon>
+              <p class="md-flex"><var:string label:value="This message contains external images."/></p>
+              <md-icon>cloud_download</md-icon>
+            </md-list-item>
+          </div>
 
           <!-- Return Receipt / Send MDN -->
           <md-whiteframe class="md-whiteframe-z2 sg-no-print" layout="column" layout-align="center start"
                          ng-show="viewer.message.shouldAskReceipt == 1">
             <div layout="row" layout-align="start center">
               <div class="md-tile-left">
-                <md-icon>message</md-icon>
+                <md-icon class="md-warn">message</md-icon>
               </div>
               <p class="sg-padded--right"><var:string label:value="The sender of this message has asked to be notified when you read this message. Do you with to notify the sender?"/></p>
             </div>