From ee5805434deb7ec047c3b931f0e50945494912ca Mon Sep 17 00:00:00 2001
From: Amira24523 <85802878+Amira24523@users.noreply.github.com>
Date: Wed, 21 Jun 2023 22:32:57 +0200
Subject: [PATCH] StatusBar Color update

---
 anwendung/src/components/StatusBar.jsx | 22 +++++++++++++++++-----
 anwendung/src/styles/globals.css       | 10 ++--------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/anwendung/src/components/StatusBar.jsx b/anwendung/src/components/StatusBar.jsx
index 37b1ac9..b166a0e 100644
--- a/anwendung/src/components/StatusBar.jsx
+++ b/anwendung/src/components/StatusBar.jsx
@@ -5,18 +5,30 @@ import {console} from "next/dist/compiled/@edge-runtime/primitives/console";
 export default function StatusBar(p)
 {
     if(p.progress > 100) p.progress = 100;
-    let classNames = ["not-started", "started", "finished"];
+    let classNames = ["not-started"];
     let index = p.progress / 50;
+    let index2 = p.progress / 100;
+    let index3 = p.progress - 100;
+    let index4 = p.progress - 50;
 
-    let actives = ["", "", ""]
+    let actives = ["", "", ""];
     actives[index] = "active";
 
+    let actives2 = ["", "", ""];
+    actives2[index2] = "finished";
+
+    let actives3 = ["", "", ""];
+    actives3[index3] = "finished";
+
+    let actives4 = ["", "", ""];
+    actives4[index4] = "finished";
+
     return (
         <div className={"step-container"}>
             <div className={"steps"}>
-                <span className={"step " + classNames[0] + " " + actives[0]}>1</span>
-                <span className={"step " + classNames[1] + " " + actives[1]}>2</span>
-                <span className={"step " + classNames[2] + " " + actives[2]}>3</span>
+                <span className={"step " + classNames[0] + " " + actives[0] + actives2[0] + actives3[0] + actives4[0]}>1</span>
+                <span className={"step " + classNames[0] + " " + actives[1] + actives2[1] + actives3[1] + actives4[1]}>2</span>
+                <span className={"step " + classNames[0] + " " + actives[2] + actives2[2] + actives3[2] + actives4[2]}>3</span>
                 <div className={"progress-bar " + classNames[index]}
                      style={{
                          width: p.progress + "%"
diff --git a/anwendung/src/styles/globals.css b/anwendung/src/styles/globals.css
index 25ca4f8..ccfd114 100644
--- a/anwendung/src/styles/globals.css
+++ b/anwendung/src/styles/globals.css
@@ -188,16 +188,10 @@ Step Progress Bar
 
 .steps .not-started {
     /*background-image: linear-gradient(#b42121, #b44821);*/
-    background-color: #77932b;
+    background-color: grey;
 
 }
 
-.steps .started {
-    /*background-image: linear-gradient(#c75c0c, #c77c0c);*/
-    background-color: #77932b;
-}
-
-
 .steps .finished {
     /*background-image: linear-gradient(#43C20BFF, #0bc27c);*/
     background-color: #77932b;
@@ -213,7 +207,7 @@ Step Progress Bar
 .progress-bar {
     position: absolute;
     height: 8px;
-    background-color: #5d606e;
+    background-color: #77932b;
     z-index: 100;
 }