Format pending payment message

Author: jjeffryes

css/obBase.css

@@ -90,6 +90,10 @@ p {
   margin: 0 0 1em 0;
 }
 
+p:last-child {
+  margin-bottom: 0;
+}
+
 hr {
   border: solid 1px rgba(255,255,255,0.08);
   width: 100%;
@@ -1295,35 +1299,42 @@ label.fieldItem {
 
 /*========== typography ==========*/
 
-h1,h2,h3,h4,h5,h6 {
+h1,h2,h3,h4,h5,h6,
+.h1,.h2,.h3,.h4,.h5,.h6 {
   margin: 0;
   font-weight: 700;
   -webkit-user-select: none;
   cursor: default;
 }
 
-h1,h2,h3 {
+h1,h2,h3,
+.h1,.h2,.h3 {
   margin-bottom: 20px;
   line-height: 1.2;
 }
 
-h4,h5,h6 {
+h4,h5,h6
+.h4,.h5,.h6 {
   margin-bottom: 10px;
   line-height: 1;
 }
 
-h3 {
+h3, .h3 {
   font-size: 18px;
 }
 
-h5 {
-  font-size: 15px;
+h4, .h4 {
+  font-size: 17px;
 }
 
-.h6, h6 {
+h5, .h5 {
   font-size: 15px;
 }
 
+h6, .h6 {
+  font-size: 15px; /* TODO: refactor to remove h6 since it is identical to h5 */
+}
+
 .fieldItem-textarea h2, .fieldItem-textarea h3, .editableContent h2, .editableContent h3 {
   margin-top: 30px;
 }
@@ -5261,6 +5272,10 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   margin-left: 7px;
 }
 
+#ov1  .marginLeft8 {
+  margin-left: 8px; /* use this to match the gap on the right created by the custom scrollbar */
+}
+
 #ov1  .marginLeft10 {
   margin-left: 10px;
 }

js/languages/en-US.json

@@ -519,7 +519,11 @@
     "UpdateInvalid": "Your transaction update returned invalid data. Open the transaction and try again",
     "ExportCSV": "Export to CSV",
     "ShowUnpaid": "Show Unfunded",
-    "HideUnpaid": "Hide Unfunded"
+    "HideUnpaid": "Hide Unfunded",
+    "BuyerPaidMessage": "You have paid %{paidAmount} out of %{totalAmount} BTC",
+    "BuyerPaidMessageHelp": "To complete your purchase, pay the remaining balance shown above.",
+    "SellerPaidMessage": "The buyer has paid %{paidAmount} out of %{totalAmount} BTC",
+    "SellerPaidMessageHelp": "This purchase can not be confirmed until the buyer has completely funded it."
   },
   "errorMessages": {
     "saveError": "Data could not be saved.",

js/templates/transactionModal.html

@@ -585,9 +585,30 @@ <h3 class="txt-bright"><%= polyglot.t('CheckExchanges') %> </h3>
       <div style="height: 264px;" class="scrollOverflowY customThemeScrollbar">
 
         <div class="flexRow custCol-border borderBottom">
-          <% if(ob.status == 0 && ob.transactionType == "purchases"){ %>
-          <div class="flexRow rowItem padding15">
-            You have paid <%= ob.intlNumFormat(ob.orderPaid, 8) %> out of <%= ob.intlNumFormat(ob.orderPrice, 8) %>
+          <% if(ob.status == 0){ %>
+          <div class="rowItem padding15 rowTop10 custCol-secondary marginLeft8 txt-center">
+            <div class="h4 width100">
+              <i class="ion-alert-circled"></i>
+              <% if(ob.transactionType == "purchases"){ %>
+              <%= polyglot.t('transactions.BuyerPaidMessage', {
+                  paidAmount: ob.intlNumFormat(ob.orderPaid, 8),
+                  totalAmount: ob.intlNumFormat(ob.orderPrice, 8)
+              }) %>
+              <% } else { %>
+              <%= polyglot.t('transactions.SellerPaidMessage', {
+              paidAmount: ob.intlNumFormat(ob.orderPaid, 8),
+              totalAmount: ob.intlNumFormat(ob.orderPrice, 8)
+              }) %>
+              <% } %>
+            </div>
+            <hr>
+            <div class="txt-fade fontSize12 rowTop10">
+              <% if(ob.transactionType == "purchases"){ %>
+              <%= polyglot.t('transactions.BuyerPaidMessageHelp') %>
+              <% } else { %>
+              <%= polyglot.t('transactions.SellerPaidMessageHelp') %>
+              <% } %>
+            </div>
           </div>
           <% } %>
           <div class="flexRow rowItem padding15">