From 96478f926c7afc8dafd615b173fdb3e214bb652e Mon Sep 17 00:00:00 2001
From: samepant <sampanter@gmail.com>
Date: Sat, 15 Jan 2022 22:21:54 -0500
Subject: [PATCH] revamps member styling

---
 components/dataViews/CopyAndPaste.js    |  4 +-
 components/dataViews/HashView.js        |  2 +
 components/dataViews/MultisigMembers.js | 80 ++++++++++---------------
 pages/multi/[address]/index.js          | 20 +++----
 4 files changed, 43 insertions(+), 63 deletions(-)

diff --git a/components/dataViews/CopyAndPaste.js b/components/dataViews/CopyAndPaste.js
index 69ad012..7d83bca 100644
--- a/components/dataViews/CopyAndPaste.js
+++ b/components/dataViews/CopyAndPaste.js
@@ -9,8 +9,7 @@ const CopyAndPaste = (props) => (
     </svg>
     <style jsx>{`
       svg {
-        height: 100%;
-        width: auto;
+        height: 1em;
       }
 
       path {
@@ -20,7 +19,6 @@ const CopyAndPaste = (props) => (
       }
 
       .icon {
-        padding: 0 0.5em;
         cursor: pointer;
       }
 
diff --git a/components/dataViews/HashView.js b/components/dataViews/HashView.js
index 2fd559e..269848f 100644
--- a/components/dataViews/HashView.js
+++ b/components/dataViews/HashView.js
@@ -10,6 +10,8 @@ const HashView = ({ hash, abbreviate }) => (
     <style jsx>{`
       .hash-view {
         display: flex;
+        font-family: monospace;
+        column-gap: 0.5em;
       }
     `}</style>
   </div>
diff --git a/components/dataViews/MultisigMembers.js b/components/dataViews/MultisigMembers.js
index 38df6a6..5947b38 100644
--- a/components/dataViews/MultisigMembers.js
+++ b/components/dataViews/MultisigMembers.js
@@ -1,70 +1,54 @@
 import React from "react";
 
+import HashView from "./HashView";
 import StackableContainer from "../layout/StackableContainer";
-import { abbreviateLongString } from "../../lib/displayHelpers";
 
-const dummyMembers = [
-  {
-    nickname: "Tolla",
-    pubkey: "AqsujWsohxvLS8B6ANf54D9qtIhAtQ2ISptBmXGUZVIN",
-    address: "cosmos1j8z4cfgpza4qa33pl02y84n0mdm8n7xzqdwlse",
-  },
-  {
-    nickname: "Yamman",
-    pubkey: "AqsujWsohxvLS8B6ANf54D9qtIhAtQ2ISptBmXGUZVIN",
-    address: "cosmos145mr4l98w2x96utkcayvtqaag79u7mpyane7q7",
-  },
-  {
-    nickname: "Wallace",
-    pubkey: "AqsujWsohxvLS8B6ANf54D9qtIhAtQ2ISptBmXGUZVIN",
-    address: "cosmos1t5u0jfg3ljsjrh2m9e47d4ny2hea7eehxrzdgd",
-  },
-];
-const MultisigMembers = (_props) => (
+const MultisigMembers = (props) => (
   <StackableContainer lessPadding>
-    <h2>Members</h2>
-    <ul className="meta-data">
-      {dummyMembers.map((member) => (
-        <li key={member.address}>
-          <div className="nickname">
-            <label>Nickname:</label>
-            <div className="info">{member.nickname}</div>
-          </div>
-          <div className="address">
-            <label>Address:</label>
-            <div className="info">{abbreviateLongString(member.address)}</div>
-          </div>
-        </li>
-      ))}
-    </ul>
+    <div className="meta-data">
+      <div>
+        <h2>Threshold</h2>
+        <div className="info threshold">{props.threshold}</div>
+      </div>
+      <div>
+        <h2>Members</h2>
+        <ul>
+          {props.members.map((address) => (
+            <li key={address} className="info">
+              <HashView hash={address} />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
     <style jsx>{`
       ul {
         list-style: none;
         padding: 0;
         margin: 0;
       }
-      .meta-data li {
+      .info {
         margin: 10px 0;
         background: rgba(255, 255, 255, 0.03);
         padding: 10px;
         border-radius: 8px;
       }
-      .meta-data li:last-child {
-        margin-bottom: 0;
+      .threshold {
+        font-size: 3.71em;
+        text-align: center;
       }
-      .meta-data label {
-        font-size: 12px;
-        background: rgba(255, 255, 255, 0.1);
-        padding: 3px 6px;
-        border-radius: 5px;
-        display: inline-block;
-        margin-right: 10px;
+      .meta-data li {
+        display: block;
       }
-      li div:first-child {
-        margin-bottom: 10px;
+      .meta-data {
+        display: flex;
+        column-gap: 1rem;
       }
-      .info {
-        display: inline-block;
+      .meta-data > div {
+        width: 26%;
+      }
+      .meta-data > div:last-child {
+        width: auto;
       }
     `}</style>
   </StackableContainer>
diff --git a/pages/multi/[address]/index.js b/pages/multi/[address]/index.js
index 0db3d06..2d23aa1 100644
--- a/pages/multi/[address]/index.js
+++ b/pages/multi/[address]/index.js
@@ -7,6 +7,7 @@ import Button from "../../../components/inputs/Button";
 import { getMultisigAccount } from "../../../lib/multisigHelpers";
 import HashView from "../../../components/dataViews/HashView";
 import MultisigHoldings from "../../../components/dataViews/MultisigHoldings";
+import MultisigMembers from "../../../components/dataViews/MultisigMembers";
 import Page from "../../../components/layout/Page";
 import StackableContainer from "../../../components/layout/StackableContainer";
 import TransactionForm from "../../../components/forms/TransactionForm";
@@ -52,18 +53,13 @@ const multipage = (props) => {
           </h1>
         </StackableContainer>
         {props.accountOnChain?.pubkey && (
-          <StackableContainer>
-            <h2>Participants</h2>
-            <ul>
-              {participantAddressesFromMultisig(
-                props.accountOnChain?.pubkey,
-                process.env.NEXT_PUBLIC_ADDRESS_PREFIX,
-              ).map((participantAddress) => (
-                <li key={participantAddress}>{participantAddress}</li>
-              ))}
-            </ul>
-            <div>Threshold: {props.accountOnChain?.pubkey.value.threshold}</div>
-          </StackableContainer>
+          <MultisigMembers
+            members={participantAddressesFromMultisig(
+              props.accountOnChain?.pubkey,
+              process.env.NEXT_PUBLIC_ADDRESS_PREFIX,
+            )}
+            threshold={props.accountOnChain?.pubkey.value.threshold}
+          />
         )}
         {props.error && (
           <StackableContainer>