Progressbar extended

Better Color sheme and indexes on the progress points

anwendung/src/components/StatusBar.jsx

@@ -9,9 +9,9 @@ export default function StatusBar(p)
     return (
         <div className={"step-container"}>
             <div className={"steps"}>
-                <span className={"step " + classNames[index]}></span>
-                <span className={"step " + classNames[index]}></span>
-                <span className={"step " + classNames[index]}></span>
+                <span className={"step " + classNames[index]}>1</span>
+                <span className={"step " + classNames[index]}>2</span>
+                <span className={"step " + classNames[index]}>3</span>
                 <div className={"progress-bar " + classNames[index]}
                      style={{
                          width: p.progress + "%"

anwendung/src/styles/globals.css

@@ -89,21 +89,26 @@ Step Progress Bar
 {
   width: 40px; height: 40px;
   border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
 }
 
 .steps .not-started
 {
-  background-color: #e10000;
+  background-image: linear-gradient(#b42121, #b44821);
 }
 
 .steps .started
 {
-  background-color: #ecc700;
+  background-image: linear-gradient(#c75c0c, #c77c0c);
 }
 
 .steps .finished
 {
-  background-color: #46be10;
+  background-image: linear-gradient(#43C20BFF, #0bc27c);
 }
 
 .progress-bar