Additional uni-nav tweaks from QA

#4590
#4591
#4592
#4593

Author: jmgasper

src/components/Footer/Footer.jsx

@@ -1,6 +1,8 @@
 /* global tcUniNav */
 import React, { Component } from 'react'
 
+import './styles.scss'
+
 let uniqueId = 0
 
 class Footer extends Component {
@@ -22,7 +24,7 @@ class Footer extends Component {
   }
 
   render() {
-    return <div id={`footerNav-${this.footerIdRef}`} />
+    return <div styleName="footer-conatiner" id={`footerNav-${this.footerIdRef}`} />
   }
 }
 

src/components/Footer/styles.scss

@@ -0,0 +1,10 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.footer-conatiner {
+  display: flex;
+  width: 100%;
+
+  footer {
+    width: 100%;
+  }
+}

src/components/TopBar/ProjectToolBar.scss

@@ -17,7 +17,7 @@
       justify-content: space-between;
       width: 100%;
       height: 60px;
-      background-color: $tc-black;
+      background: $tc-gray-05;
       padding: 0 20px;
 
       @media screen and (max-width: $screen-md - 1px) {
@@ -55,7 +55,7 @@
 
         span {
           @include tc-heading-small;
-          color: $tc-gray-10;
+          color: $tc-black;
           display: block;
           text-overflow: ellipsis;
           overflow: hidden;

src/components/TopBar/ProjectsToolBar.js

@@ -160,17 +160,17 @@ class ProjectsToolBar extends Component {
         {isLoggedIn ? (<div className="primary-toolbar">
           { !hasPermission(PERMISSIONS.SEARCH_PROJECTS) && <div className="projects-title-mobile">MY PROJECTS</div> }
           {
-            hasPermission(PERMISSIONS.SEARCH_PROJECTS) &&
-            <div className="search-widget">
-              <SearchBar
-                hideSuggestionsWhenEmpty
-                showPopularSearchHeader={ false }
-                searchTermKey="keyword"
-                onTermChange={ this.handleTermChange }
-                onSearch={ this.handleSearch }
-                onClearSearch={ this.handleSearch }
-              />
-            </div>
+            hasPermission(PERMISSIONS.SEARCH_PROJECTS) ?
+              (<div className="search-widget">
+                <SearchBar
+                  hideSuggestionsWhenEmpty
+                  showPopularSearchHeader={ false }
+                  searchTermKey="keyword"
+                  onTermChange={ this.handleTermChange }
+                  onSearch={ this.handleSearch }
+                  onClearSearch={ this.handleSearch }
+                />
+              </div>) : (<div />)
           }
           <div className="actions">
             <NewProjectNavLink link={getNewProjectLink(orgConfig)} />

src/components/TopBar/SectionToolBar.scss

@@ -3,7 +3,7 @@
 
 :global {
   .tc-header.tc-header__connect .top-bar{
-    background-color: $tc-gray-100;
+    background: $tc-gray-05;
     position: relative;
     display: flex;
 
@@ -31,7 +31,7 @@
     .title {
       @include roboto;
       font-size: 20px;
-      color: $tc-gray-10;
+      color: $tc-black;
       text-align: center;
     }
 

src/projects/create/containers/CreateContainer.scss

@@ -3,7 +3,6 @@
 
 :global {
   .WizardCreateProject {
-    margin-top: -60px; // Counteract the push from the main wrapper, top of vewport
     align-content: flex-start;
 
     @include mobile-tablet {