Help button

webapp/src/components/boardComponent.tsx

@@ -28,6 +28,7 @@ import './boardComponent.scss'
 import CardDialog from './cardDialog'
 import {Editable} from './editable'
 import RootPortal from './rootPortal'
+import TopBar from './topBar'
 import ViewHeader from './viewHeader'
 import ViewTitle from './viewTitle'
 
@@ -146,6 +147,7 @@ class BoardComponent extends React.Component<Props, State> {
                 </RootPortal>}
 
                 <div className='octo-frame'>
+                    <TopBar/>
                     <ViewTitle
                         key={board.id + board.title}
                         board={board}

webapp/src/components/topBar.scss

@@ -0,0 +1,9 @@
+.TopBar {
+    position: absolute;
+    top: 10px;
+    right: 25px;
+    z-index: 10;
+
+    display: flex;
+    flex-direction: row;
+}

webapp/src/components/topBar.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+import {injectIntl, IntlShape} from 'react-intl'
+
+import './topBar.scss'
+import HelpIcon from '../widgets/icons/help'
+
+// See LICENSE.txt for license information.
+type Props = {
+    intl: IntlShape
+}
+
+class TopBar extends React.PureComponent<Props> {
+    render(): JSX.Element {
+        return (
+            <div
+                className='TopBar'
+            >
+                <a
+                    href='https://docs.mattermost.com/?utm_source=tasks'
+                    target='_blank'
+                    rel='noreferrer'
+                >
+                    <HelpIcon/>
+                </a>
+            </div>
+        )
+    }
+}
+
+export default injectIntl(TopBar)

webapp/src/widgets/icons/help.scss

@@ -0,0 +1,6 @@
+.HelpIcon {
+    fill: rgba(var(--main-fg), 0.7);
+    stroke: none;
+	width: 24px;
+	height: 24px;
+}

webapp/src/widgets/icons/help.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import './help.scss'
+
+export default function HelpIcon(): JSX.Element {
+    return (
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            className='HelpIcon Icon'
+            viewBox='0 0 35 35'
+        >
+            <g transform='translate(11, 26)'>
+                <text style={{font: 'lighter 24px sans-serif'}}>{'?'}</text>
+            </g>
+            <circle
+                cx='17'
+                cy='17'
+                r='15'
+                stroke='black'
+                fill='transparent'
+                strokeWidth='1'
+            />
+        </svg>
+    )
+}