From b6b0e25503f768f831b800a6d2760b2ccbfab727 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Tue, 20 Sep 2022 19:45:46 -0400
Subject: updated homepage view

---
 src/client/util/SettingsManager.tsx             |   2 +-
 src/client/views/DashboardView.scss             |  85 ++++++-
 src/client/views/DashboardView.tsx              |  93 ++++++--
 src/client/views/MainView.tsx                   |   1 +
 src/client/views/global/globalCssVariables.scss |   2 +-
 src/client/views/topbar/TopBar.scss             |  33 ++-
 src/client/views/topbar/TopBar.tsx              | 301 ++++++++++++++++++------
 7 files changed, 414 insertions(+), 103 deletions(-)

(limited to 'src')

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index cf143c5e8..a185c8936 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -30,7 +30,7 @@ export enum ColorScheme {
 export class SettingsManager extends React.Component<{}> {
     public static Instance: SettingsManager;
     static _settingsStyle = addStyleSheet();
-    @observable private isOpen = false;
+    @observable public isOpen = false;
     @observable private passwordResultText = '';
     @observable private playgroundMode = false;
 
diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss
index 3db23b86f..b8a6f6c05 100644
--- a/src/client/views/DashboardView.scss
+++ b/src/client/views/DashboardView.scss
@@ -1,3 +1,6 @@
+@import "./global/globalCssVariables";
+
+
 .dashboard-view {
       padding: 50px;
       display: flex;
@@ -7,8 +10,10 @@
 
       .left-menu {
             display: flex;
+            justify-content: flex-start;
             flex-direction: column;
-            width: 300px;
+            width: 250px;
+            min-width: 250px;
       }
 
       .all-dashboards {
@@ -20,7 +25,8 @@
 }
 
 .text-button {
-      padding: 10px 0;
+    cursor: pointer;
+      padding: 3px 0;
       &:hover {
             font-weight: 500;
       }
@@ -30,17 +36,46 @@
       }
 }
 
+.new-dashboard-button {
+    font-weight: 600;
+    padding-bottom: 10px;
+}
+
+.dashboard-container-new {
+    border-radius: 10px;
+    width: 250px;
+    height: 200px;
+    font-size: 120px;
+    font-weight: 100;
+    text-align: center;
+    border: solid 2px $light-gray;
+    margin: 0 0px 30px 30px;
+    cursor: pointer;
+    color: $light-gray;
+    display: flex;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+        color: $light-blue;
+        border: solid 2px $light-blue;
+    }
+}
+
 .dashboard-container {
       border-radius: 10px;
+      cursor: pointer;
       width: 250px;
-      border: solid .5px grey;
+      height: 200px;
+      outline: solid 2px $light-gray;
       display: flex;
       flex-direction: column;
-      margin: 0 30px 30px 30px;
+      margin: 0 0px 30px 30px;
       overflow: hidden;
 
-      &:hover {
-            border: solid 1.5px grey;  
+      &:hover{
+        outline: solid 2px $light-blue;
       }
 
       .title {
@@ -58,9 +93,47 @@
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
+            padding: 0px 10px;
       }
 
       .more {
             z-index: 100;
       }
+}
+
+.new-dashboard {
+    color: $dark-gray;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .header {
+        font-size: 1.5em;
+        font-weight: 600;
+    }
+
+    .title-input,
+    .color-picker {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        font-weight: 500;
+        gap: 5px;
+        z-index: 5;
+
+        .input {
+            border-radius: 10px;
+            padding: 5px 10px;
+        }
+    }
+
+    .button-bar {
+        display: flex;
+        gap: 5px;
+        flex-direction: row;
+        justify-content: flex-end;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index f43500fc3..ce442801f 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -1,4 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button, ColorPicker, FontSize, IconButton, Size } from 'browndash-components';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -20,8 +21,10 @@ import { CollectionDockingView } from './collections/CollectionDockingView';
 import { CollectionView } from './collections/CollectionView';
 import { ContextMenu } from './ContextMenu';
 import './DashboardView.scss';
+import { Colors } from './global/globalEnums';
 import { MainViewModal } from './MainViewModal';
 import { ButtonType } from './nodes/button/FontIconBox';
+import { FaPlus } from 'react-icons/fa';
 
 enum DashboardGroup {
     MyDashboards,
@@ -39,6 +42,7 @@ export class DashboardView extends React.Component {
     @observable private selectedDashboardGroup = DashboardGroup.MyDashboards;
 
     @observable private newDashboardName: string | undefined = undefined;
+    @observable private newDashboardColor: string | undefined = undefined;
     @action abortCreateNewDashboard = () => {
         this.newDashboardName = undefined;
     };
@@ -52,11 +56,9 @@ export class DashboardView extends React.Component {
     };
 
     clickDashboard = (e: React.MouseEvent, dashboard: Doc) => {
-        if (e.detail === 2) {
-            Doc.AddDocToList(Doc.MySharedDocs, 'viewed', dashboard);
-            Doc.ActiveDashboard = dashboard;
-            Doc.ActivePage = 'dashboard';
-        }
+        Doc.AddDocToList(Doc.MySharedDocs, 'viewed', dashboard);
+        Doc.ActiveDashboard = dashboard;
+        Doc.ActivePage = 'dashboard';
     };
 
     getDashboards = () => {
@@ -80,26 +82,46 @@ export class DashboardView extends React.Component {
     };
 
     @undoBatch
-    createNewDashboard = async (name: string) => {
-        DashboardView.createNewDashboard(undefined, name);
+    createNewDashboard = async (name: string, background?: string) => {
+        DashboardView.createNewDashboard(undefined, name, background);
         this.abortCreateNewDashboard();
     };
 
     @computed
     get namingInterface() {
+        const dashboardCount = DocListCast(Doc.MyDashboards.data).length + 1;
+        const placeholder = `Dashboard ${dashboardCount}`;
         return (
-            <div>
-                <input className="password-inputs" placeholder="Untitled Dashboard" onChange={e => this.setNewDashboardName((e.target as any).value)} />
-                <button className="password-submit" onClick={this.abortCreateNewDashboard}>
-                    Cancel
-                </button>
-                <button
-                    className="password-submit"
-                    onClick={() => {
-                        this.createNewDashboard(this.newDashboardName!);
-                    }}>
-                    Create
-                </button>
+            <div className='new-dashboard'>
+                <div className='header'>Create New Dashboard</div>
+                <div className="title-input">
+                    Title
+                    <input className="input" placeholder={placeholder} onChange={e => this.setNewDashboardName((e.target as any).value)} />
+                </div>
+                <div className="color-picker">
+                    Background
+                    <ColorPicker onChange={(color) => {
+                        this.newDashboardColor = color;
+                    }} />
+                </div>
+                <div className="button-bar">
+                    <Button
+                        text="Cancel" 
+                        borderRadius={10}
+                        hoverStyle={'gray'}
+                        fontSize={FontSize.SECONDARY}
+                        onClick={this.abortCreateNewDashboard}
+                    />
+                    <Button
+                        text="Create"
+                        borderRadius={10}
+                        backgroundColor={Colors.LIGHT_BLUE} 
+                        hoverStyle={'darken'}
+                        fontSize={FontSize.SECONDARY}
+                        onClick={() => {
+                            this.createNewDashboard(this.newDashboardName!, this.newDashboardColor);
+                    }}/>
+                </div>
             </div>
         );
     }
@@ -142,11 +164,19 @@ export class DashboardView extends React.Component {
                 <div className="dashboard-view">
                     <div className="left-menu">
                         <div
-                            className="text-button"
+                            className="new-dashboard-button">
+                            <Button
+                            icon={<FaPlus/>}
+                            hoverStyle="darken"
+                            backgroundColor={Colors.LIGHT_BLUE}
+                            size={Size.MEDIUM}
+                            fontSize={FontSize.HEADER}
+                            text="New"
                             onClick={() => {
                                 this.setNewDashboardName('');
-                            }}>
-                            New
+                            }}
+                            borderRadius={50}    
+                        />
                         </div>
                         <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}>
                             My Dashboards
@@ -180,14 +210,26 @@ export class DashboardView extends React.Component {
                                                 this._downY = e.clientY;
                                             }}
                                             onClick={e => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
                                                 this.onContextMenu(dashboard, e);
                                             }}>
-                                            <FontAwesomeIcon color="black" size="lg" icon="bars" />
+                                            <IconButton
+                                                isCircle={true}
+                                                size={Size.SMALL}
+                                                hoverStyle="gray"
+                                                icon={<FontAwesomeIcon color="black" size="lg" icon="bars" />}
+                                            />
                                         </div>
                                     </div>
                                 </div>
                             );
                         })}
