💄 (collaborator) Fix collab list UI

baptisteArno · Feb 14, 2023 · 6e066c4 · 6e066c4
1 parent 0e5a34d
commit 6e066c4
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/...ilder/src/features/collaboration/components/CollaborationMenuButton/CollaborationList.tsx b/...ilder/src/features/collaboration/components/CollaborationMenuButton/CollaborationList.tsx
@@ -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>

diff --git a/...lder/src/features/collaboration/components/CollaborationMenuButton/CollaboratorButton.tsx b/...lder/src/features/collaboration/components/CollaborationMenuButton/CollaboratorButton.tsx
@@ -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 && (

diff --git a/apps/builder/src/pages/api/typebots/[typebotId]/invitations.ts b/apps/builder/src/pages/api/typebots/[typebotId]/invitations.ts
@@ -15,7 +15,8 @@ import { sendGuestInvitationEmail } from 'emails'
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const user = await getAuthenticatedUser(req)
   if (!user) return notAuthenticated(res)
-  const typebotId = req.query.typebotId as string
+  const typebotId = req.query.typebotId as string | undefined
+  if (!typebotId) return badRequest(res)
   if (req.method === 'GET') {
     const invitations = await prisma.invitation.findMany({
       where: { typebotId, typebot: canReadTypebots(typebotId, user) },