updates ready for sprint (almost)

7 files changed, 69 insertions, 71 deletions

diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js
index b118a5f44..238f1ac0a 100644
--- a/src/client/goldenLayout.js
+++ b/src/client/goldenLayout.js
@@ -1571,11 +1571,11 @@
             tabControlOffset: 10
         },
         dimensions: {
-            borderWidth: 5,
+            borderWidth: 3,
             borderGrabWidth: 5,
             minItemHeight: 10,
-            minItemWidth: 10,
-            headerHeight: 22,
+            minItemWidth: 20,
+            headerHeight: 27,
             dragProxyWidth: 300,
             dragProxyHeight: 200
         },
@@ -2477,20 +2477,21 @@
                 }
             }
 
-            if (this.layoutManager.config.settings.reorderOnTabMenuClick) {
-                /**
-                 * If the tab selected was in the dropdown, move everything down one to make way for this one to be the first.
-                 * This will make sure the most used tabs stay visible.
-                 */
-                if (this._lastVisibleTabIndex !== -1 && this.parent.config.activeItemIndex > this._lastVisibleTabIndex) {
-                    activeTab = this.tabs[this.parent.config.activeItemIndex];
-                    for (j = this.parent.config.activeItemIndex; j > 0; j--) {
-                        this.tabs[j] = this.tabs[j - 1];
-                    }
-                    this.tabs[0] = activeTab;
-                    this.parent.config.activeItemIndex = 0;
-                }
-            }
+            // glr: removed for new tab manager
+            // if (this.layoutManager.config.settings.reorderOnTabMenuClick) {
+            //     /**
+            //      * If the tab selected was in the dropdown, move everything down one to make way for this one to be the first.
+            //      * This will make sure the most used tabs stay visible.
+            //      */
+            //     if (this._lastVisibleTabIndex !== -1 && this.parent.config.activeItemIndex > this._lastVisibleTabIndex) {
+            //         activeTab = this.tabs[this.parent.config.activeItemIndex];
+            //         for (j = this.parent.config.activeItemIndex; j > 0; j--) {
+            //             this.tabs[j] = this.tabs[j - 1];
+            //         }
+            //         this.tabs[0] = activeTab;
+            //         this.parent.config.activeItemIndex = 0;
+            //     }
+            // }
 
             this._updateTabSizes();
             this.parent.emitBubblingEvent('stateChanged');
@@ -4872,7 +4873,7 @@
                 this.layoutManager.dropTargetIndicator.highlightArea({
                     x1: headerOffset.left,
                     x2: headerOffset.left + 100,
-                    y1: headerOffset.top + this.header.element.height() - 20,
+                    y1: headerOffset.top + this.header.element.height() - 25,
                     y2: headerOffset.top + this.header.element.height()
                 });
 
diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss
index 2a0b494f5..621c2bf1b 100644
--- a/src/client/views/DocumentButtonBar.scss
+++ b/src/client/views/DocumentButtonBar.scss
@@ -44,18 +44,16 @@ $linkGap : 3px;
 }
 
 .documentButtonBar {
-    margin-top: $linkGap;
-    grid-column: 1/4;
-    width: max-content;
-    height: auto;
     display: flex;
     flex-direction: row;
+    gap: 3px;
 }
 
 .documentButtonBar-button {
     pointer-events: auto;
     padding-right: 5px;
     width: 25px;
+    height: 25px;
 }
 
 .documentButtonBar-linker {
diff --git a/src/client/views/_nodeModuleOverrides.scss b/src/client/views/_nodeModuleOverrides.scss
index 140be2140..fd0ac9d5c 100644
--- a/src/client/views/_nodeModuleOverrides.scss
+++ b/src/client/views/_nodeModuleOverrides.scss
@@ -5,6 +5,7 @@
 div .lm_header {
     background: $dark-gray;
     overflow: hidden;
+    height: 27px !important;
 }
 
 /* Width */
@@ -62,7 +63,7 @@ div .lm_header {
     border-radius: 5px;
     display: flex;
     justify-content: space-evenly;
-    height: 18px;
+    height: 23px;
     width: 65px;
 }
 
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index b8180fe24..77e7b86ea 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -39,7 +39,7 @@
     padding: 0px;
     opacity: 0.7;
     box-shadow: none;
-    height: 19px;
+    height: 24px;
     // border-bottom: 1px black;
 
     .collectionDockingView-gear {
@@ -52,7 +52,7 @@
     opacity: 1;
     margin: 0;
     box-shadow: none;
-    height: 22px;
+    height: 27px;
     margin-right: 2px;
     // border-bottom: unset;
 
@@ -357,8 +357,6 @@
         background: transparent url("../../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
     }
 
-    .flexlayout__popup_menu {}
-
     .flexlayout__popup_menu_item {
         padding: 2px 10px 2px 10px;
         color: #ddd;
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index 72adc171b..a9f33c4da 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -11,6 +11,8 @@ $medium-blue: #4476F7;
 $pink: #E0217D;
 $yellow: #F5D747;
 
+$logout-red: #ca4444;
+
 $drop-shadow: "#32323215";
 
 //padding
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index ce6636080..adb968948 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -20,11 +20,34 @@
         align-items: center;
         background-color: $dark-gray;
 
+        .topBar-icon {
+            cursor: pointer;
+            font-size: 12px;
+            width: fit-content;
+            display: flex;
+            justify-content: center;
+            gap: 4px;
+            align-items: center;
+            justify-self: center;
+            align-self: center;
+            border-radius: 5px;
+            padding: 5px;
+            transition: linear 0.1s;
+            color: $black;
+            background-color: $light-gray;
+        }
+
+        .topBar-icon:hover {
+            background-color: $light-blue;
+        }
+
+        
         .topbar-center {
             grid-column: 2;
             display: inline-flex;
             justify-content: center;
             align-items: center;
+            gap: 5px;
 
             .topbar-lozenge-dashboard {
                 display: flex;
@@ -48,37 +71,13 @@
             }
         }
 
-        .topBar-icon {
-            color: black;
-            cursor: pointer;
-            font-size: 15px;
-            height: 30;
-            width: 30;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-right: 5px;
-            justify-self: center;
-            align-self: center;
-            border-radius: 100%;
-            transition: linear 0.1s;
-            background-color: #92adb900;
-        }
-
-        .topBar-icon:hover {
-            background-color: rgba(0, 0, 0, 0.15);
-        }
 
         .topbar-right {
             grid-column: 3;
             position: relative;
             display: flex;
             justify-content: flex-end;
-
-            
-
-            
-
+            gap: 5px;
         }
 
         .topbar-left {
@@ -88,6 +87,7 @@
             position: relative;
             display: flex;
             width: 450;
+            gap: 5px;
 
             .topbar-lozenge-user,
             .topbar-lozenge {
@@ -98,10 +98,10 @@
                 font-weight: 400;
                 padding: 4px;
                 align-self: center;
+                margin-left: 7px;
                 margin-right: 7px;
                 display: flex;
                 align-items: center;
-                border: white 1px solid;
 
                 .topbar-dashSelect {
                     border: none;
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 02b597078..6e4d4fe15 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -27,9 +27,9 @@ export class TopBar extends React.Component {
                     <div className="topbar-left">
                         <div className="topbar-lozenge-user">
                             {`${Doc.CurrentUserEmail}`}
-                            <div className="topbar-logoff" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
-                                Logoff
-                            </div>
+                        </div>
+                        <div className="topbar-icon" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
+                            {"Logoff"}<FontAwesomeIcon icon="sign-out"></FontAwesomeIcon>
                         </div>
                     </div>
                     <div className="topbar-center" >
@@ -39,26 +39,24 @@ export class TopBar extends React.Component {
                                 style={{ color: Colors.WHITE }}>
                                 {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
                             </select>
-                            <div className="topbar-dashboards">
-                                <div className="topbar-icon" onClick={undoBatch(() => CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}
-                                    style={{ color: Colors.WHITE }}>
-                                    <FontAwesomeIcon icon="plus"></FontAwesomeIcon>{"New"}
-                                </div>
-                                <div className="topbar-icon" onClick={undoBatch(() => CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}
-                                    style={{ color: Colors.WHITE }}>
-                                    <FontAwesomeIcon icon="camera"></FontAwesomeIcon>{"Snapshot"}
-                                </div>
+                        </div>
+                        <div className="topbar-dashboards">
+                            <div className="topbar-icon" onClick={undoBatch(() => CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}
+                            >
+                                {"New"}<FontAwesomeIcon icon="plus"></FontAwesomeIcon>
                             </div>
+                            {Doc.UserDoc().noviceMode ? (null) : <div className="topbar-icon" onClick={undoBatch(() => CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}
+                            >
+                                {"Snapshot"}<FontAwesomeIcon icon="camera"></FontAwesomeIcon>
+                            </div>}
                         </div>
                     </div>
                     <div className="topbar-right" >
-                        <div className="topbar-icon"
-                            style={{ color: Colors.WHITE }}>
-                            <FontAwesomeIcon icon="question-circle"></FontAwesomeIcon>
+                        <div className="topbar-icon">
+                            {"Help"}<FontAwesomeIcon icon="question-circle"></FontAwesomeIcon>
                         </div>
-                        <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}
-                            style={{ color: Colors.WHITE }}>
-                            <FontAwesomeIcon icon="cog"></FontAwesomeIcon>
+                        <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}>
+                            {"Settings"}<FontAwesomeIcon icon="cog"></FontAwesomeIcon>
                         </div>
 
                     </div>