From 64fb0326220e484b08afdf5abedc8501dd0077c9 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Thu, 22 Aug 2024 15:51:16 -0500
Subject: [PATCH 01/13] fix className

---
 client/homebrew/brewRenderer/toolBar/toolBar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 8569e5df8..f857d5773 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -91,7 +91,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<div className='tool'>
 					<input
 						id='page-input'
-						class='text-input'
+						className='text-input'
 						type='text'
 						name='page'
 						inputMode='numeric'

From 8965bb60aa3b36eb809ef6cf85f4ec891191b8dd Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Thu, 22 Aug 2024 15:52:52 -0500
Subject: [PATCH 02/13] add a toFit() method to determine zoom change

Adds a toFit() method to determine the delta/change needed to the current zoomLevel to fit the page to the pane, so that the widest page fits just inside the pane.
---
 .../homebrew/brewRenderer/toolBar/toolBar.jsx | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index f857d5773..8276f366f 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -41,9 +41,36 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		}
 	};
 
+
+	const toFit = ()=>{
+		const iframe = document.getElementById('BrewRenderer');
+		const iframeWidth = iframe.getBoundingClientRect().width;
+		const pages = iframe.contentWindow.document.getElementsByClassName('page');
+
+		// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
+		let widestPage = 0;
+		[...pages].forEach((page)=>{
+			const width = page.offsetWidth;
+			if(width > widestPage)
+				widestPage = width;
+		});
+
+		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fit")
+		const desiredZoom = (iframeWidth / widestPage) * 100;
+		const deltaZoom = (desiredZoom - zoomLevel) - margin;
+		return deltaZoom;
+	}
+
 	return (
 		<div className='toolBar'>
 			<div className='group'>
+				<button
+					id='zoom-to-fit'
+					className='tool'
+					onClick={()=>handleZoomChange(toFit())}
+				>
+					toFit
+				</button>
 				<button
 					id='zoom-out'
 					className='tool'

From 4c71987866ee26868c7454149c1ee7504cef1abe Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Thu, 22 Aug 2024 15:54:58 -0500
Subject: [PATCH 03/13] change the toFit method to toFill

Realized this method is filling the preview pane, and that toFit would force the zoom to show the entirety of a single page at once.
---
 client/homebrew/brewRenderer/toolBar/toolBar.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 8276f366f..c0e5ca469 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -42,7 +42,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	};
 
 
-	const toFit = ()=>{
+	const toFill = ()=>{
 		const iframe = document.getElementById('BrewRenderer');
 		const iframeWidth = iframe.getBoundingClientRect().width;
 		const pages = iframe.contentWindow.document.getElementsByClassName('page');
@@ -55,7 +55,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				widestPage = width;
 		});
 
-		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fit")
+		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")
 		const desiredZoom = (iframeWidth / widestPage) * 100;
 		const deltaZoom = (desiredZoom - zoomLevel) - margin;
 		return deltaZoom;
@@ -65,11 +65,11 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		<div className='toolBar'>
 			<div className='group'>
 				<button
-					id='zoom-to-fit'
+					id='zoom-to-fill'
 					className='tool'
-					onClick={()=>handleZoomChange(toFit())}
+					onClick={()=>handleZoomChange(toFill())}
 				>
-					toFit
+					toFill
 				</button>
 				<button
 					id='zoom-out'

From 90dd4326e7ed680944c8c2dc9215efcfe617e0a5 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Thu, 22 Aug 2024 20:56:42 -0500
Subject: [PATCH 04/13] Add a toFit() method to fit largest page in view

Adding a real toFit() button that takes the page with the largest single dimension (height or width) and makes it fit within the pane.
---
 .../homebrew/brewRenderer/toolBar/toolBar.jsx | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index c0e5ca469..71a76252b 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -59,7 +59,31 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		const desiredZoom = (iframeWidth / widestPage) * 100;
 		const deltaZoom = (desiredZoom - zoomLevel) - margin;
 		return deltaZoom;
