blsmedia/bot
2
0
Fork 0
Code Activity

💄 (collaborator) Fix collab list UI

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-02-14 17:38:32 +01:00
parent 0e5a34d5a1
commit 6e066c44e1
3 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/builder/src/features/collaboration/components/CollaborationMenuButton/CollaborationList.tsx
View File

@ -137,8 +137,8 @@ export const CollaborationList = () => {
}
return (
<Stack spacing={4} py="4">
<HStack as="form" onSubmit={handleInvitationSubmit} px="4">
<Stack spacing={1} pt="4" pb="2">
<HStack as="form" onSubmit={handleInvitationSubmit} px="4" pb="2">
<Input
size="sm"
placeholder="colleague@company.com"
@ -167,9 +167,9 @@ export const CollaborationList = () => {
</Button>
</HStack>
{workspace && (
<Flex py="2" px="4" justifyContent="space-between">
<HStack minW={0}>
<EmojiOrImageIcon icon={workspace.icon} />
<Flex py="2" px="4" justifyContent="space-between" alignItems="center">
<HStack minW={0} spacing={3}>
<EmojiOrImageIcon icon={workspace.icon} boxSize="32px" />
<Text fontSize="15px" noOfLines={1}>
Everyone at {workspace.name}
</Text>
@ -208,7 +208,10 @@ export const CollaborationList = () => {
<HStack p="4" justifyContent="space-between">
<HStack>
<SkeletonCircle boxSize="32px" />
<Skeleton width="230px" h="10px" />
<Stack>
<Skeleton width="130px" h="6px" />
<Skeleton width="200px" h="6px" />
</Stack>
</HStack>
<Skeleton width="80px" h="10px" />
</HStack>

6
apps/builder/src/features/collaboration/components/CollaborationMenuButton/CollaboratorButton.tsx
View File

@ -8,6 +8,7 @@ import {
Stack,
Tag,
Text,
useColorModeValue,
} from '@chakra-ui/react'
import { CollaborationType } from 'db'
import React from 'react'
@ -34,13 +35,14 @@ export const CollaboratorItem = ({
onDeleteClick,
onChangeCollaborationType,
}: Props) => {
const hoverBgColor = useColorModeValue('gray.100', 'gray.700')
const handleEditClick = () =>
onChangeCollaborationType(CollaborationType.WRITE)
const handleViewClick = () =>
onChangeCollaborationType(CollaborationType.READ)
return (
<Menu placement="bottom-end">
<MenuButton _hover={{ backgroundColor: 'gray.100' }} borderRadius="md">
<MenuButton _hover={{ backgroundColor: hoverBgColor }} borderRadius="md">
<CollaboratorIdentityContent
email={email}
name={name}
@ -80,7 +82,7 @@ export const CollaboratorIdentityContent = ({
email: string
}) => (
<HStack justifyContent="space-between" maxW="full" py="2" px="4">
<HStack minW={0}>
<HStack minW={0} spacing={3}>
<Avatar name={name} src={image} size="sm" />
<Stack spacing={0} minW="0">
{name && (