From 7c696fc1ecdb2dba9f0bc8e14fd456a455b3cb13 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Mon, 23 Dec 2024 10:32:25 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20enhance=20document=20shar?=
 =?UTF-8?q?ing=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Refactored DocShareAddMemberList to simplify button styling and
improve loading state handling.
- Updated DocShareAddMemberListItem and DocShareMemberItem to enhance
spacing and button color for better visual consistency.
- Improved DocShareInvitationItem and SearchUserRow with new theming and
spacing tokens for a more cohesive design.
- Adjusted padding and layout in DocShareModal and DocShareModalFooter
for improved responsiveness.
- Enhanced DocVisibility component with updated padding and text styling
for better readability.
- Cleaned up unused imports and optimized component structures for
maintainability.
---
 .../docs/doc-management/api/useUpdateDocLink.tsx |  2 +-
 .../component/DocShareAddMemberList.tsx          |  6 +-----
 .../component/DocShareAddMemberListItem.tsx      | 16 +++++++++++-----
 .../component/DocShareInvitationItem.tsx         |  8 ++++++--
 .../doc-share/component/DocShareMemberItem.tsx   |  6 +++++-
 .../docs/doc-share/component/DocShareModal.tsx   |  7 ++-----
 .../doc-share/component/DocShareModalFooter.tsx  |  8 ++++++--
 .../docs/doc-share/component/DocVisibility.tsx   |  5 +++--
 .../docs/doc-share/component/SearchUserRow.tsx   | 14 ++++++++++----
 9 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/api/useUpdateDocLink.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/api/useUpdateDocLink.tsx
