Merge pull request #587 from sharetribe/ui-fixes

ui fixes, baselines, background image, sticky nav and close modal

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;
   }
 }
 

src/components/LayoutWrapperTopbar/LayoutWrapperTopbar.css

@@ -2,6 +2,7 @@
 
 .root {
   width: 100%;
-  position: relative;
+  position: sticky;
+  top: 0;
   z-index: var(--zIndexTopbar);
 }

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 {

src/components/Topbar/Topbar.css

@@ -99,6 +99,26 @@
   /* Style: red dot with white border */
   background-color: var(--failColor);
   border: 2px solid var(--matterColorLight);
+
+  animation-name: notificationPop;
+  animation-duration: 0.1s;
+  animation-delay: 0.1s;
+  animation-fill-mode: forwards;
+
+  animation-timing-function: ease-in;
+  opacity: 0;
+  transform: scale(0);
+}
+
+@keyframes notificationPop {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 .desktop {
@@ -131,9 +151,6 @@
    predictions list */
   position: absolute;
   top: 73px;
-
-  /* Pull text behind search suggestions */
-  z-index: -1;
 }
 
 /* ================ Modal ================ */

src/components/TopbarDesktop/TopbarDesktop.css

@@ -160,6 +160,26 @@
 
   /* Style: red dot */
   background-color: var(--failColor);
+
+  animation-name: notificationPop;
+  animation-duration: 0.1s;
+  animation-delay: 0.1s;
+  animation-fill-mode: forwards;
+
+  animation-timing-function: ease-in;
+  opacity: 0;
+  transform: scale(0);
+}
+
+@keyframes notificationPop {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 /* Profile menu */

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;
   }
 }
 

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 */