GroupLink: amend group previews

pkg/interface/src/views/apps/chat/components/content/text.js

@@ -85,7 +85,7 @@ export default function TextContent(props) {
     && (urbitOb.isValidPatp(group[2]) // valid patp?
     && (group[0] === content.text))) // entire message is room name?
 
-  if(isGroupLink) { 
+  if(isGroupLink) {
     const resource = `/ship/${content.text}`;
     return (
       <GroupLink
@@ -94,6 +94,10 @@ export default function TextContent(props) {
         api={props.api}
         associations={props.associations}
         groups={props.groups}
+        pl='2'
+        border='1'
+        borderRadius='2'
+        borderColor='washedGray'
       />
     );
   } else {

pkg/interface/src/views/apps/profile/components/ViewProfile.tsx

@@ -78,7 +78,7 @@ export function ViewProfile(props: any) {
       { (contact?.groups || []).length > 0 && (
         <Col gapY="3" mb="3" mt="6" alignItems="flex-start">
           <Text fontWeight="medium">Pinned Groups</Text>
-          <Row flexWrap="wrap" justifyContent="flex-start" gapX="3">
+          <Col>
             { contact?.groups.sort(lengthOrder).map(g => (
               <GroupLink
                 mb="3"
@@ -89,7 +89,7 @@ export function ViewProfile(props: any) {
                 measure={() => {}}
               />
             ))}
-          </Row>
+          </Col>
       </Col>
       )}
 

pkg/interface/src/views/components/GroupLink.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useLayoutEffect } from "react";
 
-import { Box, Text, Row, Button, Action } from "@tlon/indigo-react";
+import { Box, Text, Row, Col, Button, Action } from "@tlon/indigo-react";
 import GlobalApi from "~/logic/api/global";
 import { Associations, Groups, PropFunc } from "~/types";
 import { MetadataIcon } from "../landscape/components/MetadataIcon";
@@ -65,21 +65,20 @@ export function GroupLink(
         width="fit-content"
         flexShrink={1}
         alignItems="center"
-        border="1"
-        borderColor="lightGray"
-        borderRadius="2"
         py="2"
-        px="2"
+        pr="2"
+        onClick={showModal}
+        cursor='pointer'
       >
         {preview ? (
           <>
-            <MetadataIcon height="4" width="4" metadata={preview.metadata} />
+            <MetadataIcon height={6} width={6} metadata={preview.metadata} />
+            <Col>
             <Text ml="2" fontWeight="medium">
               {preview.metadata.title}
             </Text>
-            <Button onClick={showModal} ml="4" primary>
-              {joined ? "View" : "Join"}
-            </Button>
+            <Text pt='1' ml='2'>{preview.members} members</Text>
+            </Col>
           </>
         ) : (
           <Text mono>{name}</Text>