From e1707fb76a991d04797a8d97ca34c55db71899cd Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Sat, 31 Jul 2021 05:38:08 -0400
Subject: tab scrollable

---
 src/client/views/topbar/TopBar.scss      | 52 +++++++++++++++++---------------
 src/client/views/topbar/TopBar.tsx       | 22 ++++++++------
 src/client/views/topbar/TopBarButton.tsx | 10 ------
 3 files changed, 40 insertions(+), 44 deletions(-)
 delete mode 100644 src/client/views/topbar/TopBarButton.tsx

(limited to 'src/client/views/topbar')

diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index e2d27d5a6..ce6636080 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -75,6 +75,20 @@
             display: flex;
             justify-content: flex-end;
 
+            
+
+            
+
+        }
+
+        .topbar-left {
+            grid-column: 1;
+            color: black;
+            font-family: 'Roboto';
+            position: relative;
+            display: flex;
+            width: 450;
+
             .topbar-lozenge-user,
             .topbar-lozenge {
                 height: 23;
@@ -89,20 +103,6 @@
                 align-items: center;
                 border: white 1px solid;
 
-                .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-dashSelect {
                     border: none;
                     background-color: transparent;
@@ -117,21 +117,25 @@
                 }
             }
 
+            .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-lozenge-user:hover {
                 .topbar-logoff {
                     display: inline-block;
                 }
             }
-
-        }
-
-        .topbar-left {
-            grid-column: 1;
-            color: black;
-            font-family: 'Roboto';
-            position: relative;
-            display: flex;
-            width: 450;
         }
 
         .topbar-barChild {
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 65da717f8..02b597078 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -24,6 +24,14 @@ export class TopBar extends React.Component {
             //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 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>
                     <div className="topbar-center" >
                         <div className="topbar-lozenge-dashboard">
                             <select className="topbar-dashSelect" onChange={e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)])}
@@ -34,11 +42,11 @@ export class TopBar extends React.Component {
                             <div className="topbar-dashboards">
                                 <div className="topbar-icon" onClick={undoBatch(() => CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}
                                     style={{ color: Colors.WHITE }}>
-                                    <FontAwesomeIcon icon="plus"></FontAwesomeIcon>
+                                    <FontAwesomeIcon icon="plus"></FontAwesomeIcon>{"New"}
                                 </div>
                                 <div className="topbar-icon" onClick={undoBatch(() => CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}
                                     style={{ color: Colors.WHITE }}>
-                                    <FontAwesomeIcon icon="camera"></FontAwesomeIcon>
+                                    <FontAwesomeIcon icon="camera"></FontAwesomeIcon>{"Snapshot"}
                                 </div>
                             </div>
                         </div>
@@ -52,15 +60,9 @@ export class TopBar extends React.Component {
                             style={{ color: Colors.WHITE }}>
                             <FontAwesomeIcon icon="cog"></FontAwesomeIcon>
                         </div>
-                        <div className="topbar-lozenge-user">
-                            {`${Doc.CurrentUserEmail}`}
-                            <div className="topbar-logoff" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
-                                Logoff
-                        </div>
-                        </div>
-                    </div>
 
-                </div >
+                    </div>
+                </div>
             </div >
         );
     }
diff --git a/src/client/views/topbar/TopBarButton.tsx b/src/client/views/topbar/TopBarButton.tsx
deleted file mode 100644
index 0d3d2a8d1..000000000
--- a/src/client/views/topbar/TopBarButton.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-
-export interface IButtonProps {
-    icon?: JSX.Element;
-    text?: String;
-}
-
-export class TopBarButton implements IButtonProps {
-
-}
-- 
cgit v1.2.3-70-g09d2