Quick tips button in the vertical menu.

src/ui/mainmenu/connectionstatus/ConnectionStatus.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { Browser } from "ui/browser";
 import { Button, Loading } from "ui/control";
 import HomeButton from "ui/mainmenu/connectionstatus/HomeButton";
+import QuickTipsButton from "ui/quicktips/QuickTipsButton";
 import NewPostButton from "ui/mainmenu/connectionstatus/NewPostButton";
 import NewsButton from "ui/mainmenu/connectionstatus/NewsButton";
 import InstantButton from "ui/instant/InstantButton";
@@ -13,15 +13,12 @@ import ConnectionsButton from "ui/mainmenu/connections/ConnectionsButton";
 import DisconnectButton from "ui/mainmenu/connectionstatus/DisconnectButton";
 import ConnectDialog from "ui/connectdialog/ConnectDialog";
 import { openConnectDialog } from "state/connectdialog/actions";
-import { openQuickTips } from "state/quicktips/actions";
 import { openSignUpDialog } from "state/signupdialog/actions";
 import { isConnectedToHome } from "state/home/selectors";
 import { isAtNode } from "state/node/selectors";
 import "./ConnectionStatus.css";
 
-const ConnectionButtons = ({
-    atNode, connecting,  connected, showNavigator, openConnectDialog, openQuickTips, openSignUpDialog
-}) => {
+const ConnectionButtons = ({atNode, connecting,  connected, showNavigator, openConnectDialog, openSignUpDialog}) => {
     if (showNavigator && Browser.isTinyScreen()) {
         return null;
     }
@@ -42,8 +39,8 @@ const ConnectionButtons = ({
     }
     return (
         <>
-            <span className="connection-button d-none d-lg-inline" title="Help" onClick={() => openQuickTips()}>
-                <FontAwesomeIcon icon="question-circle"/>
+            <span className="d-none d-lg-inline">
+                <QuickTipsButton/>
             </span>
             <span className="d-none d-lg-inline">
                 <NewPostButton/>
@@ -76,5 +73,5 @@ export default connect(
         connected: isConnectedToHome(state),
         showNavigator: state.owner.showNavigator
     }),
-    { openConnectDialog, openQuickTips, openSignUpDialog }
+    { openConnectDialog, openSignUpDialog }
 )(ConnectionStatus);

src/ui/mainmenu/vertical/VerticalMenu.css

@@ -4,6 +4,10 @@
     border: solid var(--status-icon) 1px;
 }
 
+#vertical-menu .navbar-nav {
+    line-height: 1.1;
+}
+
 #vertical-menu BUTTON {
     display: inline;
     margin-left: 1rem;

src/ui/mainmenu/vertical/VerticalMenu.js

@@ -12,6 +12,7 @@ import SettingsButton from "ui/mainmenu/connectionstatus/SettingsButton";
 import HomeButton from "ui/mainmenu/connectionstatus/HomeButton";
 import DisconnectButton from "ui/mainmenu/connectionstatus/DisconnectButton";
 import HomeName from "ui/mainmenu/connections/HomeName";
+import QuickTipsButton from "ui/quicktips/QuickTipsButton";
 import "./VerticalMenu.css";
 
 const VerticalMenu = ({atNode, connected, openConnectDialog, openSignUpDialog}) => (
@@ -34,6 +35,9 @@ const VerticalMenu = ({atNode, connected, openConnectDialog, openSignUpDialog})
                 <DisconnectButton/>
                 <br/>
                 <HomeName/>
+                <div className="text-right">
+                    <QuickTipsButton/>
+                </div>
             </>
         }
     </div>

src/ui/quicktips/QuickTipsButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { openQuickTips } from "state/quicktips/actions";
+
+const QuickTipsButton = ({openQuickTips}) => (
+    <span className="connection-button" title="Help" onClick={() => openQuickTips()}>
+        <FontAwesomeIcon icon="question-circle"/>
+    </span>
+);
+
+export default connect(
+    null,
+    { openQuickTips }
+)(QuickTipsButton);