From 16c2fdbc04c44c3d72536f4ba00c890c4680d8b1 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 12 Jan 2024 13:00:20 +0100
Subject: [PATCH] InviteViaLinkModal: Update design (#4156)

---
 src/components/common/Picker.scss                  |  4 ++++
 src/components/common/Picker.tsx                   |  6 ++++--
 src/components/main/InviteViaLinkModal.module.scss |  4 ++++
 src/components/main/InviteViaLinkModal.tsx         | 14 ++++++++------
 src/components/ui/ListItem.scss                    | 10 ++++++++++
 5 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/components/common/Picker.scss b/src/components/common/Picker.scss
index 4fa045aec..f57e82b42 100644
--- a/src/components/common/Picker.scss
+++ b/src/components/common/Picker.scss
@@ -35,6 +35,10 @@
     overflow-x: hidden;
     padding: 0.5rem;
 
+    &.withRoundedCheckbox {
+      padding: 0;
+    }
+
     @media (max-width: 600px) {
       padding-left: 0 !important;
       padding-right: 0 !important;
diff --git a/src/components/common/Picker.tsx b/src/components/common/Picker.tsx
index 70d806f76..dbca0f491 100644
--- a/src/components/common/Picker.tsx
+++ b/src/components/common/Picker.tsx
@@ -24,6 +24,7 @@ import PrivateChatInfo from './PrivateChatInfo';
 import './Picker.scss';
 
 type OwnProps = {
+  className?: string;
   itemIds: string[];
   selectedIds: string[];
   filterValue?: string;
@@ -49,6 +50,7 @@ const MAX_FULL_ITEMS = 10;
 const ALWAYS_FULL_ITEMS_COUNT = 5;
 
 const Picker: FC<OwnProps> = ({
+  className,
   itemIds,
   selectedIds,
   filterValue,
@@ -127,7 +129,7 @@ const Picker: FC<OwnProps> = ({
   const lang = useLang();
 
   return (
-    <div className="Picker">
+    <div className={buildClassName('Picker', className)}>
       {isSearchable && (
         <div className="picker-header custom-scroll" dir={lang.isRtl ? 'rtl' : undefined}>
           {lockedSelectedIds.map((id, i) => (
@@ -162,7 +164,7 @@ const Picker: FC<OwnProps> = ({
 
       {viewportIds?.length ? (
         <InfiniteScroll
-          className="picker-list custom-scroll"
+          className={buildClassName('picker-list', 'custom-scroll', isRoundCheckbox && 'withRoundedCheckbox')}
           items={viewportIds}
           onLoadMore={getMore}
           noScrollRestore={noScrollRestore}
diff --git a/src/components/main/InviteViaLinkModal.module.scss b/src/components/main/InviteViaLinkModal.module.scss
index 744ebf3c0..4e28a363e 100644
--- a/src/components/main/InviteViaLinkModal.module.scss
+++ b/src/components/main/InviteViaLinkModal.module.scss
@@ -1,3 +1,7 @@
 .contentText {
   color: var(--color-text-secondary);
 }
+
+.userPicker {
+  margin-bottom: 1rem;
+}
diff --git a/src/components/main/InviteViaLinkModal.tsx b/src/components/main/InviteViaLinkModal.tsx
index 64ed00ba8..19f987877 100644
--- a/src/components/main/InviteViaLinkModal.tsx
+++ b/src/components/main/InviteViaLinkModal.tsx
@@ -38,9 +38,9 @@ const InviteViaLinkModal: FC<OwnProps> = ({
   }, [userIds]);
 
   const handleClose = useLastCallback(() => closeInviteViaLinkModal());
-  const handleClickSkip = useLastCallback(() => closeInviteViaLinkModal());
+  const handleSkip = useLastCallback(() => closeInviteViaLinkModal());
 
-  const handleClickSendInviteLink = useCallback(() => {
+  const handleSendInviteLink = useCallback(() => {
     sendInviteMessages({ chatId: chatId!, userIds: selectedMemberIds! });
     closeInviteViaLinkModal();
   }, [selectedMemberIds, chatId]);
@@ -61,23 +61,25 @@ const InviteViaLinkModal: FC<OwnProps> = ({
         {renderText(lang('SendInviteLink.TextAvailableSingleUser', userNames), ['simple_markdown'])}
       </p>
       <Picker
+        className={styles.userPicker}
         itemIds={userIds!}
-        selectedIds={selectedMemberIds ?? []}
+        selectedIds={selectedMemberIds}
         onSelectedIdsChange={setSelectedMemberIds}
+        isRoundCheckbox
       />
       <div className="dialog-buttons">
         <Button
           className="confirm-dialog-button"
           isText
-          onClick={handleClickSendInviteLink}
-          disabled={!selectedMemberIds?.length}
+          onClick={handleSendInviteLink}
+          disabled={!selectedMemberIds.length}
         >
           {lang('SendInviteLink.ActionInvite')}
         </Button>
         <Button
           className="confirm-dialog-button"
           isText
-          onClick={handleClickSkip}
+          onClick={handleSkip}
         >
           {lang('SendInviteLink.ActionSkip')}
         </Button>
diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss
index ba49e02aa..3e416e484 100644
--- a/src/components/ui/ListItem.scss
+++ b/src/components/ui/ListItem.scss
@@ -455,6 +455,16 @@
     }
   }
 
+  &.chat-item {
+    .ListItem-button {
+      padding: 0.5rem;
+    }
+
+    .Checkbox {
+      padding-left: 3rem;
+    }
+  }
+
   .multiline-item {
     flex-grow: 1;
     white-space: initial;