Improve LikeList style

app/javascript/components/Post/LikeList.tsx

@@ -1,8 +1,13 @@
 import * as React from 'react';
+import Gravatar from 'react-gravatar';
 
 import ILike from '../../interfaces/ILike';
 import Spinner from '../shared/Spinner';
-import { DangerText } from '../shared/CustomTexts';
+import {
+  TitleText,
+  DangerText,
+  CenteredMutedText
+} from '../shared/CustomTexts';
 
 interface Props {
   likes: Array<ILike>;
@@ -11,16 +16,21 @@ interface Props {
 }
 
 const LikeList = ({ likes, areLoading, error}: Props) => (
-  <div className="likeList">
+  <div className="likeListContainer">
+    <TitleText>People who liked:</TitleText>
     { areLoading ? <Spinner /> : null }
     { error ? <DangerText>{error}</DangerText> : null }
-    {
-      likes.map((like, i) => (
-        <div className="like" key={i}>
-          {like.fullName}
-        </div>
-      ))
-    }
+    <div className="likeList">
+      { likes.length === 0 ? <CenteredMutedText>There are not likes yet.</CenteredMutedText> : null }
+      {
+        likes.map((like, i) => (
+          <div className="likeListItem" key={i}>
+            <Gravatar email={like.email} size={28} className="gravatar" />
+            <span className="likeListItemName">{like.fullName}</span>
+          </div>
+        ))
+      }
+    </div>
   </div>
 );