From 48a7f8a3ee354a14a37d69628f292cd5eacf73ce Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Wed, 31 Aug 2022 01:52:32 +0200
Subject: [PATCH] Channel txs details buttons

---
 .../lightning/channel/channel.component.html  | 12 +++++++----
 .../lightning/channel/channel.component.scss  | 21 ++++++++++++++++---
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/lightning/channel/channel.component.html b/frontend/src/app/lightning/channel/channel.component.html
index 195c35324..2824b8dba 100644
--- a/frontend/src/app/lightning/channel/channel.component.html
+++ b/frontend/src/app/lightning/channel/channel.component.html
@@ -65,14 +65,18 @@
 
     <ng-container *ngIf="transactions$ | async as transactions">
       <ng-template [ngIf]="transactions[0]">
-        <h3>Opening transaction</h3>
-        <app-transactions-list [transactions]="[transactions[0]]" [showConfirmations]="true" [rowLimit]="5"></app-transactions-list>
+        <div class="d-flex">
+          <h3>Opening transaction</h3>
+          <button type="button" class="btn btn-outline-info details-button btn-sm" (click)="txList1.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
+        </div>
+        <app-transactions-list #txList1 [transactions]="[transactions[0]]" [showConfirmations]="true" [rowLimit]="5"></app-transactions-list>
       </ng-template>
       <ng-template [ngIf]="transactions[1]">
-        <div class="closing-header">
+        <div class="closing-header d-flex">
           <h3 style="margin: 0;">Closing transaction</h3>&nbsp;&nbsp;<app-closing-type [type]="channel.closing_reason"></app-closing-type>
+          <button type="button" class="btn btn-outline-info details-button btn-sm" (click)="txList2.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
         </div>
-        <app-transactions-list [transactions]="[transactions[1]]" [showConfirmations]="true" [rowLimit]="5"></app-transactions-list>
+        <app-transactions-list #txList2 [transactions]="[transactions[1]]" [showConfirmations]="true" [rowLimit]="5"></app-transactions-list>
       </ng-template>
     </ng-container>
 
diff --git a/frontend/src/app/lightning/channel/channel.component.scss b/frontend/src/app/lightning/channel/channel.component.scss
index c23d8e28c..333955212 100644
--- a/frontend/src/app/lightning/channel/channel.component.scss
+++ b/frontend/src/app/lightning/channel/channel.component.scss
@@ -45,19 +45,29 @@ app-fiat {
 }
 
 .closing-header {
-  display: flex;
   flex-direction: row;
   margin-bottom: 1rem;
   align-items: center;
 }
 
+h3 {
+  margin-bottom: 0rem;
+}
+
 @media (max-width: 768px) {
   h3 {
     font-size: 1.4rem;
+    white-space: nowrap;
+  }
+  .closing-header {
+    flex-wrap: wrap;
+  }
+  app-closing-type {
+    flex-basis: 100%;
+    order: 1;
   }
 }
 
-
 .loading-spinner {
   position: absolute;
   top: 400px;
@@ -67,4 +77,9 @@ app-fiat {
   @media (max-width: 767.98px) {
     top: 450px;
   }
-}
\ No newline at end of file
+}
+
+.details-button {
+  align-self: center;
+  margin-left: auto;
+}