From fdb98531e77532ef9122f6d8432a2caaf274e803 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Tue, 30 May 2017 03:19:41 +0300
Subject: [PATCH] Topbar - a draft for desktop

---
 src/containers/Topbar/Topbar.css |  6 ++++++
 src/containers/Topbar/Topbar.js  |  8 +++++++-
 src/marketplace.css              | 10 ++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/containers/Topbar/Topbar.css b/src/containers/Topbar/Topbar.css
index 172654bb..9dc6cd53 100644
--- a/src/containers/Topbar/Topbar.css
+++ b/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 {
diff --git a/src/containers/Topbar/Topbar.js b/src/containers/Topbar/Topbar.js
index ba0c0c25..41b182b0 100644
--- a/src/containers/Topbar/Topbar.js
+++ b/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}
diff --git a/src/marketplace.css b/src/marketplace.css
index 760e2903..9a10e334 100644
--- a/src/marketplace.css
+++ b/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;