-	}
+	};
+
+	const toFit = ()=>{
+		const iframe = document.getElementById('BrewRenderer');
+		const iframeWidth = iframe.getBoundingClientRect().width;
+		const iframeHeight = iframe.getBoundingClientRect().height;
+		const pages = iframe.contentWindow.document.getElementsByClassName('page');
+
+		let maxDimRatio = 0;
+
+		[...pages].forEach((page)=>{
+			const widthRatio = iframeWidth / page.offsetWidth;
+			const heightRatio = iframeHeight / page.offsetHeight;
+			const dimensionRatio = Math.min(widthRatio, heightRatio);
+			if(dimensionRatio < maxDimRatio || maxDimRatio == 0){
+				maxDimRatio = dimensionRatio;
+			}
+		});
+
+		const margin = 5;
+		const desiredZoom = maxDimRatio * 100;
+		const deltaZoom = desiredZoom - zoomLevel - margin;
+
+		return deltaZoom;
+	};
 
 	return (
 		<div className='toolBar'>
@@ -71,6 +95,13 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				>
 					toFill
 				</button>
+				<button
+					id='zoom-to-fit'
+					className='tool'
+					onClick={()=>handleZoomChange(toFit())}
+				>
+					toFit
+				</button>
 				<button
 					id='zoom-out'
 					className='tool'

From 977b871967ad2ac98130aa4a221ee639e9cca85c Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Thu, 22 Aug 2024 23:19:24 -0500
Subject: [PATCH 05/13] Combine toFit and toFill functions

Reduce overlap of the two functions and just require a 'mode' parameter.  Could like roll a 'manual' mode into this for the zoom slider, as well, but skipping for now.
---
 .../homebrew/brewRenderer/toolBar/toolBar.jsx | 67 +++++++++----------
 1 file changed, 33 insertions(+), 34 deletions(-)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 71a76252b..4ef5ab211 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -42,46 +42,45 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	};
 
 