index 37782048..b5ef6ba7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/api/useUpdateDocLink.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/api/useUpdateDocLink.tsx
@@ -44,7 +44,7 @@ export function useUpdateDocLink({
     mutationFn: updateDocLink,
     onSuccess: (data, variable) => {
       listInvalideQueries?.forEach((queryKey) => {
-        void queryClient.resetQueries({
+        void queryClient.invalidateQueries({
           queryKey: [queryKey],
         });
       });
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareAddMemberList.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareAddMemberList.tsx
index f7ee0864..322b4382 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareAddMemberList.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareAddMemberList.tsx
@@ -149,11 +149,7 @@ export const DocShareAddMemberList = ({
           currentRole={invitationRole}
           onSelectRole={setInvitationRole}
         />
-        <Button
-          onClick={() => void onInvite()}
-          size="small"
-          disabled={isLoading}
-        >
+        <Button onClick={() => void onInvite()} disabled={isLoading}>
           {t('Invite')}
         </Button>
       </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareAddMemberListItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareAddMemberListItem.tsx
index 361db237..24136e11 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareAddMemberListItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareAddMemberListItem.tsx
@@ -23,20 +23,26 @@ export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
       $height="fit-content"
       $justify="center"
       $align="center"
-      $gap={spacing.xs}
+      $gap={spacing['3xs']}
       $background={color['greyscale-250']}
-      $padding={{ horizontal: spacing['2xs'], vertical: spacing['3xs'] }}
+      $padding={{
+        left: spacing['xs'],
+        right: spacing['4xs'],
+        vertical: spacing['4xs'],
+      }}
       $css={css`
         color: ${color['greyscale-1000']};
         font-size: ${fontSize['xs']};
       `}
     >
-      <Text $margin={{ top: '-3px' }}>{user.full_name || user.email}</Text>
+      <Text $variation="1000" $size="xs">
+        {user.full_name || user.email}
+      </Text>
       <Button
-        color="primary-text"
+        color="tertiary-text"
         size="nano"
         onClick={() => onRemoveUser?.(user)}
-        icon={<Icon $variation="500" $size="sm" iconName="close" />}
+        icon={<Icon $variation="600" $size="sm" iconName="close" />}
       />
     </Box>
   );
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareInvitationItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareInvitationItem.tsx
index 694294aa..de253de2 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareInvitationItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareInvitationItem.tsx
@@ -8,6 +8,7 @@ import {
   IconOptions,
 } from '@/components';
 import { User } from '@/core';
+import { useCunninghamTheme } from '@/cunningham';
 import { Doc, Role } from '@/features/docs/doc-management';
 import {
   useDeleteDocInvitation,
@@ -24,6 +25,8 @@ type Props = {
 };
 export const DocShareInvitationItem = ({ doc, invitation }: Props) => {
   const { t } = useTranslation();
+  const { spacingsTokens } = useCunninghamTheme();
+  const spacing = spacingsTokens();
   const fakeUser: User = {
     id: invitation.email,
     full_name: invitation.email,
@@ -84,10 +87,11 @@ export const DocShareInvitationItem = ({ doc, invitation }: Props) => {
       data-testid={`doc-share-invitation-row-${invitation.email}`}
     >
       <SearchUserRow
+        isInvitation={true}
         alwaysShowRight={true}
         user={fakeUser}
         right={
-          <Box $direction="row" $align="center">
+          <Box $direction="row" $align="center" $gap={spacing['2xs']}>
             <DocRoleDropdown
               currentRole={invitation.role}
               onSelectRole={onUpdate}
@@ -99,7 +103,7 @@ export const DocShareInvitationItem = ({ doc, invitation }: Props) => {
                 data-testid="doc-share-invitation-more-actions"
                 options={moreActions}
               >
-                <IconOptions $variation="600" />
+                <IconOptions isHorizontal $variation="600" />
               </DropdownMenu>
             )}
           </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareMemberItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareMemberItem.tsx
index 2897c0f7..7dee295d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareMemberItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareMemberItem.tsx
@@ -7,6 +7,7 @@ import {
   DropdownMenuOption,
   IconOptions,
 } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
 import { SearchUserRow } from '@/features/docs/doc-share/component/SearchUserRow';
 import { useWhoAmI } from '@/features/docs/doc-share/hooks/useWhoAmI';
 import { useResponsiveStore } from '@/stores';
@@ -25,6 +26,8 @@ export const DocShareMemberItem = ({ doc, access }: Props) => {
   const { isLastOwner, isOtherOwner } = useWhoAmI(access);
   const { toast } = useToastProvider();
   const { isDesktop } = useResponsiveStore();
+  const { spacingsTokens } = useCunninghamTheme();
+  const spacing = spacingsTokens();
   const isNotAllowed =
     isOtherOwner || !!isLastOwner || !doc.abilities.accesses_manage;
 
@@ -74,7 +77,7 @@ export const DocShareMemberItem = ({ doc, access }: Props) => {
         alwaysShowRight={true}
         user={access.user}
         right={
-          <Box $direction="row" $align="center">
+          <Box $direction="row" $align="center" $gap={spacing['2xs']}>
             <DocRoleDropdown
               currentRole={access.role}
               onSelectRole={onUpdate}
@@ -86,6 +89,7 @@ export const DocShareMemberItem = ({ doc, access }: Props) => {
             {isDesktop && doc.abilities.accesses_manage && (
               <DropdownMenu options={moreActions}>
                 <IconOptions
+                  isHorizontal
                   data-testid="doc-share-member-more-actions"
                   $variation="600"
                 />
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareModal.tsx
index b510eb38..412b78d3 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareModal.tsx
@@ -171,15 +171,12 @@ export const DocShareModal = ({ doc, onClose }: Props) => {
               overflow-y: auto;
               height: ${isDesktop
                 ? '400px'
-                : 'calc(100vh - 49px -  68px - 237px)'};
+                : 'calc(100vh - 49px -  68px - 229px)'};
             }
           `}
         >
           {canShare && selectedUsers.length > 0 && (
-            <Box
-              $padding={{ horizontal: 'base' }}
-              $margin={{ vertical: '11px' }}
-            >
+            <Box $padding={{ horizontal: 'base' }} $margin={{ top: '11px' }}>
               <DocShareAddMemberList
                 doc={doc}
                 selectedUsers={selectedUsers}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareModalFooter.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareModalFooter.tsx
index c5643627..d4ea5dfc 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareModalFooter.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocShareModalFooter.tsx
@@ -27,14 +27,18 @@ export const DocShareModalFooter = ({ doc, onClose }: Props) => {
         flex-shrink: 0;
       `}
     >
-      <HorizontalSeparator />
+      <HorizontalSeparator $withPadding={true} />
       {canShare && (
         <>
           <DocVisibility doc={doc} />
           <HorizontalSeparator />
         </>
       )}
-      <Box $direction="row" $justify="space-between" $padding="base">
+      <Box
+        $direction="row"
+        $justify="space-between"
+        $padding={{ horizontal: 'base', bottom: 'base' }}
+      >
         <Button
           fullWidth={false}
           onClick={() => {
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocVisibility.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocVisibility.tsx
index 02962f7e..2e55da90 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/component/DocVisibility.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/component/DocVisibility.tsx
@@ -86,11 +86,11 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
 
   return (
     <Box
-      $padding={{ horizontal: isDesktop ? 'base' : 'sm' }}
+      $padding={{ horizontal: 'base' }}
       aria-label={t('Doc visibility card')}
       $gap={spacing['base']}
     >
-      <Text $weight="700" $variation="1000">
+      <Text $weight="700" $size="sm" $variation="700">
         {t('Link parameters')}
       </Text>
       <Box
@@ -104,6 +104,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
         <Box
           $direction="row"
           $align={isDesktop ? 'center' : undefined}
+          $padding={{ horizontal: '2xs' }}
           $gap={spacing['3xs']}
         >
           <DropdownMenu
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/component/SearchUserRow.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/component/SearchUserRow.tsx
index 7d3627db..bb3746bd 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/component/SearchUserRow.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/component/SearchUserRow.tsx
@@ -12,30 +12,36 @@ type Props = {
   user: User;
   alwaysShowRight?: boolean;
   right?: QuickSearchItemContentProps['right'];
+  isInvitation?: boolean;
 };
 
 export const SearchUserRow = ({
   user,
   right,
   alwaysShowRight = false,
+  isInvitation = false,
 }: Props) => {
   const hasFullName = user.full_name != null && user.full_name !== '';
-  const { spacingsTokens } = useCunninghamTheme();
+  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
   const spacings = spacingsTokens();
+  const colors = colorsTokens();
 
   return (
     <QuickSearchItemContent
       right={right}
       alwaysShowRight={alwaysShowRight}
       left={
-        <Box $direction="row" $align="center" $gap={spacings['2xs']}>
-          <UserAvatar user={user} />
+        <Box $direction="row" $align="center" $gap={spacings['xs']}>
+          <UserAvatar
+            user={user}
+            background={isInvitation ? colors['greyscale-400'] : undefined}
+          />
           <Box $direction="column">
             <Text $size="sm" $weight="500" $variation="1000">
               {hasFullName ? user.full_name : user.email}
             </Text>
             {hasFullName && (
-              <Text $size="xs" $variation="600">
+              <Text $size="xs" $margin={{ top: '-2px' }} $variation="600">
                 {user.email}
               </Text>
             )}