refactor the survey progressbar component

survey-frontend/src/ProgressBar.tsx

 import React, { useEffect, useState } from "react";
+import { Col, Container, Row } from "react-bootstrap";
 
 interface Progress {
     completionPercentage: number;
@@ -16,6 +17,9 @@ function ProgressBar({ surveyModel, pageNoSetter }) {
         return question.value !== null && question.value !== undefined;
     };
 
+
+
+    useEffect(() => {
         const calculateProgress = (survey) => {
             if (survey && survey.pages) {
                 const progressArray: Progress[] = [];
@@ -40,7 +44,6 @@ function ProgressBar({ surveyModel, pageNoSetter }) {
             }
         };
 
-    useEffect(() => {
         surveyModel.onValueChanged.add((sender) => {
             calculateProgress(sender);
         });
@@ -49,63 +52,51 @@ function ProgressBar({ surveyModel, pageNoSetter }) {
     }, [surveyModel]);
 
 
-    function progressBarContainerStyle(sectionProgress): React.CSSProperties {
-        return {
-            display: "flex",
-            flexWrap: "wrap",
-            height: "10px",
-            margin: "5px",
-            width: `${100 / sectionProgress.totalPages}%`,
-        }
-    }
-
-    const progressBarFillStyle: React.CSSProperties = {
-        height: "100%",
+    const progressBarStyle: React.CSSProperties = {
+        height: "0.5rem",
         transition: "width 0.3s ease",
     };
 
-    function progressBarFillStyleCopy(sectionProgress): React.CSSProperties {
-        return {
-            ...progressBarFillStyle,
+    return (
+        <Container className="survey-progress">
+            <Row>
+                {progress.map((sectionProgress, index) => (
+                    <Col xs={12} md key={index} onClick={() => pageNoSetter(index)} style={{ cursor: "pointer", margin: '0.5rem' }}>
+                        <div>
+                            <span style={{
+                                whiteSpace: "nowrap",
+                                fontSize: "1.5rem",
+                                marginRight: "0.25rem",
+                                fontWeight: "bold",
+                                color: "#2db394",
+                            }}>{index + 1}</span>
+                            <span style={{
+                                whiteSpace: "nowrap",
+                                ...(surveyModel.currentPageNo == index) && {
+                                    fontWeight: "bold",
+                                },
+                            }}>{sectionProgress.pageTitle}</span>
+                            <div style={{ display: "flex", flexWrap: "wrap" }}>
+
+                                <div style={{
+                                    ...progressBarStyle,
                                     width: `${sectionProgress.completionPercentage}%`,
-            backgroundColor: "#1ab394",
-        }
-    }
-
-    function unansweredProgressBarFillStyle(sectionProgress): React.CSSProperties {
-        return {
-            ...progressBarFillStyle,
+                                    backgroundColor: "#262261",
+                                }} />
+                                <div style={{
+                                    ...progressBarStyle,
                                     width: `${sectionProgress.unansweredPercentage}%`,
-            backgroundColor: "#9d9d9d",
-        }
-    }
+                                    backgroundColor: "#cdcdcd",
+                                }} />
 
-    function pageTitleStyle(index): React.CSSProperties {
-        if (surveyModel.currentPageNo == index) {
-            return {
-                width: "100%",
-                textAlign: "center",
-                fontWeight: "bold"
-            }
-        } else {
-            return {
-                width: "100%",
-                textAlign: "center"
-            }
-        }
-    }
-
-    return (
-        <div className="survey-progress">
-            {progress.map((sectionProgress, index) => (
-                <div key={index} style={progressBarContainerStyle(sectionProgress)} onClick={() => pageNoSetter(index)}>
-                    <div style={progressBarFillStyleCopy(sectionProgress)} />
-                    <div style={unansweredProgressBarFillStyle(sectionProgress)} />
-                    <div style={pageTitleStyle(index)}>{sectionProgress.pageTitle}</div>
                             </div>
-            ))}
                         </div>
-    );
+
+                    </Col>
+
+                ))}
+            </Row>
+        </Container>);
 }
 
 export default ProgressBar;