[DDW-557] Layout adjustments

input-output-hk · Jan 21, 2019 · 24a3ef7 · 24a3ef7
1 parent f3ba621
commit 24a3ef7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 15 deletions.
diff --git a/source/renderer/app/components/status/BlockConsolidationStatus.js b/source/renderer/app/components/status/BlockConsolidationStatus.js
@@ -71,20 +71,23 @@ export default class BlockConsolidationStatus extends Component<Props, State> {
 
           </p>
 
-          <div className={styles.consolidationIndicator}>
-            <div className={styles.consolidationIndicatorContainer}>
+          <div className={styles.indicator}>
+            <div className={styles.indicatorContainer}>
               <p className={styles.zeroEpoch}>0 epoch</p>
-              <div className={styles.consolidationIndicatorEpochsSynced} >
-                <p>93 epoch</p>
+              <div className={styles.indicatorEpochsSynced} >
+                <p>80% synced</p>
               </div>
-              <div className={styles.consolidationIndicatorEpochsConsolidated} >
+              <div className={styles.indicatorEpochsConsolidated} >
                 <p>75 epochs consolidated</p>
               </div>
+              <div className={styles.indicatorEpochsDownloaded} >
+                <p>93 epoch</p>
+              </div>
               <p className={styles.fullEpoch}>95 epoch</p>
             </div>
           </div>
 
-          <p className={styles.consolidationDescription}>
+          <p className={styles.Description}>
             { formatMessage(messages.consolidationDescription) }
           </p>
         </div>

diff --git a/source/renderer/app/components/status/BlockConsolidationStatus.scss b/source/renderer/app/components/status/BlockConsolidationStatus.scss
@@ -38,16 +38,16 @@
 }
 
 
-.consolidationDescription {
+.description {
   font-size: 16px;
 }
 
-.consolidationIndicator {
+.indicator {
   position: relative;
   margin-bottom: 53px;
 }
 
-.consolidationIndicatorContainer {
+.indicatorContainer {
   width: 600px;
   height: 24px;
   border-radius: 5px;
@@ -56,7 +56,7 @@
   position: relative;
 }
 
-.consolidationIndicatorEpochsSynced {
+.indicatorEpochsSynced {
   height: 24px;
   width: 70%;
   border-radius: 5px;
@@ -72,13 +72,12 @@
   p {
     position: absolute;
     right: 0;
-    font-size: 14px;
-    top: -25px;
+    bottom: -18px;
   }
 
 }
 
-.consolidationIndicatorEpochsConsolidated {
+.indicatorEpochsConsolidated {
   height: 24px;
   width: 50%;
   border-radius: 5px;
@@ -96,8 +95,8 @@
   p {
     position: absolute;
     right: 0;
-    font-size: 14px;
-    top: -25px;
+    top: -23px;
+    line-height: 1.43;
   }
 }
 
@@ -112,3 +111,23 @@
   line-height: 24px;
   top: 0;
 }
+
+.indicatorEpochsDownloaded {
+  position: absolute;
+  bottom: 0;
+  left: 92%;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 .5px 47px .5px;
+  border-color: transparent transparent #445b7c transparent;
+
+  p {
+    position: absolute;
+    left: 8px;
+    top: 0;
+    white-space: nowrap;
+    line-height: 1.43;
+
+  }
+}