Status Bar Active Element Highlighted

anwendung/src/components/StatusBar.jsx

@@ -6,12 +6,15 @@ export default function StatusBar(p)
     let classNames = ["not-started", "started", "finished"];
     let index = p.progress / 50;
 
+    let actives = ["", "", ""]
+    actives[index] = "active";
+
     return (
         <div className={"step-container"}>
             <div className={"steps"}>
-                <span className={"step " + classNames[index]}>1</span>
-                <span className={"step " + classNames[index]}>2</span>
-                <span className={"step " + classNames[index]}>3</span>
+                <span className={"step " + classNames[index] + " " + actives[0]}>1</span>
+                <span className={"step " + classNames[index] + " " + actives[1]}>2</span>
+                <span className={"step " + classNames[index] + " " + actives[2]}>3</span>
                 <div className={"progress-bar " + classNames[index]}
                      style={{
                          width: p.progress + "%"

anwendung/src/styles/globals.css

@@ -111,6 +111,12 @@ Step Progress Bar
   background-image: linear-gradient(#43C20BFF, #0bc27c);
 }
 
+.steps .active
+{
+  border-width: 3px;
+  border-color: #1e2428;
+}
+
 .progress-bar
 {
   position: absolute;