# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1496336463 -7200
# Node ID dab2a16500e0d8c861de79cfa8bfd57651757289
# Parent  877d8796b86def5b054c7ee68f419caee7f05696
Add some styles for note timings.

diff -r 877d8796b86d -r dab2a16500e0 client/src/App.scss
--- a/client/src/App.scss	Thu Jun 01 18:46:34 2017 +0200
+++ b/client/src/App.scss	Thu Jun 01 19:01:03 2017 +0200
@@ -43,3 +43,35 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.note {
+    position: relative;
+    padding-left: 70px;
+    margin-bottom: 20px;
+
+    &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 27px;
+        z-index: -1;
+        display: block;
+        width: 2px;
+        background-color: #e6ebf1;
+    }
+
+    .start, .finish {
+        position: absolute;
+        background-color: #fff;
+    }
+
+    .start {
+        top: 0;
+        left: 0;
+    }
+    .finish {
+        bottom: 0;
+        left: 0;
+    }
+}
diff -r 877d8796b86d -r dab2a16500e0 client/src/components/Note.js
--- a/client/src/components/Note.js	Thu Jun 01 18:46:34 2017 +0200
+++ b/client/src/components/Note.js	Thu Jun 01 19:01:03 2017 +0200
@@ -3,8 +3,9 @@
 
 const Note = ({note}) => {
   return (
-    <div id={"note-" + note.id}>
-      <h5>{note.startedAt} ⇒ {note.finishedAt}</h5>
+    <div id={"note-" + note.id} className="note">
+      <span className="start">{note.startedAt}</span>
+      <span className="finish">{note.finishedAt}</span>
       <div dangerouslySetInnerHTML={{ __html: note.html }} />
     </div>
   );
diff -r 877d8796b86d -r dab2a16500e0 client/src/components/NotesList.js
--- a/client/src/components/NotesList.js	Thu Jun 01 18:46:34 2017 +0200
+++ b/client/src/components/NotesList.js	Thu Jun 01 19:01:03 2017 +0200
@@ -16,11 +16,11 @@
   }
 
   return (
-    <ListGroup>
+    <div>
       {notes.map((note) =>
-        <ListGroupItem key={note.id}><Note note={note} /></ListGroupItem>
+        <Note note={note} />
       )}
-    </ListGroup>
+    </div>
   );
 };