Fix: Time line in tx-details, styles and close buttons for modals

src/pages/incoming-data-menu/incoming-data-menu.html

@@ -1,8 +1,8 @@
 <ion-header>
   <ion-navbar>
     <ion-buttons start>
-      <button (click)="close()" ion-button icon-only>
-        <ion-icon name="arrow-back"></ion-icon>
+      <button (click)="close()" ion-button>
+        {{'Close' | translate}}
       </button>
     </ion-buttons>
   </ion-navbar>
@@ -30,19 +30,19 @@
       <div class="settings-description">{{data}}</div>
       <button ion-item (click)="close('AddressBookPage', data)">
         <ion-icon item-start>
-          <img src="assets/img/icon-contacts.svg">              
+          <img src="assets/img/icon-contacts.svg">
         </ion-icon>
         <h2 translate>Add as a contact</h2>
       </button>
       <button ion-item (click)="close('AmountPage', data)">
         <ion-icon item-start>
-          <img src="assets/img/icon-send-alt.svg">              
+          <img src="assets/img/icon-send-alt.svg">
         </ion-icon>
         <h2 translate>Send payment to this address</h2>
       </button>
       <button ion-item copy-to-clipboard="{{ data }}">
         <ion-icon item-start>
-          <img src="assets/img/icon-paperclip.svg">       
+          <img src="assets/img/icon-paperclip.svg">
         </ion-icon>
         <h2 translate>Copy to clipboard</h2>
       </button>
@@ -68,7 +68,7 @@
       <div class="settings-description">{{data}}</div>
       <button ion-item (click)="close('PaperWalletPage', data)">
         <ion-icon item-start>
-            <img src="assets/img/icon-import.svg">
+          <img src="assets/img/icon-import.svg">
         </ion-icon>
         <h2 translate>Sweep paper wallet</h2>
       </button>

src/pages/integrations/amazon/amazon-card-details/amazon-card-details.html

@@ -3,8 +3,8 @@
   <ion-navbar>
     <ion-title>Details</ion-title>
     <ion-buttons start>
-      <button (click)="cancel()" ion-button>
-        Close
+      <button (click)="close()" ion-button>
+        {{'Close' | translate}}
       </button>
     </ion-buttons>
   </ion-navbar>
@@ -27,7 +27,8 @@
 
     <div *ngIf="card.claimCode">
       <div *ngIf="card.cardStatus !== 'Canceled'">
-        Claim code: <span class="text-bold" copy-to-clipboard="{{card.claimCode}}">{{card.claimCode}}</span>
+        Claim code:
+        <span class="text-bold" copy-to-clipboard="{{card.claimCode}}">{{card.claimCode}}</span>
       </div>
       <div *ngIf="card.cardStatus == 'Fulfilled'">
         <button ion-button (click)="openExternalLink('https://www.amazon.com/gc/redeem?claimCode=' + card.claimCode)">
@@ -76,7 +77,8 @@
     To redeem your gift card, follow these steps:
 
     <ol class="m10t size-12">
-      <li>1. Visit <a (click)="openExternalLink('https://www.amazon.com/gc')">www.amazon.com/gc</a>
+      <li>1. Visit
+        <a (click)="openExternalLink('https://www.amazon.com/gc')">www.amazon.com/gc</a>
         <li>2. Click Apply to Account and enter the Claim Code when prompted.
           <li>3. Gift card funds will be applied automatically to eligible orders during the checkout process.
             <li>4. You must pay for any remaining balance on your order with another payment method.
@@ -89,23 +91,24 @@
 
     <p class="size-12">
       If you have questions about redeeming your gift card, please visit
-      <a (click)="openExternalLink('https://www.amazon.com/gc-redeem')">www.amazon.com/gc-redeem</a>. If you have questions
-      regarding the BitPay Introductory offer, please contact BitPay.
+      <a (click)="openExternalLink('https://www.amazon.com/gc-redeem')">www.amazon.com/gc-redeem</a>. If you have questions regarding the BitPay Introductory offer, please contact BitPay.
     </p>
 
   </div>
 
   <div class="size-12 p15 m30v">
