From 5febb174dd123d89d412c1f162af84f2948c9a4e Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Fri, 17 Nov 2017 13:45:34 +0200
Subject: [PATCH] Fix transition line height and component baseline

Changes baseline handling so that transitions and messages can occur in
any order without affecting the baseline.

Also Moves transition font styles to marketplaceFonts.css file.
---
 src/components/Messages/Messages.css        | 39 ++++++++++-----------
 src/components/Messages/Messages.example.js | 26 ++++++++++++++
 src/marketplaceFonts.css                    | 12 +++++++
 3 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/src/components/Messages/Messages.css b/src/components/Messages/Messages.css
index a7364192..c7958c17 100644
--- a/src/components/Messages/Messages.css
+++ b/src/components/Messages/Messages.css
@@ -8,13 +8,13 @@
 }
 
 .messageItem {
-  margin-bottom: 35px;
+  margin-bottom: 38px;
 
   /* Clearfix */
   @apply --clearfix;
 
   @media (--viewportMedium) {
-    margin-bottom: 40px;
+    margin-bottom: 41px;
   }
 
   &:last-of-type {
@@ -41,7 +41,11 @@
 
 .avatar {
   flex-shrink: 0;
-  margin: 9px 12px 0 0;
+  margin: 6px 12px 0 0;
+
+  @media (--viewportMedium) {
+    margin: 9px 12px 0 0;
+  }
 }
 
 .messageContent,
@@ -49,11 +53,12 @@
   @apply --marketplaceMessageFontStyles;
 
   margin: 0;
-  padding: 15px 14px 11px 14px;
+  padding: 12px 14px 11px 14px;
   border-radius: 8px;
   box-shadow: var(--boxShadow);
 
   @media (--viewportMedium) {
+    padding: 14px 14px 11px 14px;
     margin: 0;
   }
 }
@@ -83,7 +88,7 @@
 }
 
 .transitionItem {
-  margin-bottom: 34px;
+  margin-bottom: 36px;
 
   /* Clearfix */
   @apply --clearfix;
@@ -100,32 +105,26 @@
 .transition {
   display: flex;
   flex-direction: row;
-  margin: -1px 0 1px 0;
+  padding: 3px 0 2px 0;
 
   @media (--viewportMedium) {
-    margin: 0;
+    padding: 0;
   }
 }
 
 .transitionContent {
+  @apply --marketplaceTxTransitionFontStyles;
   margin: 0;
-
-  /* Font */
-  font-family: 'sofiapro', Helvetica, Arial, sans-serif;
-  font-weight: var(--fontWeightRegular);
-  font-size: 16px;
-  line-height: 20px;
-
-  @media (--viewportMedium) {
-    font-size: 20px;
-    line-height: 32px;
-    margin: 1px 0 -1px 0;
-  }
 }
+
 .transitionDate {
   @apply --marketplaceMessageDateFontStyles;
-  margin: 0;
   color: var(--matterColorAnti);
+  margin: 7px 0 0 0;
+
+  @media (--viewportMedium) {
+    margin: -1px 0 1px 0;
+  }
 }
 
 .bullet {
diff --git a/src/components/Messages/Messages.example.js b/src/components/Messages/Messages.example.js
index f23b47f5..f16ad482 100644
--- a/src/components/Messages/Messages.example.js
+++ b/src/components/Messages/Messages.example.js
@@ -47,6 +47,32 @@ export const WithCurrentUser = {
 };
 
 export const WithTransitions = {
+  component: Messages,
+  props: {
+    messages: [],
+    transaction: createTransaction({
+      customer: createUser('user1'),
+      provider: createUser('user2'),
+      listing: createListing('Listing'),
+      transitions: [
+        createTxTransition({
+          at: new Date(Date.UTC(2017, 10, 9, 8, 10)),
+          by: propTypes.TX_TRANSITION_ACTOR_CUSTOMER,
+          transition: propTypes.TX_TRANSITION_PREAUTHORIZE,
+        }),
+        createTxTransition({
+          at: new Date(Date.UTC(2017, 10, 9, 8, 12)),
+          by: propTypes.TX_TRANSITION_ACTOR_PROVIDER,
+          transition: propTypes.TX_TRANSITION_ACCEPT,
+        }),
+      ],
+    }),
+    currentUser: createCurrentUser('user2'),
+  },
+  group: 'messages',
+};
+
+export const WithMessagesAndTransitions = {
   component: Messages,
   props: {
     messages: [
diff --git a/src/marketplaceFonts.css b/src/marketplaceFonts.css
index 5ef40a57..64b3c4f3 100644
--- a/src/marketplaceFonts.css
+++ b/src/marketplaceFonts.css
@@ -231,6 +231,18 @@
     }
   }
 
+  --marketplaceTxTransitionFontStyles {
+    font-family: 'sofiapro', Helvetica, Arial, sans-serif;
+    font-weight: var(--fontWeightMedium);
+    font-size: 16px;
+    line-height: 18px;
+
+    @media (--viewportMedium) {
+      font-size: 20px;
+      line-height: 32px;
+    }
+  }
+
   /* ================ Tabbed navigation font styles ================ */
 
   --marketplaceTabNavFontStyles {