New concept for dashboard layout components. (#469)

* New concept for dashboard layout components.

* Align dashboard componentes.

* Add divider to fee box component.

* Remove TV icon from mobile and tablet queries.

* Fix form input overflow.

* Add responsive css to statistic component.

* Add responsive css to about page.

* Add global padding bottom.

* Fix graph page styles.

* Add responsive chart and scrollable table.

* Fix mobile css query for navbar menus.

* Fix pagination responsive css.

* Add CSS animated logo.

* Revert "Add CSS animated logo."

This reverts commit 92af38294c0d4fe815a801b37635cde7f8ee1ced.

* Add extra skeleton to fee-box-component.

* Fix latest-blocks and latest-transactions table css.

* Adapt Bisq pages to responsive layout.

* Remove parenthesis from fiat amout.
Fiat prive break not break on desktop.
Transaction ID align left.
Fee box skeleton width resize.

* Fix mobile table text-size.

* Fix dashboard mempool info mobile alignment.

frontend/src/app/components/transaction/transaction.component.scss

@@ -6,8 +6,49 @@
   color: #FFF;
   padding-top: 20px;
   border-top: 3px solid #FFF;
+  width: 100%;
+  padding-bottom: 30px;
+  @media (min-width: 768px) {
+  	padding-bottom: 0px;
+  }
 }
 
+
+h1{
+	font-size: 1.75rem;
+    margin-top: 2px;
+	margin-bottom: 0;
+	float: left;
+	@media (min-width: 375px){
+		margin-top: 0px;
+		font-size: 2rem;
+	}
+}
+
+.container-buttons {
+	text-align: right;
+    width: 100%;
+	@media (min-width: 992px) {
+		width: 300px;
+	}
+}
+
+.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: 100%;
+	}
+  }
+
 @media (max-width: 767.98px) {
 	.mobile-bottomcol {
 		margin-top: 15px;
@@ -15,19 +56,13 @@
 }
 
 .td-width {
-  width: 175px;
-}
+	width: 150px;
 
-@media (max-width: 767.98px) {
-	.td-width {
-		width: 150px;
+	@media (max-width: 768px) {
+	  width: 175px;
 	}
 }
 
-h1 {
-	margin-bottom: 0;
-}
-
 .badge {
 	position: relative;
 	top: -1px;
@@ -43,4 +78,75 @@ h1 {
 
 .arrow-red {
 	color: #dc3545;
-}
+}
+
+.btn {
+	// float: right;
+	// margin-bottom: 0px;
+	margin-top: 5px;
+}
+
+.container-xl {
+	margin-bottom: 40px;
+}
+
+.row{
+	flex-direction: column;
+	@media (min-width: 850px) {
+		flex-direction: row;
+	}
+}
+
+.scriptmessage {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+	max-width: 50px;
+	@media (min-width: 576px) {
+		max-width: 200px;
+	}
+}
+
+.scriptmessage.longer {
+	max-width: 500px;
+}
+
+@media (max-width: 767.98px) {
+	.mobile-bottomcol {
+		margin-top: 15px;
+	}
+	.scriptmessage.longer {
+		max-width: 200px !important;
+	}
+
+	.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 {
+		&:last-child {
+			text-align: right;
+			@media (min-width: 768px) {
+			text-align: left;
+			}
+		}
+		.btn {
+			display: block;
+		}
+	}
+}
+// .container-buttons{
+// 	width: 100%;
+// 	display: inline-block;
+// }