From 17e55c8116ff08e5269b017cacbd48e04826f591 Mon Sep 17 00:00:00 2001
From: Janne Koivistoinen <janne@sharetribe.com>
Date: Fri, 1 Dec 2017 18:43:50 +0200
Subject: [PATCH] ui fixes, baselines, background image, sticky nav and close
 modal

---
 src/components/ActivityFeed/ActivityFeed.css      |  6 +++---
 .../LayoutWrapperTopbar/LayoutWrapperTopbar.css   |  3 ++-
 .../SaleDetailsPanel/SaleDetailsPanel.css         |  6 +++---
 src/components/Topbar/Topbar.css                  |  3 ---
 src/containers/LandingPage/LandingPage.css        |  6 ------
 src/marketplace.css                               | 15 +++++++++++++--
 6 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/ActivityFeed/ActivityFeed.css b/src/components/ActivityFeed/ActivityFeed.css
index 521c8093..121ff100 100644
--- a/src/components/ActivityFeed/ActivityFeed.css
+++ b/src/components/ActivityFeed/ActivityFeed.css
@@ -57,12 +57,12 @@
 
   display: inline-block;
   margin: 0;
-  padding: 6px 14px 11px 14px;
+  padding: 8.5px 14px 8.5px 14px;
   border-radius: 8px;
   box-shadow: var(--boxShadow);
 
   @media (--viewportMedium) {
-    padding: 6px 14px 11px 14px;
+    padding: 8.5px 14px 8.5px 14px;
     margin: 0;
   }
 }
@@ -85,7 +85,7 @@
   color: var(--matterColorAnti);
 
   @media (--viewportMedium) {
-    margin: 7px 0 0 0;
+    margin: 6px 0 0 0;
   }
 }
 
diff --git a/src/components/LayoutWrapperTopbar/LayoutWrapperTopbar.css b/src/components/LayoutWrapperTopbar/LayoutWrapperTopbar.css
index e150fece..125d6db8 100644
--- a/src/components/LayoutWrapperTopbar/LayoutWrapperTopbar.css
+++ b/src/components/LayoutWrapperTopbar/LayoutWrapperTopbar.css
@@ -2,6 +2,7 @@
 
 .root {
   width: 100%;
-  position: relative;
+  position: sticky;
+  top: 0;
   z-index: var(--zIndexTopbar);
 }
diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.css b/src/components/SaleDetailsPanel/SaleDetailsPanel.css
index 39f77222..0aa98539 100644
--- a/src/components/SaleDetailsPanel/SaleDetailsPanel.css
+++ b/src/components/SaleDetailsPanel/SaleDetailsPanel.css
@@ -90,7 +90,7 @@
     margin: 23px 24px 0 24px;
   }
   @media (--viewportLarge) {
-    margin: 23px 0 0 0;
+    margin: 22px 0 -2px 0;
   }
 }
 
@@ -118,7 +118,7 @@
 
   @media (--viewportLarge) {
     position: absolute;
-    top: 25px;
+    top: 151px;
   }
 }
 
@@ -207,7 +207,7 @@
 }
 
 .breakdownDesktop {
-  margin: 0 48px 50px 48px;
+  margin: 0 48px 47px 48px;
 }
 
 .feedContainer {
diff --git a/src/components/Topbar/Topbar.css b/src/components/Topbar/Topbar.css
index a6c7a569..ae2a3c98 100644
--- a/src/components/Topbar/Topbar.css
+++ b/src/components/Topbar/Topbar.css
@@ -131,9 +131,6 @@
    predictions list */
   position: absolute;
   top: 73px;
-
-  /* Pull text behind search suggestions */
-  z-index: -1;
 }
 
 /* ================ Modal ================ */
diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css
index e26bfb70..eb12d73a 100644
--- a/src/containers/LandingPage/LandingPage.css
+++ b/src/containers/LandingPage/LandingPage.css
@@ -18,11 +18,6 @@
 
   @media (--viewportMedium) {
     min-height: calc(100vh - var(--topbarHeightDesktop));
-    border: solid 24px #fcfcfc;
-  }
-
-  @media (--viewportLarge) {
-    border: solid 36px #fcfcfc;
   }
 }
 
@@ -34,7 +29,6 @@
   @media (--viewportMedium) {
     justify-content: center;
     padding-top: 60px;
-    border-radius: 4px;
   }
 }
 
diff --git a/src/marketplace.css b/src/marketplace.css
index 9e4a8495..92b0a59d 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -24,6 +24,16 @@
 
     /* Align the image within the container */
     background-position: center center;
+
+    @media (--viewportMedium) {
+      border-radius: 28px;
+      border: solid 24px var(--matterColorBright);
+    }
+
+    @media (--viewportLarge) {
+      border-radius: 40px;
+      border: solid 36px var(--matterColorBright);
+    }
   }
 
   /* ================ Colors ================ */
@@ -444,7 +454,7 @@
 
   --marketplaceModalCloseStyles {
     /* Position inside modal */
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
 
@@ -457,12 +467,13 @@
     width: auto;
 
     /* Sizing (touch area) */
-    padding: 24px 30px;
+    padding: 24px 40px;
     margin: 0;
     border: 0;
 
     @media (--viewportMedium) {
       padding: 27px 30px;
+      position: absolute;
     }
 
     /* Colors */