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
@@ -13,11 +13,7 @@
} from 'lib/actions/thread-actions';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
import { threadInfoSelector } from 'lib/selectors/thread-selectors';
-import {
- threadHasPermission,
- threadTypeDescriptions,
- robotextName,
-} from 'lib/shared/thread-utils';
+import { threadHasPermission, robotextName } from 'lib/shared/thread-utils';
import {
type ThreadInfo,
threadTypes,
@@ -43,8 +39,7 @@
import ThreadSettingsDeleteTab from './thread-settings-delete-tab.react';
import ThreadSettingsGeneralTab from './thread-settings-general-tab.react';
import css from './thread-settings-modal.css';
-
-const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes;
+import ThreadSettingsPrivacyTab from './thread-settings-privacy-tab.react';
type TabType = 'general' | 'privacy' | 'delete';
type TabProps = {
@@ -205,57 +200,11 @@
);
} else if (this.state.currentTabType === 'privacy') {
mainContent = (
- <div className={css.edit_thread_privacy_container}>
- <div className={css['modal-radio-selector']}>
- <div className={css.form_title}>Thread type</div>
- <div className={css.form_enum_selector}>
- <div className={css.form_enum_container}>
- <input
- type="radio"
- name="edit-thread-type"
- id="edit-thread-open"
- value={COMMUNITY_OPEN_SUBTHREAD}
- checked={
- this.possiblyChangedValue('type') ===
- COMMUNITY_OPEN_SUBTHREAD
- }
- onChange={this.onChangeThreadType}
- disabled={inputDisabled}
- />
- <div className={css.form_enum_option}>
- <label htmlFor="edit-thread-open">
- Open
- <span className={css.form_enum_description}>
- {threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD]}
- </span>
- </label>
- </div>
- </div>
- <div className={css.form_enum_container}>
- <input
- type="radio"
- name="edit-thread-type"
- id="edit-thread-closed"
- value={COMMUNITY_SECRET_SUBTHREAD}
- checked={
- this.possiblyChangedValue('type') ===
- COMMUNITY_SECRET_SUBTHREAD
- }
- onChange={this.onChangeThreadType}
- disabled={inputDisabled}
- />
- <div className={css.form_enum_option}>
- <label htmlFor="edit-thread-closed">
- Secret
- <span className={css.form_enum_description}>
- {threadTypeDescriptions[COMMUNITY_SECRET_SUBTHREAD]}
- </span>
- </label>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <ThreadSettingsPrivacyTab
+ possiblyChangedThreadType={this.possiblyChangedValue('type')}
+ onChangeThreadType={this.onChangeThreadType}
+ inputDisabled={inputDisabled}
+ />
);
} else if (this.state.currentTabType === 'delete') {
mainContent = (
diff --git a/web/modals/threads/thread-settings-privacy-tab.css b/web/modals/threads/thread-settings-privacy-tab.css
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/thread-settings-privacy-tab.css
@@ -0,0 +1,37 @@
+div.form_title {
+ padding: 6px 6px 0 0;
+ font-size: 14px;
+ font-weight: 600;
+ vertical-align: top;
+ color: var(--fg);
+}
+
+div.edit_thread_privacy_container {
+ margin-bottom: 6px;
+}
+
+div.form_enum_selector {
+ display: inline-block;
+ padding-bottom: 4px;
+}
+div.form_enum_selector > div.form_enum_container {
+ padding-top: 5px;
+}
+div.form_enum_selector > div.form_enum_container > input {
+ vertical-align: top;
+ margin-top: 4px;
+}
+div.form_enum_selector div.form_enum_option {
+ display: inline-block;
+ font-size: 15px;
+ font-weight: 600;
+ padding-left: 3px;
+}
+div.form_enum_selector span.form_enum_description {
+ display: block;
+ font-family: var(--font-stack);
+ font-weight: normal;
+ font-size: 13px;
+ max-width: 260px;
+ color: gray;
+}
diff --git a/web/modals/threads/thread-settings-privacy-tab.react.js b/web/modals/threads/thread-settings-privacy-tab.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/thread-settings-privacy-tab.react.js
@@ -0,0 +1,73 @@
+// @flow
+
+import * as React from 'react';
+
+import { threadTypeDescriptions } from 'lib/shared/thread-utils.js';
+import { threadTypes } from 'lib/types/thread-types.js';
+
+import css from './thread-settings-privacy-tab.css';
+const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes;
+
+type ThreadSettingsPrivacyTabProps = {
+ +possiblyChangedThreadType: number,
+ +onChangeThreadType: (event: SyntheticEvent<HTMLInputElement>) => void,
+ +inputDisabled: boolean,
+};
+function ThreadSettingsPrivacyTab(
+ props: ThreadSettingsPrivacyTabProps,
+): React.Node {
+ const {
+ possiblyChangedThreadType,
+ onChangeThreadType,
+ inputDisabled,
+ } = props;
+ return (
+ <div className={css.edit_thread_privacy_container}>
+ <div className={css['modal-radio-selector']}>
+ <div className={css.form_title}>Thread type</div>
+ <div className={css.form_enum_selector}>
+ <div className={css.form_enum_container}>
+ <input
+ type="radio"
+ name="edit-thread-type"
+ id="edit-thread-open"
+ value={COMMUNITY_OPEN_SUBTHREAD}
+ checked={possiblyChangedThreadType === COMMUNITY_OPEN_SUBTHREAD}
+ onChange={onChangeThreadType}
+ disabled={inputDisabled}
+ />
+ <div className={css.form_enum_option}>
+ <label htmlFor="edit-thread-open">
+ Open
+ <span className={css.form_enum_description}>
+ {threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD]}
+ </span>
+ </label>
+ </div>
+ </div>
+ <div className={css.form_enum_container}>
+ <input
+ type="radio"
+ name="edit-thread-type"
+ id="edit-thread-closed"
+ value={COMMUNITY_SECRET_SUBTHREAD}
+ checked={possiblyChangedThreadType === COMMUNITY_SECRET_SUBTHREAD}
+ onChange={onChangeThreadType}
+ disabled={inputDisabled}
+ />
+ <div className={css.form_enum_option}>
+ <label htmlFor="edit-thread-closed">
+ Secret
+ <span className={css.form_enum_description}>
+ {threadTypeDescriptions[COMMUNITY_SECRET_SUBTHREAD]}
+ </span>
+ </label>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export default ThreadSettingsPrivacyTab;