debounce,
elementUrl,
emDash,
- enableNsfw,
fetchCommunities,
fetchThemeList,
fetchUsers,
onChange: (choice: Choice) => void;
loading: boolean;
}) => (
- <div className="form-group row">
+ <div className="mb-3 row">
<label
className="col-md-4 col-form-label"
htmlFor={`block-${filterType}-filter`}
render() {
return (
- <div className="container-lg">
+ <div className="person-settings container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
<>
<h5>{i18n.t("change_password")}</h5>
<form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
- <div className="form-group row">
+ <div className="mb-3 row">
<label className="col-sm-5 col-form-label" htmlFor="user-password">
{i18n.t("new_password")}
</label>
/>
</div>
</div>
- <div className="form-group row">
+ <div className="mb-3 row">
<label
className="col-sm-5 col-form-label"
htmlFor="user-verify-password"
/>
</div>
</div>
- <div className="form-group row">
+ <div className="mb-3 row">
<label
className="col-sm-5 col-form-label"
htmlFor="user-old-password"
/>
</div>
</div>
- <div className="form-group">
- <button type="submit" className="btn btn-block btn-secondary mr-4">
+ <div className="input-group mb-3">
+ <button
+ type="submit"
+ className="btn d-block btn-secondary me-4 w-100"
+ >
{this.state.changePasswordRes.state === "loading" ? (
<Spinner />
) : (
<>
<h5>{i18n.t("settings")}</h5>
<form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
- <div className="form-group row">
- <label className="col-sm-5 col-form-label" htmlFor="display-name">
+ <div className="mb-3 row">
+ <label className="col-sm-3 col-form-label" htmlFor="display-name">
{i18n.t("display_name")}
</label>
- <div className="col-sm-7">
+ <div className="col-sm-9">
<input
id="display-name"
type="text"
/>
</div>
</div>
- <div className="form-group row">
+ <div className="mb-3 row">
<label className="col-sm-3 col-form-label" htmlFor="user-bio">
{i18n.t("bio")}
</label>
/>
</div>
</div>
- <div className="form-group row">
+ <div className="mb-3 row">
<label className="col-sm-3 col-form-label" htmlFor="user-email">
{i18n.t("email")}
</label>
/>
</div>
</div>
- <div className="form-group row">
- <label className="col-sm-5 col-form-label" htmlFor="matrix-user-id">
+ <div className="mb-3 row">
+ <label className="col-sm-3 col-form-label" htmlFor="matrix-user-id">
<a href={elementUrl} rel={relTags}>
{i18n.t("matrix_user_id")}
</a>
</label>
- <div className="col-sm-7">
+ <div className="col-sm-9">
<input
id="matrix-user-id"
type="text"
/>
</div>
</div>
- <div className="form-group row">
- <label className="col-sm-3">{i18n.t("avatar")}</label>
+ <div className="mb-3 row">
+ <label className="col-sm-3 col-form-label">
+ {i18n.t("avatar")}
+ </label>
<div className="col-sm-9">
<ImageUploadForm
uploadTitle={i18n.t("upload_avatar")}
/>
</div>
</div>
- <div className="form-group row">
- <label className="col-sm-3">{i18n.t("banner")}</label>
+ <div className="mb-3 row">
+ <label className="col-sm-3 col-form-label">
+ {i18n.t("banner")}
+ </label>
<div className="col-sm-9">
<ImageUploadForm
uploadTitle={i18n.t("upload_banner")}
/>
</div>
</div>
- <div className="form-group row">
- <label className="col-sm-3" htmlFor="user-language">
+ <div className="mb-3 row">
+ <label className="col-sm-3 form-label" htmlFor="user-language">
{i18n.t("interface_language")}
</label>
<div className="col-sm-9">
id="user-language"
value={this.state.saveUserSettingsForm.interface_language}
onChange={linkEvent(this, this.handleInterfaceLangChange)}
- className="custom-select w-auto"
+ className="form-select d-inline-block w-auto"
>
<option disabled aria-hidden="true">
{i18n.t("interface_language")}
showSite
onChange={this.handleDiscussionLanguageChange}
/>
- <div className="form-group row">
- <label className="col-sm-3" htmlFor="user-theme">
+ <div className="mb-3 row">
+ <label className="col-sm-3 col-form-label" htmlFor="user-theme">
{i18n.t("theme")}
</label>
<div className="col-sm-9">
id="user-theme"
value={this.state.saveUserSettingsForm.theme}
onChange={linkEvent(this, this.handleThemeChange)}
- className="custom-select w-auto"
+ className="form-select d-inline-block w-auto"
>
<option disabled aria-hidden="true">
{i18n.t("theme")}
</select>
</div>
</div>
- <form className="form-group row">
- <label className="col-sm-3">{i18n.t("type")}</label>
+ <form className="mb-3 row">
+ <label className="col-sm-3 col-form-label">{i18n.t("type")}</label>
<div className="col-sm-9">
<ListingTypeSelect
type_={
/>
</div>
</form>
- <form className="form-group row">
- <label className="col-sm-3">{i18n.t("sort_type")}</label>
+ <form className="mb-3 row">
+ <label className="col-sm-3 col-form-label">
+ {i18n.t("sort_type")}
+ </label>
<div className="col-sm-9">
<SortSelect
sort={
/>
</div>
</form>
- {enableNsfw(this.state.siteRes) && (
- <div className="form-group">
- <div className="form-check">
- <input
- className="form-check-input"
- id="user-show-nsfw"
- type="checkbox"
- checked={this.state.saveUserSettingsForm.show_nsfw}
- onChange={linkEvent(this, this.handleShowNsfwChange)}
- />
- <label className="form-check-label" htmlFor="user-show-nsfw">
- {i18n.t("show_nsfw")}
- </label>
- </div>
+ <div className="input-group mb-3">
+ <div className="form-check">
+ <input
+ className="form-check-input"
+ id="user-show-nsfw"
+ type="checkbox"
+ checked={this.state.saveUserSettingsForm.show_nsfw}
+ onChange={linkEvent(this, this.handleShowNsfwChange)}
+ />
+ <label className="form-check-label" htmlFor="user-show-nsfw">
+ {i18n.t("show_nsfw")}
+ </label>
</div>
- )}
- <div className="form-group">
+ </div>
+ <div className="input-group mb-3">
<div className="form-check">
<input
className="form-check-input"
</label>
</div>
</div>
- <div className="form-group">
+ <div className="input-group mb-3">
<div className="form-check">
<input
className="form-check-input"
</label>
</div>
</div>
- <div className="form-group">
+ <div className="input-group mb-3">
<div className="form-check">
<input
className="form-check-input"
</label>
</div>
</div>
- <div className="form-group">
+ <div className="input-group mb-3">
<div className="form-check">
<input
className="form-check-input"
</label>
</div>
</div>
- <div className="form-group">
+ <div className="input-group mb-3">
<div className="form-check">
<input
className="form-check-input"
</label>
</div>
</div>
- <div className="form-group">
+ <div className="input-group mb-3">
<div className="form-check">
<input
className="form-check-input"
</label>
</div>
</div>
- <div className="form-group">
+ <div className="input-group mb-3">
<div className="form-check">
<input
className="form-check-input"
</div>
</div>
{this.totpSection()}
- <div className="form-group">
- <button type="submit" className="btn btn-block btn-secondary mr-4">
+ <div className="input-group mb-3">
+ <button type="submit" className="btn d-block btn-secondary me-4">
{this.state.saveRes.state === "loading" ? (
<Spinner />
) : (
</button>
</div>
<hr />
- <div className="form-group">
+ <div className="input-group mb-3">
<button
- className="btn btn-block btn-danger"
+ className="btn d-block btn-danger"
onClick={linkEvent(
this,
this.handleDeleteAccountShowConfirmToggle
className="form-control my-2"
/>
<button
- className="btn btn-danger mr-4"
+ className="btn btn-danger me-4"
disabled={!this.state.deleteAccountForm.password}
onClick={linkEvent(this, this.handleDeleteAccount)}
>
return (
<>
{!totpUrl && (
- <div className="form-group">
+ <div className="input-group mb-3">
<div className="form-check">
<input
className="form-check-input"
{i18n.t("two_factor_link")}
</a>
</div>
- <div className="form-group">
+ <div className="input-group mb-3">
<div className="form-check">
<input
className="form-check-input"