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

@@ -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 {

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: [

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 {