From dc9d5d0be342dbfa716805288b79a826037f06ef Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Wed, 4 Aug 2021 07:26:32 -0300
Subject: [PATCH 1/3] Fix h1 fontsize.

---
 .../app/components/transaction/transaction.component.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index cea65ab51..b9c7b23f7 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -16,15 +16,13 @@
   }
 }
 
-
 h1{
-	font-size: 1.75rem;
     margin-top: 2px;
 	margin-bottom: 0;
 	float: left;
-	@media (min-width: 375px){
-		margin-top: 0px;
-		font-size: 2rem;
+    margin-top: 2px;
+	@media (min-width: 768px){
+		margin-top: -8px;
 	}
 }
 

From 7249620471dcc6b9df8a36ae6eecb845d839729a Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Wed, 4 Aug 2021 07:46:59 -0300
Subject: [PATCH 2/3] Fix Bisq css page. Refactor Bisq html page title classes.

---
 .../bisq-transaction.component.html           | 182 ++++++-------
 .../bisq-transaction.component.scss           | 251 +++++++++---------
 .../bisq-transactions.component.scss          |   6 -
 3 files changed, 224 insertions(+), 215 deletions(-)

diff --git a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
index 51e06d7c8..172ac6861 100644
--- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
+++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
@@ -1,98 +1,102 @@
 <div class="container-xl">
 
+  <div class="title-block">
   <ng-template [ngIf]="!isLoading && !error">
 
-    <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right">
-      <ng-container *ngTemplateOutlet="latestBlock.height - bisqTx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - bisqTx.blockHeight + 1}"></ng-container>
-      <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
-      <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
-    </button>
-
-
-    <h1 i18n="shared.transaction">Transaction</h1>
-
-    <div class="tx-link">
-      <a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.id]">
-        <span class="d-inline d-lg-none">{{ bisqTx.id | shortenString : 24 }}</span>
-        <span class="d-none d-lg-inline">{{ bisqTx.id }}</span>
-      </a>
-      <app-clipboard [text]="bisqTx.id"></app-clipboard>
-    </div>
-    <div class="clearfix"></div>
-
-    <div class="box transaction-container">
-      <div class="row">
-        <div class="col-sm">
-          <table class="table table-borderless table-striped">
-            <tbody>
-              <tr>
-                <td i18n="transaction.timestamp|Transaction Timestamp">Timestamp</td>
-                <td>
-                  {{ bisqTx.time | date:'yyyy-MM-dd HH:mm' }}
-                  <div class="lg-inline">
-                    <i class="symbol">(<app-time-since [time]="bisqTx.time / 1000" [fastRender]="true"></app-time-since>)</i>
-                  </div>
-                </td>
-              </tr>
-              <tr>
-                <td class="td-width" i18n="transaction.included-in-block|Transaction included in block">Included in block</td>
-                <td>
-                  <a [routerLink]="['/block/' | relativeUrl, bisqTx.blockHash]" [state]="{ data: { blockHeight: bisqTx.blockHeight } }">{{ bisqTx.blockHeight }}</a>
-                </td>
-              </tr>
-              <tr>
-                <td class="td-width" i18n="transaction.features|Transaction features">Features</td>
-                <td>
-                  <app-tx-features *ngIf="tx; else loadingTx" [tx]="tx"></app-tx-features>
-                  <ng-template #loadingTx>
-                    <span class="skeleton-loader"></span>
-                  </ng-template>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="col-sm">
-          <table class="table table-borderless table-striped">
-            <tbody>
-              <tr>
-                <td class="td-width" i18n="BSQ burnt amount">Burnt amount</td>
-                <td>
-                  {{ bisqTx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span>
-              </tr>
-              <tr>
-                <td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
-                <td *ngIf="!isLoadingTx; else loadingTxFee">
-                  {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} <span class="symbol">sat/vB</span>
-                  &nbsp;
-                  <app-tx-fee-rating [tx]="tx"></app-tx-fee-rating>
-                </td>
-                <ng-template #loadingTxFee>
-                  <td><span class="skeleton-loader"></span></td>
-                </ng-template>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
+    <div>
+      <div class="title">
+        <h1 i18n="shared.transaction">Transaction</h1>
       </div>
+
+      <div class="tx-link">
+        <a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.id]">
+          <span class="d-inline d-lg-none">{{ bisqTx.id | shortenString : 24 }}</span>
+          <span class="d-none d-lg-inline">{{ bisqTx.id }}</span>
+        </a>
+        <app-clipboard [text]="bisqTx.id"></app-clipboard>
+      </div>
+      <div class="container-buttons">
+        <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right">
+          <ng-container *ngTemplateOutlet="latestBlock.height - bisqTx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - bisqTx.blockHeight + 1}"></ng-container>
+          <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
+          <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
+        </button>
+      </div>
+      <div class="clearfix"></div>
+
+      <div class="box transaction-container">
+        <div class="row">
+          <div class="col-sm">
+            <table class="table table-borderless table-striped">
+              <tbody>
+                <tr>
+                  <td i18n="transaction.timestamp|Transaction Timestamp">Timestamp</td>
+                  <td>
+                    {{ bisqTx.time | date:'yyyy-MM-dd HH:mm' }}
+                    <div class="lg-inline">
+                      <i class="symbol">(<app-time-since [time]="bisqTx.time / 1000" [fastRender]="true"></app-time-since>)</i>
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="td-width" i18n="transaction.included-in-block|Transaction included in block">Included in block</td>
+                  <td>
+                    <a [routerLink]="['/block/' | relativeUrl, bisqTx.blockHash]" [state]="{ data: { blockHeight: bisqTx.blockHeight } }">{{ bisqTx.blockHeight }}</a>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="td-width" i18n="transaction.features|Transaction features">Features</td>
+                  <td>
+                    <app-tx-features *ngIf="tx; else loadingTx" [tx]="tx"></app-tx-features>
+                    <ng-template #loadingTx>
+                      <span class="skeleton-loader"></span>
+                    </ng-template>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="col-sm">
+            <table class="table table-borderless table-striped">
+              <tbody>
+                <tr>
+                  <td class="td-width" i18n="BSQ burnt amount">Burnt amount</td>
+                  <td>
+                    {{ bisqTx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span>
+                </tr>
+                <tr>
+                  <td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
+                  <td *ngIf="!isLoadingTx; else loadingTxFee">
+                    {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} <span class="symbol">sat/vB</span>
+                    &nbsp;
+                    <app-tx-fee-rating [tx]="tx"></app-tx-fee-rating>
+                  </td>
+                  <ng-template #loadingTxFee>
+                    <td><span class="skeleton-loader"></span></td>
+                  </ng-template>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+        </div>
+      </div>
+
+      <br>
+
+      <h2 i18n="transaction.details">Details</h2>
+
+
+      <app-bisq-transaction-details [tx]="bisqTx"></app-bisq-transaction-details>
+
+      <br>
+
+      <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
+
+      <app-bisq-transfers [tx]="bisqTx"></app-bisq-transfers>
+
+      <br>
     </div>
-
-    <br>
-
-    <h2 i18n="transaction.details">Details</h2>
-
-
-    <app-bisq-transaction-details [tx]="bisqTx"></app-bisq-transaction-details>
-
-    <br>
-
-    <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
-
-    <app-bisq-transfers [tx]="bisqTx"></app-bisq-transfers>
-
-    <br>
-
   </ng-template>
 
   <ng-template [ngIf="isLoading && !error">
diff --git a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss
index d9081a6de..fea033a96 100644
--- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss
+++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss
@@ -1,126 +1,137 @@
 .adjust-btn-padding {
 	padding: 0.55rem;
-}
-
-.title-block {
-	padding-top: 1px;
-}
-
-@media (max-width: 767.98px) {
-	.mobile-bottomcol {
-		margin-top: 15px;
-	}
-}
-
-.td-width {
-	width: 150px;
+  }
+  
+  .title-block {
+	color: #FFF;
+	padding-top: 20px;
+	border-top: 3px solid #FFF;
+	width: 100%;
+	padding-bottom: 30px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 	@media (min-width: 768px) {
-		width: 175px;
-	}
-}
-
-
-h1 {
-	margin-bottom: 0;
-}
-
-.badge {
-	position: relative;
-	top: -1px;
-}
-
-.btn-small-height {
-	line-height: 1.1;
-}
-
-.arrow-green {
-	color: #1a9436;
-}
-
-.arrow-red {
-	color: #dc3545;
-}
-
-.btn-success {
-	float: right;
-	margin-bottom: 0px;
-	margin-top: 5px;
-}
-
-.tx-link {
-	display: block;
-	width: auto;
-	margin-bottom: 10px;
-    margin-left: 2px;
-	margin-top: 40px;
-    position: absolute;
-	@media (min-width: 700px) {
-	  margin-top: 14px;
-	  margin-left: 10px;
-	  position: relative;	  
-	  text-align: left;
-	  width: 100%;
-	  top: 14px;
-	  left: 10px;
+		padding-bottom: 0px;
 	}
   }
-
-.container-xl {
-	margin-bottom: 40px;
-}
-
-.row{
-	flex-direction: column;
-	@media (min-width: 768px) {
-		flex-direction: row;
-	}
-}
-
-@media (max-width: 767.98px) {
-	.mobile-bottomcol {
-		margin-top: 15px;
-	}
-	.details-table td:first-child {
-		white-space: pre-wrap;
-	}
-}
-
-.fiat {
-	display: block;
-	font-size: 13px;
-	@media (min-width: 576px){
-		display: inline-block;
-		margin-left: 15px;
-		font-size: 14px;
+  
+  h1{
+	  margin-top: 2px;
+	  margin-bottom: 0;
+	  float: left;
+	  margin-top: 2px;
+	  @media (min-width: 768px){
+		  margin-top: -8px;
+	  }
+  }
+  
+  .container-buttons {
+	  text-align: right;
+	  width: 100%;
+	  @media (min-width: 850px) {
+		  width: auto;
+		  float: right;
+	  }
+  }
+  
+  .tx-link {
+	  display: block;
+	  width: auto;
+	  margin-bottom: 10px;
+	  margin-left: 2px;
+	  margin-top: 40px;
+	  position: absolute;
+	  @media (min-width: 768px) {
+		margin-top: 14px;
+		margin-left: 10px;
+		position: relative;	  
 		text-align: left;
-	}
-}
-
-h1{
-	font-size: 1.75rem;
-    margin-top: 2px;
-	margin-bottom: 0;
-	float: left;
-    padding-bottom: 40px;
-	@media (min-width: 375px){
-		margin-top: 0px;
-		font-size: 2rem;
-	}
-	@media (min-width: 768px){
-		padding-bottom: 10px;
-	}
-}
-.transaction-container {
-	font-size: 14px;
-	@media (min-width: 576px){
-		font-size: 16px;
-	}
-	tr td {
-		&:last-child{
-			text-align: right;
-			@media (min-width: 768px){
-				text-align: left;
-			}
-		}
-	}
-}
\ No newline at end of file
+		width: auto;
+		float: left;
+	  }
+  }
+  
+  .td-width {
+	  width: 150px;
+  
+	  @media (max-width: 768px) {
+		width: 175px;
+	  }
+  }
+  
+  .badge {
+	  position: relative;
+	  top: -1px;
+  }
+  
+  .btn-small-height {
+	  line-height: 1.1;
+  }
+  
+  .arrow-green {
+	  color: #1a9436;
+  }
+  
+  .arrow-red {
+	  color: #dc3545;
+  }
+  
+  .btn {
+	  margin-top: 5px;
+  }
+  
+  .container-xl {
+	  margin-bottom: 40px;
+  }
+  
+  .row{
+	  flex-direction: column;
+	  @media (min-width: 850px) {
+		  flex-direction: row;
+	  }
+  }
+  
+  @media (max-width: 767.98px) {
+	  .mobile-bottomcol {
+		  margin-top: 15px;
+	  }
+  
+	  .details-table td:first-child {
+		  white-space: pre-wrap;
+	  }
+  }
+  
+  .fiat {
+	  display: block;
+	  @media (min-width: 768px){
+		  display: inline-block;
+		  margin-left: 15px;
+		  text-align: left;
+	  }
+  }
+  
+  .table {
+		tr td {
+		  padding: 0.75rem 0.5rem;
+		  @media (min-width: 576px) {
+			  padding: 0.75rem 0.75rem;
+		  }
+		  &:last-child {
+			  text-align: right;
+			  @media (min-width: 768px) {
+			  text-align: left;
+			  }
+		  }
+		  .btn {
+			  display: block;
+		  }
+	  }
+  }
+  
+  .effective-fee-container{
+	  display: block;
+	  @media (min-width: 768px){
+		  display: inline-block;
+	  }
+  }
\ No newline at end of file
diff --git a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss
index 72d305d08..a42d55e5e 100644
--- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss
+++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss
@@ -15,12 +15,6 @@ label {
   }
 }
 
-h1{
-  font-size: 1.5rem;
-  @media(min-width: 375px){
-    font-size: 2rem;
-  }
-}
 .container-xl {
   padding-bottom: 60px;
   @media(min-width: 400px){

From e31b906084ba0606a61943b18e6c317d582c13b2 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Wed, 4 Aug 2021 09:09:28 -0300
Subject: [PATCH 3/3] Import scss from transaction component.

---
 .../bisq-transaction.component.scss           | 138 +-----------------
 1 file changed, 1 insertion(+), 137 deletions(-)

diff --git a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss
index fea033a96..477c27c1d 100644
--- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss
+++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss
@@ -1,137 +1 @@
-.adjust-btn-padding {
-	padding: 0.55rem;
-  }
-  
-  .title-block {
-	color: #FFF;
-	padding-top: 20px;
-	border-top: 3px solid #FFF;
-	width: 100%;
-	padding-bottom: 30px;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	@media (min-width: 768px) {
-		padding-bottom: 0px;
-	}
-  }
-  
-  h1{
-	  margin-top: 2px;
-	  margin-bottom: 0;
-	  float: left;
-	  margin-top: 2px;
-	  @media (min-width: 768px){
-		  margin-top: -8px;
-	  }
-  }
-  
-  .container-buttons {
-	  text-align: right;
-	  width: 100%;
-	  @media (min-width: 850px) {
-		  width: auto;
-		  float: right;
-	  }
-  }
-  
-  .tx-link {
-	  display: block;
-	  width: auto;
-	  margin-bottom: 10px;
-	  margin-left: 2px;
-	  margin-top: 40px;
-	  position: absolute;
-	  @media (min-width: 768px) {
-		margin-top: 14px;
-		margin-left: 10px;
-		position: relative;	  
-		text-align: left;
-		width: auto;
-		float: left;
-	  }
-  }
-  
-  .td-width {
-	  width: 150px;
-  
-	  @media (max-width: 768px) {
-		width: 175px;
-	  }
-  }
-  
-  .badge {
-	  position: relative;
-	  top: -1px;
-  }
-  
-  .btn-small-height {
-	  line-height: 1.1;
-  }
-  
-  .arrow-green {
-	  color: #1a9436;
-  }
-  
-  .arrow-red {
-	  color: #dc3545;
-  }
-  
-  .btn {
-	  margin-top: 5px;
-  }
-  
-  .container-xl {
-	  margin-bottom: 40px;
-  }
-  
-  .row{
-	  flex-direction: column;
-	  @media (min-width: 850px) {
-		  flex-direction: row;
-	  }
-  }
-  
-  @media (max-width: 767.98px) {
-	  .mobile-bottomcol {
-		  margin-top: 15px;
-	  }
-  
-	  .details-table td:first-child {
-		  white-space: pre-wrap;
-	  }
-  }
-  
-  .fiat {
-	  display: block;
-	  @media (min-width: 768px){
-		  display: inline-block;
-		  margin-left: 15px;
-		  text-align: left;
-	  }
-  }
-  
-  .table {
-		tr td {
-		  padding: 0.75rem 0.5rem;
-		  @media (min-width: 576px) {
-			  padding: 0.75rem 0.75rem;
-		  }
-		  &:last-child {
-			  text-align: right;
-			  @media (min-width: 768px) {
-			  text-align: left;
-			  }
-		  }
-		  .btn {
-			  display: block;
-		  }
-	  }
-  }
-  
-  .effective-fee-container{
-	  display: block;
-	  @media (min-width: 768px){
-		  display: inline-block;
-	  }
-  }
\ No newline at end of file
+@import "./../../components/transaction/transaction.component.scss";
\ No newline at end of file