Use ContactPills in StoriesSettingsModal

stylesheets/components/StoriesSettingsModal.scss

@@ -203,28 +203,9 @@
 
   &__tags {
     margin: 0 -4px;
-  }
 
-  &__tag {
-    align-items: center;
-    background: $color-gray-75;
-    border-radius: 26px;
-    color: $color-gray-05;
-    display: inline-flex;
-    padding: 4px 0;
-    margin: 0 4px;
-
-    &__name {
-      margin-left: 4px;
-    }
-
-    &__remove {
-      @include button-reset;
-      @include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
-      height: 12px;
-      margin: 0 8px;
-      width: 12px;
-    }
+    // Override .module-ContactPills
+    padding: 0;
   }
 
   &__name-story-avatar-container {

ts/components/ContactPills.tsx

@@ -3,15 +3,20 @@
 
 import type { FunctionComponent, ReactNode } from 'react';
 import React, { useRef, useEffect, Children } from 'react';
+import classNames from 'classnames';
 
 import { usePrevious } from '../hooks/usePrevious';
 import { scrollToBottom } from '../util/scrollUtil';
 
 type PropsType = {
+  moduleClassName?: string;
   children?: ReactNode;
 };
 
-export const ContactPills: FunctionComponent<PropsType> = ({ children }) => {
+export const ContactPills: FunctionComponent<PropsType> = ({
+  moduleClassName,
+  children,
+}) => {
   const elRef = useRef<null | HTMLDivElement>(null);
 
   const childCount = Children.count(children);
@@ -26,7 +31,10 @@ export const ContactPills: FunctionComponent<PropsType> = ({ children }) => {
   }, [childCount, previousChildCount]);
 
   return (
-    <div className="module-ContactPills" ref={elRef}>
+    <div
+      className={classNames('module-ContactPills', moduleClassName)}
+      ref={elRef}
+    >
       {children}
     </div>
   );

ts/components/StoriesSettingsModal.tsx

@@ -16,6 +16,8 @@ import { Avatar, AvatarSize } from './Avatar';
 import { Button, ButtonVariant } from './Button';
 import { Checkbox } from './Checkbox';
 import { ConfirmationDialog } from './ConfirmationDialog';
+import { ContactPills } from './ContactPills';
+import { ContactPill } from './ContactPill';
 import { ConversationList, RowType } from './ConversationList';
 import { Input } from './Input';
 import { Intl } from './Intl';
@@ -807,38 +809,26 @@ export const EditDistributionList = ({
           value={searchTerm}
         />
         {selectedContacts.length ? (
-          <div className="StoriesSettingsModal__tags">
+          <ContactPills moduleClassName="StoriesSettingsModal__tags">
             {selectedContacts.map(contact => (
-              <div className="StoriesSettingsModal__tag" key={contact.id}>
-                <Avatar
-                  acceptedMessageRequest={contact.acceptedMessageRequest}
-                  avatarPath={contact.avatarPath}
-                  badge={getPreferredBadge(contact.badges)}
-                  color={contact.color}
-                  conversationType={contact.type}
-                  i18n={i18n}
-                  isMe={contact.isMe}
-                  sharedGroupNames={contact.sharedGroupNames}
-                  size={AvatarSize.TWENTY_EIGHT}
-                  theme={ThemeType.dark}
-                  title={contact.title}
-                />
-                <span className="StoriesSettingsModal__tag__name">
-                  {contact.firstName ||
-                    contact.profileName ||
-                    contact.phoneNumber}
-                </span>
-                <button
-                  aria-label={i18n('StoriesSettings__remove--title', [
-                    contact.title,
-                  ])}
-                  className="StoriesSettingsModal__tag__remove"
-                  onClick={() => toggleSelectedConversation(contact.id)}
-                  type="button"
-                />
-              </div>
+              <ContactPill
+                key={contact.id}
+                acceptedMessageRequest={contact.acceptedMessageRequest}
+                avatarPath={contact.avatarPath}
+                color={contact.color}
+                firstName={contact.firstName}
+                i18n={i18n}
+                id={contact.id}
+                isMe={contact.isMe}
+                name={contact.name}
+                phoneNumber={contact.phoneNumber}
+                profileName={contact.profileName}
+                sharedGroupNames={contact.sharedGroupNames}
+                title={contact.title}
+                onClickRemove={() => toggleSelectedConversation(contact.id)}
+              />
             ))}
-          </div>
+          </ContactPills>
         ) : undefined}
         {candidateConversations.length ? (
           <Measure bounds>