vertical timeline

src/components/Timeline/Item.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import moment from "moment";
 import { Event } from "../../types";
 import Markdown from "react-markdown";
@@ -25,10 +24,10 @@ const TimelineItem = (props: { event: Event; startTime: number }) => {
         <Markdown
           plugins={[gfm]}
           className="mt-1 overflow-auto text-left"
-          children={text}
+          children={String(text)}
         />
 
-        <Link to={link.url}>{link.text}</Link>
+        <a href={link.url}> {link.text}</a>
 
         <span className="circle" />
       </div>

src/components/Timeline/index.tsx

@@ -19,12 +19,12 @@ const Timeline = (props: {
         text: p.description,
         date: p.createdAt,
         category: {
-          tag: "Proposal",
+          tag: `${p.result} Proposal`,
           color: p.result === `Approved` ? `green` : `red`,
         },
         link: {
           url: `/proposals/${p.id}`,
-          text: `${p.title} by ${p.author}`,
+          text: `Proposal ${p.id}: ${p.title} by ${p.author}`,
         },
       })
   );
@@ -33,9 +33,12 @@ const Timeline = (props: {
     (p) =>
       p &&
       events.push({
-        text: p.text,
+        text: p.text.slice(0, 200),
         date: p.createdAt.block,
-        category: { tag: "Forum Post", color: `blue` },
+        category: {
+          tag: "Forum Post",
+          color: `blue`,
+        },
         link: {
           url: `/forum/threads/${p.threadId}`,
           text: `Post ${p.id} by ${handles[p.authorId]}`,
@@ -54,12 +57,8 @@ const Timeline = (props: {
       <div className="timeline-container">
         {events
           .sort((a, b) => b.date - a.date)
-          .map((event: Event, idx) => (
-            <TimelineItem
-              event={event}
-              key={idx}
-              startTime={status.startTime}
-            />
+          .map((event: Event, i) => (
+            <TimelineItem event={event} key={i} startTime={status.startTime} />
           ))}
       </div>
     </>

src/index.css

@@ -169,7 +169,7 @@ table td {
 
 .timeline-item-content .tag {
   color: #fff;
-  font-size: 0.8em;
+  font-size: 12px;
   font-weight: bold;
   top: 5px;
   left: 5px;
@@ -186,24 +186,24 @@ table td {
 
 .timeline-item-content time {
   color: #777;
-  font-size: 0.8em;
+  font-size: 12px;
   font-weight: bold;
 }
 
 .timeline-item-content p {
-  font-size: 0.8.em;
+  font-size: 16px;
+  line-height: 24px;
   margin: 15px 0;
-  max-width: 350px;
+  max-width: 250px;
 }
-
 .timeline-item-content a {
-  font-size: 1em;
+  font-size: 14px;
   font-weight: bold;
 }
 
 .timeline-item-content a::after {
   content: " ►";
-  font-size: 1em;
+  font-size: 12px;
 }
 
 .timeline-item-content .circle {