feat: styling top bar(with share button)

3 files changed, 143 insertions, 125 deletions

diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index d41f9e06a..ce9cc05d6 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -38,7 +38,7 @@ $small-text: 9px;
 // misc values
 $border-radius: 0.3em;
 $search-thumnail-size: 130;
-$topbar-height: 50px;
+$topbar-height: 55px;
 $antimodemenu-height: 36px;
 
 // dragged items
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index 9a8e7c2e5..6662386d4 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -1,10 +1,9 @@
 @import "../global/globalCssVariables";
 
+
 .topbar-container {
       display: flex;
       flex-direction: column;
-      width: 100%;
-      position: relative;
       font-size: 10px;
       line-height: 1;
       overflow-y: auto;
@@ -12,6 +11,21 @@
       background: $dark-gray;
       overflow: visible;
       z-index: 1000;
+      height: $topbar-height;
+      background-color: $dark-gray;
+
+      .topbar-inner-container {
+            display: flex;
+            flex-direction: row;
+            position: relative;
+            display: grid;
+            grid-auto-columns: 33.3% 33.3% 33.3%;
+            align-items: center;
+
+            &:first-child {
+                  height: 20px;
+            }
+      }
 
       .topbar-button-text {
             color: $white;
@@ -47,144 +61,136 @@
             font-weight: 500;
       }
 
-      .topbar-bar {
-            height: $topbar-height;
-            display: grid;
-            grid-auto-columns: 33.3% 33.3% 33.3%;
+      .topbar-center {
+            grid-column: 2;
+            display: inline-flex;
+            justify-content: center;
             align-items: center;
-            background-color: $dark-gray;
+            gap: 5px;
 
-            .topbar-center {
-                  grid-column: 2;
-                  display: inline-flex;
-                  justify-content: center;
-                  align-items: center;
+            .topbar-dashboards {
+                  display: flex;
+                  flex-direction: row;
                   gap: 5px;
-
-                  .topbar-dashboards {
-                        display: flex;
-                        flex-direction: row;
-                        gap: 5px;
-                  }
             }
+      }
 
 
-            .topbar-right {
-                  grid-column: 3;
-                  position: relative;
-                  display: flex;
-                  justify-content: flex-end;
-                  gap: 5px;
-                  margin-right: 5px;
+      .topbar-right {
+            grid-column: 3;
+            position: relative;
+            display: flex;
+            justify-content: flex-end;
+            gap: 5px;
+            margin-right: 5px;
+      }
+
+      .topbar-left {
+            grid-column: 1;
+            color: black;
+            font-family: 'Roboto';
+            position: relative;
+            display: flex;
+            width: fit-content;
+            gap: 5px;
+
+            .topBar-icon:hover {
+                  background-color: $close-red;
             }
 
-            .topbar-left {
-                  grid-column: 1;
-                  color: black;
+            .topbar-lozenge-user,
+            .topbar-lozenge {
+                  height: 23;
+                  font-size: 12;
+                  color: white;
                   font-family: 'Roboto';
-                  position: relative;
+                  font-weight: 400;
+                  padding: 4px;
+                  align-self: center;
+                  margin-left: 7px;
                   display: flex;
-                  width: fit-content;
-                  gap: 5px;
-
-                  .topBar-icon:hover {
-                        background-color: $close-red;
-                  }
+                  align-items: center;
 
-                  .topbar-lozenge-user,
-                  .topbar-lozenge {
-                        height: 23;
-                        font-size: 12;
-                        color: white;
+                  .topbar-dashSelect {
+                        border: none;
+                        background-color: transparent;
+                        color: black;
                         font-family: 'Roboto';
-                        font-weight: 400;
-                        padding: 4px;
-                        align-self: center;
-                        margin-left: 7px;
-                        display: flex;
-                        align-items: center;
-
-                        .topbar-dashSelect {
-                              border: none;
-                              background-color: transparent;
-                              color: black;
-                              font-family: 'Roboto';
-                              font-size: 17;
-                              font-weight: 500;
-
-                              &:hover {
-                                    cursor: pointer;
-                              }
+                        font-size: 17;
+                        font-weight: 500;
+
+                        &:hover {
+                              cursor: pointer;
                         }
                   }
+            }
 
-                  .topbar-logoff {
-                        border-radius: 3px;
-                        background: olivedrab;
-                        color: white;
-                        display: none;
-                        margin-left: 5px;
-                        padding: 1px 2px 1px 2px;
-                        cursor: pointer;
-                  }
+            .topbar-logoff {
+                  border-radius: 3px;
+                  background: olivedrab;
+                  color: white;
+                  display: none;
+                  margin-left: 5px;
+                  padding: 1px 2px 1px 2px;
+                  cursor: pointer;
+            }
 
-                  .topbar-logoff {
-                        background: red;
-                  }
+            .topbar-logoff {
+                  background: red;
+            }
 
-                  .topbar-lozenge-user:hover {
-                        .topbar-logoff {
-                              display: inline-block;
-                        }
+            .topbar-lozenge-user:hover {
+                  .topbar-logoff {
+                        display: inline-block;
                   }
             }
+      }
 
-            .topbar-barChild {
+      .topbar-barChild {
 
-                  &.topbar-collection {
-                        flex: 0 1 auto;
-                        margin-left: 2px;
-                        margin-right: 2px
-                  }
+            &.topbar-collection {
+                  flex: 0 1 auto;
+                  margin-left: 2px;
+                  margin-right: 2px
+            }
 
-                  &.topbar-input {
-                        margin: 5px;
-                        border-radius: 20px;
-                        border: $dark-gray;
-                        display: block;
-                        width: 130px;
-                        -webkit-transition: width 0.4s;
-                        transition: width 0.4s;
-                        /* align-self: stretch; */
+            &.topbar-input {
+                  margin: 5px;
+                  border-radius: 20px;
+                  border: $dark-gray;
+                  display: block;
+                  width: 130px;
+                  -webkit-transition: width 0.4s;
+                  transition: width 0.4s;
+                  /* align-self: stretch; */
+                  outline: none;
+
+                  &:focus {
+                        width: 500px;
                         outline: none;
-
-                        &:focus {
-                              width: 500px;
-                              outline: none;
-                        }
                   }
+            }
 
-                  &.topbar-filter {
-                        align-self: stretch;
+            &.topbar-filter {
+                  align-self: stretch;
 
-                        button {
-                              transform: none;
+                  button {
+                        transform: none;
 
-                              &:hover {
-                                    transform: none;
-                              }
+                        &:hover {
+                              transform: none;
                         }
                   }
+            }
 
-                  &.topbar-submit {
-                        margin-left: 2px;
-                        margin-right: 2px
-                  }
+            &.topbar-submit {
+                  margin-left: 2px;
+                  margin-right: 2px
+            }
 
-                  &.topbar-close {
-                        color: $white;
-                        max-height: $topbar-height;
-                  }
+            &.topbar-close {
+                  color: $white;
+                  max-height: $topbar-height;
             }
       }
 }
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