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] 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 };
+