1 files changed, 20 insertions, 3 deletions
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 0952dda20..230a85d32 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, IconButton, isDark, Size, Type } from 'browndash-components';
-import { action, computed, observable, reaction } from 'mobx';
+import { action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { FaBug } from 'react-icons/fa';
@@ -26,13 +26,23 @@ import { DocumentViewInternal, returnEmptyDocViewList } from '../nodes/DocumentV
 import { DefaultStyleProvider } from '../StyleProvider';
 import './TopBar.scss';
 import { dropActionType } from '../../util/DragManager';
+import { Flip } from 'react-awesome-reveal';
+import { ObservableReactComponent } from '../ObservableReactComponent';
 
 /**
  * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user
  * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard.
  */
 @observer
-export class TopBar extends React.Component {
+export class TopBar extends ObservableReactComponent<{}> {
+    static Instance: TopBar;
+    @observable private _flipDocumentation = 0;
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+        TopBar.Instance = this;
+    }
+
     navigateToHome = () => {
         (CollectionDockingView.Instance?.CaptureThumbnail() ?? new Promise<void>(res => res())).then(() => {
             Doc.ActivePage = 'home';
@@ -162,7 +172,6 @@ export class TopBar extends React.Component {
             </div>
         ) : null;
     }
-
     /**
      * Returns the right hand side of the topbar.
      * This part of the topbar includes information about the current user,
@@ -184,6 +193,9 @@ export class TopBar extends React.Component {
                     />
                 ) : null}
                 <IconButton tooltip={'Issue Reporter ⌘I'} size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
+                <Flip key={this._flipDocumentation}>
+                    <IconButton tooltip={'Documentation ⌘D'} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
+                </Flip>
                 <IconButton tooltip={'Documentation ⌘D'} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
                 <IconButton tooltip={'Settings ⌘⇧S'} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
                 <IconButton
@@ -199,6 +211,11 @@ export class TopBar extends React.Component {
         );
     }
 
+    /**
+     * Make the documentation icon flip around to draw attention to it.
+     */
+    FlipDocumentationIcon = action(() => (this._flipDocumentation = this._flipDocumentation + 1));
+
     render() {
         return (
             //TODO:glr Add support for light / dark mode