move zoom reset button next to header + styling

SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss

@@ -193,9 +193,12 @@
     }
   }
 
-  .reset-container {
-    margin-right: 1.5rem;
-    margin-left: 2.5rem;
+  .reset-button {
+    margin-left: 0.5rem;
+    padding: 0 0.25rem;
+    border-radius: 20%;
+    font-size: 12px;
+    width: fit-content;
   }
 }
 

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/toolbar/ZoomAndMove.js

@@ -4,7 +4,12 @@ import {updateStore} from "../../../../services/store.helper";
 import {Spinner} from "reactstrap";
 import UIConstants from "../../../../utils/ui.constants";
 import {Button} from "primereact/button";
-import {getMovePossibilities, getZoomPossibilities, getZoomTimes, moveTimeline} from "../../helpers/toolbar/zoomandmove.helper";
+import {
+    getMovePossibilities,
+    getZoomPossibilities,
+    getZoomTimes,
+    moveTimeline
+} from "../../helpers/toolbar/zoomandmove.helper";
 
 function getIconButton(title, onClickCallback, iconClassName, disabled = false) {
     let tooltipText = disabled ? "Maximum reached. Cannot " + title : title
@@ -54,21 +59,6 @@ function getZoomSelect(currentZoomLevelName, allOptions, setZoomLevelName) {
 }
 
 
-function getResetButton(onClickResetCallback) {
-    return <div className="reset-container">
-        <label>Reset</label>
-        <div>
-            <Button icon="pi pi-undo"
-                    className="p-button p-button-primary"
-                    onClick={onClickResetCallback}
-                    title="Reset Zoom to 1 day"
-                    data-testid="zoom-reset-button"
-            />
-        </div>
-    </div>
-}
-
-
 export default function ZoomAndMove(props) {
     const {
         timelineStore,
@@ -99,10 +89,17 @@ export default function ZoomAndMove(props) {
     }
 
     return <div className="timeline-zoom-and-move section">
-        <div className="header">Zoom</div>
+        <div className="header">
+            Zoom
+            <Button icon="fas fa-undo"
+                    className="p-button p-button-primary reset-button"
+                    onClick={() => setZoomLevelName(UIConstants.DEFAULT_ZOOM_LEVEL.name)}
+                    title="Reset Zoom to 1 day"
+                    data-testid="zoom-reset-button"
+            />
+        </div>
         <div className="group">
             {getZoomSelect(zoomLevelName, UIConstants.ALL_ZOOM_LEVELS_WEEK, setZoomLevelName)}
-            {getResetButton(() => setZoomLevelName(UIConstants.DEFAULT_ZOOM_LEVEL.name))}
             {getZoomAndMoveActions(zoomLevelName, setZoomLevelName, visibleStartTime, setVisibleStartTime, visibleEndTime, setVisibleEndTime)}
         </div>
     </div>

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/toolbar/ZoomAndMove.test.js

@@ -8,7 +8,7 @@ removeReact18ConsoleErrors()
 jest.mock('../../../../services/store.helper', () => ({
     updateStore: jest.fn(),
 }));
-jest.mock('../../helpers/zoomandmove.helper', () => ({
+jest.mock('../../helpers/toolbar/zoomandmove.helper', () => ({
     moveTimeline: jest.fn(),
     getZoomPossibilities: jest.fn(),
     getMovePossibilities: jest.fn(),