Refactored and cleaned up Modal and friends
This commit is contained in:
parent
f64426fbe0
commit
00a720faa9
31 changed files with 853 additions and 787 deletions
|
@ -172,6 +172,7 @@ export const ContactModal = ({
|
|||
hasXButton
|
||||
i18n={i18n}
|
||||
onClose={hideContactModal}
|
||||
padded={false}
|
||||
>
|
||||
<div className="ContactModal">
|
||||
<Avatar
|
||||
|
|
|
@ -31,12 +31,34 @@ export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
|
|||
// Focus first button after initial render, restore focus on teardown
|
||||
const [focusRef] = useRestoreFocus();
|
||||
|
||||
const footer = (
|
||||
<>
|
||||
<Button
|
||||
onClick={learnMoreAboutDeliveryIssue}
|
||||
size={ButtonSize.Medium}
|
||||
variant={ButtonVariant.Secondary}
|
||||
>
|
||||
{i18n('DeliveryIssue--learnMore')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onClose}
|
||||
ref={focusRef}
|
||||
size={ButtonSize.Medium}
|
||||
variant={ButtonVariant.Primary}
|
||||
className="module-delivery-issue-dialog__close-button"
|
||||
>
|
||||
{i18n('Confirmation--confirm')}
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
modalName="DeliveryIssueDialog"
|
||||
hasXButton={false}
|
||||
onClose={onClose}
|
||||
i18n={i18n}
|
||||
modalFooter={footer}
|
||||
>
|
||||
<section>
|
||||
<div className="module-delivery-issue-dialog__image">
|
||||
|
@ -60,24 +82,6 @@ export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
|
|||
/>
|
||||
</div>
|
||||
</section>
|
||||
<Modal.ButtonFooter>
|
||||
<Button
|
||||
onClick={learnMoreAboutDeliveryIssue}
|
||||
size={ButtonSize.Medium}
|
||||
variant={ButtonVariant.Secondary}
|
||||
>
|
||||
{i18n('DeliveryIssue--learnMore')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onClose}
|
||||
ref={focusRef}
|
||||
size={ButtonSize.Medium}
|
||||
variant={ButtonVariant.Primary}
|
||||
className="module-delivery-issue-dialog__close-button"
|
||||
>
|
||||
{i18n('Confirmation--confirm')}
|
||||
</Button>
|
||||
</Modal.ButtonFooter>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -47,11 +47,20 @@ export const ConversationNotificationsModal = ({
|
|||
return (
|
||||
<Modal
|
||||
modalName="ConversationNotificationsModal"
|
||||
hasStickyButtons
|
||||
hasXButton
|
||||
onClose={onClose}
|
||||
i18n={i18n}
|
||||
title={i18n('muteNotificationsTitle')}
|
||||
modalFooter={
|
||||
<>
|
||||
<Button onClick={onClose} variant={ButtonVariant.Secondary}>
|
||||
{i18n('cancel')}
|
||||
</Button>
|
||||
<Button onClick={onMuteChange} variant={ButtonVariant.Primary}>
|
||||
{i18n('mute')}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{muteOptions
|
||||
.filter(x => x.value > 0)
|
||||
|
@ -67,14 +76,6 @@ export const ConversationNotificationsModal = ({
|
|||
onChange={value => value && setMuteExpirationValue(option.value)}
|
||||
/>
|
||||
))}
|
||||
<Modal.ButtonFooter>
|
||||
<Button onClick={onClose} variant={ButtonVariant.Secondary}>
|
||||
{i18n('cancel')}
|
||||
</Button>
|
||||
<Button onClick={onMuteChange} variant={ButtonVariant.Primary}>
|
||||
{i18n('mute')}
|
||||
</Button>
|
||||
</Modal.ButtonFooter>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -155,6 +155,7 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
|
|||
} else {
|
||||
content = (
|
||||
<form
|
||||
id="edit-conversation-form"
|
||||
onSubmit={onSubmit}
|
||||
className="module-EditConversationAttributesModal"
|
||||
>
|
||||
|
@ -199,40 +200,43 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
|
|||
{i18n('updateGroupAttributes__error-message')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Modal.ButtonFooter>
|
||||
<Button
|
||||
disabled={isRequestActive}
|
||||
onClick={onClose}
|
||||
variant={ButtonVariant.Secondary}
|
||||
>
|
||||
{i18n('cancel')}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant={ButtonVariant.Primary}
|
||||
disabled={!canSubmit}
|
||||
>
|
||||
{isRequestActive ? (
|
||||
<Spinner size="20px" svgSize="small" direction="on-avatar" />
|
||||
) : (
|
||||
i18n('save')
|
||||
)}
|
||||
</Button>
|
||||
</Modal.ButtonFooter>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
const modalFooter = (
|
||||
<>
|
||||
<Button
|
||||
disabled={isRequestActive}
|
||||
onClick={onClose}
|
||||
variant={ButtonVariant.Secondary}
|
||||
>
|
||||
{i18n('cancel')}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
form="edit-conversation-form"
|
||||
variant={ButtonVariant.Primary}
|
||||
disabled={!canSubmit}
|
||||
>
|
||||
{isRequestActive ? (
|
||||
<Spinner size="20px" svgSize="small" direction="on-avatar" />
|
||||
) : (
|
||||
i18n('save')
|
||||
)}
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
modalName="EditConversationAttributesModal"
|
||||
hasStickyButtons
|
||||
hasXButton
|
||||
i18n={i18n}
|
||||
onClose={onClose}
|
||||
title={i18n('updateGroupAttributes__title')}
|
||||
modalFooter={modalFooter}
|
||||
>
|
||||
{content}
|
||||
</Modal>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue