From 2ab94d0ab4afab3dff34e7a1990b1339bba01c0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= <neosinner@gmail.com>
Date: Tue, 9 Apr 2019 14:11:29 +0200
Subject: [PATCH] New stepped progress styles

[MAILPOET-1927]
---
 assets/css/src/components/_progressBar.scss  | 63 +++++++++++---------
 assets/js/src/common/stepped_progess_bar.jsx |  5 +-
 2 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/assets/css/src/components/_progressBar.scss b/assets/css/src/components/_progressBar.scss
index 2295689b8e..68c3da2246 100644
--- a/assets/css/src/components/_progressBar.scss
+++ b/assets/css/src/components/_progressBar.scss
@@ -35,45 +35,52 @@
 }
 
 .mailpoet_stepped_progress_bar {
-  margin: auto;
-  width: 400px;
-
-  &:before {
-    background-color: #d8d8d8;
-    border-radius: 2px;
-    content: "";
-    display: block;
-    height: 2px;
-    margin: auto;
-    position: relative;
-    top: 9px;
-    width: 100%;
-  }
+  display: flex;
+  max-width: 100%;
+  width: 350px;
 }
 
 .mailpoet_stepped_progress_bar_step {
-  display: inline-block;
+  flex-grow: 1;
 
   &:before {
-    background-color: #d8d8d8;
+    background-color: #f1f1f1;
+    border: 2px solid #dbdbdb;
     border-radius: 14px;
-    content: "";
+    content: '';
     display: block;
-    height: 14px;
-    margin: auto;
+    height: 12px;
     position: relative;
-    width: 14px;
+    width: 12px;
+    z-index: 1;
   }
 
-  &.active {
-    &:before {
-      background-color: #979797;
-    }
+  &:after {
+    background-color: #dbdbdb;
+    content: '';
+    display: block;
+    height: 4px;
+    left: 4px;
+    position: relative;
+    top: -10px;
+    width: 100%;
   }
-}
 
-@media screen and (max-width: 520px) {
-  .mailpoet_stepped_progress_bar {
-    width: 360px;
+  &:last-of-type{
+    flex-grow: 0;
+    width: 18px;
+
+    &:after { display: none; }
+  }
+
+  &.active:before,
+  &.active:after {
+    background-color: #23282d;
+    border-color: #23282d;
+  }
+
+  &.current {
+    &:before { background-color: #fff; }
+    &:after { background-color: #dbdbdb; }
   }
 }
diff --git a/assets/js/src/common/stepped_progess_bar.jsx b/assets/js/src/common/stepped_progess_bar.jsx
index 9329d86959..d16c72e0b0 100644
--- a/assets/js/src/common/stepped_progess_bar.jsx
+++ b/assets/js/src/common/stepped_progess_bar.jsx
@@ -10,9 +10,10 @@ const SteppedProgressBar = (props) => {
       {
         [...Array(props.steps_count).keys()].map(step => (
           <div
-            className={`mailpoet_stepped_progress_bar_step ${(step < props.step ? 'active' : '')}`}
+            className={`
+              mailpoet_stepped_progress_bar_step ${(step < props.step ? 'active' : '')} ${(step === (props.step - 1) ? 'current' : '')}
+             `}
             key={`step_${step}`}
-            style={{ width: `${Math.floor(100 / props.steps_count)}%` }}
           />
         ))
       }