From 6e785c5737878de46b6c3efbb4f19fec123ef29b Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Wed, 5 Jul 2017 13:26:24 +0300
Subject: [PATCH] EditListingPage secondary navigation (tabs) styled for mobile

---
 .../EditListingWizard/EditListingWizard.css   | 15 +++++++++++-
 src/components/TabNav/TabNav.css              |  2 ++
 .../EditListingPage/EditListingPage.css       | 24 +++++++++++++++++++
 .../EditListingPage/EditListingPage.js        |  2 +-
 src/containers/InboxPage/InboxPage.css        |  1 +
 5 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/EditListingWizard/EditListingWizard.css b/src/components/EditListingWizard/EditListingWizard.css
index 059d4a3b..9e1f9205 100644
--- a/src/components/EditListingWizard/EditListingWizard.css
+++ b/src/components/EditListingWizard/EditListingWizard.css
@@ -1,10 +1,23 @@
+@import '../../marketplace.css';
+
 .root {
+  /* Layout */
   width: 100%;
   height: 100%;
 }
 
 .nav {
-  margin: 1rem;
+  /* Layout */
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 11px 24px 0 24px;
+
+  border-top-width: 1px;
+  border-top-color: var(--matterColorNegative);
+  border-top-style: solid;
+  background-color: var(--matterColorLight);
+  box-shadow: var(--boxShadow);
 }
 
 .panel {
diff --git a/src/components/TabNav/TabNav.css b/src/components/TabNav/TabNav.css
index 0b5095c4..171387ac 100644
--- a/src/components/TabNav/TabNav.css
+++ b/src/components/TabNav/TabNav.css
@@ -1,6 +1,8 @@
 @import '../../marketplace.css';
 
 .root {
+  overflow-x: auto;
+
   &::after {
     content: ".";
     visibility: hidden;
diff --git a/src/containers/EditListingPage/EditListingPage.css b/src/containers/EditListingPage/EditListingPage.css
index 02ed913b..817e2b01 100644
--- a/src/containers/EditListingPage/EditListingPage.css
+++ b/src/containers/EditListingPage/EditListingPage.css
@@ -1,3 +1,27 @@
+@import '../../marketplace.css';
+
+.mobileTopbar {
+  /* Size */
+  width: 100%;
+  height: var(--topbarHeight);
+
+  /* Layout for child components */
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  /* fill */
+  background-color: var(--matterColorLight);
+
+  /* shadows */
+  box-shadow: none;
+
+  @media (--desktopViewport) {
+    display: none;
+  }
+}
+
 .wizard {
   flex-grow: 1;
 }
diff --git a/src/containers/EditListingPage/EditListingPage.js b/src/containers/EditListingPage/EditListingPage.js
index 2a6b7b81..c72bfd93 100644
--- a/src/containers/EditListingPage/EditListingPage.js
+++ b/src/containers/EditListingPage/EditListingPage.js
@@ -91,7 +91,7 @@ export const EditListingPageComponent = props => {
 
     return (
       <PageLayout title={title} scrollingDisabled={scrollingDisabled}>
-        <Topbar history={history} location={location} />
+        <Topbar mobileRootClassName={css.mobileTopbar} history={history} location={location} />
         <EditListingWizard
           className={css.wizard}
           disabled={disableForm}
diff --git a/src/containers/InboxPage/InboxPage.css b/src/containers/InboxPage/InboxPage.css
index 6b849177..864433a8 100644
--- a/src/containers/InboxPage/InboxPage.css
+++ b/src/containers/InboxPage/InboxPage.css
@@ -33,6 +33,7 @@
   border-top-width: 1px;
   border-top-color: var(--matterColorNegative);
   border-top-style: solid;
+  background-color: var(--matterColorLight);
   box-shadow: var(--boxShadow);
 }