From 45a842cbd721ba90d0de05c60eedd80953f1205a Mon Sep 17 00:00:00 2001
From: Marty Alcala <marty@bitpay.com>
Date: Tue, 1 Nov 2016 17:32:18 -0400
Subject: [PATCH] prelim group divider style

---
 src/sass/views/walletDetails.scss |  7 +++
 www/views/walletDetails.html      | 83 ++++++++++++++++---------------
 2 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/src/sass/views/walletDetails.scss b/src/sass/views/walletDetails.scss
index ab99e6d6e..1644d63c8 100644
--- a/src/sass/views/walletDetails.scss
+++ b/src/sass/views/walletDetails.scss
@@ -54,6 +54,13 @@
   &__tx-amount {
     white-space: nowrap;
   }
+
+  &__group-label {
+    font-size: 14px;
+    font-weight: 300;
+    color: #727272;
+    padding: 2px 1rem;
+  }
 }
 
 #walletDetails {
diff --git a/www/views/walletDetails.html b/www/views/walletDetails.html
index 6fe91f2a0..de748befe 100644
--- a/www/views/walletDetails.html
+++ b/www/views/walletDetails.html
@@ -175,53 +175,56 @@
       </div> -->
 
       <div class="wallet-details__list" ng-show="txHistory[0]">
-        <div class="wallet-details__item" ng-repeat="btx in txHistory track by $index" ng-click="openTxModal(btx)">
+        <div ng-repeat="btx in txHistory track by $index" ng-click="openTxModal(btx)">
+          <div class="wallet-details__group-label">June</div>
 
-          <img class="wallet-details__tx-icon" src="img/icon-tx-received.svg" width="40" ng-if="btx.action == 'received'">
-          <img class="wallet-details__tx-icon" src="img/icon-tx-sent.svg" width="40" ng-if="btx.action == 'sent'">
-          <img class="wallet-details__tx-icon" src="img/icon-tx-moved.svg" width="40" ng-if="btx.action == 'moved'">
+          <div class="wallet-details__item">
+            <img class="wallet-details__tx-icon" src="img/icon-tx-received.svg" width="40" ng-if="btx.action == 'received'">
+            <img class="wallet-details__tx-icon" src="img/icon-tx-sent.svg" width="40" ng-if="btx.action == 'sent'">
+            <img class="wallet-details__tx-icon" src="img/icon-tx-moved.svg" width="40" ng-if="btx.action == 'moved'">
 
-          <div class="wallet-details__tx-content">
-            <div class="wallet-details__tx-title">
-              <div ng-show="btx.action == 'received'" class="ellipsis">
-                <div ng-if="btx.note.body">{{btx.note.body}}</div>
-                <div ng-if="!btx.note.body" translate> Received</div>
-              </div>
-
-              <div ng-show="btx.action == 'sent'" class="ellipsis">
-                <div ng-if="btx.message" class="wallet-details__tx-message ellipsis">{{btx.message}}</div>
-                <div ng-if="!btx.message && btx.note.body">{{btx.note.body}}</div>
-                <div ng-if="!btx.message && !btx.note.body && addressbook[btx.addressTo]">
-                  {{addressbook[btx.addressTo].name || addressbook[btx.addressTo]}}
+            <div class="wallet-details__tx-content">
+              <div class="wallet-details__tx-title">
+                <div ng-show="btx.action == 'received'" class="ellipsis">
+                  <div ng-if="btx.note.body">{{btx.note.body}}</div>
+                  <div ng-if="!btx.note.body" translate> Received</div>
                 </div>
-                <div ng-if="!btx.message && !btx.note.body && !addressbook[btx.addressTo]" translate>Sent</div>
+
+                <div ng-show="btx.action == 'sent'" class="ellipsis">
+                  <div ng-if="btx.message" class="wallet-details__tx-message ellipsis">{{btx.message}}</div>
+                  <div ng-if="!btx.message && btx.note.body">{{btx.note.body}}</div>
+                  <div ng-if="!btx.message && !btx.note.body && addressbook[btx.addressTo]">
+                    {{addressbook[btx.addressTo].name || addressbook[btx.addressTo]}}
+                  </div>
+                  <div ng-if="!btx.message && !btx.note.body && !addressbook[btx.addressTo]" translate>Sent</div>
+                </div>
+
+                <div ng-show="btx.action == 'moved'" class="ellipsis">
+                  <div ng-if="btx.note.body">{{btx.note.body}}</div>
+                  <div ng-if="!btx.note.body" translate>Moved</div>
+                </div>
+                <span class="label tu warning radius" ng-if="btx.action == 'invalid'" translate>Invalid</span>
               </div>
 
-              <div ng-show="btx.action == 'moved'" class="ellipsis">
-                <div ng-if="btx.note.body">{{btx.note.body}}</div>
-                <div ng-if="!btx.note.body" translate>Moved</div>
-              </div>
-              <span class="label tu warning radius" ng-if="btx.action == 'invalid'" translate>Invalid</span>
-            </div>
-
-            <span class="item-note text-right wallet-details__tx-amount">
-              <span class="wallet-details__tx-amount" ng-class="{'wallet-details__tx-amount--recent': btx.recent, 'wallet-details__tx-amount--received': btx.action == 'received', 'wallet-details__tx-amount--sent': btx.action == 'sent'}">
-                <span ng-if="btx.action == 'sent'">–</span>
-                <span  class="size-12" ng-if="btx.action == 'invalid'" translate>
-                (possible double spend)
-                </span>
-                <span  ng-if="btx.action != 'invalid'">
-                {{btx.amountStr}}
+              <span class="item-note text-right wallet-details__tx-amount">
+                <span class="wallet-details__tx-amount" ng-class="{'wallet-details__tx-amount--recent': btx.recent, 'wallet-details__tx-amount--received': btx.action == 'received', 'wallet-details__tx-amount--sent': btx.action == 'sent'}">
+                  <span ng-if="btx.action == 'sent'">–</span>
+                  <span  class="size-12" ng-if="btx.action == 'invalid'" translate>
+                  (possible double spend)
+                  </span>
+                  <span  ng-if="btx.action != 'invalid'">
+                  {{btx.amountStr}}
+                  </span>
                 </span>
+                <div>
+                  <time class="wallet-details__tx-time" ng-if="btx.time">{{btx.time * 1000 | amTimeAgo}}</time>
+                  <span translate class="text-warning"
+                    ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
+                    Unconfirmed
+                  </span>
+                </div>
               </span>
-              <div>
-                <time class="wallet-details__tx-time" ng-if="btx.time">{{btx.time * 1000 | amTimeAgo}}</time>
-                <span translate class="text-warning"
-                  ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
-                  Unconfirmed
-                </span>
-              </div>
-            </span>
+            </div>
           </div>
 
         </div>