Initial UI

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -7,6 +7,7 @@ const _ = require('lodash');
 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
 const Markdown = require('naturalcrit/markdown.js');
 const ErrorBar = require('./errorBar/errorBar.jsx');
+const ToolBar  = require('./toolBar/toolBar.jsx');
 
 //TODO: move to the brew renderer
 const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
@@ -198,6 +199,7 @@ const BrewRenderer = (props)=>{
 				contentDidMount={frameDidMount}
 				onClick={()=>{emitClick();}}
 			>
+				<ToolBar />
 				<div className={'brewRenderer'}
 					onScroll={handleScroll}
 					style={{ height: state.height }}>

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -0,0 +1,85 @@
+require('./toolBar.less');
+const React = require('react');
+const { useState, useRef, useEffect } = React;
+const _ = require('lodash');
+
+const ToolBar = () => {
+    const [state, setState] = useState({
+        currentPage: 1,
+        totalPages: 10,
+        zoomLevel: 100,
+    });
+
+    const setZoomLevel = (direction) => {
+        let zoomLevel = state.zoomLevel;
+        if (direction === 'in') {
+            zoomLevel += 10;
+        } else {
+            zoomLevel = zoomLevel - 10;
+        }
+
+        setState((prevState) => ({
+            ...prevState,
+            zoomLevel,
+        }));
+    };
+
+    const scrollToPage = (direction) => {
+        let currentPage = state.currentPage;
+        if (direction === 'next') {
+            currentPage += 1;
+        } else {
+            currentPage = currentPage - 1;
+        }
+        setState((prevState) => ({
+            ...prevState,
+            currentPage,
+        }));
+    };
+
+    return (
+        <div className="toolBar">
+            <div className="tool">
+                <button
+                    onClick={() => setZoomLevel('in')}
+                    disabled={state.zoomLevel >= 300}
+                >
+                    Zoom In
+                </button>
+            </div>
+
+            <span className="currentZoom">{state.zoomLevel}%</span>
+            <div className="tool">
+                <button
+                    onClick={() => setZoomLevel('out')}
+                    disabled={state.zoomLevel <= 20}
+                >
+                    Zoom Out
+                </button>
+            </div>
+
+            <div className="tool">
+                <button
+                    className="previousPage"
+                    onClick={() => scrollToPage('previous')}
+                    disabled={state.currentPage <= 1}
+                >
+                    <i className="fas fa-arrow-left"></i>
+                </button>
+            </div>
+
+            <span className="currentPage">{state.currentPage}</span>
+            <div className="tool">
+                <button
+                    className="nextPage"
+                    onClick={() => scrollToPage('next')}
+                    disabled={state.currentPage >= 10}
+                >
+                    <i className="fas fa-arrow-right"></i>
+                </button>
+            </div>
+        </div>
+    );
+};
+
+module.exports = ToolBar;

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -0,0 +1,68 @@
+.toolBar {
+    font-family: 'Open Sans', sans-serif;
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 30px;
+    background-color: #555;
+    border-top: 1px solid #666;
+    border-bottom: 1px solid #666;
+    color: white;
+    text-align: center;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    column-gap: 15px;
+    row-gap: 5px;
+    flex-wrap: wrap;
+
+    span {
+        background: #eee;
+        font-family: 'Open Sans', sans-serif;
+        text-transform: uppercase;
+        font-weight: normal;
+        font-size: 16px;
+        color: #000;
+        padding: 2px 5px;
+        border-radius: 7px;
+        width: 50px;
+    }
+
+    .tool {
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        color: #ccc;
+        height: 100%;
+
+        &:hover {
+            background-color: #444;
+        }
+
+        button {
+            background-color: transparent;
+            font-family: 'Open Sans', sans-serif;
+            text-transform: uppercase;
+            font-weight: normal;
+            font-size: 11px;
+            color: #ccc;
+            padding: 0;
+            width: 70px;
+
+            &:focus-within {
+                color: white;
+                font-weight: 800;
+                height: 100%;
+            }
+
+            &:disabled {
+                color: #777;
+                background-color: transparent !important;
+            }
+        }
+    }
+
+
+}