transaction item

css/main.css

@@ -78,10 +78,13 @@
   font-family: 'Ubuntu', Helvetica, sans-serif !important;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  color: #2C3E50;
+}
+
 h1 {
   font-weight: 100;
   font-size: 24px;
-  color: #2C3E50;
   margin-bottom: 1rem;
 }
 
@@ -93,7 +96,6 @@ h2 {
 h3 {
   font-weight: 300;
   font-size: 16px;
-  color: #fff;
 }
 
 h4 {
@@ -103,6 +105,7 @@ h4 {
 body, html{
   height:100%;
   width:100%;
+  color: #2C3E50;
 }
 
 .off-canvas-wrap, .inner-wrap{
@@ -256,34 +259,29 @@ a:hover {
 }
 
 .last-transactions {
-  border: 1px solid #eee;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  border-radius: 3px;
-  margin-bottom: 1.25rem;
-  background-color: #fff;
+  margin-bottom: 2rem;
+  background-color: #E8EAEF;
 }
 
 .last-transactions-header {
-  padding: 10px 0;
-  overflow: hidden;
+  padding: 1rem 0;
+  height: 50px;
 }
 
 .last-transactions-footer {
-  padding: 10px 0;
+  padding: 1rem 0;
   overflow: hidden;
 }
 
 .last-transactions-content {
-  background-color: #FDFCFC;
   overflow: hidden;
-  padding: 10px 0;
+  padding: 1rem;
+  background: #CED3DB;
 }
 
 .last-transactions-content .box-status {
   text-align: center;
-  font-size: 14;
+  font-size: 14px;
 }
 
 .last-transactions-content .box-copayer {
@@ -645,6 +643,12 @@ input[type=number]::-webkit-outer-spin-button {
   background-color: #1ABC9C;
 }
 
+.label.alert {
+  background-color: #C0392A;
+  padding: 0.3rem 0.4rem;
+  font-weight: 700;
+}
+
 .dr-notification-text {
   font-size: 12px;
   line-height: 120%;
@@ -864,6 +868,10 @@ button.gray:focus,
   color: #2C3E50;
 }
 
+button, .button, p {
+  margin: 0;
+}
+
 .side-nav {padding: 0;}
 
 .side-nav li {
@@ -966,6 +974,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
 
 .text-light {font-weight: 100;}
 .text-gray {color: #8597A7;}
+.text-black {color: #2C3E50;}
 .text-primary {color: #1ABC9C;}
 .text-secondary {color: #3498DB;}
 .text-white {color: #fff;}
@@ -973,6 +982,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
 
 .footer-setup a.text-gray:hover {color: #fff;}
 a.text-gray:hover {color: #2C3E50;}
+a.text-black:hover {color: #213140;}
 a.text-primary:hover {color: #50E3C2;}
 a.text-secondary:hover {color: #4A90E2;}
 a.text-white:hover {color: #ccc;}

views/includes/sidebar.html

@@ -49,7 +49,9 @@
     <li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="nav-item" data-ng-class="{active: isActive(item)}">
       <a href="{{item.link}}" ng-click="toggleCollapse()" class="db p20h"> 
         <i class="size-21 m20r {{item.icon}}"></i> {{item.title}}
-        <span class="label alert round" ng-if="item.link=='transactions' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
+        <span class="right">
+          <span class="label alert" ng-if="item.link=='transactions' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
+        </span>
       </a>
     </li>
     <li>

views/transactions.html

@@ -8,7 +8,13 @@
       </ul>
       <div class="last-transactions" ng-repeat="tx in txs | paged">
         <div class="last-transactions-header">
-          <div class="large-8 medium-8 small-12 columns">
+          <a class="db large-1 columns text-black" ng-show="tx.comment">
+            <i class="fi-comment-quotes size-24" popover="{{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}" popover-title="{{tx.comment}}" popover-placement="right"></i>
+          </a>
+          <a class="db large-1 columns disable" ng-show="!tx.comment">
+            <i class="fi-comment-quotes size-24 text-gray"></i>
+          </a>
+          <div class="large-7 medium-8 small-12 columns">
             <div ng-repeat="out in tx.outs">
               <div class="large-3 medium-3 small-3 columns">
                 {{out.value | noFractionNumber}} {{$root.unitName}}</div>
@@ -19,15 +25,11 @@
             </div>
           </div>
           <div class="large-4 medium-4 small-12 columns text-right">
-            {{tx.createdTs | amCalendar}}
+            <p class="size-14 m0">{{tx.createdTs | amCalendar}}</p>
           </div>
         </div>
 
         <div class="last-transactions-content">
-          <div class="box-note large-12" ng-show="tx.comment">
-            "{{tx.comment}}" - {{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}
-          </div>
-
           <div class="box-copayer" ng-repeat="(cId, actions) in tx.peerActions">
             <a href="/transactions" class="has-tip" tooltip-popup-delay="1000" tooltip="{{cId === $root.wallet.getMyCopayerId() ? 'You' : $root.wallet.publicKeyRing.nicknameForCopayer(cId)}}">
               <img class="copayer-ico br100" src="./img/satoshi.gif" alt="{{cId}}">
@@ -50,7 +52,9 @@
             </div>
 
             <div class="text-center">
-              {{$root.wallet.publicKeyRing.nicknameForCopayer(cId)}}
+              <p class="size-12 text-gray">
+                {{$root.wallet.publicKeyRing.nicknameForCopayer(cId)}}
+              </p>
             </div>
           </div>
         </div>
@@ -58,15 +62,15 @@
         <div class="last-transactions-footer">
           <div class="large-5 medium-5 columns" ng-show="!tx.sentTs">
             <div ng-show="!tx.signedByUs && !tx.rejectedByUs  && !tx.finallyRejected && tx.missingSignatures">
-              <button class="secondary radius m10r"  ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
+              <button class="primary m15r"  ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
                 <i class="fi-check"></i> Sign
               </button>
-              <button class="warning radius" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
+              <button class="warning" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
                 <i class="fi-x" ></i> Reject
               </button>
             </div>
             <div ng-show="!tx.missingSignatures && !tx.sentTs">
-              <button class="primary radius"  ng-click="send(tx.ntxid)" ng-disabled="loading" loading="Broadcasting"> <i class=".fi-upload-cloud"></i>
+              <button class="primary"  ng-click="send(tx.ntxid)" ng-disabled="loading" loading="Broadcasting"> <i class=".fi-upload-cloud"></i>
                 Broadcast Transaction
               </button>
             </div>