Migrate CallLinkPendingParticipantModal to AxoDialog

stylesheets/components/CallLinkPendingParticipantModal.scss

@@ -1,115 +0,0 @@
-// Copyright 2024 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-@use '../mixins';
-@use '../variables';
-
-// Overriding default style
-.module-Modal__body_inner.CallLinkPendingParticipantModal__body_inner {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-top: 4px;
-  margin-bottom: 14px;
-  padding-inline: 8px;
-}
-
-.CallLinkPendingParticipantModal__NameButton {
-  @include mixins.button-reset();
-  & {
-    @include mixins.font-title-1;
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    max-width: 100%;
-    margin-top: 12px;
-    font-weight: 500;
-    color: variables.$color-gray-05;
-    cursor: pointer;
-  }
-}
-
-.CallLinkPendingParticipantModal__InContactsIcon {
-  height: 22px;
-  width: 22px;
-  @include mixins.any-theme {
-    background-color: currentColor;
-  }
-}
-
-.CallLinkPendingParticipantModal__AboutIcon {
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-
-  position: relative;
-  inset-block-start: 2px;
-
-  @include mixins.color-svg(
-    '../images/icons/v3/chevron/chevron-right-bold.svg',
-    variables.$color-gray-25
-  );
-}
-
-.CallLinkPendingParticipantModal__SharedGroupInfo {
-  margin-top: 10px;
-  color: variables.$color-gray-25;
-  text-align: center;
-}
-
-.CallLinkPendingParticipantModal__Hr {
-  width: 100%;
-  margin-block: 24px;
-  border: none;
-  height: 1px;
-  background: variables.$color-gray-65;
-}
-
-.CallLinkPendingParticipantModal__ActionButton {
-  @include mixins.button-reset;
-  & {
-    display: flex;
-    padding-block: 6px;
-    width: 100%;
-    align-items: center;
-    color: variables.$color-gray-05;
-  }
-}
-
-.CallLinkPendingParticipantModal__ActionButton:last-child {
-  margin-bottom: 0;
-}
-
-.CallLinkPendingParticipantModal__ActionButton:focus {
-  @include mixins.keyboard-mode {
-    background: variables.$color-gray-65;
-  }
-}
-
-.CallLinkPendingParticipantModal__ButtonIcon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-inline-end: 12px;
-  width: 20px;
-}
-
-.CallLinkPendingParticipantModal__ButtonIconContent {
-  width: 20px;
-  height: 20px;
-}
-
-.CallLinkPendingParticipantModal__ButtonIconContent--approve {
-  @include mixins.color-svg(
-    '../images/icons/v3/check/check-circle.svg',
-    variables.$color-gray-25
-  );
-}
-
-.CallLinkPendingParticipantModal__ButtonIconContent--deny {
-  @include mixins.color-svg(
-    '../images/icons/v3/x/x-circle.svg',
-    variables.$color-gray-25
-  );
-}

stylesheets/manifest.scss

@@ -53,8 +53,6 @@ $is-storybook: false !default;
 @use 'components/CallLinkAddNameModal.scss';
 @use 'components/CallLinkDetails.scss';
 @use 'components/CallLinkEditModal.scss';
-@use 'components/CallLinkPendingParticipantModal.scss';
-@use 'components/CallLinkRestrictionsSelect.scss';
 @use 'components/CallingRaisedHandsList.scss';
 @use 'components/CallingRaisedHandsToasts.scss';
 @use 'components/CallingReactionsToasts.scss';

ts/components/CallLinkPendingParticipantModal.dom.tsx

@@ -1,29 +1,32 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { useCallback, useMemo, type JSX } from 'react';
-import { Modal } from './Modal.dom.tsx';
+import { useCallback, type JSX } from 'react';
 import type { LocalizerType } from '../types/I18N.std.ts';
 import { Avatar, AvatarSize } from './Avatar.dom.tsx';
 import type { PendingUserActionPayloadType } from '../state/ducks/calling.preload.ts';
 import type { ConversationType } from '../state/ducks/conversations.preload.ts';