-	const toFill = ()=>{
-		const iframe = document.getElementById('BrewRenderer');
-		const iframeWidth = iframe.getBoundingClientRect().width;
-		const pages = iframe.contentWindow.document.getElementsByClassName('page');
-
-		// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
-		let widestPage = 0;
-		[...pages].forEach((page)=>{
-			const width = page.offsetWidth;
-			if(width > widestPage)
-				widestPage = width;
-		});
-
-		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")
-		const desiredZoom = (iframeWidth / widestPage) * 100;
-		const deltaZoom = (desiredZoom - zoomLevel) - margin;
-		return deltaZoom;
-	};
-
-	const toFit = ()=>{
+	const calculateZoom = (mode)=>{
 		const iframe = document.getElementById('BrewRenderer');
 		const iframeWidth = iframe.getBoundingClientRect().width;
 		const iframeHeight = iframe.getBoundingClientRect().height;
 		const pages = iframe.contentWindow.document.getElementsByClassName('page');
 
-		let maxDimRatio = 0;
+		let desiredZoom = 0;
 
-		[...pages].forEach((page)=>{
-			const widthRatio = iframeWidth / page.offsetWidth;
-			const heightRatio = iframeHeight / page.offsetHeight;
-			const dimensionRatio = Math.min(widthRatio, heightRatio);
-			if(dimensionRatio < maxDimRatio || maxDimRatio == 0){
-				maxDimRatio = dimensionRatio;
-			}
-		});
+		if(mode == 'fill'){
+			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
+			let widestPage = 0;
+			[...pages].forEach((page)=>{
+				const width = page.offsetWidth;
+				if(width > widestPage)
+					widestPage = width;
+			});
 
-		const margin = 5;
-		const desiredZoom = maxDimRatio * 100;
-		const deltaZoom = desiredZoom - zoomLevel - margin;
+			desiredZoom = (iframeWidth / widestPage) * 100;
 
+		} else if(mode == 'fit'){
+			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
+			let maxDimRatio = 0;
+
+			[...pages].forEach((page)=>{
+				const widthRatio = iframeWidth / page.offsetWidth;
+				const heightRatio = iframeHeight / page.offsetHeight;
+				const dimensionRatio = Math.min(widthRatio, heightRatio);
+				if(dimensionRatio < maxDimRatio || maxDimRatio == 0){
+					maxDimRatio = dimensionRatio;
+				}
+			});
+
+			desiredZoom = maxDimRatio * 100;
+
+		}
+
+		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")
+
+		const deltaZoom = (desiredZoom - zoomLevel) - margin;
 		return deltaZoom;
 	};
 
@@ -91,14 +90,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='zoom-to-fill'
 					className='tool'
-					onClick={()=>handleZoomChange(toFill())}
+					onClick={()=>handleZoomChange(calculateZoom('fill'))}
 				>
 					toFill
 				</button>
 				<button
 					id='zoom-to-fit'
 					className='tool'
-					onClick={()=>handleZoomChange(toFit())}
+					onClick={()=>handleZoomChange(calculateZoom('fit'))}
 				>
 					toFit
 				</button>

From 0dc9e9ecdbfbf0b8cfb3446b4304d4de579a1bf8 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Thu, 22 Aug 2024 23:21:48 -0500
Subject: [PATCH 06/13] Add 2 custom zoom related icons

New icons for Zoom to Fit, and Fit Width buttons.  Used SVGR online tool to create react components and then combined them.

If doing in future, be sure to set currentColor on `fill` property in the SVG itself.  Make the SVGs as closed curves only (don't rely on stroke).  set only a width property, not height.
---
 .../homebrew/brewRenderer/toolBar/toolBar.jsx |  6 ++-
 client/icons/icon-components/zoomIcons.jsx    | 46 +++++++++++++++++++
 2 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 client/icons/icon-components/zoomIcons.jsx

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 4ef5ab211..07d6cfb70 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -3,6 +3,8 @@ const React = require('react');
 const { useState, useEffect } = React;
 const _ = require('lodash')
 
+import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';
+
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
 
@@ -92,14 +94,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 					className='tool'
 					onClick={()=>handleZoomChange(calculateZoom('fill'))}
 				>
-					toFill
+					<ZoomIcons.FitWidth title='Fit to Width' style={{ width: '1.5em' }} />
 				</button>
 				<button
 					id='zoom-to-fit'
 					className='tool'
 					onClick={()=>handleZoomChange(calculateZoom('fit'))}
 				>
-					toFit
+					<ZoomIcons.FitAll title='Zoom to Fit' style={{ width: '1.5em' }} />
 				</button>
 				<button
 					id='zoom-out'
diff --git a/client/icons/icon-components/zoomIcons.jsx b/client/icons/icon-components/zoomIcons.jsx
new file mode 100644
index 000000000..27aed8799
--- /dev/null
+++ b/client/icons/icon-components/zoomIcons.jsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+const FitAll = ({ title, titleId, ...props })=>(
+	<svg
+		xmlns='http://www.w3.org/2000/svg'
+		xmlSpace='preserve'
+		style={{
+			fillRule         : 'evenodd',
+			clipRule         : 'evenodd',
+			strokeLinejoin   : 'round',
+			strokeMiterlimit : 2,
+		}}
+		viewBox='0 0 100 100'
+		width='1em'
+		fill='currentColor'
+		aria-labelledby={titleId}
+		{...props}
+	>
+	  	{title ? <title id={titleId}>{title}</title> : null}
+		<path d='M45.46 54.54h-14.4v6.304a2.87 2.87 0 0 1-4.9 2.034L15.333 52.033a2.88 2.88 0 0 1 0-4.067l10.825-10.844a2.868 2.868 0 0 1 3.13-.623 2.877 2.877 0 0 1 1.771 2.657v6.303h14.4v-14.4h-6.304a2.867 2.867 0 0 1-2.033-4.9l10.844-10.825a2.88 2.88 0 0 1 4.066 0l10.845 10.825a2.867 2.867 0 0 1 .623 3.129 2.875 2.875 0 0 1-2.657 1.772H54.54v14.4h14.398v-6.304c0-1.163.7-2.211 1.772-2.657a2.868 2.868 0 0 1 3.13.623l10.825 10.844a2.88 2.88 0 0 1 0 4.067L73.84 62.878a2.87 2.87 0 0 1-4.9-2.034V54.54h-14.4v14.4h6.304c1.163 0 2.211.7 2.657 1.772a2.866 2.866 0 0 1-.623 3.128L52.033 84.665a2.879 2.879 0 0 1-4.066 0L37.123 73.84a2.866 2.866 0 0 1-.624-3.128 2.877 2.877 0 0 1 2.657-1.773l6.304.001v-14.4Z' />
+		<path d='M100 8.043v83.913A8.048 8.048 0 0 1 91.956 100H8.043A8.047 8.047 0 0 1 0 91.956V8.043A8.047 8.047 0 0 1 8.043 0h83.913A8.047 8.047 0 0 1 100 8.043Zm-6.371 0c0-.923-.75-1.672-1.673-1.672H8.043c-.923 0-1.672.749-1.672 1.672v83.913c0 .923.749 1.673 1.672 1.673h83.913c.924 0 1.673-.75 1.673-1.673V8.043Z' />
+	</svg>
+);
+
+const FitWidth = ({ title, titleId, ...props })=>(
+	<svg
+		xmlns='http://www.w3.org/2000/svg'
+		xmlSpace='preserve'
+		style={{
+			fillRule         : 'evenodd',
+			clipRule         : 'evenodd',
+			strokeLinejoin   : 'round',
+			strokeMiterlimit : 2,
+	  }}
+		viewBox='0 0 100 100'
+		width='1em'
+		fill='currentColor'
+		aria-labelledby={titleId}
+		{...props}
+	>
+	  {title ? <title id={titleId}>{title}</title> : null}
+	  <path d='M31.06 54.54v6.304a2.87 2.87 0 0 1-4.9 2.034L15.332 52.032a2.88 2.88 0 0 1 0-4.067L26.16 37.122a2.868 2.868 0 0 1 3.129-.623 2.877 2.877 0 0 1 1.772 2.657v6.303h37.879v-6.303c0-1.163.7-2.211 1.772-2.657a2.868 2.868 0 0 1 3.129.623l10.825 10.844a2.88 2.88 0 0 1 0 4.067L73.84 62.877a2.87 2.87 0 0 1-4.901-2.033V54.54h-37.88ZM9.282 6.248v87.503a4.178 4.178 0 0 1-4.176 4.177H4.85A4.178 4.178 0 0 1 .674 93.75V6.248A4.177 4.177 0 0 1 4.85 2.072h.256a4.177 4.177 0 0 1 4.176 4.176ZM99.326 6.248v87.503a4.178 4.178 0 0 1-4.177 4.177h-.255a4.178 4.178 0 0 1-4.176-4.177V6.248a4.177 4.177 0 0 1 4.176-4.176h.255a4.177 4.177 0 0 1 4.177 4.176Z' />
+	</svg>
+);
+export { FitWidth, FitAll };
+

From 8dadc579344e502837a043e3f1082020c835210d Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Thu, 22 Aug 2024 23:22:39 -0500
Subject: [PATCH 07/13] adjustment to toolbar spacing between items

testing the use of spacing to separate tool groups.  Could alternatively use a thin vertical bar.
---
 client/homebrew/brewRenderer/toolBar/toolBar.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less
index a758f7574..6bf147b62 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.less
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.less
@@ -5,7 +5,7 @@
 	flex-wrap        : wrap;
 	gap              : 8px 30px;
 	align-items      : center;
-	justify-content  : center;
+	justify-content  : space-around;
 	box-sizing       : border-box;
 	width            : 100%;
 	height           : auto;

From b0b1f7fd0bdaa57b47243f4ee77c65675ce4a964 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Fri, 23 Aug 2024 22:58:43 -0500
Subject: [PATCH 08/13] update method calls for zoom buttons

update method names in onClick events to match latest changes to the branch this builds from.
---
 client/homebrew/brewRenderer/toolBar/toolBar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index f9c134d51..544ff7ff0 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -87,14 +87,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='zoom-to-fill'
 					className='tool'
-					onClick={()=>handleZoomChange(calculateZoom('fill'))}
+					onClick={()=>handleZoomButton(calculateZoom('fill'))}
 				>
 					<ZoomIcons.FitWidth title='Fit to Width' style={{ width: '1.5em' }} />
 				</button>
 				<button
 					id='zoom-to-fit'
 					className='tool'
-					onClick={()=>handleZoomChange(calculateZoom('fit'))}
+					onClick={()=>handleZoomButton(calculateZoom('fit'))}
 				>
 					<ZoomIcons.FitAll title='Zoom to Fit' style={{ width: '1.5em' }} />
 				</button>

From 6bb5d04f07acbeccfcc7a6bba86a96e397cbf121 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Fri, 23 Aug 2024 23:02:04 -0500
Subject: [PATCH 09/13] round the calculated zoom level

---
 client/homebrew/brewRenderer/toolBar/toolBar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 544ff7ff0..ae5949b2d 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -22,7 +22,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	}, [currentPage]);
 
 	const handleZoomButton = (delta)=>{
-		const newZoomLevel = _.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM);
+		const newZoomLevel = _.round(_.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM));
 		setZoomLevel(newZoomLevel);
 	};
 

