Refactor accelerator dashboard

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss

@@ -0,0 +1,107 @@
+.spinner-border {
+  height: 25px;
+  width: 25px;
+  margin-top: 13px;
+}
+
+.container-xl {
+  max-width: 1400px;
+}
+.container-xl.widget {
+  padding-left: 0px;
+  padding-bottom: 0px;
+}
+.container-xl.legacy {
+  max-width: 1140px;
+}
+
+.container {
+  max-width: 100%;
+}
+
+tr, td, th {
+  border: 0px;
+  padding-top: 0.65rem !important;
+  padding-bottom: 0.8rem !important;
+
+  .difference {
+    margin-left: 0.5em;
+
+    &.positive {
+      color: rgb(66, 183, 71);
+    }
+    &.negative {
+      color: rgb(183, 66, 66);
+    }
+  }
+}
+
+.clear-link {
+  color: white;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.progress {
+  background-color: #2d3348;
+}
+
+.txid {
+  width: 30%;
+  @media (max-width: 1100px) {
+    padding-right: 10px;
+  }
+  @media (max-width: 875px) {
+    display: none;
+  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 30%;
+}
+
+.fee {
+  width: 25%;
+}
+
+.fee-delta {
+  width: 25%;
+}
+
+.status {
+  width: 20%
+}
+
+/* Tooltip text */
+.tooltip-custom {
+  position: relative; 
+}
+
+.tooltip-custom .tooltiptext {
+  visibility: hidden;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+  position: absolute;
+  z-index: 1;
+  top: -40px;
+  left: 0;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip-custom:hover .tooltiptext {
+  visibility: visible;
+}
+
+.scriptmessage {
+  overflow: hidden;
+	display: inline-block;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+	max-width: 50vw;
+  text-align: left;
+}