+                        <div className="dashboard-container-new" onClick={() => {
+                                this.setNewDashboardName('');
+                            }}>
+                            +
+                        </div>
                     </div>
                 </div>
                 <MainViewModal
@@ -195,7 +237,7 @@ export class DashboardView extends React.Component {
                     isDisplayed={this.newDashboardName !== undefined}
                     interactive={true}
                     closeOnExternalClick={this.abortCreateNewDashboard}
-                    dialogueBoxStyle={{ width: '500px', height: '300px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }}
+                    dialogueBoxStyle={{ width: '400px', height: '180px', color: Colors.LIGHT_GRAY }}
                 />
             </>
         );
@@ -257,7 +299,7 @@ export class DashboardView extends React.Component {
         }
     };
 
-    public static createNewDashboard = (id?: string, name?: string) => {
+    public static createNewDashboard = (id?: string, name?: string, background?: string) => {
         const dashboards = Doc.MyDashboards;
         const dashboardCount = DocListCast(dashboards.data).length + 1;
         const freeformOptions: DocumentOptions = {
@@ -267,6 +309,7 @@ export class DashboardView extends React.Component {
             _height: 1000,
             _fitWidth: true,
             _backgroundGridShow: true,
+            backgroundColor: background,
             title: `Untitled Tab 1`,
         };
         const title = name ? name : `Dashboard ${dashboardCount}`;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 26718d695..d07e255e2 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -65,6 +65,7 @@ import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
 import { TopBar } from './topbar/TopBar';
+import 'browndash-components/dist/styles/global.min.css';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 @observer
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index c5968d9a7..8a75aeef8 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -39,7 +39,7 @@ $small-text: 9px;
 // misc values
 $border-radius: 0.3em;
 $search-thumnail-size: 130;
-$topbar-height: 32px;
+$topbar-height: 37px;
 $antimodemenu-height: 36px;
 
 // dragged items
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index d415e9367..a1131b92e 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -13,7 +13,12 @@
       align-items: center;
       height: $topbar-height;
       background-color: $dark-gray;
+      border-bottom: $standard-border;
+      padding: 0px 10px;
       cursor: default;
+      display: flex;
+        justify-content: center;
+        width: 100%;
 
       .topbar-inner-container {
             display: flex;
@@ -21,6 +26,7 @@
             position: relative;
             display: grid;
             grid-auto-columns: 33.3% 33.3% 33.3%;
+            width: 100%;
             align-items: center;
 
             // &:first-child {
@@ -70,10 +76,8 @@
             align-items: center;
             gap: 5px;
 
-            .topbar-dashboards {
-                  display: flex;
-                  flex-direction: row;
-                  gap: 5px;
+            .topbar-dashboard-header {
+                font-weight: 600;
             }
       }
 
@@ -96,6 +100,27 @@
             width: fit-content;
             gap: 5px;
 
+            .logo-container {
+                font-size: 15;
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                -webkit-user-select: none;
+                -khtml-user-select: none;
+                -moz-user-select: none;
+                -o-user-select: none;
+                user-select: none;
+
+                .logo {
+                    background-color: transparent;
+                    width: 25px;
+                    height: 25px;
+                    margin-right: 5px;
+                    
+                }
+            }
+
             .topBar-icon:hover {
                   background-color: $close-red;
             }
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 096b2561f..bbdb4621e 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,15 +1,14 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
-import { MdBugReport } from 'react-icons/md';
-import { action } from 'mobx';
+import { Button, FontSize, IconButton, Size } from 'browndash-components';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { AclAdmin, Doc } from '../../../fields/Doc';
+import { FaBug, FaCamera } from 'react-icons/fa';
+import { AclAdmin, Doc, DocListCast } from '../../../fields/Doc';
 import { StrCast } from '../../../fields/Types';
 import { GetEffectiveAcl } from '../../../fields/util';
-import { Utils } from '../../../Utils';
 import { DocumentManager } from '../../util/DocumentManager';
-import { SelectionManager } from '../../util/SelectionManager';
+import { ReportManager } from '../../util/ReportManager';
 import { SettingsManager } from '../../util/SettingsManager';
 import { SharingManager } from '../../util/SharingManager';
 import { UndoManager } from '../../util/UndoManager';
@@ -19,7 +18,7 @@ import { DashboardView } from '../DashboardView';
 import { Borders, Colors } from '../global/globalEnums';
 import { MainView } from '../MainView';
 import './TopBar.scss';
-import { ReportManager } from '../../util/ReportManager';
+
 
 /**
  * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user
@@ -34,36 +33,73 @@ export class TopBar extends React.Component {
         });
     };
 
-    render() {
-        const activeDashboard = Doc.ActiveDashboard;
-        return (
-            //TODO:glr Add support for light / dark mode
-            <div style={{ pointerEvents: 'all', background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }} className="topbar-container">
-                <div className="topbar-inner-container">
-                    <div className="topbar-left">
-                        {activeDashboard ? (
-                            <>
-                                <div
-                                    className="topbar-button-icon"
-                                    onClick={e => {
-                                        ContextMenu.Instance.addItem({ description: 'Logout', event: () => window.location.assign(Utils.prepend('/logout')), icon: 'edit' });
-                                        ContextMenu.Instance.displayMenu(e.clientX + 5, e.clientY + 10);
-                                    }}>
-                                    {Doc.CurrentUserEmail}
-                                </div>
-                                <div className="topbar-button-icon" onClick={this.navigateToHome}>
-                                    <FontAwesomeIcon icon="home" />
-                                </div>
-                            </>
-                        ) : null}
-                    </div>
-                    <div className="topbar-center">
-                        <div className="topbar-title" onClick={() => activeDashboard && SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}>
-                            {activeDashboard ? StrCast(activeDashboard.title) : 'Dash'}
-                        </div>
-                        <div
-                            className="topbar-button-icon"
-                            onClick={e => {
+    @observable textColor: string = Colors.LIGHT_GRAY;
+    @observable backgroundColor: string = Colors.DARK_GRAY;
+
+    /**
+     * Returns the left hand side of the topbar.
+     * This side of the topbar contains the different modes.
+     * The modes include:
+     * - Explore mode
+     * - Tracking mode
+     */
+    @computed get topbarLeft() {
+    return (
+            <div className="topbar-left">
+                {Doc.ActiveDashboard ? <IconButton onClick={this.navigateToHome} icon={<FontAwesomeIcon icon="home" />} isCircle={true} hoverStyle="gray" color={this.textColor} /> : 
+                <div className="logo-container">
+                    <img className='logo' src="/assets/medium-blue-light-blue-circle.png" alt="dash logo"></img>
+                    <span style={{color: Colors.LIGHT_GRAY, fontWeight: 200}}>brown</span><span style={{color: Colors.LIGHT_BLUE, fontWeight: 500}}>dash</span>
+                </div>
+                }
+                {Doc.ActiveDashboard && <Button
+                    text="Explore"
+                    tooltip="Browsing mode for directly navigating to documents"
+                    fontSize={FontSize.SECONDARY}
+                    isActive={MainView.Instance._exploreMode}
+                    size={Size.SMALL}
+                    color={this.textColor}
+                    borderRadius={5}
+                    hoverStyle="gray"
+                    iconPosition="right"
+                    onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))}
+                />}
+            </div>
+        );
+    }
+
+        /**
+     * Returns the center of the topbar
+     * This part of the topbar contains everything related to the current dashboard including:
+     * - Selection of dashboards
+     * - Creating a new dashboard
+     * - Taking a snapshot of a dashboard
+     */
+         @computed get topbarCenter() {
+            const myDashboards = DocListCast(Doc.MyDashboards.data);
+            const activeDashboard = Doc.ActiveDashboard;
+            // const dashboardItems = myDashboards.map(board => {
+            //     const boardTitle = StrCast(board.title);
+            //     console.log(boardTitle);
+            //     return {
+            //         text: boardTitle,
+            //         onClick: () => DashboardView.openDashboard(board),
+            //         val: board,
+            //     };
+            // });
+            return activeDashboard ? (
+                <div className="topbar-center">
+                    <Button
+                        text={StrCast(activeDashboard.title)}
+                        tooltip="Browsing mode for directly navigating to documents"
+                        fontSize={FontSize.SECONDARY}
+                        size={Size.SMALL}
+                        color={"white"}
+                        type="outline"
+                        backgroundColor={Colors.MEDIUM_BLUE}
+                        borderRadius={5}
+                        hoverStyle="none"
+                        onClick={(e) => {
                                 const dashView = activeDashboard && DocumentManager.Instance.getDocumentView(activeDashboard);
                                 ContextMenu.Instance.addItem({ description: 'Open Dashboard View', event: this.navigateToHome, icon: 'edit' });
                                 ContextMenu.Instance.addItem({
@@ -76,35 +112,168 @@ export class TopBar extends React.Component {
                                     icon: 'edit',
                                 });
                                 dashView?.showContextMenu(e.clientX + 20, e.clientY + 30);
-                            }}>
-                            <FontAwesomeIcon color="white" size="lg" icon="bars" />
-                        </div>
-                        <Tooltip title={<div className="dash-tooltip">Browsing mode for directly navigating to documents</div>} placement="bottom">
-                            <div className="topbar-button-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))}>
-                                <FontAwesomeIcon color={MainView.Instance._exploreMode ? 'red' : 'white'} icon="eye" size="lg" />
-                            </div>
-                        </Tooltip>
-                    </div>
-                    <div className="topbar-right">
-                        {Doc.ActiveDashboard ? (
-                            <div
-                                className="topbar-button-icon"
-                                onClick={() => {
-                                    SharingManager.Instance.open(undefined, activeDashboard);
-                                }}>
-                                {GetEffectiveAcl(Doc.GetProto(Doc.ActiveDashboard)) === AclAdmin ? 'Share' : 'view original'}
-                            </div>
-                        ) : null}
-                        <div className="topbar-button-icon" onClick={() => ReportManager.Instance.open()}>
-                            <MdBugReport />
-                        </div>
-                        <div className="topbar-button-icon" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')}>
-                            <FontAwesomeIcon icon="question-circle" />
-                        </div>
-                        <div className="topbar-button-icon" onClick={() => SettingsManager.Instance.open()}>
-                            <FontAwesomeIcon icon="cog" />
-                        </div>
-                    </div>
+                            }}
+                    />
+                        <Button
+                            text={GetEffectiveAcl(Doc.GetProto(activeDashboard)) === AclAdmin ? 'Share' : 'View Original'}
+                            onClick={() => {
+                                SharingManager.Instance.open(undefined, activeDashboard);
+                            }}
+                            type="outline"
+                            fontSize={FontSize.SECONDARY}
+                            size={Size.SMALL}
+                            borderRadius={5}
+                            hoverStyle="gray"
+                    />
+                    {!Doc.noviceMode && <IconButton
+                        fontSize={FontSize.SECONDARY}
+                        isCircle={true}
+                        tooltip="Work on a copy of the dashboard layout"
+                        size={Size.SMALL}
+                        color={this.textColor}
+                        borderRadius={Borders.STANDARD}
+                        hoverStyle="gray"
+                        onClick={async () => {
+                            const batch = UndoManager.StartBatch('snapshot');
+                            await DashboardView.snapshotDashboard();
+                            batch.end();
+                        }}
+                        icon={<FaCamera />}
+                    />}
+                </div>
+            ) : null;
+        }
+    
+        /**
+         * Returns the right hand side of the topbar.
+         * This part of the topbar includes information about the current user,
+         * and allows the user to access their account settings etc.
+         */
+        @computed get topbarRight() {
+    
+            return (
+                <div className="topbar-right">
+                <IconButton
+                    size={Size.SMALL}
+                    isCircle={true}
+                    color={Colors.LIGHT_GRAY}
+                    backgroundColor={Colors.DARK_GRAY}
+                    hoverStyle="gray"
+                    onClick={() => ReportManager.Instance.open()}
+                    icon={<FaBug />}
+                />
+                <IconButton
+                    size={Size.SMALL}
+                    isCircle={true}
+                    color={Colors.LIGHT_GRAY}
+                    backgroundColor={Colors.DARK_GRAY}
+                    hoverStyle="gray"
+                    onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')}
+                    icon={<FontAwesomeIcon icon="question-circle" />}
+                />
+                <IconButton
+                    size={Size.SMALL}
+                    isCircle={true}
+                    color={Colors.LIGHT_GRAY}
+                    backgroundColor={Colors.DARK_GRAY}
+                    hoverStyle="gray"
+                    isActive={SettingsManager.Instance.isOpen}
+                    onClick={() => SettingsManager.Instance.open()}
+                    icon={<FontAwesomeIcon icon="cog" />}
+                />
+                {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.textColor} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */}
+                </div>
+            );
+        }
+
+    // render() {
+    //     const activeDashboard = Doc.ActiveDashboard;
+    //     return (
+    //         //TODO:glr Add support for light / dark mode
+    //         <div style={{ pointerEvents: 'all', background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }} className="topbar-container">
+    //             <div className="topbar-inner-container">
+    //                 <div className="topbar-left">
+    //                     {activeDashboard ? (
+    //                         <>
+    //                             <div
+    //                                 className="topbar-button-icon"
+    //                                 onClick={e => {
+    //                                     ContextMenu.Instance.addItem({ description: 'Logout', event: () => window.location.assign(Utils.prepend('/logout')), icon: 'edit' });
+    //                                     ContextMenu.Instance.displayMenu(e.clientX + 5, e.clientY + 10);
+    //                                 }}>
+    //                                 {Doc.CurrentUserEmail}
+    //                             </div>
+    //                             <div className="topbar-button-icon" onClick={this.navigateToHome}>
+    //                                 <FontAwesomeIcon icon="home" />
+    //                             </div>
+    //                         </>
+    //                     ) : null}
+    //                 </div>
+    //                 <div className="topbar-center">
+    //                     <div className="topbar-title" onClick={() => activeDashboard && SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}>
+    //                         {activeDashboard ? StrCast(activeDashboard.title) : 'Dash'}
+    //                     </div>
+    //                     <div
+    //                         className="topbar-button-icon"
+    //                         onClick={e => {
+    //                             const dashView = activeDashboard && DocumentManager.Instance.getDocumentView(activeDashboard);
+    //                             ContextMenu.Instance.addItem({ description: 'Open Dashboard View', event: this.navigateToHome, icon: 'edit' });
+    //                             ContextMenu.Instance.addItem({
+    //                                 description: 'Snapshot Dashboard',
+    //                                 event: async () => {
+    //                                     const batch = UndoManager.StartBatch('snapshot');
+    //                                     await DashboardView.snapshotDashboard();
+    //                                     batch.end();
+    //                                 },
+    //                                 icon: 'edit',
+    //                             });
+    //                             dashView?.showContextMenu(e.clientX + 20, e.clientY + 30);
+    //                         }}>
+    //                         <FontAwesomeIcon color="white" size="lg" icon="bars" />
+    //                     </div>
+    //                     <Tooltip title={<div className="dash-tooltip">Browsing mode for directly navigating to documents</div>} placement="bottom">
+    //                         <div className="topbar-button-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))}>
+    //                             <FontAwesomeIcon color={MainView.Instance._exploreMode ? 'red' : 'white'} icon="eye" size="lg" />
+    //                         </div>
+    //                     </Tooltip>
+    //                 </div>
+    //                 <div className="topbar-right">
+    //                     {Doc.ActiveDashboard ? (
+    //                         <div
+    //                             className="topbar-button-icon"
+    //                             onClick={() => {
+    //                                 SharingManager.Instance.open(undefined, activeDashboard);
+    //                             }}>
+    //                             {GetEffectiveAcl(Doc.GetProto(Doc.ActiveDashboard)) === AclAdmin ? 'Share' : 'view original'}
+    //                         </div>
+    //                     ) : null}
+    //                     <div className="topbar-button-icon" onClick={() => ReportManager.Instance.open()}>
+    //                         <MdBugReport />
+    //                     </div>
+    //                     <div className="topbar-button-icon" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')}>
+    //                         <FontAwesomeIcon icon="question-circle" />
+    //                     </div>
+    //                     <div className="topbar-button-icon" onClick={() => SettingsManager.Instance.open()}>
+    //                         <FontAwesomeIcon icon="cog" />
+    //                     </div>
+    //                 </div>
+    //             </div>
+    //         </div>
+    //     );
+    // }
+    render() {
+        return (
+            //TODO:glr Add support for light / dark mode
+            <div style={{ pointerEvents: 'all' }} className="topbar-container">
+                <div
+                    className="topbar-inner-container"
+                    style={{
+                        color: this.textColor,
+                        background: this.backgroundColor,
+                    }}>
+                    {this.topbarLeft}
+                    {this.topbarCenter}
+                    {this.topbarRight}
                 </div>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2