From 7b767368dfdd856b44bb13661fe03604a7e1b7a8 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Mon, 26 Aug 2024 15:51:35 -0500
Subject: [PATCH 10/13] Change icons to mask-image

Removes icons as components, uses mask-image instead.

Sets a size on the .fac icons to 1em so by default they are 1em and retain their aspect ratio.

rename the icon files for consistency.
---
 .../homebrew/brewRenderer/toolBar/toolBar.jsx |  7 ++-
 .../brewRenderer/toolBar/toolBar.less         |  5 ++
 client/icons/customIcons.less                 | 50 ++++++++++++-------
 client/icons/fit-width.svg                    | 15 ++++++
 client/icons/icon-components/zoomIcons.jsx    | 46 -----------------
 client/icons/zoom-to-fit.svg                  | 12 +++++
 6 files changed, 66 insertions(+), 69 deletions(-)
 create mode 100644 client/icons/fit-width.svg
 delete mode 100644 client/icons/icon-components/zoomIcons.jsx
 create mode 100644 client/icons/zoom-to-fit.svg

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index ad9b99f1f..7a111fbb8 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -3,7 +3,6 @@ const React = require('react');
 const { useState, useEffect } = React;
 const _ = require('lodash');
 
-import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';
 
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
@@ -87,18 +86,18 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
 			<div className='group'>
 				<button
-					id='zoom-to-fill'
+					id='fill-width'
 					className='tool'
 					onClick={()=>handleZoomButton(calculateZoom('fill'))}
 				>
