feat: styling top bar(with share button)

1 files changed, 27 insertions, 15 deletions

diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 1a11925dc..ae56bb4ad 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -28,15 +28,12 @@ export class TopBar extends React.Component {
             const activeDashboard = Cast(Doc.UserDoc().activeDashboard, Doc, null)
             return (
                   //TODO:glr Add support for light / dark mode
-                  <div style={{ pointerEvents: "all" }} className="topbar-container">
-                        <div className="topbar-bar" style={{ background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }}>
+                  <div style={{ pointerEvents: "all", background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }} className="topbar-container">
+                        <div className="topbar-inner-container">
                               <div className="topbar-left">
                                     <div className="topbar-button-text" onClick={this.navigateToHome}>Home</div>
                               </div>
                               <div className="topbar-center" >
-                                    <div className="topbar-title">
-                                          {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
-                                    </div>
                               </div>
                               <div className="topbar-right" >
                                     <div className="topbar-button-icon" >
@@ -46,6 +43,22 @@ export class TopBar extends React.Component {
                                           <FontAwesomeIcon icon="cog" />
                                     </div>
                               </div>
+                        </div>
+                        <div className="topbar-inner-container">
+                              <div className="topbar-left">
+                                    {activeDashboard ? <div className="topbar-button-text">Freeform View (Placeholder)</div> : (null)}
+                              </div>
+                              <div className="topbar-center" >
+                                    <div className="topbar-title">
+                                          {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
+                                    </div>
+                              </div>
+                              <div className="topbar-right" >
+                                    <div className="topbar-button-text" >Share</div>
+                              </div>
+                        </div>
+                  </div>
+                 
 
                               {/* <div className="topbar-left">
                         <div className="topbar-lozenge-user">
@@ -55,19 +68,19 @@ export class TopBar extends React.Component {
                             {"Log out"}
                         </div>
                     </div> */}
-                              {/* <div className="topbar-center" >
+            {/* <div className="topbar-center" >
                         <div className="topbar-lozenge-dashboard">
                               <div style={{ color: Colors.WHITE }}>
                                     {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
                               </div> */}
 
-                              {/* <select className="topbar-dashSelect" onChange={undoBatch(e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)]))}
+            {/* <select className="topbar-dashSelect" onChange={undoBatch(e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)]))}
                                 value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}
                                 style={{ color: Colors.WHITE }}>
                                 {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
                             </select> */}
-                              {/* </div> */}
-                              {/* <div className="topbar-dashboards">
+            {/* </div> */ }
+            {/* <div className="topbar-dashboards">
                             <Tooltip title={<div className="dash-tooltip">Create a new dashboard </div>} placement="bottom"><div className="topbar-icon" onClick={async () => {
                                 const batch = UndoManager.StartBatch("new dash");
                                 await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
@@ -91,24 +104,23 @@ export class TopBar extends React.Component {
                                 </div>
                             </Tooltip>
                         </div> */}
-                              {/* </div> */}
-                              {/* <div className="topbar-right" > */}
-                              {/* <div onClick={() => window.open(
+            {/* </div> */ }
+            {/* <div className="topbar-right" > */ }
+            {/* <div onClick={() => window.open(
                             "https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
                               <FontAwesomeIcon icon="question-circle" />
                           </div>
                           <div onClick={() => SettingsManager.Instance.open()}>
                           <FontAwesomeIcon icon="cog" />
                           </div> */}
-                              {/* <div className="topbar-icon" >
+            {/* <div className="topbar-icon" >
                                           <FontAwesomeIcon icon="question-circle" />
                                     </div>
                                     <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}>
                                           <FontAwesomeIcon icon="cog" />
                                     </div>
                               </div> */}
-                        </div>
-                  </div >
+                        
             );
       }
 }
\ No newline at end of file