Fix layout of expire progress bar

src/app/backend.service.ts

@@ -154,6 +154,14 @@ export class BackendService {
     });
   }
 
+  setInvoiceExpired() {
+    // Don't set expired if status is not pending
+    if (this.invoice.status !== PaymentStatus.PENDING) { return; }
+
+    this.invoice.status = PaymentStatus.TOOLATE;
+    this.invoiceUpdate.next(this.invoice);
+  }
+
   /**
    * This will notify the backend that the user just cancelled the payment.
    */

src/app/payment/payment.component.css

@@ -223,10 +223,11 @@
 .progress div {
     vertical-align: middle;
     align-items: center;
+    padding-bottom: .5rem;
 }
 
-.progress div span {
+.progress div img {
-    padding-bottom: .5rem;
+    transform: translateY(10px);
 }
 
 .progress div * {

src/app/payment/payment.component.ts

@@ -103,17 +103,26 @@ export class PaymentComponent implements OnInit {
     return address;
   }
 
-  updateRemainingTime() {
+  updateRemainingTime(): void {
     setInterval(() => {
       const createdAt = new Date(this.backend.invoice.createdAt);
       const dueBy = new Date(this.backend.invoice.dueBy);
+
       const timeTotal = Math.abs(dueBy.getTime() - createdAt.getTime());
       const timeLeft = Math.abs(dueBy.getTime() - Date.now());
       const timeLeftDate = new Date(timeLeft);
+      const timeLeftFormat = timeLeftDate.getMinutes() + ':' +
+        (timeLeftDate.getSeconds() < 10 ? '0' + timeLeftDate.getSeconds() : timeLeftDate.getSeconds());
 
       this.progressTime = timeLeft / timeTotal * 1000;
-      this.formatedTime = `${timeLeftDate.getMinutes()}:${timeLeftDate.getSeconds()} left`;
+      this.formatedTime = `${timeLeftFormat} left`;
-    }, 500);
+
+      // Flag invoice as expired in advance
+      if (timeLeftDate.getMinutes() === 0 && timeLeftDate.getSeconds() === 0) {
+        this.formatedTime = '00:00 left';
+        this.backend.setInvoiceExpired();
+      }
+    }, 200);
   }
 
   async get(): Promise<void> {

src/assets/clock.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
   <circle cx="12" cy="12" r="9" />
   <polyline points="12 7 12 12 15 15" />