From e8be13a7e94dd2dc6609c73e5ddba5e6f0b6a34f Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Thu, 16 Nov 2017 14:06:35 +0200
Subject: [PATCH] Fix baseline alignment

---
 src/components/Messages/Messages.css        | 32 +++++++++++++++++++++
 src/components/Messages/Messages.example.js | 24 ++++++++++++++--
 src/components/Messages/Messages.js         |  3 +-
 3 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/src/components/Messages/Messages.css b/src/components/Messages/Messages.css
index 272eb5a6..a7364192 100644
--- a/src/components/Messages/Messages.css
+++ b/src/components/Messages/Messages.css
@@ -82,13 +82,45 @@
   text-align: right;
 }
 
+.transitionItem {
+  margin-bottom: 34px;
+
+  /* Clearfix */
+  @apply --clearfix;
+
+  @media (--viewportMedium) {
+    margin-bottom: 40px;
+  }
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
 .transition {
   display: flex;
   flex-direction: row;
+  margin: -1px 0 1px 0;
+
+  @media (--viewportMedium) {
+    margin: 0;
+  }
 }
 
 .transitionContent {
   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;
diff --git a/src/components/Messages/Messages.example.js b/src/components/Messages/Messages.example.js
index 3db1e0c9..f23b47f5 100644
--- a/src/components/Messages/Messages.example.js
+++ b/src/components/Messages/Messages.example.js
@@ -52,11 +52,21 @@ export const WithTransitions = {
     messages: [
       createMessage(
         'msg1',
-        { at: new Date(Date.UTC(2017, 10, 9, 8, 12)) },
+        { at: new Date(Date.UTC(2017, 10, 9, 8, 11)) },
         { sender: createUser('user1') }
       ),
       createMessage(
         'msg2',
+        { at: new Date(Date.UTC(2017, 10, 9, 8, 14)) },
+        { sender: createUser('user1') }
+      ),
+      createMessage(
+        'msg3',
+        { at: new Date(Date.UTC(2017, 10, 9, 8, 17)) },
+        { sender: createUser('user2') }
+      ),
+      createMessage(
+        'msg4',
         { at: new Date(Date.UTC(2017, 10, 12, 13, 20)) },
         { sender: createUser('user2') }
       ),
@@ -72,10 +82,20 @@ export const WithTransitions = {
           transition: propTypes.TX_TRANSITION_PREAUTHORIZE,
         }),
         createTxTransition({
-          at: new Date(Date.UTC(2017, 10, 9, 10, 33)),
+          at: new Date(Date.UTC(2017, 10, 9, 8, 12)),
           by: propTypes.TX_TRANSITION_ACTOR_PROVIDER,
           transition: propTypes.TX_TRANSITION_ACCEPT,
         }),
+        createTxTransition({
+          at: new Date(Date.UTC(2017, 10, 9, 10, 33)),
+          by: propTypes.TX_TRANSITION_ACTOR_PROVIDER,
+          transition: propTypes.TX_TRANSITION_DECLINE,
+        }),
+        createTxTransition({
+          at: new Date(Date.UTC(2017, 10, 9, 10, 34)),
+          by: propTypes.TX_TRANSITION_ACTOR_PROVIDER,
+          transition: propTypes.TX_TRANSITION_MARK_DELIVERED,
+        }),
       ],
     }),
     currentUser: createCurrentUser('user2'),
diff --git a/src/components/Messages/Messages.js b/src/components/Messages/Messages.js
index cd0b6943..a5f19d2b 100644
--- a/src/components/Messages/Messages.js
+++ b/src/components/Messages/Messages.js
@@ -192,9 +192,8 @@ export const MessagesComponent = props => {
   };
 
   const transitionListItem = transition => {
-    const classes = classNames(css.messageItem, css.transition);
     return (
-      <li key={transition.transition} className={classes}>
+      <li key={transition.transition} className={css.transitionItem}>
         {transitionComponent(transition)}
       </li>
     );