-					<ZoomIcons.FitWidth title='Fit to Width' style={{ width: '1.5em' }} />
+					<i className='fac fit-width' />
 				</button>
 				<button
 					id='zoom-to-fit'
 					className='tool'
 					onClick={()=>handleZoomButton(calculateZoom('fit'))}
 				>
-					<ZoomIcons.FitAll title='Zoom to Fit' style={{ width: '1.5em' }} />
+					<i className='fac zoom-to-fit' />
 				</button>
 				<button
 					id='zoom-out'
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less
index 33a6836ef..d565ca7d4 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.less
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.less
@@ -1,3 +1,5 @@
+@import (less) './client/icons/customIcons.less';
+
 .toolBar {
 	position         : absolute;
 	z-index          : 1;
@@ -94,5 +96,8 @@
 			color            : #777777;
 			background-color : unset !important;
 		}
+		i {
+			font-size:1.2em;
+		}
 	}
 }
\ No newline at end of file
diff --git a/client/icons/customIcons.less b/client/icons/customIcons.less
index dd6605326..c288e6eb2 100644
--- a/client/icons/customIcons.less
+++ b/client/icons/customIcons.less
@@ -1,57 +1,69 @@
 .fac {
-  display      : inline-block;
+	display          : inline-block;
+	background-color : currentColor;
+	mask-size        : contain;
+	mask-repeat      : no-repeat;
+	mask-position    : center;
+	width            : 1em;
+	aspect-ratio     : 1;
 }
 .position-top-left {
-  content: url('../icons/position-top-left.svg');
+  mask-image: url('../icons/position-top-left.svg');
 }
 .position-top-right {
-  content: url('../icons/position-top-right.svg');
+  mask-image: url('../icons/position-top-right.svg');
 }
 .position-bottom-left {
-  content: url('../icons/position-bottom-left.svg');
+  mask-image: url('../icons/position-bottom-left.svg');
 }
 .position-bottom-right {
-  content: url('../icons/position-bottom-right.svg');
+  mask-image: url('../icons/position-bottom-right.svg');
 }
 .position-top {
-  content: url('../icons/position-top.svg');
+  mask-image: url('../icons/position-top.svg');
 }
 .position-right {
-  content: url('../icons/position-right.svg');
+  mask-image: url('../icons/position-right.svg');
 }
 .position-bottom {
-  content: url('../icons/position-bottom.svg');
+  mask-image: url('../icons/position-bottom.svg');
 }
 .position-left {
-  content: url('../icons/position-left.svg');
+  mask-image: url('../icons/position-left.svg');
 }
 .mask-edge {
-  content: url('../icons/mask-edge.svg');
+  mask-image: url('../icons/mask-edge.svg');
 }
 .mask-corner {
-  content: url('../icons/mask-corner.svg');
+  mask-image: url('../icons/mask-corner.svg');
 }
 .mask-center {
-  content: url('../icons/mask-center.svg');
+  mask-image: url('../icons/mask-center.svg');
 }
 .book-front-cover {
-  content: url('../icons/book-front-cover.svg');
+  mask-image: url('../icons/book-front-cover.svg');
 }
 .book-back-cover {
-  content: url('../icons/book-back-cover.svg');
+  mask-image: url('../icons/book-back-cover.svg');
 }
 .book-inside-cover {
-  content: url('../icons/book-inside-cover.svg');
+  mask-image: url('../icons/book-inside-cover.svg');
 }
 .book-part-cover {
-  content: url('../icons/book-part-cover.svg');
+  mask-image: url('../icons/book-part-cover.svg');
 }
 .davek {
-  content: url('../icons/Davek.svg');
+  mask-image: url('../icons/Davek.svg');
 }
 .rellanic {
-  content: url('../icons/Rellanic.svg');
+  mask-image: url('../icons/Rellanic.svg');
 }
 .iokharic {
-  content: url('../icons/Iokharic.svg');
+  mask-image: url('../icons/Iokharic.svg');
+}
+.zoom-to-fit {
+	mask-image: url('../icons/zoom-to-fit.svg');
+}
+.fit-width {
+	mask-image: url('../icons/fit-width.svg');
 }
