Fixes for QA / uni nav. Also updated to use ‘auto’ for uninav user field

Author: jmgasper

src/components/Grid/GridView.scss

@@ -228,6 +228,7 @@
 
   .gridview-load-more {
     text-align: center;
+    margin-bottom: 20px;
 
     @media screen and (max-width: $screen-md - 1px) {
       padding: 2 * $base-unit 0;

src/components/Layout/Layout.scss

@@ -3,8 +3,6 @@
 :global {
   .main-wrapper {
     min-height: calc(100vh - 120px); // minus height
-    padding-top: 120px;
-    overflow: hidden;
 
     @media screen and (max-width: $screen-md - 1px) {
       padding-top: 0;

src/components/TopBar/NavBar.js

@@ -26,14 +26,6 @@ class NavBar extends Component {
 
   componentDidMount() {
     if (!!this.headerIdRef && !this.uniNavInitialized) {
-      const user = this.props.user
-      const navigationUserInfo = user ? {
-        ...user,
-        initials: getInitials(user.firstName, user.lastName),
-      } : null
-      const authToken = user ? user.token : null
-      const isAuthenticated = !!authToken
-
       this.uniNavInitialized = true
       const headerId = this.headerIdRef
       const authURLs = HEADER_AUTH_URLS
@@ -44,7 +36,7 @@ class NavBar extends Component {
         type: 'tool',
         toolName: 'Connect',
         toolRoot: '/',
-        user: isAuthenticated ? navigationUserInfo : null,
+        user: 'auto',
         signOut: () => {
           window.location = `${BASE}/logout?ref=nav`
         },

src/components/TopBar/ProjectToolBar.js

@@ -7,7 +7,6 @@ import { withRouter } from 'react-router-dom'
 import { connect } from 'react-redux'
 import ReactDOM from 'react-dom'
 import { getNewProjectLink } from '../../helpers/projectHelper'
-import NotificationsDropdown from '../NotificationsDropdown/NotificationsDropdownContainer'
 import NewProjectNavLink from './NewProjectNavLink'
 import MobileMenu from '../MobileMenu/MobileMenu'
 import MobileMenuToggle from '../MobileMenu/MobileMenuToggle'
@@ -53,26 +52,20 @@ class ProjectToolBar extends React.Component {
   }
 
   render() {
-    const { renderLogoSection, userMenu, project, user, mobileMenu, location, orgConfig } = this.props
+    const { project, user, mobileMenu, orgConfig } = this.props
     const { isTooltipVisible, isMobileMenuOpen } = this.state
 
     return (
       <div className="ProjectToolBar">
         <div className="tool-bar">
-          <div className="bar-column">
-            {renderLogoSection()}
-          </div>
+          <div className="bar-column" />
           {project && project.name && <div className="bar-column project-name">
             <span ref="name" onMouseEnter={this.onNameEnter} onMouseLeave={this.onNameLeave}>{_.unescape(project.name)}</span>
             {isTooltipVisible && <div className="breadcrumb-tooltip">{_.unescape(project.name)}</div>}
           </div>}
           {project && project.name && <div className="bar-column project-name mobile"><span>{_.unescape(project.name)}</span></div>}
           <div className="bar-column">
             <NewProjectNavLink compact link={getNewProjectLink(orgConfig)} />
-            {userMenu}
-            {/* pass location, to make sure that component is re-rendered when location is changed
-                it's necessary to hide notification dropdown on mobile when users uses browser history back/forward buttons */}
-            <NotificationsDropdown location={location} />
             <MobileMenuToggle onToggle={this.toggleMobileMenu}/>
           </div>
         </div>

src/components/TopBar/ProjectToolBar.scss

@@ -18,6 +18,7 @@
       width: 100%;
       height: 60px;
       background-color: $tc-black;
+      padding: 0 20px;
 
       @media screen and (max-width: $screen-md - 1px) {
         height: 50px;

src/components/TopBar/ProjectsToolBar.js

@@ -14,7 +14,6 @@ import { loadProjectsMetadata } from '../../actions/templates'
 import { getNewProjectLink } from '../../helpers/projectHelper'
 import { hasPermission } from '../../helpers/permissions'
 import { PERMISSIONS } from '../../config/permissions'
-import NavBar from './NavBar'
 
 class ProjectsToolBar extends Component {
 
@@ -158,7 +157,6 @@ class ProjectsToolBar extends Component {
           when={!!onLeaveMessage}
           message={onLeaveMessage}
         />
-        <NavBar user={user} />
         {isLoggedIn ? (<div className="primary-toolbar">
           { !hasPermission(PERMISSIONS.SEARCH_PROJECTS) && <div className="projects-title-mobile">MY PROJECTS</div> }
           {

src/components/TopBar/ProjectsToolBar.scss

@@ -16,6 +16,7 @@
       justify-content: space-between;
       user-select: none;
       padding: 0 20px;
+      background: $tc-gray-05;
 
       @media screen and (max-width: $screen-md - 1px) {
         height: auto;

src/components/TopBar/SectionToolBar.jsx

@@ -11,12 +11,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 import './SectionToolBar.scss'
-import ConnectLogoMono from '../../assets/icons/connect-logo-mono.svg'
 import XMark from '../../assets/icons/x-mark.svg'
 
 
 const SectionToolBar = (props) => {
-  const logo = <Link key="logo" to="/" className="logo"><ConnectLogoMono className="icon-connect-logo-mono" /></Link>
+  const logo = <div />
   const title = <div key="title" className="title">{props.title}</div>
   const close = <Link key="close" to="/" className="close"><XMark className="icon-x-mark" /></Link>
   const menu = props.menu ? <div key="menu" className="menu">{props.menu}</div> : null

src/components/TopBar/TopBarContainer.js

@@ -9,6 +9,7 @@ import {
 } from '../../config/constants'
 import ConnectLogoMono from '../../assets/icons/connect-logo-mono.svg'
 import { getAvatarResized, getFullNameWithFallback } from '../../helpers/tcHelpers.js'
+import NavBar from './NavBar'
 require('./TopBarContainer.scss')
 
 
@@ -88,7 +89,7 @@ class TopBarContainer extends React.Component {
           { label: 'Account and security', link: '/settings/account' },
           { label: 'Notification settings', link: '/settings/notifications' },
         ]
-      }, 
+      },
       {
         items: [
           { label: 'Log Out', link: logoutLink, absolute: true, onClick: logoutClick },
@@ -125,6 +126,7 @@ class TopBarContainer extends React.Component {
       <div className="TopBarContainer">
         <div className="tc-header tc-header__connect" id="TopToolbar">
           <div className="top-bar">
+            <NavBar user={user} />
             {
               ToolBar &&
               <ToolBar

src/components/TopBar/TopBarContainer.scss

@@ -1,6 +1,12 @@
 @import '~tc-ui/src/styles/tc-includes';
 
 :global {
+  .TopBarContainer {
+    position: sticky;
+    top: 0;
+    z-index: 4;
+  }
+
   .login-wrapper {
     align-items: center;
     display: flex;
@@ -33,10 +39,11 @@
     background-color: $tc-black;
     z-index: 20;
     padding: 0 20px;
-    position: fixed;
     top: 0;
     left: 0;
     right: 0;
+    width: 100%;
+
     @media screen and (max-width: $screen-md - 1px) {
       height: auto;
       line-height: 50px;
@@ -104,6 +111,9 @@
       .top-bar {
         background-color: $tc-black;
         position: relative;
+        display: flex;
+        flex-direction: column;
+
         @media screen and (max-width: $screen-md - 1px) {
           height: auto;
         }