From 9510b4d0978ff5bf218e2b3e3b03b1f118efd2d5 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Mon, 19 Aug 2024 23:14:45 -0500
Subject: [PATCH] wrap each set of toolbars into groups

Allows more styling options, including flex wrapping by group rather than individual button.
---
 .../homebrew/brewRenderer/toolBar/toolBar.jsx | 129 +++++++++---------
 1 file changed, 67 insertions(+), 62 deletions(-)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 0111e04db..f7ae63fcc 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -31,75 +31,80 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 
 	return (
 		<div className='toolBar'>
-			<div className='tool'>
-				<button
-					onClick={()=>handleZoomChange(-20)}
-					disabled={zoomLevel <= MIN_ZOOM}
-				>
-					<i className='fas fa-magnifying-glass-minus' />
-				</button>
+			<div className='group'>
+				<div className='tool'>
+					<button
+						onClick={()=>handleZoomChange(-20)}
+						disabled={zoomLevel <= MIN_ZOOM}
+					>
+						<i className='fas fa-magnifying-glass-minus' />
+					</button>
+				</div>
+				<div className='tool'>
+					<input
+						className='slider'
+						type='range'
+						name='zoom'
+						list='zoomLevels'
+						min={MIN_ZOOM}
+						max={MAX_ZOOM}
+						step='1'
+						value={zoomLevel}
+						onChange={(e)=>{setZoomLevel(parseInt(e.target.value));}}
+					/>
+					<datalist id='zoomLevels'>
+						<option value='100' />
+					</datalist>
+				</div>
+
+				<div className='tool'>
+					<button
+						onClick={()=>handleZoomChange(20)}
+						disabled={zoomLevel >= MAX_ZOOM}
+					>
+						<i className='fas fa-magnifying-glass-plus' />
+					</button>
+				</div>
 			</div>
-			<div className='tool'>
+
+			<div className='group'>
+				<div className='tool'>
+					<button
+						className='previousPage'
+						onClick={()=>onPageChange(pageInput - 1)}
+						disabled={pageInput <= 1}
+					>
+						<i className='fas fa-arrow-left'></i>
+					</button>
+				</div>
+
 				<input
-					className='slider'
-					type='range'
-					name='zoom'
-					list='zoomLevels'
-					min={MIN_ZOOM}
-					max={MAX_ZOOM}
-					step='1'
-					value={zoomLevel}
-					onChange={(e)=>{setZoomLevel(parseInt(e.target.value));}}
+					type='text'
+					name='page'
+					inputMode='numeric'
+					pattern='[0-9]'
+					id='pageInput'
+					value={pageInput}
+					onChange={(e)=>{
+						handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}}
+					onBlur={()=>onPageChange(pageInput)}
 				/>
-				<datalist id='zoomLevels'>
-					<option value='100' />
-				</datalist>
-			</div>
 
-			<div className='tool'>
-				<button
-					onClick={()=>handleZoomChange(20)}
-					disabled={zoomLevel >= MAX_ZOOM}
-				>
-					<i className='fas fa-magnifying-glass-plus' />
-				</button>
-			</div>
+				<span id='page-count'>/ {totalPages}</span>
 
-			<div className='tool'>
-				<button
-					className='previousPage'
-					onClick={()=>onPageChange(pageInput - 1)}
-					disabled={pageInput <= 1}
-				>
-					<i className='fas fa-arrow-left'></i>
-				</button>
-			</div>
-
-			<input
-				type='text'
-				name='page'
-				inputMode='numeric'
-				pattern='[0-9]'
-				id='pageInput'
-				value={pageInput}
-				onChange={(e)=>{
-					handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}}
-				onBlur={()=>onPageChange(pageInput)}
-			/>
-
-			<span id='page-count'>/ {totalPages}</span>
-
-			<div className='tool'>
-				<button
-					className='nextPage'
-					// onClick={()=>{setPageInput((pageInput)=>parseInt(pageInput) + 1)}}
-					onClick={()=>onPageChange(pageInput + 1)}
-					disabled={pageInput >= totalPages}
-				>
-					<i className='fas fa-arrow-right'></i>
-				</button>
+				<div className='tool'>
+					<button
+						className='nextPage'
+						// onClick={()=>{setPageInput((pageInput)=>parseInt(pageInput) + 1)}}
+						onClick={()=>onPageChange(pageInput + 1)}
+						disabled={pageInput >= totalPages}
+					>
+						<i className='fas fa-arrow-right'></i>
+					</button>
+				</div>
 			</div>
 		</div>
+
 	);
 };