diff --git a/web/modals/threads/thread-settings-delete-tab.css b/web/modals/threads/thread-settings-delete-tab.css new file mode 100644 --- /dev/null +++ b/web/modals/threads/thread-settings-delete-tab.css @@ -0,0 +1,43 @@ +div.modal_body p.confirm_account_password { + margin-bottom: 4px; + color: var(--fg); +} + +div.form_title { + padding: 6px 6px 0 0; + font-size: 14px; + 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; +} + +div.form_content textarea { + padding: 12px; + background: var(--modal-bg); + color: var(--fg); + border: 1px solid var(--border-color); + font-size: var(--m-font-16); + border-radius: 4px; + width: 100%; +} + +.italic { + font-style: italic; + color: var(--fg); +} + +div.edit_thread_account_password { + border-top: 2px solid #efefef; + padding-top: 4px; + margin-top: 2px; +} diff --git a/web/modals/threads/thread-settings-delete-tab.react.js b/web/modals/threads/thread-settings-delete-tab.react.js new file mode 100644 --- /dev/null +++ b/web/modals/threads/thread-settings-delete-tab.react.js @@ -0,0 +1,51 @@ +// @flow + +import * as React from 'react'; + +import css from './thread-settings-modal.css'; + +type ThreadSettingsDeleteTabProps = { + +accountPassword: string, + +onChangeAccountPassword: (event: SyntheticEvent) => void, + +inputDisabled: boolean, + +accountPasswordInputRef: (accountPasswordInput: ?HTMLInputElement) => void, +}; + +function ThreadSettingsDeleteTab( + props: ThreadSettingsDeleteTabProps, +): React.Node { + const { + accountPassword, + onChangeAccountPassword, + inputDisabled, + accountPasswordInputRef, + } = props; + return ( + <> +
+

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

+
+
+

+ Please enter your account password to confirm your identity +

+
Account password
+
+ +
+
+ + ); +} + +export default ThreadSettingsDeleteTab; diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js --- a/web/modals/threads/thread-settings-modal.react.js +++ b/web/modals/threads/thread-settings-modal.react.js @@ -36,6 +36,7 @@ import { useModalContext } from '../../modals/modal-provider.react'; import { useSelector } from '../../redux/redux-utils'; import Modal from '../modal.react'; +import ThreadSettingsDeleteTab from './thread-settings-delete-tab.react'; import ThreadSettingsGeneralTab from './thread-settings-general-tab.react'; import css from './thread-settings-modal.css'; import ThreadSettingsPrivacyTab from './thread-settings-privacy-tab.react'; @@ -208,30 +209,12 @@ ); } else if (this.state.currentTabType === 'delete') { mainContent = ( - <> -
-

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

-
-
-

- Please enter your account password to confirm your identity -

-
Account password
-
- -
-
- + ); }