diff --git a/web/modals/threads/settings/thread-settings-privacy-tab.css b/web/modals/threads/settings/thread-settings-privacy-tab.css index b33d87615..a5201899a 100644 --- a/web/modals/threads/settings/thread-settings-privacy-tab.css +++ b/web/modals/threads/settings/thread-settings-privacy-tab.css @@ -1,41 +1,15 @@ 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.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; +span.form_enum_description { + display: flex; + font-size: var(--xs-font-12); color: gray; } .save_button { width: 100%; } diff --git a/web/modals/threads/settings/thread-settings-privacy-tab.react.js b/web/modals/threads/settings/thread-settings-privacy-tab.react.js index 51d8ef432..78fc09b05 100644 --- a/web/modals/threads/settings/thread-settings-privacy-tab.react.js +++ b/web/modals/threads/settings/thread-settings-privacy-tab.react.js @@ -1,166 +1,160 @@ // @flow import * as React from 'react'; import { changeThreadSettings, changeThreadSettingsActionTypes, } from 'lib/actions/thread-actions'; import { threadTypeDescriptions } from 'lib/shared/thread-utils'; import { type SetState } from 'lib/types/hook-types'; import { type ThreadInfo, type ThreadChanges, assertThreadType, threadTypes, } from 'lib/types/thread-types'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils'; import Button from '../../../components/button.react'; import { useModalContext } from '../../modal-provider.react'; import css from './thread-settings-privacy-tab.css'; const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes; type ThreadSettingsPrivacyTabProps = { +inputDisabled: boolean, +threadInfo: ThreadInfo, +queuedChanges: ThreadChanges, +setQueuedChanges: SetState, +setErrorMessage: SetState, }; function ThreadSettingsPrivacyTab( props: ThreadSettingsPrivacyTabProps, ): React.Node { const { inputDisabled, threadInfo, queuedChanges, setQueuedChanges, setErrorMessage, } = props; const modalContext = useModalContext(); const dispatchActionPromise = useDispatchActionPromise(); const callChangeThreadSettings = useServerCall(changeThreadSettings); const changeQueued: boolean = React.useMemo( () => Object.values(queuedChanges).some(v => v !== null && v !== undefined), [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({ threadID: threadInfo.id, changes: queuedChanges, }); modalContext.popModal(); return response; } catch (e) { setErrorMessage('unknown_error'); setQueuedChanges(Object.freeze({})); throw e; } }, [ callChangeThreadSettings, modalContext, queuedChanges, setErrorMessage, setQueuedChanges, threadInfo.id, ]); const onSubmit = React.useCallback( (event: SyntheticEvent) => { event.preventDefault(); dispatchActionPromise( changeThreadSettingsActionTypes, changeThreadSettingsAction(), ); }, [changeThreadSettingsAction, dispatchActionPromise], ); return (
-
-
-
Thread type
-
-
- -
- -
-
-
- -
- -
-
+
Thread type
+
+ +
+ +
+
+ +
+
-
+ + ); } export default ThreadSettingsPrivacyTab;