InviteViaLinkModal: Update design (#4156)

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;

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}

src/components/main/InviteViaLinkModal.module.scss

@@ -1,3 +1,7 @@
 .contentText {
   color: var(--color-text-secondary);
 }
+
+.userPicker {
+  margin-bottom: 1rem;
+}

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}
+          onClick={handleSendInviteLink}
-          disabled={!selectedMemberIds?.length}
+          disabled={!selectedMemberIds.length}
         >
           {lang('SendInviteLink.ActionInvite')}
         </Button>
         <Button
           className="confirm-dialog-button"
           isText
-          onClick={handleClickSkip}
+          onClick={handleSkip}
         >
           {lang('SendInviteLink.ActionSkip')}
         </Button>

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;