From d9dd4c6cb9524a062830b9709b4a7ed5cd5f9717 Mon Sep 17 00:00:00 2001
From: brausjonas <brausjonas@gmail.com>
Date: Tue, 2 May 2023 23:08:41 +0200
Subject: [PATCH] Status Bar Active Element Highlighted

---
 anwendung/src/components/StatusBar.jsx | 9 ++++++---
 anwendung/src/styles/globals.css       | 6 ++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/anwendung/src/components/StatusBar.jsx b/anwendung/src/components/StatusBar.jsx
index 86ca929..9100f52 100644
--- a/anwendung/src/components/StatusBar.jsx
+++ b/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 + "%"
diff --git a/anwendung/src/styles/globals.css b/anwendung/src/styles/globals.css
index 734e804..1cd8048 100644
--- a/anwendung/src/styles/globals.css
+++ b/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;