fixed styles for progress bar

build/dashboard-chefprogress-order.html

@@ -39,6 +39,7 @@ <h2>Progress Bar</h2>
             </div>
             </div>
         </div>
+
 
 
 

build/scripts/chefprogress-orders.js

@@ -50,41 +50,3 @@ reload();
 setInterval(() => {
     reload();
 }, 10000);
-
-
-const  previousBtn  =  document.getElementById('previousBtn');
-const  nextBtn  =  document.getElementById('nextBtn');
-// const  finishBtn  =  document.getElementById('finishBtn');
-const  content  =  document.getElementById('content');
-const  bullets  =  [...document.querySelectorAll('.circle')];
-
-const MAX_STEPS = 3;
-let currentStep = 1;
-
-nextBtn.addEventListener('click',  ()  =>  {
-	bullets[currentStep  -  1].classList.add('completed');
-	currentStep  +=  1;
-	previousBtn.disabled  =  false;
-	if  (currentStep  ===  MAX_STEPS)  {
-		nextBtn.disabled  =  true;
-		// finishBtn.disabled  =  false;
-	}
-	content.innerText  =  `Step ${currentStep}`;
-});
-
-
-previousBtn.addEventListener('click',  ()  =>  {
-	bullets[currentStep  -  2].classList.remove('completed');
-	currentStep  -=  1;
-	nextBtn.disabled  =  false;
-	// finishBtn.disabled  =  true;
-	if  (currentStep  ===  1)  {
-		previousBtn.disabled  =  true;
-	}
-	content.innerText  =  `Step ${currentStep}`;
-});
-
-// finishBtn.addEventListener('click',  ()  =>  {
-// 	location.reload();
-// });
-// when done with order, page will reload

build/scripts/dashboard-chefprogress-order.js

@@ -86,4 +86,41 @@ function loadStatus(status) {
     appendChildren(orderStatus, [h2, p]);
 }
 
-loadOrder()
+loadOrder()
+
+const  previousBtn  =  document.getElementById('previousBtn');
+const  nextBtn  =  document.getElementById('nextBtn');
+// const  finishBtn  =  document.getElementById('finishBtn');
+const  content  =  document.getElementById('content');
+const  bullets  =  [...document.querySelectorAll('.circle')];
+
+const MAX_STEPS = 3;
+let currentStep = 1;
+
+nextBtn.addEventListener('click',  ()  =>  {
+	bullets[currentStep  -  1].classList.add('completed');
+	currentStep  +=  1;
+	previousBtn.disabled  =  false;
+	if  (currentStep  ===  MAX_STEPS)  {
+		nextBtn.disabled  =  true;
+		// finishBtn.disabled  =  false;
+	}
+	content.innerText  =  `Step ${currentStep}`;
+});
+
+
+previousBtn.addEventListener('click',  ()  =>  {
+	bullets[currentStep  -  2].classList.remove('completed');
+	currentStep  -=  1;
+	nextBtn.disabled  =  false;
+	// finishBtn.disabled  =  true;
+	if  (currentStep  ===  1)  {
+		previousBtn.disabled  =  true;
+	}
+	content.innerText  =  `Step ${currentStep}`;
+});
+
+// finishBtn.addEventListener('click',  ()  =>  {
+// 	location.reload();
+// });
+// when done with order, page will reload

build/styles/dashboard-chefprogress-order.css

@@ -50,20 +50,20 @@ text-align:  center;
 
 .text  {
 margin-bottom:  10px;
-color:  #000000;
+color:  #e351a8;
 }
 
 
 .circle {
-	border: 1px solid #000000;
-	height: 20px;
-	width: 20px;
+	border: 1px solid #ff72c7;
+	width: 40px;
+    height:40px;
 	border-radius: 100%;
-	color: #000000;
+	color: #ff72c7;
 	display: inline-block;
 	position: relative;
 	transition: background-color 500ms;
-  line-height:20px;
+    line-height:40px;
 }
 
 
@@ -74,13 +74,14 @@ color:  #000000;
 
 
 
-.bullet.completed::after {
-	content: '';
+.circle.completed::after {
+	content:'';
 	position: absolute;
-	right: -60px;
-	bottom: 10px;
+    padding:0.5px;
+	right: -55px;
+	bottom: 15px;
 	height: 1px;
-	width: 54px;
+	width: 40px;
 	background-color: #ff72c7;
 }