[UPD] made the progress bar easier to modify

front/components/progressBar.tsx

@@ -1,25 +1,28 @@
 import React from "react";
-import { View } from "react-native";
 
 const ProgressBar = (
-  props: { 
-    progress: number; 
-    maxValue: number; 
+  props: {
+    progress: number;
+    maxValue: number;
     barWidth: number;
     title?: string;
   }) =>
 {
     const { progress, maxValue, barWidth, title } = props;
 
+    const box = {
+      width: `${barWidth}%`,
+      height: 20,
+      margin: 20,
+    }
+
     const containerStyles = {
-        height: 20,
-        width: `${barWidth}%`,
-        backgroundColor: "#e0e0de",
-        borderRadius: 50,
-        margin: 20
-      }
-    
-      function computePercent(progress: number, maxValue: number) 
+      padding: 2,
+      backgroundColor: "#e0e0de",
+      borderRadius: 50,
+    }
+
+      function computePercent(progress: number, maxValue: number)
       {
         return progress * 100 / maxValue;;
       }
@@ -29,28 +32,43 @@ const ProgressBar = (
         width: `${computePercent(progress, maxValue)}%`,
         backgroundColor: "#18A558",
         borderRadius: 'inherit',
-        textAlign: 'center'
+        textAlign: 'center',
       }
-    
+
       const labelStyles = {
         padding: 5,
         color: 'white',
-        fontWeight: 'bold'
+        fontWeight: 'bold',
+      }
+
+      const titleStyle = {
+        padding: 5,
+        color: 'black',
+        fontWeight: 'bold',
+        fontSize: 20,
+        textAlign: 'center',
       }
 
     if (title != null) {
-      // put the title in the middle TODO
       return (
-        <div style={containerStyles}>
-          <div style={fillerStyles}>
-            <span style={labelStyles}>
-              {`${computePercent(progress, maxValue)}%`}
-            </span>
+        <div style={box}>
+          <div style={titleStyle}>
+            {title}
           </div>
+          <div style={containerStyles}>
+            <div style={fillerStyles}>
+              <span style={labelStyles}>
+                {`${computePercent(progress, maxValue)}%`}
+              </span>
+            </div>
+          </div>
+          <div><p>ceci est un sous titre yay</p></div>
         </div>
-    );
+      );
     }
+
     return (
+      <div style={box}>
         <div style={containerStyles}>
           <div style={fillerStyles}>
             <span style={labelStyles}>
@@ -58,6 +76,7 @@ const ProgressBar = (
             </span>
           </div>
         </div>
+      </div>
     );
 }