diff --git a/survey-frontend/src/SurveyNavigationComponent.tsx b/survey-frontend/src/SurveyNavigationComponent.tsx index 13da45cf82680acf32c787dcc1a08c3ebe4c46b9..1bb5ec824bb0810c4b930d704610c6cb6a5bbe2c 100644 --- a/survey-frontend/src/SurveyNavigationComponent.tsx +++ b/survey-frontend/src/SurveyNavigationComponent.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useState } from "react"; import ProgressBar from './ProgressBar'; +import { Container, Row } from "react-bootstrap"; function SurveyNavigationComponent({ surveyModel, endSurvey, saveSurvey, validatePage, children }) { @@ -30,11 +31,11 @@ function SurveyNavigationComponent({ surveyModel, endSurvey, saveSurvey, validat <div className="navigation-block"> <div className="navigation-progress-container"> <div className="navigation-buttons-container"> - {(pageNo === surveyModel.visiblePages.length - 1) && renderButton('Complete', endSurvey)} - {renderButton('Save', saveSurvey)} - {(pageNo !== surveyModel.visiblePages.length - 1) && renderButton('Next Page', incrementPageNo)} - {renderButton('Validate Page', validatePage)} - {pageNo !== 0 && renderButton('Previous Page', decrementPageNo)} + {(pageNo === surveyModel.visiblePages.length - 1) && renderButton('Complete Survey', endSurvey)} + {renderButton('Save progress', saveSurvey)} + {/* {(pageNo !== surveyModel.visiblePages.length - 1) && renderButton('Next Page', incrementPageNo)} */} + {/* {renderButton('Validate Page', validatePage)} */} + {/* {pageNo !== 0 && renderButton('Previous Page', decrementPageNo)} */} </div> </div> </div> @@ -42,12 +43,19 @@ function SurveyNavigationComponent({ surveyModel, endSurvey, saveSurvey, validat }; return ( - <div> - <ProgressBar surveyModel={surveyModel} pageNoSetter={pageNoSetter} /> - {renderExternalNavigation()} - {children} - {renderExternalNavigation()} - </div> + <Container> + <Row> + {renderExternalNavigation()} + </Row> + <Row> + <ProgressBar surveyModel={surveyModel} pageNoSetter={pageNoSetter} /> + {children} + </Row> + <Row> + {renderExternalNavigation()} + </Row> + + </Container> ); }