Add help nav button and page with links to GitHub and a feedback Goog…

…le Form

web/src/App.css

@@ -69,5 +69,20 @@
 }
 
 .settings-icon {
-  transform: scale(2);
+  transform: translate(0, -5%) scale(2);
+}
+
+.help-icon {
+  border: 2px solid currentcolor;
+  border-radius: 1em;
+  height: 1.5em;
+  width: 1.5em;
+  transform: translate(0, 35%) scale(0.8);
+  margin-right: 0.75em;
+}
+
+.help-icon span {
+  display: block;
+  font-weight: 600;
+  transform: translate(-50%,-42%);
 }

web/src/App.js

@@ -81,7 +81,8 @@ function AppContent({ match }) {
           </Nav>
           <Nav>
             <Sync className="mr-2" onSync={() => setSyncTime(new Date())} />
-            <NavLink to="/settings" aria-label="Settings" className="nav-link settings-icon">⚙</NavLink>
+            <NavLink to="/settings/help" aria-label="Help" className="nav-link help-icon"><span>?</span></NavLink>
+            <NavLink exact to="/settings" aria-label="Settings" className="nav-link settings-icon">⚙</NavLink>
           </Nav>
         </Navbar.Collapse>
       </Navbar>

web/src/Help.css

@@ -0,0 +1,26 @@
+.feedback-tiles {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.feedback-tiles > * {
+  box-sizing: border-box;
+  max-width: 20em;
+  width: 100%;
+  margin: 2em;
+}
+
+.feedback-tiles button {
+  text-align: center;
+  padding: 1em 2em;
+  width: 100%;
+}
+
+.feedback-tiles button p {
+  margin-top: 0.8em;
+}
+
+.feedback-tiles button h3 {
+  font-size: 0.8em;
+}

web/src/Help.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import './Help.css';
+
+import Button from 'react-bootstrap/Button';
+import { Crumb } from './Breadcrumb';
+
+
+const githubFeedback = "https://github.com/JohnStarich/sage/issues/new"
+const privateFeedback = "https://forms.gle/iCXiTP9Th5zumbPg9"
+
+export default function ({ match }) {
+  return (
+    <div>
+      <Crumb title="Help" match={match} />
+      <h1>Help &amp; Feedback</h1>
+      <p>Send suggestions, request features, or ask questions.</p>
+      <p>Choose how to deliver your feedback:</p>
+      <div className="feedback-tiles">
+        <a href={githubFeedback} target="_blank" rel="noopener noreferrer">
+          <Button variant="outline-primary">
+            <h2>GitHub</h2>
+            <h3><em>Preferred</em></h3>
+            <p>Sign in and submit an issue</p>
+          </Button>
+        </a>
+        <a href={privateFeedback} target="_blank" rel="noopener noreferrer">
+          <Button variant="outline-secondary">
+            <h2>Feedback Form</h2>
+            <p>Can include sensitive information</p>
+          </Button>
+        </a>
+      </div>
+    </div>
+  )
+}

web/src/Settings.js

@@ -6,6 +6,7 @@ import AdvancedOptions from './AdvancedOptions';
 import BalanceSettings from './BalanceSettings';
 import Breadcrumb from 'react-bootstrap/Breadcrumb';
 import Categories from './Categories';
+import Help from './Help';
 import { Breadcrumbs, Crumb } from './Breadcrumb';
 import { Link, NavLink, Route, Switch } from "react-router-dom";
 
@@ -21,6 +22,7 @@ export default function ({ match }) {
         <Route path={`${match.path}/balances`} component={BalanceSettings} />
         <Route path={`${match.path}/categories`} component={Categories} />
         <Route path={`${match.path}/advanced`} component={AdvancedOptions} />
+        <Route path={`${match.path}/help`} component={Help} />
         <Route exact path={match.path}>
           <ul className="settings-tiles">
             <li>
@@ -47,6 +49,12 @@ export default function ({ match }) {
                 <p>Power user tools.</p>
               </Link>
             </li>
+            <li>
+              <Link to={`${match.url}/help`}>
+                <h2>Help &amp; Feedback</h2>
+                <p>Send suggestions, request features, or ask questions.</p>
+              </Link>
+            </li>
           </ul>
         </Route>
       </Switch>