groups: set universal maxWidth of GroupDescription

fixes urbit/landscape#728
This commit is contained in:
James Acklin 2021-04-08 16:36:08 -04:00
parent 8b43984831
commit b19233633b
3 changed files with 44 additions and 43 deletions

View File

@ -23,7 +23,7 @@ export function GroupSummary(props: GroupSummaryProps & PropFunc<typeof Col>): R
anchorRef
);
return (
<Col {...rest} ref={anchorRef} gapY="4">
<Col {...rest} ref={anchorRef} gapY="4" maxWidth={['100%', '288px']}>
<Row gapX="2" width="100%">
<MetadataIcon
width="40px"

View File

@ -22,14 +22,12 @@ export function EmptyGroupHome(props) {
alignItems="center"
display="flex">
{ groupAssociation?.group ? (
<Box maxWidth='288px '>
<GroupSummary
memberCount={groups[groupAssociation.group].members.size}
channelCount={channelCount}
metadata={groupAssociation.metadata}
resource={groupAssociation.group}
/>
</Box>
<GroupSummary
memberCount={groups[groupAssociation.group].members.size}
channelCount={channelCount}
metadata={groupAssociation.metadata}
resource={groupAssociation.group}
/>
) : (
<Box p="4">
<Text color='gray'>

View File

@ -151,47 +151,50 @@ export function JoinGroup(props: JoinGroupProps): ReactElement {
</StatelessAsyncButton>
</Col>
) : preview ? (
<GroupSummary
metadata={preview.metadata}
memberCount={preview?.members}
channelCount={preview?.['channel-count']}
>
{ Object.keys(preview.channels).length > 0 && (
<Col
gapY="2"
p="2"
borderRadius="2"
border="1"
borderColor="washedGray"
bg="washedBlue"
maxHeight="300px"
overflowY="auto"
>
<Text gray fontSize="1">
Channels
</Text>
<Box width="100%" flexShrink="0">
{Object.values(preview.channels).map(({ metadata }: any) => (
<Row width="100%">
<Icon
mr="2"
color="blue"
icon={getModuleIcon(metadata?.config?.graph) as any}
/>
<Text color="blue">{metadata.title} </Text>
</Row>
))}
</Box>
</Col>
)}
<>
<GroupSummary
metadata={preview.metadata}
memberCount={preview?.members}
channelCount={preview?.['channel-count']}
>
{ Object.keys(preview.channels).length > 0 && (
<Col
gapY="2"
p="2"
borderRadius="2"
border="1"
borderColor="washedGray"
bg="washedBlue"
maxHeight="300px"
overflowY="auto"
>
<Text gray fontSize="1">
Channels
</Text>
<Box width="100%" flexShrink="0">
{Object.values(preview.channels).map(({ metadata }: any) => (
<Row width="100%">
<Icon
mr="2"
color="blue"
icon={getModuleIcon(metadata?.config?.graph) as any}
/>
<Text color="blue">{metadata.title} </Text>
</Row>
))}
</Box>
</Col>
)}
</GroupSummary>
<StatelessAsyncButton
marginTop={3}
primary
name="join"
onClick={() => onConfirm(preview.group)}
>
Join {preview.metadata.title}
</StatelessAsyncButton>
</GroupSummary>
</>
) : (
<Col width="100%" gapY="4">
<Formik