separate Proposal component

src/components/Proposals/NavBar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Button, Nav, Navbar, NavDropdown } from "react-bootstrap";
-
+import { Button, Navbar, NavDropdown } from "react-bootstrap";
+import { Link } from "react-router-dom";
 import { Sliders } from "react-feather";
 
 const NavBar = (props: any) => {
@@ -8,12 +8,12 @@ const NavBar = (props: any) => {
 
   return (
     <Navbar bg="dark" variant="dark">
-      <Navbar.Brand href="/">Joystream</Navbar.Brand>
+      <Link to="/">
+        <Navbar.Brand>Joystream</Navbar.Brand>
+      </Link>
       <Navbar.Toggle aria-controls="basic-navbar-nav" />
       <Navbar.Collapse id="basic-navbar-nav">
-        <Nav className="mr-auto">
-          <Nav.Link href="/proposals">Proposals</Nav.Link>
-        </Nav>
+        <Navbar.Brand className="mr-auto">Proposals</Navbar.Brand>
 
         <NavDropdown
           title={<div className="text-light">Creator</div>}

src/components/Proposals/Proposal.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import htmr from "htmr";
 import { ProposalDetail } from "../../types";
+import Votes from "./VotesTooltip";
+import Back from "../Back";
 
 const Proposal = (props: {
   match: { params: { id: string } };
@@ -12,20 +13,30 @@ const Proposal = (props: {
 
   const proposal = proposals.find((p) => p && p.id === id);
   if (!proposal) return <div>Proposal not found</div>;
-  const { title, message } = proposal;
+  const { description, title, message, votesByAccount } = proposal;
 
   return (
     <div>
-      <div className="box">
-        <Link className="float-left" to="/">
-          back
-        </Link>
-        <h3>{title}</h3>
-        <div>{htmr(message.replaceAll(`\n`, "<br/>"))}</div>
-        <div>
-          <a href={`https://pioneer.joystreamstats.live/#/proposals/${id}`}>
-            more
-          </a>
+      <Back target="/proposals" />
+      <div className="d-flex flex-row">
+        <div className="box col-8">
+          <h3>{title}</h3>
+          {description}
+        </div>
+        <div className="d-flex flex-column">
+          <div className="box">
+            <div>{htmr(message.replaceAll(`\n`, "<br/>"))}</div>
+            <div>
+              <a href={`https://pioneer.joystreamstats.live/#/proposals/${id}`}>
+                more
+              </a>
+            </div>
+          </div>
+
+          <div className="box">
+            <h3>Votes</h3>
+            <Votes votes={votesByAccount} />
+          </div>
         </div>
       </div>
     </div>

src/components/Proposals/ProposalOverlay.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import htmr from "htmr";
 import { ProposalParameters } from "@joystream/types/proposals";
@@ -40,11 +41,9 @@ const ProposalOverlay = (props: {
         </Tooltip>
       }
     >
-      <div>
-        <a href={`https://pioneer.joystreamstats.live/#/proposals/${props.id}`}>
-          {props.title}
-        </a>
-      </div>
+      <Link to={`/proposals/${props.id}`}>
+        <div>{props.title}</div>
+      </Link>
     </OverlayTrigger>
   );
 };

src/components/Proposals/Row.tsx

@@ -121,7 +121,7 @@ const ProposalRow = (props: {
           placement="right"
           overlay={<Tooltip id={String(id)}>{description}</Tooltip>}
         >
-          <a href={url}>{title}</a>
+          <Link to={`/proposals/${id}`}>{title}</Link>
         </OverlayTrigger>
       </div>
       <div className="col-2">{type}</div>