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 @@ -1,38 +1,12 @@ 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; } 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 @@ -100,65 +100,59 @@ return ( <form method="POST"> - <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={ - (queuedChanges.type ?? threadInfo.type) === - 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={ - (queuedChanges.type ?? threadInfo.type) === - 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 className={css.form_title}>Thread type</div> + <div> + <input + type="radio" + name="edit-thread-type" + id="edit-thread-open" + value={COMMUNITY_OPEN_SUBTHREAD} + checked={ + (queuedChanges.type ?? threadInfo.type) === COMMUNITY_OPEN_SUBTHREAD + } + onChange={onChangeThreadType} + disabled={inputDisabled} + /> + <div> + <label htmlFor="edit-thread-open"> + Open + <span className={css.form_enum_description}> + {threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD]} + </span> + </label> + </div> + <div> + <input + type="radio" + name="edit-thread-type" + id="edit-thread-closed" + value={COMMUNITY_SECRET_SUBTHREAD} + checked={ + (queuedChanges.type ?? threadInfo.type) === + COMMUNITY_SECRET_SUBTHREAD + } + onChange={onChangeThreadType} + disabled={inputDisabled} + /> + <div> + <label htmlFor="edit-thread-closed"> + Secret + <span className={css.form_enum_description}> + {threadTypeDescriptions[COMMUNITY_SECRET_SUBTHREAD]} + </span> + </label> </div> </div> - <Button - type="submit" - onClick={onSubmit} - disabled={inputDisabled || !changeQueued} - className={css.save_button} - > - Save - </Button> </div> + + <Button + type="submit" + onClick={onSubmit} + disabled={inputDisabled || !changeQueued} + className={css.save_button} + > + Save + </Button> </form> ); }