diff --git a/web/modals/threads/thread-settings-modal.css b/web/modals/threads/thread-settings-modal.css index 3e7524ffe..fbeb2239e 100644 --- a/web/modals/threads/thread-settings-modal.css +++ b/web/modals/threads/thread-settings-modal.css @@ -1,45 +1,42 @@ div.modal_body { padding: 20px; background-color: var(--modal-bg); border-radius: 16px; flex: 1; display: flex; flex-direction: column; } div.modal_body p { padding: 1px 3px 4px 3px; font-size: 14px; text-align: center; } -div.modal_body div.form_footer { +div.modal_form_error { display: flex; - padding-top: 8px; -} -div.modal_body div.form_footer div.modal_form_error { - font-size: 12px; + justify-content: center; + padding-top: 16px; + font-size: 16px; color: red; font-style: italic; - padding-left: 6px; - align-self: center; } ul.tab_panel { background-color: var(--modal-bg); padding-left: 10px; padding-top: 5px; } ul.tab_panel > li { display: inline-block; list-style-type: none; font-size: 13px; font-weight: 600; cursor: pointer; padding: 3px 10px 3px 10px; } ul.tab_panel > li > a { color: #555555; } .save_button { width: 100%; } diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js index 2b63a148a..515d72b93 100644 --- a/web/modals/threads/thread-settings-modal.react.js +++ b/web/modals/threads/thread-settings-modal.react.js @@ -1,181 +1,179 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { deleteThreadActionTypes, changeThreadSettingsActionTypes, } from 'lib/actions/thread-actions'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors'; import { threadInfoSelector } from 'lib/selectors/thread-selectors'; import { threadHasPermission, robotextName } from 'lib/shared/thread-utils'; import { type ThreadInfo, threadTypes, threadPermissions, type ThreadChanges, } from 'lib/types/thread-types'; import Tabs from '../../components/tabs.react'; 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'; type TabType = 'general' | 'privacy' | 'delete'; type BaseProps = { +threadID: string, }; const deleteThreadLoadingStatusSelector = createLoadingStatusSelector( deleteThreadActionTypes, ); const changeThreadSettingsLoadingStatusSelector = createLoadingStatusSelector( changeThreadSettingsActionTypes, ); const ConnectedThreadSettingsModal: React.ComponentType = React.memo( function ConnectedThreadSettingsModal(props) { const changeInProgress = useSelector( state => deleteThreadLoadingStatusSelector(state) === 'loading' || changeThreadSettingsLoadingStatusSelector(state) === 'loading', ); const viewerID = useSelector( state => state.currentUserInfo && state.currentUserInfo.id, ); const userInfos = useSelector(state => state.userStore.userInfos); const threadInfo: ?ThreadInfo = useSelector( state => threadInfoSelector(state)[props.threadID], ); const modalContext = useModalContext(); const [errorMessage, setErrorMessage] = React.useState(''); const [currentTabType, setCurrentTabType] = React.useState( 'general', ); const [queuedChanges, setQueuedChanges] = React.useState( Object.freeze({}), ); const namePlaceholder: string = React.useMemo(() => { invariant(threadInfo, 'threadInfo should exist in namePlaceholder'); return robotextName(threadInfo, viewerID, userInfos); }, [threadInfo, userInfos, viewerID]); const hasPermissionForTab = React.useCallback( (thread: ThreadInfo, tab: TabType) => { if (tab === 'general') { return threadHasPermission( thread, threadPermissions.EDIT_THREAD_NAME, ); } else if (tab === 'privacy') { return threadHasPermission( thread, threadPermissions.EDIT_PERMISSIONS, ); } else if (tab === 'delete') { return threadHasPermission(thread, threadPermissions.DELETE_THREAD); } invariant(false, `invalid tab: ${tab}`); }, [], ); React.useEffect(() => { if ( threadInfo && currentTabType !== 'general' && !hasPermissionForTab(threadInfo, currentTabType) ) { setCurrentTabType('general'); } }, [currentTabType, hasPermissionForTab, threadInfo]); if (!threadInfo) { return (

You no longer have permission to view this thread

); } const inputDisabled = changeInProgress || !hasPermissionForTab(threadInfo, currentTabType); const tabs = [ , ]; // This UI needs to be updated to handle sidebars but we haven't gotten // there yet. We'll probably end up ripping it out anyways, so for now we // are just hiding the privacy tab for any thread that was created as a // sidebar const canSeePrivacyTab = (queuedChanges['parentThreadID'] ?? threadInfo['parentThreadID']) && threadInfo.sourceMessageID && (threadInfo.type === threadTypes.COMMUNITY_OPEN_SUBTHREAD || threadInfo.type === threadTypes.COMMUNITY_SECRET_SUBTHREAD); if (canSeePrivacyTab) { tabs.push( , ); } const canDeleteThread = hasPermissionForTab(threadInfo, 'delete'); if (canDeleteThread) { tabs.push( , ); } return (
{tabs} -
-
{errorMessage}
-
+
{errorMessage}
); }, ); export default ConnectedThreadSettingsModal;