Add toggle for Page Shadows

Reworks the pagesStyles to a broader object previewStyles.  This new object has this structure:

```
{
  targetElement : { cssProperty: value }
}
```

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -37,7 +37,7 @@ const BrewPage = (props)=>{
 		...props
 	};
 	const cleanText = props.contents; //DOMPurify.sanitize(props.contents, purifyConfig);
-	return <div className={props.className} id={`p${props.index + 1}`} >
+	return <div className={props.className} id={`p${props.index + 1}`} style={props.style}>
 	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
 	       </div>;
 };
@@ -67,7 +67,7 @@ const BrewRenderer = (props)=>{
 		isMounted  : false,
 		visibility : 'hidden',
 		zoom       : 100,
-		pagesStyle : null
+		previewStyles : {}
 	});
 
 	const mainRef  = useRef(null);
@@ -118,7 +118,7 @@ const BrewRenderer = (props)=>{
 		} else {
 			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
 			const html = Markdown.render(pageText, index);
-			return <BrewPage className='page' index={index} key={index} contents={html} />;
+			return <BrewPage className='page' index={index} key={index} contents={html} style={ state.previewStyles['.page']} />;
 		}
 	};
 
@@ -177,7 +177,7 @@ const BrewRenderer = (props)=>{
 	const handleStyle = (newStyle)=>{
 		setState((prevState)=>({
 			...prevState,
-			pagesStyle : { ...prevState.pagesStyle, ...newStyle }, 
+			previewStyles : { ...prevState.previewStyles, ...newStyle }, 
 		}));
 	};
 
@@ -223,7 +223,8 @@ const BrewRenderer = (props)=>{
 						&&
 						<>
 							{renderStyle()}
-							<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%`, ...state.pagesStyle }}>
+							{console.log(state.previewStyles)}
+							<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%`, ...state.previewStyles['.pages'] }}>
 								{renderPages()}
 							</div>
 						</>

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -15,6 +15,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
 	const [pageNum, setPageNum] = useState(currentPage);
 	const [arrangement, setArrangement] = useState('single');
 	const [startOnRight, setStartOnRight] = useState(true);
+	const [pageShadows, setPageShadows] = useState(true);
 	const [pagesStyle, setPagesStyle] = useState({});
 	const [toolsVisible, setToolsVisible] = useState(true);
 	const modes = ['single', 'facing', 'flow'];
@@ -41,6 +42,10 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
 		}
 	}, [arrangement, startOnRight]);
 
+	useEffect(()=>{
+		onStyleChange({ '.page': pageShadows ? {} : { boxShadow: 'none' } });
+	}, [pageShadows]);
+
 
 	const handleZoomButton = (zoom)=>{
 		setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
@@ -156,17 +161,15 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
 					{arrangement}
 				</button>
 				<AnchoredBox id='view-mode-options' className='tool' title='Options'>
-					<label title='Modify the horizontal space between pages.'>Column gap<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>onStyleChange({ columnGap: `${evt.target.value}px` })} /></label>
+					<label title='Modify the horizontal space between pages.'>Column gap<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>onStyleChange({ '.pages': { columnGap: `${evt.target.value}px` }})} /></label>
-					<label title='Modify the vertical space between rows of pages.'>Row gap<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>onStyleChange({ rowGap: `${evt.target.value}px` })} /></label>
+					<label title='Modify the vertical space between rows of pages.'>Row gap<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>onStyleChange({ '.pages': { rowGap: `${evt.target.value}px` } })} /></label>
-
-					<h2>Facing</h2>
 					<label title='Start 1st page on the right side, such as if you have cover page.'>Start on right
 						<input type='checkbox'
 							onChange={()=>setStartOnRight(!startOnRight)}
 							checked={startOnRight}
-							disabled={arrangement !== 'facing' ? true : false}
 							title={arrangement !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
 					</label>
+					<label title='Remove the page shadow from every page.'>Page shadow<input type='checkbox' checked={pageShadows} onChange={()=>setPageShadows(!pageShadows)} /></label>
 				</AnchoredBox>
 			</div>