feat: transparency profiles go to profile page (#1206)

src/components/Transparency/MemberCard.css

@@ -1,4 +1,3 @@
-
 .MemberCard {
   align-items: center;
   display: flex;
@@ -17,20 +16,13 @@
   }
 }
 
-.MemberCard .MemberCard_description {
+.MemberCard__Description {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   margin-top: 20px;
   margin-bottom: 20px;
   min-width: 128px;
-}
-
-.MemberCard .ui.header.sub {
-  margin-top: 0;
-  margin-right: 1rem;
-}
-
-.MemberCard span {
+  color: var(--black-800);
   margin-left: 1rem;
 }

src/components/Transparency/MemberCard.tsx

@@ -1,27 +1,24 @@
 import React, { useMemo } from 'react'
 
+import { Member } from '../../clients/DclData'
+import locations from '../../utils/locations'
 import Avatar from '../Common/Avatar'
+import Link from '../Common/Typography/Link'
 
 import './MemberCard.css'
 
-export type MemberCardProps = React.HTMLAttributes<HTMLDivElement> & {
-  member: {
-    avatar: string
-    name: string
-  }
+interface Props {
+  member: Member
 }
 
-export default function MemberCard({ member }: MemberCardProps) {
-  const color = useMemo(
-    () => (member.name.split('').reduce((a, b) => a + b.charCodeAt(0), 0) % 16).toString(16),
-    [member.name]
-  )
+export default function MemberCard({ member }: Props) {
+  const { name, address, avatar } = member
+  const color = useMemo(() => (name.split('').reduce((a, b) => a + b.charCodeAt(0), 0) % 16).toString(16), [name])
+
   return (
-    <div className="MemberCard">
-      <Avatar src={member.avatar} size="medium" address={'0x' + color} />
-      <div className="MemberCard_description">
-        <span>{member.name}</span>
-      </div>
-    </div>
+    <Link className="MemberCard" href={locations.profile({ address })}>
+      <Avatar src={avatar} size="medium" address={'0x' + color} />
+      <div className="MemberCard__Description">{name}</div>
+    </Link>
   )
 }

src/components/Transparency/MembersSection.tsx

@@ -37,13 +37,8 @@ export default function MembersSection({ title, description, members }: Props) {
         />
       </Header>
       <div className="MembersContainer">
-        {members.map((member, index) => {
-          return (
-            <MemberCard
-              key={[title.trim(), member.name.trim(), index].join('::')}
-              member={{ avatar: member.avatar, name: member.name }}
-            />
-          )
+        {members.map((member) => {
+          return <MemberCard key={member.address} member={member} />
         })}
       </div>
     </Card.Content>