Topbar - a draft for desktop

src/containers/Topbar/Topbar.css

@@ -1,3 +1,5 @@
+@import '../../marketplace.css';
+
 .root {
   width: 100%;
 }
@@ -20,6 +22,10 @@
 
   /* shadows */
   box-shadow: 0 1px 1px 0 #dcdcdc;
+
+  @media (min-width: 768px) {
+    display: none;
+  }
 }
 
 .home {

src/containers/Topbar/Topbar.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { intlShape, injectIntl } from 'react-intl';
 import { pickBy } from 'lodash';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
-import { FlatButton, MobileMenu, Modal, NamedLink } from '../../components';
+import { FlatButton, MobileMenu, Modal, NamedLink, TopbarDesktop } from '../../components';
 import { SearchForm } from '../../containers';
 import { withFlattenedRoutes } from '../../util/contextHelpers';
 import { parse, stringify } from '../../util/urlHelpers';
@@ -135,6 +135,12 @@ class TopbarComponent extends Component {
             <img src={searchIcon} alt={intl.formatMessage({ id: 'Topbar.searchIcon' })} />
           </FlatButton>
         </div>
+        <TopbarDesktop
+          currentUserHasListings={currentUserHasListings}
+          intl={intl}
+          isAuthenticated={isAuthenticated}
+          name={name}
+        />
         <Modal
           isOpen={isMobileMenuOpen}
           onClose={this.handleMobileMenuClose}

src/marketplace.css

@@ -133,6 +133,12 @@ pre,
   letter-spacing: -0.1px;
 
   /* TODO Desktop styles needs to be extracted */
+  @media (min-width: 768px) {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    padding: 2px 0 6px 0; /* 2px + 6px = 8px */
+  }
 }
 
 .tinyFont {
@@ -155,6 +161,10 @@ html,
 /* NORMALIZATIONS for other elements */
 /* TODO */
 
+html {
+  padding: 0;
+}
+
 a {
   text-decoration: none;