diff --git a/web/modals/threads/thread-settings-delete-tab.css b/web/modals/threads/thread-settings-delete-tab.css index fe52028fc..a5fc533ee 100644 --- a/web/modals/threads/thread-settings-delete-tab.css +++ b/web/modals/threads/thread-settings-delete-tab.css @@ -1,27 +1,31 @@ -div.modal_body p.confirm_account_password { +p.confirm_account_password { margin-bottom: 4px; color: var(--fg); + font-size: var(--s-font-14); } div.form_title { - padding: 6px 6px 0 0; - font-size: 14px; + padding-top: 6px; + font-size: var(--s-font-14); font-weight: 600; vertical-align: top; color: var(--fg); } div.form_content { display: flex; font-family: var(--font-stack); color: var(--fg); - margin-top: 4px; - margin-bottom: 8px; -} -div.form_content input { - margin-bottom: 4px; + margin-top: 8px; + margin-bottom: 12px; } -.italic { - font-style: italic; +.deletion_warning { + font-weight: var(--bold); color: var(--fg); + font-size: var(--s-font-14); + margin-bottom: 16px; +} + +.delete_button { + width: 100%; } diff --git a/web/modals/threads/thread-settings-delete-tab.react.js b/web/modals/threads/thread-settings-delete-tab.react.js index 599595084..9e4c11bef 100644 --- a/web/modals/threads/thread-settings-delete-tab.react.js +++ b/web/modals/threads/thread-settings-delete-tab.react.js @@ -1,110 +1,117 @@ // @flow import * as React from 'react'; import { deleteThreadActionTypes, deleteThread, } from 'lib/actions/thread-actions'; import { type SetState } from 'lib/types/hook-types.js'; import { type ThreadInfo } from 'lib/types/thread-types'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils'; import Button from '../../components/button.react.js'; +import SWMansionIcon from '../../SWMansionIcon.react'; import Input from '../input.react.js'; import { useModalContext } from '../modal-provider.react.js'; -import css from './thread-settings-modal.css'; +import css from './thread-settings-delete-tab.css'; type ThreadSettingsDeleteTabProps = { +inputDisabled: boolean, +threadInfo: ThreadInfo, +setErrorMessage: SetState, }; function ThreadSettingsDeleteTab( props: ThreadSettingsDeleteTabProps, ): React.Node { const { inputDisabled, threadInfo, setErrorMessage } = props; const modalContext = useModalContext(); const dispatchActionPromise = useDispatchActionPromise(); const callDeleteThread = useServerCall(deleteThread); const accountPasswordInputRef = React.useRef(); const [accountPassword, setAccountPassword] = React.useState(''); const onChangeAccountPassword = React.useCallback( (event: SyntheticEvent) => { const target = event.currentTarget; setAccountPassword(target.value); }, [], ); const deleteThreadAction = React.useCallback(async () => { try { const response = await callDeleteThread(threadInfo.id, accountPassword); modalContext.popModal(); return response; } catch (e) { setErrorMessage( e.message === 'invalid_credentials' ? 'wrong password' : 'unknown error', ); setAccountPassword(''); accountPasswordInputRef.current?.focus(); throw e; } }, [ accountPassword, callDeleteThread, modalContext, setAccountPassword, setErrorMessage, threadInfo.id, ]); const onDelete = React.useCallback( (event: SyntheticEvent) => { event.preventDefault(); dispatchActionPromise(deleteThreadActionTypes, deleteThreadAction()); }, [deleteThreadAction, dispatchActionPromise], ); return (
-

+ +

Your thread will be permanently deleted. There is no way to reverse this.

- Please enter your account password to confirm your identity + Please enter your account password to confirm your identity.

Account password
-
); } export default ThreadSettingsDeleteTab;