diff --git a/client/icons/fit-width.svg b/client/icons/fit-width.svg
new file mode 100644
index 000000000..dd3e52f75
--- /dev/null
+++ b/client/icons/fit-width.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.07509,0,0,1.07509,-3.75511,-3.75468)">
+        <g transform="matrix(0.843549,0,0,0.950644,8.38004,4.39672)">
+            <path d="M28.455,52.413L28.455,58.581C28.455,59.719 27.684,60.745 26.501,61.181C25.318,61.616 23.956,61.375 23.051,60.571L11.114,49.96C9.878,48.862 9.878,47.08 11.114,45.981L23.051,35.371C23.956,34.566 25.318,34.326 26.501,34.761C27.684,35.197 28.455,36.223 28.455,37.361L28.455,43.528L70.223,43.528L70.223,37.361C70.223,36.223 70.995,35.197 72.177,34.761C73.36,34.326 74.722,34.566 75.627,35.371L87.564,45.981C88.8,47.08 88.8,48.862 87.564,49.96L75.627,60.571C74.722,61.375 73.36,61.616 72.177,61.181C70.995,60.745 70.223,59.719 70.223,58.581L70.223,52.413L28.455,52.413Z"/>
+        </g>
+        <g transform="matrix(1.46702,0,0,0.986488,-23.0335,3.50686)">
+            <path d="M23.967,5.877L23.967,88.383C23.967,90.556 22.781,92.321 21.319,92.321L21.157,92.321C19.695,92.321 18.509,90.556 18.509,88.383L18.509,5.877C18.509,3.703 19.695,1.939 21.157,1.939L21.319,1.939C22.781,1.939 23.967,3.703 23.967,5.877Z"/>
+        </g>
+        <g transform="matrix(1.46702,0,0,0.986488,60.7211,3.50686)">
+            <path d="M23.967,5.877L23.967,88.383C23.967,90.556 22.781,92.321 21.319,92.321L21.157,92.321C19.695,92.321 18.509,90.556 18.509,88.383L18.509,5.877C18.509,3.703 19.695,1.939 21.157,1.939L21.319,1.939C22.781,1.939 23.967,3.703 23.967,5.877Z"/>
+        </g>
+    </g>
+</svg>
diff --git a/client/icons/icon-components/zoomIcons.jsx b/client/icons/icon-components/zoomIcons.jsx
deleted file mode 100644
index 27aed8799..000000000
--- a/client/icons/icon-components/zoomIcons.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react';
-
-const FitAll = ({ title, titleId, ...props })=>(
-	<svg
-		xmlns='http://www.w3.org/2000/svg'
-		xmlSpace='preserve'
-		style={{
-			fillRule         : 'evenodd',
-			clipRule         : 'evenodd',
-			strokeLinejoin   : 'round',
-			strokeMiterlimit : 2,
-		}}
-		viewBox='0 0 100 100'
-		width='1em'
-		fill='currentColor'
-		aria-labelledby={titleId}
-		{...props}
-	>
-	  	{title ? <title id={titleId}>{title}</title> : null}
-		<path d='M45.46 54.54h-14.4v6.304a2.87 2.87 0 0 1-4.9 2.034L15.333 52.033a2.88 2.88 0 0 1 0-4.067l10.825-10.844a2.868 2.868 0 0 1 3.13-.623 2.877 2.877 0 0 1 1.771 2.657v6.303h14.4v-14.4h-6.304a2.867 2.867 0 0 1-2.033-4.9l10.844-10.825a2.88 2.88 0 0 1 4.066 0l10.845 10.825a2.867 2.867 0 0 1 .623 3.129 2.875 2.875 0 0 1-2.657 1.772H54.54v14.4h14.398v-6.304c0-1.163.7-2.211 1.772-2.657a2.868 2.868 0 0 1 3.13.623l10.825 10.844a2.88 2.88 0 0 1 0 4.067L73.84 62.878a2.87 2.87 0 0 1-4.9-2.034V54.54h-14.4v14.4h6.304c1.163 0 2.211.7 2.657 1.772a2.866 2.866 0 0 1-.623 3.128L52.033 84.665a2.879 2.879 0 0 1-4.066 0L37.123 73.84a2.866 2.866 0 0 1-.624-3.128 2.877 2.877 0 0 1 2.657-1.773l6.304.001v-14.4Z' />
-		<path d='M100 8.043v83.913A8.048 8.048 0 0 1 91.956 100H8.043A8.047 8.047 0 0 1 0 91.956V8.043A8.047 8.047 0 0 1 8.043 0h83.913A8.047 8.047 0 0 1 100 8.043Zm-6.371 0c0-.923-.75-1.672-1.673-1.672H8.043c-.923 0-1.672.749-1.672 1.672v83.913c0 .923.749 1.673 1.672 1.673h83.913c.924 0 1.673-.75 1.673-1.673V8.043Z' />
-	</svg>
-);
-
-const FitWidth = ({ title, titleId, ...props })=>(
-	<svg
-		xmlns='http://www.w3.org/2000/svg'
-		xmlSpace='preserve'
-		style={{
-			fillRule         : 'evenodd',
-			clipRule         : 'evenodd',
-			strokeLinejoin   : 'round',
-			strokeMiterlimit : 2,
-	  }}
-		viewBox='0 0 100 100'
-		width='1em'
-		fill='currentColor'
-		aria-labelledby={titleId}
-		{...props}
-	>
-	  {title ? <title id={titleId}>{title}</title> : null}
-	  <path d='M31.06 54.54v6.304a2.87 2.87 0 0 1-4.9 2.034L15.332 52.032a2.88 2.88 0 0 1 0-4.067L26.16 37.122a2.868 2.868 0 0 1 3.129-.623 2.877 2.877 0 0 1 1.772 2.657v6.303h37.879v-6.303c0-1.163.7-2.211 1.772-2.657a2.868 2.868 0 0 1 3.129.623l10.825 10.844a2.88 2.88 0 0 1 0 4.067L73.84 62.877a2.87 2.87 0 0 1-4.901-2.033V54.54h-37.88ZM9.282 6.248v87.503a4.178 4.178 0 0 1-4.176 4.177H4.85A4.178 4.178 0 0 1 .674 93.75V6.248A4.177 4.177 0 0 1 4.85 2.072h.256a4.177 4.177 0 0 1 4.176 4.176ZM99.326 6.248v87.503a4.178 4.178 0 0 1-4.177 4.177h-.255a4.178 4.178 0 0 1-4.176-4.177V6.248a4.177 4.177 0 0 1 4.176-4.176h.255a4.177 4.177 0 0 1 4.177 4.176Z' />
-	</svg>
-);
-export { FitWidth, FitAll };
-
diff --git a/client/icons/zoom-to-fit.svg b/client/icons/zoom-to-fit.svg
new file mode 100644
index 000000000..5179ec45e
--- /dev/null
+++ b/client/icons/zoom-to-fit.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.0781,0,0,1.0781,-3.90545,-3.90502)">
+        <g transform="matrix(0.841196,0,0,0.947993,8.49652,4.52391)">
+            <path d="M44.333,52.413L28.455,52.413L28.455,58.581C28.455,59.719 27.684,60.745 26.501,61.181C25.318,61.616 23.956,61.375 23.051,60.571L11.114,49.96C9.878,48.862 9.878,47.08 11.114,45.981L23.051,35.371C23.956,34.566 25.318,34.326 26.501,34.761C27.684,35.197 28.455,36.223 28.455,37.361L28.455,43.528L44.333,43.528L44.333,29.439L37.382,29.439C36.099,29.439 34.943,28.755 34.452,27.705C33.961,26.656 34.233,25.448 35.14,24.644L47.097,14.052C48.335,12.956 50.343,12.956 51.581,14.052L63.539,24.644C64.446,25.448 64.717,26.656 64.226,27.705C63.735,28.755 62.579,29.439 61.296,29.439L54.346,29.439L54.346,43.528L70.223,43.528L70.223,37.361C70.223,36.223 70.995,35.197 72.177,34.761C73.36,34.326 74.722,34.566 75.627,35.371L87.564,45.981C88.8,47.08 88.8,48.862 87.564,49.96L75.627,60.571C74.722,61.375 73.36,61.616 72.177,61.181C70.995,60.745 70.223,59.719 70.223,58.581L70.223,52.413L54.346,52.413L54.346,66.502L61.296,66.502C62.579,66.502 63.735,67.187 64.226,68.236C64.717,69.286 64.446,70.494 63.539,71.297L51.581,81.889C50.343,82.986 48.335,82.986 47.097,81.889L35.14,71.297C34.233,70.494 33.961,69.286 34.452,68.236C34.943,67.187 36.099,66.502 37.382,66.502L44.333,66.503L44.333,52.413Z"/>
+        </g>
+        <g transform="matrix(1.0247,0,0,1.0247,-5.47698,-3.53855)">
+            <path d="M99.4,14.269L99.4,90.227C99.4,94.245 96.137,97.508 92.119,97.508L16.161,97.508C12.142,97.508 8.88,94.245 8.88,90.227L8.88,14.269C8.88,10.25 12.142,6.988 16.161,6.988L92.119,6.988C96.137,6.988 99.4,10.25 99.4,14.269ZM93.633,14.269C93.633,13.433 92.955,12.755 92.119,12.755L16.161,12.755C15.325,12.755 14.647,13.433 14.647,14.269L14.647,90.227C14.647,91.062 15.325,91.741 16.161,91.741L92.119,91.741C92.955,91.741 93.633,91.062 93.633,90.227L93.633,14.269Z"/>
+        </g>
+    </g>
+</svg>

