Add styling and details to commit list items

Author: artfuldev

src/routes/Commits/routes/List/components/CommitListItem.ts

@@ -1,7 +1,9 @@
 import { Stream } from 'xstream';
-import { DOMSource, VNode, li } from '@cycle/dom';
+import { DOMSource, VNode, li, h4, h5, strong, em } from '@cycle/dom';
 import isolate from '@cycle/isolate';
 import { Commit } from 'drivers/github';
+import { style } from 'typestyle';
+import { rem } from 'csx';
 
 interface Sources {
   dom: DOMSource;
@@ -13,6 +15,23 @@ interface Sinks {
   history: Stream<string>;
 }
 
+const className = style({
+  marginBottom: rem(1),
+  border: `${rem(.1)} solid #ddd`,
+  padding: rem(1),
+  listStyle: 'none',
+  borderRadius: rem(.5),
+  $nest: {
+    'h4, h5': {
+      marginTop: 0,
+      marginBottom: rem(.5)
+    },
+    h5: {
+      marginBottom: 0
+    }
+  }
+});
+
 const CommitListItemComponent = ({ dom, commit$ }: Sources): Sinks => {
   const navigateTo$ =
     commit$
@@ -21,7 +40,15 @@ const CommitListItemComponent = ({ dom, commit$ }: Sources): Sinks => {
   const vdom$ =
     commit$
       .map(({ sha, commit: { message, author: { name, email, date } } }) =>
-        li([ message ])
+        li(`.${className}`, [
+          h4([strong([message.split('\n\n')[0]])]),
+          h5([
+            'by ',
+            strong([name]),
+            ' at ',
+            em([date])
+          ])
+        ])
       );
   return {
     dom: vdom$,