From dd6a55a5a182afed03cdeb07410c4a12d4c90fdb Mon Sep 17 00:00:00 2001
From: Marty Alcala <marty@bitpay.com>
Date: Tue, 11 Oct 2016 18:05:00 -0400
Subject: [PATCH] more proposal timeline styling

---
 src/sass/views/includes/txp-details.scss | 58 ++++++++++++++++++++++--
 www/views/modals/txp-details.html        | 29 ++++++++++--
 2 files changed, 80 insertions(+), 7 deletions(-)

diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss
index 4fb7d44ea..3d860607c 100644
--- a/src/sass/views/includes/txp-details.scss
+++ b/src/sass/views/includes/txp-details.scss
@@ -4,9 +4,8 @@
   $item-border-color: #EFEFEF;
   $item-label-color: #6C6C6E;
 
-  .wallet-color-header-bar {
-    border: 0;
-    background: none;
+  .list {
+    background: #f5f5f5;
   }
   .slide-to-pay {
     bottom: 100px;
@@ -122,6 +121,9 @@
     }
 
     .timeline-item {
+      border: 0;
+      padding: 17px $item-lateral-padding;
+      
       > * {
         padding-right: 0;
       }
@@ -131,6 +133,56 @@
       display: flex;
       align-items: center;
 
+      &__icon {
+        display: flex;
+        align-items: center;
+        min-width: 40px;
+        padding-right: 1rem;
+        padding-left: 1rem;
+        margin-right: .5rem;
+        position: relative;
+
+        &::before {
+          content: '';
+          background: #D2D2D2;
+          height: 100px;
+          width: 1px;
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%) translateY(-100%);
+          top: 0;
+        }
+
+        &::after {
+          content: '';
+          background: #D2D2D2;
+          height: 100px;
+          width: 1px;
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%) translateY(100%);
+          bottom: 0;
+        }
+
+        &::after {
+
+        }
+
+        > div {
+          border: 3px solid #09C286;
+          border-radius: 50%;
+          display: flex;
+          height: 26px;
+          width: 26px;
+          font-size: 13px;
+          align-items: center;
+          justify-content: center;
+          font-weight: 600;
+          vertical-align: middle;
+          color: #09C286;
+        }
+      }
+
       &__label {
         flex-grow: 1;
 
diff --git a/www/views/modals/txp-details.html b/www/views/modals/txp-details.html
index 3c9c4f89e..779a90cd6 100644
--- a/www/views/modals/txp-details.html
+++ b/www/views/modals/txp-details.html
@@ -133,9 +133,9 @@
           <div class="item item-divider" translate>Timeline</div>
 
           <div class="item timeline-item" ng-class="{'action-created' : a.type == 'created' || a.type == 'accept', 'action-rejected' : a.type == 'reject'}" ng-repeat="a in actionList track by $index">
-            <div class="row">
-              <div class="col col-10">
-                <span class="timeline-icon">{{$index + 1}}</span>
+            <!-- <div class="row">
+              <div class="col col-10 timeline-icon">
+                <div>{{$index + 1}}</div>
               </div>
               <div class="col timeline-content">
                 <div class="timeline-content__label">
@@ -148,7 +148,28 @@
                   </span>
                 </div>
               </div>
-            </div>
+            </div> -->
+
+            <!-- <div class="row">
+              <div class="col col-10 timeline-icon">
+                <div>{{$index + 1}}</div>
+              </div> -->
+              <div class="timeline-content">
+                <div class="timeline-content__icon">
+                  <div>{{$index + 1}}</div>
+                </div>
+                <div class="timeline-content__label">
+                  <div class="action">{{a.description}}</div>
+                  <div class="name">{{a.by}}</div>
+                </div>
+                <div>
+                  <span class="item-note">
+                    <time>{{ a.time * 1000 | amDateFormat:'HH:mm a'}}</time>
+                  </span>
+                </div>
+              </div>
+            <!-- </div> -->
+
           </div>
         </div>
       </div>