This commit is contained in:
trevor-signal 2023-12-12 10:33:49 -05:00
commit 7fb01f102d
2 changed files with 24 additions and 49 deletions

View file

@ -7080,14 +7080,6 @@ button.module-image__border-overlay:focus {
// Module: Chat Session Refreshed Dialog
.module-chat-session-refreshed-dialog {
@include light-theme {
background-color: $color-white;
}
@include dark-theme {
background-color: $color-gray-95;
}
}
.module-chat-session-refreshed-dialog__image {
text-align: center;
}
@ -7096,24 +7088,6 @@ button.module-image__border-overlay:focus {
margin-top: 10px;
margin-bottom: 3px;
}
.module-chat-session-refreshed-dialog__buttons {
text-align: end;
margin-top: 20px;
padding: 3px;
}
.module-chat-session-refreshed-dialog__button {
@include font-body-1-bold;
@include button-reset;
@include button-primary;
border-radius: 4px;
padding-block: 7px;
padding-inline: 14px;
margin-inline-start: 12px;
}
.module-chat-session-refreshed-dialog__button--secondary {
@include button-secondary;
}
// Module: Delivery Issue Dialog

View file

@ -2,13 +2,13 @@
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import classNames from 'classnames';
import { Modal } from '../Modal';
import { useRestoreFocus } from '../../hooks/useRestoreFocus';
import type { LocalizerType } from '../../types/Util';
import { Button, ButtonSize, ButtonVariant } from '../Button';
export type PropsType = {
i18n: LocalizerType;
@ -24,14 +24,35 @@ export function ChatSessionRefreshedDialog(
// Focus first button after initial render, restore focus on teardown
const [focusRef] = useRestoreFocus();
const footer = (
<>
<Button
onClick={contactSupport}
size={ButtonSize.Medium}
variant={ButtonVariant.Secondary}
>
{i18n('icu:ChatRefresh--contactSupport')}
</Button>
<Button
onClick={onClose}
ref={focusRef}
size={ButtonSize.Medium}
variant={ButtonVariant.Primary}
className="module-chat-session-refreshed-dialog__close-button"
>
{i18n('icu:Confirmation--confirm')}
</Button>
</>
);
return (
<Modal
modalName="ChatSessionRefreshedDialog"
hasXButton={false}
onClose={onClose}
i18n={i18n}
modalFooter={footer}
>
<div className="module-chat-session-refreshed-dialog">
<>
<div className="module-chat-session-refreshed-dialog__image">
<img
src="images/chat-session-refresh.svg"
@ -46,27 +67,7 @@ export function ChatSessionRefreshedDialog(
<div className="module-chat-session-refreshed-dialog__description">
{i18n('icu:ChatRefresh--summary')}
</div>
<div className="module-chat-session-refreshed-dialog__buttons">
<button
type="button"
onClick={contactSupport}
className={classNames(
'module-chat-session-refreshed-dialog__button',
'module-chat-session-refreshed-dialog__button--secondary'
)}
>
{i18n('icu:ChatRefresh--contactSupport')}
</button>
<button
type="button"
onClick={onClose}
ref={focusRef}
className="module-chat-session-refreshed-dialog__button"
>
{i18n('icu:Confirmation--confirm')}
</button>
</div>
</div>
</>
</Modal>
);
}