-    * <a (click)="openExternalLink('http://amazon.com')">Amazon.com</a> is not a sponsor of this promotion. Except as required
-    by law, <a (click)="openExternalLink('http://amazon.com')">Amazon.com</a> Gift Cards ("GCs") cannot be transferred for
-    value or redeemed for cash. GCs may be used only for purchases of eligible goods at <a (click)="openExternalLink('http://amazon.com')">Amazon.com</a>    or certain of its affiliated websites. For complete terms and conditions, see
-    <a (click)="openExternalLink('https://www.amazon.com/gc-legal')">www.amazon.com/gc-legal</a>. GCs are issued by ACI Gift
-    Cards, Inc., a Washington corporation. All Amazon &reg;, &trade; &amp; &copy; are IP of <a (click)="openExternalLink('http://amazon.com')">Amazon.com</a>,
-    Inc. or its affiliates. No expiration date or service fees.
+    *
+    <a (click)="openExternalLink('http://amazon.com')">Amazon.com</a> is not a sponsor of this promotion. Except as required by law,
+    <a (click)="openExternalLink('http://amazon.com')">Amazon.com</a> Gift Cards ("GCs") cannot be transferred for value or redeemed for cash. GCs may be used only for purchases
+    of eligible goods at
+    <a (click)="openExternalLink('http://amazon.com')">Amazon.com</a> or certain of its affiliated websites. For complete terms and conditions, see
+    <a (click)="openExternalLink('https://www.amazon.com/gc-legal')">www.amazon.com/gc-legal</a>. GCs are issued by ACI Gift Cards, Inc., a Washington corporation. All Amazon &reg;, &trade;
+    &amp; &copy; are IP of
+    <a (click)="openExternalLink('http://amazon.com')">Amazon.com</a>, Inc. or its affiliates. No expiration date or service fees.
   </div>
 
   <button ion-button block *ngIf="card.status == 'FAILURE' || card.cardStatus == 'Canceled' || card.cardStatus == 'Expired' || card.status == 'expired'"
     class="button-footer assertive" (click)="remove()">Remove</button>
   <button ion-button block *ngIf="card.status == 'SUCCESS' && card.cardStatus == 'Fulfilled'" class="button-footer assertive"
     (click)="cancelGiftCard()">Cancel</button>
-</ion-content>
+</ion-content>

src/pages/integrations/coinbase/coinbase-tx-details/coinbase-tx-details.html

@@ -5,7 +5,7 @@
     </ion-title>
     <ion-buttons start>
       <button (click)="close()" ion-button>
-        <ion-icon name="arrow-round-back"></ion-icon>
+        {{'Close' | translate}}
       </button>
     </ion-buttons>
   </ion-toolbar>
@@ -37,8 +37,7 @@
         <span *ngIf="tx.type == 'sell' || (tx.type == 'send' && tx.from)">-</span>{{tx.amount.amount.replace('-','')}} {{tx.amount.currency}}
       </div>
       <div class="size-12">
-        <span *ngIf="tx.type == 'sell' || (tx.type == 'send' && tx.from)">-</span>{{tx.native_amount.amount.replace('-','')}}
-        {{tx.native_amount.currency}}
+        <span *ngIf="tx.type == 'sell' || (tx.type == 'send' && tx.from)">-</span>{{tx.native_amount.amount.replace('-','')}} {{tx.native_amount.currency}}
       </div>
     </ion-card-content>
   </ion-card>

src/pages/integrations/glidera/modal/glidera-tx-details.html

@@ -4,9 +4,9 @@
       Details
     </ion-title>
     <ion-buttons start>
-      <button (click)="cancel()" ion-button>
-          <ion-icon name="arrow-round-back"></ion-icon>
-        </button>
+      <button (click)="close()" ion-button>
+        {{'Close' | translate}}
+      </button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>

src/pages/integrations/mercado-libre/mercado-libre-card-details/mercado-libre-card-details.html

@@ -4,7 +4,7 @@
     <ion-title>Details</ion-title>
     <ion-buttons start>
       <button (click)="close()" ion-button>
-        Close
+        {{'Close' | translate}}
       </button>
     </ion-buttons>
   </ion-navbar>
@@ -69,10 +69,10 @@
     </button>
 
     <button ion-item *ngIf="card.status == 'FAILURE'" (click)="openSupportWebsite()">
-        <span>{{'Help & Support' | translate }}</span>
-      </button>
+      <span>{{'Help & Support' | translate }}</span>
+    </button>
   </ion-list>
 
   <button ion-button block *ngIf="card.cardStatus == 'inactive' || card.cardStatus == 'expired' || card.status == 'expired'"
     class="button-footer assertive" (click)="remove()">Remove</button>
-</ion-content>
+</ion-content>

src/pages/paypro/paypro.html

@@ -3,7 +3,7 @@
   <ion-navbar>
     <ion-buttons start>
       <button (click)="close()" ion-button>
-        Close         
+        {{'Close' | translate}}
       </button>
     </ion-buttons>
   </ion-navbar>

src/pages/settings/alt-currency/alt-currency.html

@@ -1,8 +1,6 @@
 <ion-header>
   <ion-navbar>
-    <ion-buttons start>
-    </ion-buttons>
-    <ion-title>Alternative currency</ion-title>
+    <ion-title>{{'Alternative currency' | translate}}</ion-title>
   </ion-navbar>
 </ion-header>
 
@@ -12,13 +10,15 @@
 
   <ion-list>
     <ion-item *ngFor="let lastUsedAltCurrency of lastUsedAltCurrencyList" (click)="save(lastUsedAltCurrency)">
-      {{ lastUsedAltCurrency.name }} <span item-end>{{lastUsedAltCurrency.isoCode}}</span>
+      {{ lastUsedAltCurrency.name }}
+      <span item-end>{{lastUsedAltCurrency.isoCode}}</span>
     </ion-item>
   </ion-list>
   <ion-item-divider *ngIf="altCurrencyList[0] && lastUsedAltCurrencyList[0]" color="light"></ion-item-divider>
   <ion-list>
     <ion-item *ngFor="let alt of altCurrencyList" (click)="save(alt)">
-      {{ alt.name }} <span item-end>{{alt.isoCode}}</span>
+      {{ alt.name }}
+      <span item-end>{{alt.isoCode}}</span>
     </ion-item>
   </ion-list>
 

src/pages/tx-details/tx-details.html

@@ -94,19 +94,19 @@
       </ion-note>
     </ion-item>
 
-    <ion-item class="low-fees" *ngIf="btx.action == 'received' && btx.lowFees">
+    <div class="low-fees" *ngIf="btx.action == 'received' && btx.lowFees">
       <img src="assets/img/icon-warning.png" width="20">
       <span translate>This transaction could take a long time to confirm or could be dropped due to the low fees set by the sender</span>
-    </ion-item>
+    </div>
 
-    <ion-item class="low-fees" *ngIf="btx.lowAmount">
+    <div class="low-fees" *ngIf="btx.lowAmount">
       <img src="assets/img/icon-warning.png" width="20">
       <span translate>
         This transaction amount is too small compared to current Bitcoin network fees. Spending these funds will need a Bitcoin network
         fee cost comparable to the funds itself.
       </span>
       <a (click)="readMore()" translate>Learn more</a>
-    </ion-item>
+    </div>
 
     <ion-item>
       <ion-label>{{'Confirmations' | translate}}</ion-label>
@@ -136,7 +136,7 @@
           <div class="timeline-content-icon">
             <div class="rejected" *ngIf="a.type === 'reject'">!</div>
             <img src="assets/img/icon-broadcasted.svg" *ngIf="a.type === 'broadcasted'">
-            <div *ngIf="a.type !== 'reject' && a.type !== 'broadcasted'">{{actionList.length - i}}</div>
+            <div class="line" *ngIf="a.type !== 'reject' && a.type !== 'broadcasted'">{{actionList.length - i}}</div>
           </div>
           <div class="timeline-content-label">
             <div class="action">{{a.description}}</div>

src/pages/tx-details/tx-details.scss

@@ -40,6 +40,15 @@ page-tx-details {
     }
   }
 
+  .low-fees {
+    font-size: 14px;
+    color: #777;
+    padding: 1rem 2rem 1rem 2rem;
+    img {
+      margin-right: 0.1rem;
+    }
+  }
+
   .timeline-item {
     border: 0;
     &:nth-child(2) {
@@ -68,10 +77,10 @@ page-tx-details {
       margin-right: .5rem;
       position: relative;
 
-      &::before {
+      .line::before {
         content: '';
         background: #e8e8e8;
-        height: 100px;
+        height: 42px;
         width: 1px;
         position: absolute;
         left: 50%;
@@ -80,18 +89,6 @@ page-tx-details {
         top: 0;
       }
 
-      &::after {
-        content: '';
-        background: #e8e8e8;
-        height: 100px;
-        width: 1px;
-        position: absolute;
-        left: 50%;
-        -webkit-transform: translateX(-50%) translateY(100%);
-        transform: translateX(-50%) translateY(100%);
-        bottom: 0;
-      }
-
       > div {
         border: 3px solid $v-success-color;
         border-radius: $v-icon-border-radius;

src/pages/tx-details/tx-details.ts

@@ -109,9 +109,9 @@ export class TxDetailsPage {
 
   private initActionList(): void {
     this.actionList = [];
-    if (this.btx.action != 'sent' || !this.isShared) return;
+    if (this.btx.action != 'sent' && this.btx.action != 'moved' || !this.isShared) return;
 
-    var actionDescriptions = {
+    let actionDescriptions = {
       created: 'Proposal Created', // Todo: gettextCatalog
       accept: 'Accepted', // Todo: gettextCatalog
       reject: 'Rejected', // Todo: gettextCatalog

src/pages/txp-details/txp-details.html

@@ -5,7 +5,7 @@
     </ion-title>
     <ion-buttons start>
       <button (click)="close()" ion-button>
-        <ion-icon name="arrow-round-back"></ion-icon>
+        {{'Close' | translate}}
       </button>
     </ion-buttons>
   </ion-toolbar>
@@ -70,7 +70,7 @@
       <div *ngIf="tx.hasMultiplesOutputs" (click)="showMultiplesOutputs = !showMultiplesOutputs">
         <span translate>Recipients</span>
         <span>{{tx.recipientCount}}
-            <ion-icon name="arrow-up"></ion-icon>
+          <ion-icon name="arrow-up"></ion-icon>
         </span>
       </div>
 
@@ -153,8 +153,10 @@
           {{'To'|translate}}
         </ion-label>
         <ion-note item-end>
-          <span *ngIf="tx.merchant && tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.paypro.domain}}</span>
-          <span *ngIf="tx.merchant && !tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.paypro.domain}}</span>
+          <span *ngIf="tx.merchant && tx.merchant.pr.ca">
+            <i class="fi-lock"></i> {{tx.paypro.domain}}</span>
+          <span *ngIf="tx.merchant && !tx.merchant.pr.ca">
+            <i class="fi-unlock"></i> {{tx.paypro.domain}}</span>
         </ion-note>
         <!--  <contact address="{{tx.toAddress}}" ng-hide="tx.merchant"></contact> -->
       </ion-item>
@@ -191,7 +193,7 @@
         <div class="timeline-content">
           <div class="timeline-content-icon">
             <div class="rejected" *ngIf="a.type === 'reject'">!</div>
-            <div *ngIf="a.type !== 'reject'">{{actionList.length - i}}</div>
+            <div class="line" *ngIf="a.type !== 'reject'">{{actionList.length - i}}</div>
           </div>
           <div class="timeline-content-label">
             <div class="action">{{a.description}}</div>

src/pages/txp-details/txp-details.scss

@@ -93,10 +93,10 @@ page-txp-details {
       margin-right: .5rem;
       position: relative;
 
-      &::before {
+      .line::before {
         content: '';
         background: #e8e8e8;
-        height: 100px;
+        height: 42px;
         width: 1px;
         position: absolute;
         left: 50%;
@@ -105,18 +105,6 @@ page-txp-details {
         top: 0;
       }
 
-      &::after {
-        content: '';
-        background: #e8e8e8;
-        height: 100px;
-        width: 1px;
-        position: absolute;
-        left: 50%;
-        -webkit-transform: translateX(-50%) translateY(100%);
-        transform: translateX(-50%) translateY(100%);
-        bottom: 0;
-      }
-
       > div {
         border: 3px solid $v-success-color;
         border-radius: $v-icon-border-radius;