Redesign difficulty adjustment dashboard widget

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

@@ -1,8 +1,14 @@
 .difficulty-adjustment-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.difficulty-stats {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
-  height: 76px;
+  height: 50.5px;
   .shared-block {
     color: #ffffff66;
     font-size: 12px;
@@ -24,8 +30,8 @@
     }
   }
   .card-text {
-    font-size: 22px;
-    margin-top: -9px;
+    font-size: 20px;
+    margin: auto;
     position: relative;
   }
 }
@@ -33,7 +39,9 @@
 
 .difficulty-skeleton {
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
+  justify-content: space-around;
+  height: 50.5px;
   @media (min-width: 376px) {
     flex-direction: row;
   }
@@ -65,7 +73,7 @@
       width: 100%;
       display: block;
       &:first-child {
-        margin: 14px auto 0;
+        margin: 10px auto 4px;
         max-width: 80px;
       }
       &:last-child {
@@ -109,7 +117,7 @@
 }
 
 .loading-container {
-  min-height: 76px;
+  min-height: 50.5px;
 }
 
 .main-title {
@@ -133,7 +141,7 @@
     text-align: center;
     flex-direction: column;
     justify-content: space-around;
-    padding: 24px 20px;
+    padding: 20px;
   }
 }
 
@@ -151,4 +159,50 @@
 
 .symbol {
   font-size: 13px;
+}
+
+.epoch-progress {
+  width: 100%;
+  height: 22px;
+  margin-bottom: 12px;
+}
+
+.epoch-blocks {
+  display: block;
+  width: 100%;
+  background: #2d3348;
+
+  .rect {
+    fill: #2d3348;
+
+    &.behind {
+      fill: #D81B60;
+    }
+    &.mined {
+      fill: url(#diff-gradient);
+    }
+    &.ahead {
+      fill: #1a9436;
+    }
+
+    &.hover {
+      fill: #535e84;
+      &.behind {
+        fill: #e94d86;
+      }
+      &.mined {
+        fill: url(#diff-hover-gradient);
+      }
+      &.ahead {
+        fill: #29d951;
+      }
+    }
+  }
+}
+
+.blocks-ahead {
+  color: #3bcc49;
+}
+.blocks-behind {
+  color: #D81B60;
 }