From e06611a90f666b016acee6b7d3dda7079cb517ea Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Mon, 26 Aug 2024 16:16:13 -0500
Subject: [PATCH 11/13] set all zoom buttons to use handleZoomButton

All zoom buttons run through same handler now.

They no longer take only the delta of the current zoom and desired zoom-- they take the actual desired zoom.

calculateZoom is now calculateChange, to help get the desired delta.
---
 .../homebrew/brewRenderer/toolBar/toolBar.jsx | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 7a111fbb8..227b40a64 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -20,8 +20,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		setPageNum(currentPage);
 	}, [currentPage]);
 
-	const handleZoomButton = (delta)=>{
-		setZoomLevel(_.round(_.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM)));
+	const handleZoomButton = (zoom)=>{
+		setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
 	};
 
 	const handlePageInput = (pageInput)=>{
@@ -39,7 +39,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	};
 
 
-	const calculateZoom = (mode)=>{
+	const calculateChange = (mode)=>{
 		const iframe = document.getElementById('BrewRenderer');
 		const iframeWidth = iframe.getBoundingClientRect().width;
 		const iframeHeight = iframe.getBoundingClientRect().height;
@@ -49,12 +49,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 
 		if(mode == 'fill'){
 			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
-			let widestPage = 0;
-			[...pages].forEach((page)=>{
-				const width = page.offsetWidth;
-				if(width > widestPage)
-					widestPage = width;
-			});
+			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
 
 			desiredZoom = (iframeWidth / widestPage) * 100;
 
@@ -88,21 +83,21 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='fill-width'
 					className='tool'
-					onClick={()=>handleZoomButton(calculateZoom('fill'))}
+					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fill'))}
 				>
 					<i className='fac fit-width' />
 				</button>
 				<button
 					id='zoom-to-fit'
 					className='tool'
-					onClick={()=>handleZoomButton(calculateZoom('fit'))}
+					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fit'))}
 				>
 					<i className='fac zoom-to-fit' />
 				</button>
 				<button
 					id='zoom-out'
 					className='tool'
-					onClick={()=>handleZoomButton(-20)}
+					onClick={()=>handleZoomButton(zoomLevel - 20)}
 					disabled={zoomLevel <= MIN_ZOOM}
 				>
 					<i className='fas fa-magnifying-glass-minus' />
@@ -117,7 +112,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 					max={MAX_ZOOM}
 					step='1'
 					value={zoomLevel}
-					onChange={(e)=>setZoomLevel(parseInt(e.target.value))}
+					onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
 				/>
 				<datalist id='zoomLevels'>
 					<option value='100' />
@@ -126,7 +121,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='zoom-in'
 					className='tool'
-					onClick={()=>handleZoomButton(20)}
+					onClick={()=>handleZoomButton(zoomLevel + 20)}
 					disabled={zoomLevel >= MAX_ZOOM}
 				>
 					<i className='fas fa-magnifying-glass-plus' />

From 7bc0af9a8c37ae57c2a2d2952f64bdf588e91c2a Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Tue, 27 Aug 2024 08:42:45 -0500
Subject: [PATCH 12/13] utilize Infinity and reduce()

---
 client/homebrew/brewRenderer/toolBar/toolBar.jsx | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 227b40a64..fb3b62067 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -55,19 +55,9 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 
 		} else if(mode == 'fit'){
 			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
-			let maxDimRatio = 0;
-
-			[...pages].forEach((page)=>{
-				const widthRatio = iframeWidth / page.offsetWidth;
-				const heightRatio = iframeHeight / page.offsetHeight;
-				const dimensionRatio = Math.min(widthRatio, heightRatio);
-				if(dimensionRatio < maxDimRatio || maxDimRatio == 0){
-					maxDimRatio = dimensionRatio;
-				}
-			});
-
-			desiredZoom = maxDimRatio * 100;
+			const minDimRatio = [...pages].reduce((minRatio, page) => Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
 
+			desiredZoom = minDimRatio * 100;
 		}
 
 		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")

From a7c4b78ec8e5c461a92d08d9c1996a73e8b38fb1 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Tue, 27 Aug 2024 09:03:24 -0500
Subject: [PATCH 13/13] set position relative, remove padding

---
 client/homebrew/brewRenderer/brewRenderer.less    | 1 -
 client/homebrew/brewRenderer/toolBar/toolBar.less | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less
index 234624aa2..8c8414814 100644
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -1,7 +1,6 @@
 @import (multiple, less) 'shared/naturalcrit/styles/reset.less';
 
 .brewRenderer {
-	padding-top   : 30px;
 	overflow-y    : scroll;
 	will-change   : transform;
 	:where(.pages) {
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less
index 33a6836ef..93b2bb7f6 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.less
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.less
@@ -1,5 +1,5 @@
 .toolBar {
-	position         : absolute;
+	position         : relative;
 	z-index          : 1;
 	box-sizing       : border-box;
 	display          : flex;