"refactored ToolBar component to use a single state object, and updated styles in toolBar.less"

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -284,11 +284,6 @@ const BrewRenderer = (props)=>{
 						<RenderWarnings />
 						<NotificationPopup />
 					</div>
-					<link href={`/themes/${rendererPath}/Blank/style.css`} type='text/css' rel='stylesheet'/>
-					{baseThemePath &&
-						<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} type='text/css' rel='stylesheet'/>
-					}
-					<link href={`/themes/${rendererPath}/${themePath}/style.css`} type='text/css' rel='stylesheet'/>
 					{makeZoom()}
 
 					{/* Apply CSS from Style tab and render pages from Markdown tab */}

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -1,33 +1,26 @@
 require('./toolBar.less');
 const React = require('react');
-const { useState, useRef, useEffect } = React;
+const { useState, useEffect } = React;
-const _ = require('lodash');
 
 const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
     const [state, setState] = useState({
         currentPage: currentPage,
         totalPages: totalPages,
         zoomLevel: 100,
+        pageNumberInput: currentPage,
+        zoomInput: 100,
     });
 
-    const [pageNumberInput, setPageNumberInput] = useState(
-        state.currentPage
-    );
-    const [zoomInput, setZoomInput] = useState(state.zoomLevel);
-
     useEffect(() => {
-        console.log(`Zoom to: ${state.zoomLevel}`);
         updateZoom(state.zoomLevel);
-        setZoomInput(state.zoomLevel);
     }, [state.zoomLevel]);
 
-    // Update currentPage whenever page prop changes
     useEffect(() => {
         setState((prevState) => ({
             ...prevState,
             currentPage: currentPage,
+            pageNumberInput: currentPage,
         }));
-        setPageNumberInput(currentPage);
     }, [currentPage]);
 
     const setZoomLevel = (direction) => {
@@ -35,7 +28,7 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
         if (direction === 'in') {
             zoomLevel += 10;
         } else {
-            zoomLevel = zoomLevel - 10;
+            zoomLevel -= 10;
         }
 
         setState((prevState) => ({
@@ -47,17 +40,16 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
     const handleInputChange = (value, type) => {
         const newValue = parseInt(value, 10);
 
-        // Check the type of input (zoom or page)
+        if (type === 'zoom' && newValue >= 10 && newValue <= 300) {
-        if (type === 'zoom') {
+            setState((prevState) => ({
-            // Check if zoom level is within the allowed range
+                ...prevState,
-            if (newValue >= 10 && newValue <= 300) {
+                zoomInput: newValue,
-                setZoomInput(newValue);
+            }));
-            }
+        } else if (type === 'page' && newValue >= 1 && newValue <= totalPages) {
-        } else if (type === 'page') {
+            setState((prevState) => ({
-            // Check if page number is within the allowed range
+                ...prevState,
-            if (newValue >= 1 && newValue <= totalPages) {
+                pageNumberInput: newValue,
-                setPageNumberInput(newValue);
+            }));
-            }
         }
     };
 
@@ -74,34 +66,31 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
 
             <div className="tool">
                 <input
-                    type="number"
+                    className='slider'
+                    type="range"
                     name="zoom"
                     min={10}
                     max={300}
-                    value={zoomInput}
+                    value={state.zoomInput}
                     onChange={(e) => handleInputChange(e.target.value, 'zoom')}
-                    onBlur={(e) => {
+                    onMouseUp={(e) => {
-                        const newZoomLevel = parseInt(
+                        const newZoomLevel = parseInt(e.target.value, 10);
-                            e.target.value,
-                            10
-                        );
                         if (newZoomLevel !== state.zoomLevel) {
+                            setState((prevState) => ({
+                                ...prevState,
+                                zoomLevel: newZoomLevel,
+                                zoomInput: newZoomLevel,
+                            }));
                             updateZoom(newZoomLevel);
                         }
                     }}
-                    onKeyPress={(e) => {
-                        if (e.key === 'Enter') {
-                            e.target.blur();
-                        }
-                    }}
                 />
-                <span>%</span>
             </div>
 
             <div className="tool">
                 <button
                     onClick={() => setZoomLevel('out')}
-                    disabled={state.zoomLevel <= 20}
+                    disabled={state.zoomLevel <= 10}
                 >
                     Zoom Out
                 </button>
@@ -126,11 +115,11 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
                 min={1}
                 max={state.totalPages}
                 id="pageInput"
-                value={pageNumberInput}
+                value={state.pageNumberInput}
                 onChange={(e) => handleInputChange(e.target.value, 'page')}
                 onBlur={(e) => {
-                    parseInt(pageNumberInput) === state.currentPage ||
+                    parseInt(state.pageNumberInput) === state.currentPage ||
-                        onPageChange(parseInt(pageNumberInput) - 1);
+                        onPageChange(parseInt(state.pageNumberInput) - 1);
                 }}
                 onKeyPress={(e) => {
                     if (e.key === 'Enter') {
@@ -143,7 +132,9 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
                 <button
                     className="nextPage"
                     onClick={() => {
-                        console.log(`page is ${state.currentPage} and i move to ${state.currentPage}`);
+                        console.log(
+                            `page is ${state.currentPage} and i move to ${state.currentPage}`
+                        );
                         onPageChange(state.currentPage);
                     }}
                     disabled={state.currentPage >= state.totalPages}

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -19,6 +19,7 @@
 	border-bottom    : 1px solid #666666;
 
 	input {
+		position: relative;
 		height         : 1.5em;
 		padding        : 2px 5px;
 		font-family    : 'Open Sans', sans-serif;
@@ -28,6 +29,35 @@
 		text-transform : uppercase;
 		background     : #EEEEEE;
 		border-radius  : 7px;
+
+		&.slider {
+			appearance: none;
+  			width: 100%; 
+  			height: 5px;
+  			background: #d3d3d3; 
+  			outline: none;
+			isolation: isolate;
+  
+			&::-webkit-slider-thumb {
+				appearance: none;
+  				width: 7px; 
+  				height: 15px; 
+  				background-color: rgb(39, 174, 96);
+  				cursor: pointer; 
+			}
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: 50%;
+				left: 33.33%;
+				transform: translate(-50%, -50%);
+				width: 7px;
+				height: 15px;
+				background-color: #d3d3d3;
+				z-index: -1;
+			}
+		}
 	}
 
 	.tool {