Fix Bisq css page.

Refactor Bisq html page title classes.

frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html

@@ -1,15 +1,12 @@
 <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">
+    <div>
-      <ng-container *ngTemplateOutlet="latestBlock.height - bisqTx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - bisqTx.blockHeight + 1}"></ng-container>
+      <div class="title">
-      <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>
 
       <div class="tx-link">
         <a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.id]">
@@ -18,6 +15,13 @@
         </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">
@@ -92,7 +96,7 @@
       <app-bisq-transfers [tx]="bisqTx"></app-bisq-transfers>
 
       <br>
-
+    </div>
   </ng-template>
 
   <ng-template [ngIf="isLoading && !error">

frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss

@@ -3,27 +3,63 @@
   }
   
   .title-block {
-	padding-top: 1px;
+	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;
+	}
   }
   
-@media (max-width: 767.98px) {
+  h1{
-	.mobile-bottomcol {
+	  margin-top: 2px;
-		margin-top: 15px;
+	  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 (min-width: 768px) {
+  
+	  @media (max-width: 768px) {
 		width: 175px;
 	  }
   }
   
-
-h1 {
-	margin-bottom: 0;
-}
-
   .badge {
 	  position: relative;
 	  top: -1px;
@@ -41,37 +77,17 @@ h1 {
 	  color: #dc3545;
   }
   
-.btn-success {
+  .btn {
-	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;
-	}
-  }
-
   .container-xl {
 	  margin-bottom: 40px;
   }
   
   .row{
 	  flex-direction: column;
-	@media (min-width: 768px) {
+	  @media (min-width: 850px) {
 		  flex-direction: row;
 	  }
   }
@@ -80,6 +96,7 @@ h1 {
 	  .mobile-bottomcol {
 		  margin-top: 15px;
 	  }
+  
 	  .details-table td:first-child {
 		  white-space: pre-wrap;
 	  }
@@ -87,40 +104,34 @@ h1 {
   
   .fiat {
 	  display: block;
-	font-size: 13px;
+	  @media (min-width: 768px){
-	@media (min-width: 576px){
 		  display: inline-block;
 		  margin-left: 15px;
-		font-size: 14px;
 		  text-align: left;
 	  }
   }
   
-h1{
+  .table {
-	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 {
+		  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;
 	  }
   }

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){