member design

src/components/Members/Member.tsx

@@ -64,25 +64,50 @@ const MemberBox = (props: {
 
       <div className="text-left">
         <div>Id: {member.id}</div>
-        <div>Account: {member.account}</div>
-        <div>Registered at block: {member.registeredAt}</div>
 
-        <div>Council member: {onCouncil.length} times</div>
-        <div>
-          Proposal votes: <Link to={`/councils`}>{votes.length}</Link>
-        </div>
+        <div>Registered at block: {member.registeredAt}</div>
+        <OnCouncil onCouncil={onCouncil.length} votes={votes.length} />
         <div>
-          Created Proposals:{" "}
+          Proposals authored:{" "}
           <Link to={`/proposals`}>{createdProposals.length}</Link>
         </div>
         <div>
           Posts: <Link to={`/forum`}>{posts.length}</Link>
         </div>
 
-        <div>About: {member.about}</div>
+        <About about={member.about} />
+      </div>
+    </div>
+  );
+};
+
+const About = (props: { about: string }) => {
+  if (props.about === ``) return <div />;
+  return (
+    <div className="mt-3" style={{ maxWidth: "320px" }}>
+      About: {props.about}
+    </div>
+  );
+};
+
+const OnCouncil = (props: { onCouncil: number; votes: number }) => {
+  const { onCouncil, votes } = props;
+  if (!onCouncil) return <div />;
+  return (
+    <div>
+      <div>
+        Council member:{" "}
+        <Link to={`/councils`}>
+          {onCouncil > 1 ? `${onCouncil} times` : "once"}
+        </Link>
+      </div>
+      <div>
+        Proposal votes: <Link to={`/councils`}>{votes}</Link>
       </div>
     </div>
   );
 };
 
+// <div>Account: {member.account}</div>
+
 export default MemberBox;

src/components/Members/MemberBox.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 //import { Link } from "react-router-dom";
 import { Member, Post, ProposalDetail } from "../../types";
+import { domain } from "../../config";
 import MemberOverlay from "./Member";
 
 const MemberBox = (props: {
@@ -12,13 +13,14 @@ const MemberBox = (props: {
   id: number;
   account: string;
   handle: string;
+  placement: "left" | "bottom" | "right" | "top";
 }) => {
-  const { councils, handle, members, posts, proposals } = props;
+  const { councils, handle, members, posts, placement, proposals } = props;
   return (
     <OverlayTrigger
-      placement="bottom"
+      placement={placement}
       overlay={
-        <Tooltip id={`overlay-${handle}`}>
+        <Tooltip id={`overlay-${handle}`} className="member-tooltip">
           <MemberOverlay
             handle={handle}
             members={members}
@@ -29,7 +31,9 @@ const MemberBox = (props: {
         </Tooltip>
       }
     >
-      <div className="box">{handle}</div>
+      <div className="box">
+        <a href={`${domain}/#/memners/`}>{handle}</a>
+      </div>
     </OverlayTrigger>
   );
 };

src/components/Members/index.tsx

@@ -59,6 +59,7 @@ class Members extends React.Component<IProps, IState> {
                 members={members}
                 councils={councils}
                 proposals={proposals}
+                placement={"right"}
                 posts={posts}
               />
             ))}
@@ -72,6 +73,7 @@ class Members extends React.Component<IProps, IState> {
                 handle={m.handle || handles[String(m.account)]}
                 members={members}
                 councils={councils}
+                placement={"bottom"}
                 proposals={proposals}
                 posts={posts}
               />
@@ -86,6 +88,7 @@ class Members extends React.Component<IProps, IState> {
                 handle={m.handle || handles[String(m.account)]}
                 members={members}
                 councils={councils}
+                placement={"left"}
                 proposals={proposals}
                 posts={posts}
               />

src/index.css

@@ -75,11 +75,9 @@ table td {
   min-width: 75px;
 }
 
-.tooltip-inner div {
-    width: 400px !important;
+.member-tooltip .tooltip-inner div {
+    width: 350px !important;
 }
-.tooltip, .tooltip-inner {
-    background: none;
+.member-tooltip .tooltip-inner {
     padding: 0 !important;
-    margin-left: -1px;
 }