-import { InContactsIcon } from './InContactsIcon.dom.tsx';
 import { isInSystemContacts } from '../util/isInSystemContacts.std.ts';
 import { ThemeType } from '../types/Util.std.ts';
-import { Theme } from '../util/theme.std.ts';
 import { UserText } from './UserText.dom.tsx';
 import { SharedGroupNames } from './SharedGroupNames.dom.tsx';
 import type { ContactModalStateType } from '../types/globalModals.std.ts';
+import { AxoDialog } from '../axo/AxoDialog.dom.tsx';
+import { AxoTheme } from '../axo/AxoTheme.dom.tsx';
+import { tw } from '../axo/tw.dom.tsx';
+import { AxoButton } from '../axo/AxoButton.dom.tsx';
+import { AxoSymbol } from '../axo/AxoSymbol.dom.tsx';
+import { AxoContactName } from '../axo/AxoContactName.dom.tsx';
 
-export type CallLinkPendingParticipantModalProps = {
-  readonly i18n: LocalizerType;
-  readonly conversation: ConversationType;
-  readonly approveUser: (payload: PendingUserActionPayloadType) => void;
-  readonly denyUser: (payload: PendingUserActionPayloadType) => void;
-  readonly onClose: () => void;
-  readonly sharedGroupNames: ReadonlyArray<string>;
-  readonly toggleAboutContactModal: (options: ContactModalStateType) => void;
-};
+export type CallLinkPendingParticipantModalProps = Readonly<{
+  i18n: LocalizerType;
+  conversation: ConversationType;
+  approveUser: (payload: PendingUserActionPayloadType) => void;
+  denyUser: (payload: PendingUserActionPayloadType) => void;
+  onClose: () => void;
+  sharedGroupNames: ReadonlyArray<string>;
+  toggleAboutContactModal: (options: ContactModalStateType) => void;
+}>;
 
 export function CallLinkPendingParticipantModal({
   i18n,
@@ -34,9 +37,7 @@ export function CallLinkPendingParticipantModal({
   sharedGroupNames,
   toggleAboutContactModal,
 }: CallLinkPendingParticipantModalProps): JSX.Element {
-  const serviceId = useMemo(() => {
-    return conversation.serviceId;
-  }, [conversation]);
+  const { serviceId } = conversation;
 
   const handleApprove = useCallback(() => {
     approveUser({ serviceId });
@@ -49,83 +50,101 @@ export function CallLinkPendingParticipantModal({
   }, [denyUser, onClose, serviceId]);
 
   return (
-    <Modal
-      modalName="CallLinkPendingParticipantModal"
-      moduleClassName="CallLinkPendingParticipantModal"
-      hasXButton
-      i18n={i18n}
-      onClose={onClose}
-      theme={Theme.Dark}
-    >
-      <Avatar
-        avatarUrl={conversation.avatarUrl}
-        avatarPlaceholderGradient={conversation.avatarPlaceholderGradient}
-        badge={undefined}
-        color={conversation.color}
-        conversationType="direct"
-        hasAvatar={conversation.hasAvatar}
-        i18n={i18n}
-        profileName={conversation.profileName}
-        size={AvatarSize.EIGHTY}
-        title={conversation.title}
-        theme={ThemeType.dark}
-      />
-
-      <button
-        type="button"
-        onClick={ev => {
-          ev.preventDefault();
-          ev.stopPropagation();
-          toggleAboutContactModal({ contactId: conversation.id });
-        }}
-        className="CallLinkPendingParticipantModal__NameButton"
-      >
-        <div className="CallLinkPendingParticipantModal__Title">
-          <UserText text={conversation.title} />
-          {isInSystemContacts(conversation) && (
-            <span>
-              {' '}
-              <InContactsIcon
-                className="module-in-contacts-icon__icon CallLinkPendingParticipantModal__InContactsIcon"
+    <AxoTheme.Override theme="force-dark">
+      <AxoDialog.Root open onOpenChange={onClose}>
+        <AxoDialog.Content size="sm" escape="cancel-is-noop">
+          <AxoDialog.Header>
+            <AxoDialog.Title screenReaderOnly>
+              {conversation.title}
+            </AxoDialog.Title>
+            <AxoDialog.Close />
+          </AxoDialog.Header>
+          <AxoDialog.Body>
+            <div className={tw('flex flex-col items-center text-center')}>
+              <Avatar
+                avatarUrl={conversation.avatarUrl}
+                avatarPlaceholderGradient={
+                  conversation.avatarPlaceholderGradient
+                }
+                badge={undefined}
+                color={conversation.color}
+                conversationType="direct"
+                hasAvatar={conversation.hasAvatar}
                 i18n={i18n}
+                profileName={conversation.profileName}
+                size={AvatarSize.EIGHTY}
+                title={conversation.title}
+                theme={ThemeType.dark}
               />
-            </span>
-          )}
-          <span className="CallLinkPendingParticipantModal__AboutIcon" />
-        </div>
-      </button>
 
-      <div className="CallLinkPendingParticipantModal__SharedGroupInfo">
-        {sharedGroupNames.length > 0 ? (
-          <SharedGroupNames i18n={i18n} sharedGroupNames={sharedGroupNames} />
-        ) : (
-          i18n('icu:no-groups-in-common-warning')
-        )}
-      </div>
+              <button
+                type="button"
+                className={tw('mt-3')}
+                onClick={event => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  toggleAboutContactModal({ contactId: conversation.id });
+                }}
+              >
+                <div className={tw('type-title-large text-primary')}>
+                  <UserText text={conversation.title} />
+                  {isInSystemContacts(conversation) && (
+                    <>
+                      &nbsp;
+                      <AxoContactName.SystemContactEmblem />
+                    </>
+                  )}
+                  &nbsp;
+                  <span className={tw('text-[20px] text-secondary')}>
+                    <AxoSymbol.InlineGlyph
+                      symbol="chevron-[end]"
+                      label={null}
+                    />
+                  </span>
+                </div>
+              </button>
 
-      <div className="CallLinkPendingParticipantModal__Hr" />
+              <p className={tw('mt-2.5 text-secondary')}>
+                {sharedGroupNames.length > 0 ? (
+                  <SharedGroupNames
+                    i18n={i18n}
+                    sharedGroupNames={sharedGroupNames}
+                  />
+                ) : (
+                  i18n('icu:no-groups-in-common-warning')
+                )}
+              </p>
+            </div>
 
-      <button
-        type="button"
-        className="CallLinkPendingParticipantModal__ActionButton"
-        onClick={handleApprove}
-      >
-        <div className="CallLinkPendingParticipantModal__ButtonIcon">
-          <div className="CallLinkPendingParticipantModal__ButtonIconContent CallLinkPendingParticipantModal__ButtonIconContent--approve" />
-        </div>
-        {i18n('icu:CallLinkPendingParticipantModal__ApproveButtonLabel')}
-      </button>
+            <hr className={tw('my-6 border-primary')} />
 
-      <button
-        type="button"
-        className="CallLinkPendingParticipantModal__ActionButton"
-        onClick={handleDeny}
-      >
-        <div className="CallLinkPendingParticipantModal__ButtonIcon">
-          <div className="CallLinkPendingParticipantModal__ButtonIconContent CallLinkPendingParticipantModal__ButtonIconContent--deny" />
-        </div>
-        {i18n('icu:CallLinkPendingParticipantModal__DenyButtonLabel')}
-      </button>
-    </Modal>
+            <div className={tw('flex flex-col gap-2')}>
+              <AxoButton.Root
+                size="md"
+                width="full"
+                variant="subtle-affirmative"
+                symbol="check"
+                onClick={handleApprove}
+              >
+                {i18n(
+                  'icu:CallLinkPendingParticipantModal__ApproveButtonLabel'
+                )}
+              </AxoButton.Root>
+
+              <AxoButton.Root
+                size="md"
+                width="full"
+                variant="subtle-destructive"
+                symbol="x"
+                onClick={handleDeny}
+              >
+                {i18n('icu:CallLinkPendingParticipantModal__DenyButtonLabel')}
+              </AxoButton.Root>
+            </div>
+          </AxoDialog.Body>
+          <AxoDialog.Footer />
+        </AxoDialog.Content>
+      </AxoDialog.Root>
+    </AxoTheme.Override>
   );
 }