diff --git a/web/modals/threads/settings/thread-settings-privacy-tab.css b/web/modals/threads/settings/thread-settings-privacy-tab.css --- a/web/modals/threads/settings/thread-settings-privacy-tab.css +++ b/web/modals/threads/settings/thread-settings-privacy-tab.css @@ -4,10 +4,8 @@ font-weight: 600; } -span.form_enum_description { - display: flex; - font-size: var(--xs-font-12); - color: gray; +div.enum_container { + padding: 12px 0; } .save_button { diff --git a/web/modals/threads/settings/thread-settings-privacy-tab.react.js b/web/modals/threads/settings/thread-settings-privacy-tab.react.js --- a/web/modals/threads/settings/thread-settings-privacy-tab.react.js +++ b/web/modals/threads/settings/thread-settings-privacy-tab.react.js @@ -20,11 +20,27 @@ } from 'lib/utils/action-utils'; import Button from '../../../components/button.react'; +import EnumSettingsOption from '../../../components/enum-settings-option.react'; +import SWMansionIcon from '../../../SWMansionIcon.react'; import { useModalContext } from '../../modal-provider.react'; import css from './thread-settings-privacy-tab.css'; const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes; +const openStatements = [ + { + statement: threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD], + isStatementValid: undefined, + }, +]; + +const secretStatements = [ + { + statement: threadTypeDescriptions[COMMUNITY_SECRET_SUBTHREAD], + isStatementValid: undefined, + }, +]; + type ThreadSettingsPrivacyTabProps = { +inputDisabled: boolean, +threadInfo: ThreadInfo, @@ -52,19 +68,6 @@ [queuedChanges], ); - const onChangeThreadType = React.useCallback( - (event: SyntheticEvent) => { - const uiValue = assertThreadType(parseInt(event.currentTarget.value, 10)); - setQueuedChanges(prevQueuedChanges => - Object.freeze({ - ...prevQueuedChanges, - type: uiValue !== threadInfo.type ? uiValue : undefined, - }), - ); - }, - [setQueuedChanges, threadInfo.type], - ); - const changeThreadSettingsAction = React.useCallback(async () => { try { const response = await callChangeThreadSettings({ @@ -98,51 +101,59 @@ [changeThreadSettingsAction, dispatchActionPromise], ); + const onOpenSelected = React.useCallback(() => { + const uiValue = assertThreadType(COMMUNITY_OPEN_SUBTHREAD); + setQueuedChanges(prevQueuedChanges => + Object.freeze({ + ...prevQueuedChanges, + type: uiValue !== threadInfo.type ? uiValue : undefined, + }), + ); + }, [setQueuedChanges, threadInfo.type]); + + const onSecretSelected = React.useCallback(() => { + const uiValue = assertThreadType(COMMUNITY_SECRET_SUBTHREAD); + setQueuedChanges(prevQueuedChanges => + Object.freeze({ + ...prevQueuedChanges, + type: uiValue !== threadInfo.type ? uiValue : undefined, + }), + ); + }, [setQueuedChanges, threadInfo.type]); + + const globeIcon = React.useMemo( + () => , + [], + ); + + const lockIcon = React.useMemo( + () => , + [], + ); + return (
Thread type
-
- + + -
- -
-
- -
- -
-