Merge pull request #569 from sharetribe/messaging-dr

messaging reviews

src/components/ActivityFeed/ActivityFeed.css

@@ -8,13 +8,13 @@
 }
 
 .messageItem {
-  margin-bottom: 38px;
+  margin-bottom: 20px;
 
   /* Clearfix */
   @apply --clearfix;
 
   @media (--viewportMedium) {
-    margin-bottom: 41px;
+    margin-bottom: 17px;
   }
 
   &:last-of-type {
@@ -57,12 +57,12 @@
 
   display: inline-block;
   margin: 0;
-  padding: 12px 14px 11px 14px;
+  padding: 6px 14px 11px 14px;
   border-radius: 8px;
   box-shadow: var(--boxShadow);
 
   @media (--viewportMedium) {
-    padding: 14px 14px 11px 14px;
+    padding: 8px 14px 9px 14px;
     margin: 0;
   }
 }
@@ -85,7 +85,7 @@
   color: var(--matterColorAnti);
 
   @media (--viewportMedium) {
-    margin: 14px 0 0 0;
+    margin: 6px 0 0 0;
   }
 }
 
@@ -100,7 +100,7 @@
   @apply --clearfix;
 
   @media (--viewportMedium) {
-    margin-bottom: 40px;
+    margin-bottom: 24px;
   }
 
   &:last-of-type {

src/components/BookingBreakdown/BookingBreakdown.css

@@ -38,7 +38,7 @@
 }
 
 .itemValue {
-  @apply --marketplaceDefaultFontStyles;
+  @apply --marketplaceH4FontStyles;
   font-weight: 600;
   margin: 0 0 0 10px;
 
@@ -74,7 +74,8 @@
 }
 
 .totalPrice {
-  @apply --marketplaceH2FontStyles;
+  @apply --marketplaceBodyFontStyles;
+  font-weight: var(--fontWeightSemiBold);
   margin: 0 0 0 10px;
 
   @media (--viewportMedium) {

src/components/NotificationBadge/NotificationBadge.css

@@ -24,5 +24,8 @@
   @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
+
+    top: -10px;
+    position: relative;
   }
 }

src/components/SaleDetailsPanel/SaleDetailsPanel.css

@@ -7,6 +7,7 @@
 .container {
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 
   @media (--viewportLarge) {
     flex-direction: row;
@@ -17,12 +18,11 @@
 }
 
 .saleInfo {
-  margin-bottom: 210px;
+  margin-bottom: 104px;
 
   @media (--viewportLarge) {
-    max-width: 538px;
-    margin-right: 108px;
-    margin-bottom: 0;
+    max-width: 542px;
+    margin-right: 56px;
   }
 }
 
@@ -171,13 +171,13 @@
 
   @media (--viewportLarge) {
     display: block;
-    margin: 116px 0 0 0;
+    margin: 119px 0 0 0;
   }
 }
 
 .breakdownContainerDesktop {
   position: sticky;
-  top: 24px;
+  top: -272px; /* This is a hack to showcase how the component would look when the image isn't sticky */
   background-color: var(--matterColorLight);
   border: 1px solid var(--matterColorNegative);
   border-radius: 2px;
@@ -202,16 +202,16 @@
 }
 
 .breakdownTitleDesktop {
-  margin: 48px 48px 50px 48px;
+  margin: 44px 48px 18px 48px;
   color: var(--matterColorAnti);
 }
 
 .breakdownDesktop {
-  margin: 48px 48px 0 48px;
+  margin: 0 48px 0 48px;
 }
 
 .feedContainer {
-  margin: 46px 24px 0 24px;
+  margin: 46px 24px 36px 24px;
 
   @media (--viewportMedium) {
     margin: 46px 24px 0 24px;
@@ -223,7 +223,7 @@
 
 .feedContainerWithInfoAbove {
   @media (--viewportLarge) {
-    margin: 36px 0 0 0;
+    margin: 38px 0 0 0;
   }
 }
 

src/containers/InboxPage/InboxPage.css

@@ -137,11 +137,7 @@
 
 .itemList {
   margin: 0;
-  padding: 16px 24px;
-
-  @media (--viewportLarge) {
-    padding: 0;
-  }
+  padding: 0;
 }
 
 .listItem {
@@ -350,7 +346,7 @@
   color: var(--matterColor);
   margin-top: 4px;
 
-  @media (var--viewportmedium) {
+  @media (--viewportMedium) {
     margin-top: 9px;
   }
 }

src/marketplaceFonts.css

@@ -226,7 +226,7 @@
 
     @media (--viewportMedium) {
       font-weight: var(--fontWeightMedium);
-      font-size: 14px;
+      font-size: 13px;
       line-height: 24px;
     }
   }