Merge branch 'main' into fix/fix-badges-spacing-componentize

diff --git a/src/shared/components/common/searchable-select.tsx b/src/shared/components/common/searchable-select.tsx
index 801cd867496b547461776cc5d47b75869fc67185..ef59a8c247c286a5616b87e215c76793a97ce210 100644 (file)
--- a/src/shared/components/common/searchable-select.tsx
+++ b/src/shared/components/common/searchable-select.tsx
@@ -102,7 +102,7 @@ export class SearchableSelect extends Component<
     const { searchText, selectedIndex, loadingEllipses } = this.state;
 
     return (
-      <div className="searchable-select dropdown">
+      <div className="searchable-select dropdown col-12 col-sm-auto flex-grow-1">
         <button
           id={id}
           type="button"

diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx
index 8d86d9d8349985f5ff140ba2d6ff9b8ad851f7e5..7510bb1ae7248301e5c3ca452ad84cddeee1bbe5 100644 (file)
--- a/src/shared/components/community/communities.tsx
+++ b/src/shared/components/community/communities.tsx
@@ -102,7 +102,7 @@ export class Communities extends Component<any, CommunitiesState> {
         const { listingType, page } = this.getCommunitiesQueryParams();
         return (
           <div>
-            <h1 className="h4">
+            <h1 className="h4 mb-4">
               {I18NextService.i18n.t("list_of_communities")}
             </h1>
             <div className="row g-2 justify-content-between">

diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 879db3e3920d0d36853f0a12a01b66b460286bb0..c00380ab2db9ff1b1258cadde8bd0f25a6d2efb8 100644 (file)
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -485,7 +485,7 @@ export class Community extends Component<
       community && (
         <div className="mb-2">
           <BannerIconHeader banner={community.banner} icon={community.icon} />
-          <h5 className="mb-0 overflow-wrap-anywhere">{community.title}</h5>
+          <h1 className="h4 mb-0 overflow-wrap-anywhere">{community.title}</h1>
           <CommunityLink
             community={community}
             realLink

diff --git a/src/shared/components/community/create-community.tsx b/src/shared/components/community/create-community.tsx
index 2ce5af5a67cf01037872e9693b2e6290d34273bd..a1a9a97a929c9b9864bf4539950ba19a5e9a9f9c 100644 (file)
--- a/src/shared/components/community/create-community.tsx
+++ b/src/shared/components/community/create-community.tsx
@@ -39,7 +39,9 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
         />
         <div className="row">
           <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>{I18NextService.i18n.t("create_community")}</h5>
+            <h1 className="h4 mb-4">
+              {I18NextService.i18n.t("create_community")}
+            </h1>
             <CommunityForm
               onUpsertCommunity={this.handleCommunityCreate}
               enableNsfw={enableNsfw(this.state.siteRes)}

diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 0b6f8e1bf22433cc5726b435bbec23ac587b7a4d..9f7eff2a87fff925bd8d7e422a8cd09a8a6a18fc 100644 (file)
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -169,7 +169,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
     return (
       <div>
-        <h5 className="mb-0">
+        <h2 className="h5 mb-0">
           {this.props.showIcon && !community.removed && (
             <BannerIconHeader icon={community.icon} banner={community.banner} />
           )}
@@ -191,7 +191,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               {I18NextService.i18n.t("nsfw")}
             </small>
           )}
-        </h5>
+        </h2>
         <CommunityLink
           community={community}
           realLink

diff --git a/src/shared/components/home/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx
index 76877d8471aed2c4348f8cf14e22a1114abb5a39..b56dc42cb6e33d993928e1dd3bcd041f10efdddb 100644 (file)
--- a/src/shared/components/home/admin-settings.tsx
+++ b/src/shared/components/home/admin-settings.tsx
@@ -135,6 +135,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                   role="tabpanel"
                   id="site-tab-pane"
                 >
+                  <h1 className="h4 mb-4">
+                    {I18NextService.i18n.t("site_config")}
+                  </h1>
                   <div className="row">
                     <div className="col-12 col-md-6">
                       <SiteForm
@@ -149,6 +152,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                     </div>
                     <div className="col-12 col-md-6">
                       {this.admins()}
+                      <hr />
                       {this.bannedUsers()}
                     </div>
                   </div>
@@ -249,7 +253,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
   admins() {
     return (
       <>
-        <h5>{capitalizeFirstLetter(I18NextService.i18n.t("admins"))}</h5>
+        <h2 className="h5">
+          {capitalizeFirstLetter(I18NextService.i18n.t("admins"))}
+        </h2>
         <ul className="list-unstyled">
           {this.state.siteRes.admins.map(admin => (
             <li key={admin.person.id} className="list-inline-item">
@@ -289,7 +295,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
         const bans = this.state.bannedRes.data.banned;
         return (
           <>
-            <h5>{I18NextService.i18n.t("banned_users")}</h5>
+            <h2 className="h5">{I18NextService.i18n.t("banned_users")}</h2>
             <ul className="list-unstyled">
               {bans.map(banned => (
                 <li key={banned.person.id} className="list-inline-item">

diff --git a/src/shared/components/home/emojis-form.tsx b/src/shared/components/home/emojis-form.tsx
index 3ad8cc05a77742923a1a978b615673b14271d3a0..cd20ed6432517c09ecf90deb362f4c37662632c9 100644 (file)
--- a/src/shared/components/home/emojis-form.tsx
+++ b/src/shared/components/home/emojis-form.tsx
@@ -77,7 +77,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <h5 className="col-12">{I18NextService.i18n.t("custom_emojis")}</h5>
+        <h1 className="h4 mb-4">{I18NextService.i18n.t("custom_emojis")}</h1>
         {customEmojisLookup.size > 0 && (
           <div>
             <EmojiMart

diff --git a/src/shared/components/home/instances.tsx b/src/shared/components/home/instances.tsx
index b54c96af332dd045f7ab142e46c881a82e6123c9..0d6748a799390cd85c904d751bec8b650051a086 100644 (file)
--- a/src/shared/components/home/instances.tsx
+++ b/src/shared/components/home/instances.tsx
@@ -85,24 +85,35 @@ export class Instances extends Component<any, InstancesState> {
       case "success": {
         const instances = this.state.instancesRes.data.federated_instances;
         return instances ? (
-          <div className="row">
-            <div className="col-md-6">
-              <h5>{I18NextService.i18n.t("linked_instances")}</h5>
-              {this.itemList(instances.linked)}
-            </div>
-            {instances.allowed && instances.allowed.length > 0 && (
-              <div className="col-md-6">
-                <h5>{I18NextService.i18n.t("allowed_instances")}</h5>
-                {this.itemList(instances.allowed)}
-              </div>
-            )}
-            {instances.blocked && instances.blocked.length > 0 && (
+          <>
+            <h1 className="h4 mb-4">{I18NextService.i18n.t("instances")}</h1>
+            <div className="row">
               <div className="col-md-6">
-                <h5>{I18NextService.i18n.t("blocked_instances")}</h5>
-                {this.itemList(instances.blocked)}
+                <h2 className="h5 mb-3">
+                  {I18NextService.i18n.t("linked_instances")}
+                </h2>
+                {this.itemList(instances.linked)}
               </div>
-            )}
-          </div>
+            </div>
+            <div className="row">
+              {instances.allowed && instances.allowed.length > 0 && (
+                <div className="col-md-6">
+                  <h2 className="h5 mb-3">
+                    {I18NextService.i18n.t("allowed_instances")}
+                  </h2>
+                  {this.itemList(instances.allowed)}
+                </div>
+              )}
+              {instances.blocked && instances.blocked.length > 0 && (
+                <div className="col-md-6">
+                  <h2 className="h5 mb-3">
+                    {I18NextService.i18n.t("blocked_instances")}
+                  </h2>
+                  {this.itemList(instances.blocked)}
+                </div>
+              )}
+            </div>
+          </>
         ) : (
           <></>
         );

diff --git a/src/shared/components/home/login-reset.tsx b/src/shared/components/home/login-reset.tsx
index c96255d54295c18e5cd1ed798f34e93a99f14f4a..7d1d00231ae0afc79a0e484693f47a10e9cc3037 100644 (file)
--- a/src/shared/components/home/login-reset.tsx
+++ b/src/shared/components/home/login-reset.tsx
@@ -59,9 +59,9 @@ export class LoginReset extends Component<any, State> {
   loginResetForm() {
     return (
       <form onSubmit={linkEvent(this, this.handlePasswordReset)}>
-        <h5>
+        <h1 className="h4 mb-4">
           {capitalizeFirstLetter(I18NextService.i18n.t("forgot_password"))}
-        </h5>
+        </h1>
 
         <div className="form-group row">
           <label className="col-form-label">

diff --git a/src/shared/components/home/login.tsx b/src/shared/components/home/login.tsx
index 397288e888dbb9a2d0b6c5b1b7db4503d92c9bd3..ffc372b3a14f0a1d8681022847112372dbaf225a 100644 (file)
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@@ -69,7 +69,7 @@ export class Login extends Component<any, State> {
     return (
       <div>
         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
-          <h5>{I18NextService.i18n.t("login")}</h5>
+          <h1 className="h4 mb-4">{I18NextService.i18n.t("login")}</h1>
           <div className="mb-3 row">
             <label
               className="col-sm-2 col-form-label"

diff --git a/src/shared/components/home/rate-limit-form.tsx b/src/shared/components/home/rate-limit-form.tsx
index 9003962a93fed223fdfd35d640200a0061e705ad..78229da0da88fbef42b7ec81f6ba04e64fab8498 100644 (file)
--- a/src/shared/components/home/rate-limit-form.tsx
+++ b/src/shared/components/home/rate-limit-form.tsx
@@ -145,7 +145,9 @@ export default class RateLimitsForm extends Component<
         className="rate-limit-form"
         onSubmit={linkEvent(this, submitRateLimitForm)}
       >
-        <h5>{I18NextService.i18n.t("rate_limit_header")}</h5>
+        <h1 className="h4 mb-4">
+          {I18NextService.i18n.t("rate_limit_header")}
+        </h1>
         <Tabs
           tabs={rateLimitTypes.map(rateLimitType => ({
             key: rateLimitType,

diff --git a/src/shared/components/home/setup.tsx b/src/shared/components/home/setup.tsx
index 966e6d492fc5e202df2c9abeeb1094b89f5260f2..943fd5f8e9d225052e308713cc6ef29bbea629f6 100644 (file)
--- a/src/shared/components/home/setup.tsx
+++ b/src/shared/components/home/setup.tsx
@@ -63,7 +63,9 @@ export class Setup extends Component<any, State> {
         <Helmet title={this.documentTitle} />
         <div className="row">
           <div className="col-12 offset-lg-3 col-lg-6">
-            <h3>{I18NextService.i18n.t("lemmy_instance_setup")}</h3>
+            <h1 className="h4 mb-4">
+              {I18NextService.i18n.t("lemmy_instance_setup")}
+            </h1>
             {!this.state.doneRegisteringUser ? (
               this.registerUser()
             ) : (
@@ -84,7 +86,7 @@ export class Setup extends Component<any, State> {
   registerUser() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h5>{I18NextService.i18n.t("setup_admin")}</h5>
+        <h2 className="h5 mb-3">{I18NextService.i18n.t("setup_admin")}</h2>
         <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="username">
             {I18NextService.i18n.t("username")}

diff --git a/src/shared/components/home/signup.tsx b/src/shared/components/home/signup.tsx
index 516cd43fb2282d09f31264b8b74ab3e38674efd4..1e1f636af39bb0d247167cd430037ff71443895f 100644 (file)
--- a/src/shared/components/home/signup.tsx
+++ b/src/shared/components/home/signup.tsx
@@ -144,7 +144,7 @@ export class Signup extends Component<any, State> {
         className="was-validated"
         onSubmit={linkEvent(this, this.handleRegisterSubmit)}
       >
-        <h5>{this.titleName(siteView)}</h5>
+        <h1 className="h4 mb-4">{this.titleName(siteView)}</h1>
 
         {this.isLemmyMl && (
           <div className="mb-3 row">

diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx
index 36859225a4db2c4521d8ba622757714f3c10b655..cffeb07fdf432d3410334e9908e66f19d9749da7 100644 (file)
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@@ -136,11 +136,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             !this.state.submitted
           }
         />
-        <h5>{`${
+        <h2 className="h5">{`${
           siteSetup
             ? capitalizeFirstLetter(I18NextService.i18n.t("edit"))
             : capitalizeFirstLetter(I18NextService.i18n.t("setup"))
-        } ${I18NextService.i18n.t("your_site")}`}</h5>
+        } ${I18NextService.i18n.t("your_site")}`}</h2>
         <div className="mb-3 row">
           <label className="col-12 col-form-label" htmlFor="create-site-name">
             {I18NextService.i18n.t("name")}

diff --git a/src/shared/components/home/tagline-form.tsx b/src/shared/components/home/tagline-form.tsx
index f7cf99a664098538266af62b06200828fc709046..c933ffe8a2f85441507b4917bb09176b018c5238 100644 (file)
--- a/src/shared/components/home/tagline-form.tsx
+++ b/src/shared/components/home/tagline-form.tsx
@@ -37,7 +37,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <h5 className="col-12">{I18NextService.i18n.t("taglines")}</h5>
+        <h1 className="h4 mb-4">{I18NextService.i18n.t("taglines")}</h1>
         <div className="table-responsive col-12">
           <table id="taglines_table" className="table table-sm table-hover">
             <thead className="pointer">

diff --git a/src/shared/components/modlog.tsx b/src/shared/components/modlog.tsx
index f12f5b63cec8eebbd9de4411e1cce080d3b44d9b..5b47f92493ede3ea7a299cb00b1c633a755329b5 100644 (file)
--- a/src/shared/components/modlog.tsx
+++ b/src/shared/components/modlog.tsx
@@ -751,87 +751,83 @@ export class Modlog extends Component<
           path={this.context.router.route.match.url}
         />
 
-        <div>
-          <div
-            className="alert alert-warning text-sm-start text-xs-center"
-            role="alert"
-          >
-            <Icon
-              icon="alert-triangle"
-              inline
-              classes="me-sm-2 mx-auto d-sm-inline d-block"
-            />
-            <T i18nKey="modlog_content_warning" class="d-inline">
-              #<strong>#</strong>#
-            </T>
-          </div>
-          {this.state.communityRes.state === "success" && (
-            <h5>
-              <Link
-                className="text-body"
-                to={`/c/${this.state.communityRes.data.community_view.community.name}`}
-              >
-                /c/{this.state.communityRes.data.community_view.community.name}{" "}
-              </Link>
-              <span>{I18NextService.i18n.t("modlog")}</span>
-            </h5>
-          )}
-          <div className="row mb-2">
-            <div className="col-sm-6">
-              <select
-                value={actionType}
-                onChange={linkEvent(this, this.handleFilterActionChange)}
-                className="form-select"
-                aria-label="action"
-              >
-                <option disabled aria-hidden="true">
-                  {I18NextService.i18n.t("filter_by_action")}
-                </option>
-                <option value={"All"}>{I18NextService.i18n.t("all")}</option>
-                <option value={"ModRemovePost"}>Removing Posts</option>
-                <option value={"ModLockPost"}>Locking Posts</option>
-                <option value={"ModFeaturePost"}>Featuring Posts</option>
-                <option value={"ModRemoveComment"}>Removing Comments</option>
-                <option value={"ModRemoveCommunity"}>
-                  Removing Communities
-                </option>
-                <option value={"ModBanFromCommunity"}>
-                  Banning From Communities
-                </option>
-                <option value={"ModAddCommunity"}>
-                  Adding Mod to Community
-                </option>
-                <option value={"ModTransferCommunity"}>
-                  Transferring Communities
-                </option>
-                <option value={"ModAdd"}>Adding Mod to Site</option>
-                <option value={"ModBan"}>Banning From Site</option>
-              </select>
-            </div>
+        <h1 className="h4 mb-4">{I18NextService.i18n.t("modlog")}</h1>
+
+        <div
+          className="alert alert-warning text-sm-start text-xs-center"
+          role="alert"
+        >
+          <Icon
+            icon="alert-triangle"
+            inline
+            classes="me-sm-2 mx-auto d-sm-inline d-block"
+          />
+          <T i18nKey="modlog_content_warning" class="d-inline">
+            #<strong>#</strong>#
+          </T>
+        </div>
+        {this.state.communityRes.state === "success" && (
+          <h5>
+            <Link
+              className="text-body"
+              to={`/c/${this.state.communityRes.data.community_view.community.name}`}
+            >
+              /c/{this.state.communityRes.data.community_view.community.name}{" "}
+            </Link>
+            <span>{I18NextService.i18n.t("modlog")}</span>
+          </h5>
+        )}
+        <div className="row mb-2">
+          <div className="col-sm-6">
+            <select
+              value={actionType}
+              onChange={linkEvent(this, this.handleFilterActionChange)}
+              className="form-select"
+              aria-label="action"
+            >
+              <option disabled aria-hidden="true">
+                {I18NextService.i18n.t("filter_by_action")}
+              </option>
+              <option value={"All"}>{I18NextService.i18n.t("all")}</option>
+              <option value={"ModRemovePost"}>Removing Posts</option>
+              <option value={"ModLockPost"}>Locking Posts</option>
+              <option value={"ModFeaturePost"}>Featuring Posts</option>
+              <option value={"ModRemoveComment"}>Removing Comments</option>
+              <option value={"ModRemoveCommunity"}>Removing Communities</option>
+              <option value={"ModBanFromCommunity"}>
+                Banning From Communities
+              </option>
+              <option value={"ModAddCommunity"}>Adding Mod to Community</option>
+              <option value={"ModTransferCommunity"}>
+                Transferring Communities
+              </option>
+              <option value={"ModAdd"}>Adding Mod to Site</option>
+              <option value={"ModBan"}>Banning From Site</option>
+            </select>
           </div>
-          <div className="row mb-2">
+        </div>
+        <div className="row mb-2">
+          <Filter
+            filterType="user"
+            onChange={this.handleUserChange}
+            onSearch={this.handleSearchUsers}
+            value={userId}
+            options={userSearchOptions}
+            loading={loadingUserSearch}
+          />
+          {!this.isoData.site_res.site_view.local_site
+            .hide_modlog_mod_names && (
             <Filter
-              filterType="user"
-              onChange={this.handleUserChange}
-              onSearch={this.handleSearchUsers}
-              value={userId}
-              options={userSearchOptions}
-              loading={loadingUserSearch}
+              filterType="mod"
+              onChange={this.handleModChange}
+              onSearch={this.handleSearchMods}
+              value={modId}
+              options={modSearchOptions}
+              loading={loadingModSearch}
             />
-            {!this.isoData.site_res.site_view.local_site
-              .hide_modlog_mod_names && (
-              <Filter
-                filterType="mod"
-                onChange={this.handleModChange}
-                onSearch={this.handleSearchMods}
-                value={modId}
-                options={modSearchOptions}
-                loading={loadingModSearch}
-              />
-            )}
-          </div>
-          {this.renderModlogTable()}
+          )}
         </div>
+        {this.renderModlogTable()}
       </div>
     );
   }

diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index c414e8be28502b1bdf4782f1d7d6b8340f9f7b8c..28bb07166752a6dd30f50e758a0fe9c8165d09a8 100644 (file)
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -221,7 +221,7 @@ export class Inbox extends Component<any, InboxState> {
               title={this.documentTitle}
               path={this.context.router.route.match.url}
             />
-            <h5 className="mb-2">
+            <h1 className="h4 mb-4">
               {I18NextService.i18n.t("inbox")}
               {inboxRss && (
                 <small>
@@ -235,10 +235,10 @@ export class Inbox extends Component<any, InboxState> {
                   />
                 </small>
               )}
-            </h5>
+            </h1>
             {this.hasUnreads && (
               <button
-                className="btn btn-secondary mb-2"
+                className="btn btn-secondary mb-2 mb-sm-3"
                 onClick={linkEvent(this, this.handleMarkAllAsRead)}
               >
                 {this.state.markAllAsReadRes.state == "loading" ? (
@@ -284,7 +284,7 @@ export class Inbox extends Component<any, InboxState> {
 
   unreadOrAllRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap">
         <label
           className={`btn btn-outline-secondary pointer
             ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
@@ -319,7 +319,7 @@ export class Inbox extends Component<any, InboxState> {
 
   messageTypeRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap">
         <label
           className={`btn btn-outline-secondary pointer
             ${this.state.messageType == MessageType.All && "active"}
@@ -382,13 +382,15 @@ export class Inbox extends Component<any, InboxState> {
 
   selects() {
     return (
-      <div className="mb-2">
-        <span className="me-3">{this.unreadOrAllRadios()}</span>
-        <span className="me-3">{this.messageTypeRadios()}</span>
-        <CommentSortSelect
-          sort={this.state.sort}
-          onChange={this.handleSortChange}
-        />
+      <div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
+        <div className="col">{this.unreadOrAllRadios()}</div>
+        <div className="col">{this.messageTypeRadios()}</div>
+        <div className="col">
+          <CommentSortSelect
+            sort={this.state.sort}
+            onChange={this.handleSortChange}
+          />
+        </div>
       </div>
     );
   }
@@ -541,9 +543,9 @@ export class Inbox extends Component<any, InboxState> {
       this.state.messagesRes.state == "loading"
     ) {
       return (
-        <h5>
+        <h1 className="h4">
           <Spinner large />
-        </h5>
+        </h1>
       );
     } else {
       return (
@@ -556,9 +558,9 @@ export class Inbox extends Component<any, InboxState> {
     switch (this.state.repliesRes.state) {
       case "loading":
         return (
-          <h5>
+          <h1 className="h4">
             <Spinner large />
-          </h5>
+          </h1>
         );
       case "success": {
         const replies = this.state.repliesRes.data.replies;
@@ -603,9 +605,9 @@ export class Inbox extends Component<any, InboxState> {
     switch (this.state.mentionsRes.state) {
       case "loading":
         return (
-          <h5>
+          <h1 className="h4">
             <Spinner large />
-          </h5>
+          </h1>
         );
       case "success": {
         const mentions = this.state.mentionsRes.data.mentions;
@@ -653,9 +655,9 @@ export class Inbox extends Component<any, InboxState> {
     switch (this.state.messagesRes.state) {
       case "loading":
         return (
-          <h5>
+          <h1 className="h4">
             <Spinner large />
-          </h5>
+          </h1>
         );
       case "success": {
         const messages = this.state.messagesRes.data.private_messages;

diff --git a/src/shared/components/person/password-change.tsx b/src/shared/components/person/password-change.tsx
index dd85e05b3a1961e9f91975ac74185f8db8489291..68a22f6293bc0718ad8d8fdf37f172213e770c8c 100644 (file)
--- a/src/shared/components/person/password-change.tsx
+++ b/src/shared/components/person/password-change.tsx
@@ -47,7 +47,9 @@ export class PasswordChange extends Component<any, State> {
         />
         <div className="row">
           <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>{I18NextService.i18n.t("password_change")}</h5>
+            <h1 className="h4 mb-4">
+              {I18NextService.i18n.t("password_change")}
+            </h1>
             {this.passwordChangeForm()}
           </div>
         </div>

diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index cc334db5ee5449381c02fad9fa08981e879ae754..ec7538ba8a2cc2e6da05d7aff7a189b266e59dbf 100644 (file)
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@ -137,7 +137,7 @@ const getCommunitiesListing = (
   communityViews.length > 0 && (
     <div className="card border-secondary mb-3">
       <div className="card-body">
-        <h5>{I18NextService.i18n.t(translationKey)}</h5>
+        <h2 className="h5">{I18NextService.i18n.t(translationKey)}</h2>
         <ul className="list-unstyled mb-0">
           {communityViews.map(({ community }) => (
             <li key={community.id}>
@@ -472,7 +472,7 @@ export class Profile extends Component<
               <div className="mb-0 d-flex flex-wrap">
                 <div>
                   {pv.person.display_name && (
-                    <h5 className="mb-0">{pv.person.display_name}</h5>
+                    <h1 className="h4 mb-4">{pv.person.display_name}</h1>
                   )}
                   <ul className="list-inline mb-2">
                     <li className="list-inline-item">

diff --git a/src/shared/components/person/registration-applications.tsx b/src/shared/components/person/registration-applications.tsx
index d9eb6ad0a65ed1d9f858f90a688c377f47e51685..a26dd79e5e2c9e54784c085ac82a2a73f9a7f54f 100644 (file)
--- a/src/shared/components/person/registration-applications.tsx
+++ b/src/shared/components/person/registration-applications.tsx
@@ -100,9 +100,9 @@ export class RegistrationApplications extends Component<
                 title={this.documentTitle}
                 path={this.context.router.route.match.url}
               />
-              <h5 className="mb-2">
+              <h1 className="h4 mb-4">
                 {I18NextService.i18n.t("registration_applications")}
-              </h5>
+              </h1>
               {this.selects()}
               {this.applicationList(apps)}
               <Paginator

diff --git a/src/shared/components/person/reports.tsx b/src/shared/components/person/reports.tsx
index 8f5eaf366b6dcf0d99022ae2d8a13d455b85762e..c16b17ac33e13ac4d1b7067ec5e1dace5249eea7 100644 (file)
--- a/src/shared/components/person/reports.tsx
+++ b/src/shared/components/person/reports.tsx
@@ -152,7 +152,7 @@ export class Reports extends Component<any, ReportsState> {
               title={this.documentTitle}
               path={this.context.router.route.match.url}
             />
-            <h5 className="mb-2">{I18NextService.i18n.t("reports")}</h5>
+            <h1 className="h4 mb-4">{I18NextService.i18n.t("reports")}</h1>
             {this.selects()}
             {this.section}
             <Paginator

diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index 6ed11ef8cd48d16b00bcff7084e4222744774325..dfdf79c4bf03a574b6b02d4bb14040b129c597c6 100644 (file)
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@@ -316,7 +316,7 @@ export class Settings extends Component<any, SettingsState> {
   changePasswordHtmlForm() {
     return (
       <>
-        <h5>{I18NextService.i18n.t("change_password")}</h5>
+        <h2 className="h5">{I18NextService.i18n.t("change_password")}</h2>
         <form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
           <div className="mb-3 row">
             <label className="col-sm-5 col-form-label" htmlFor="user-password">
@@ -409,7 +409,7 @@ export class Settings extends Component<any, SettingsState> {
   blockedUsersList() {
     return (
       <>
-        <h5>{I18NextService.i18n.t("blocked_users")}</h5>
+        <h2 className="h5">{I18NextService.i18n.t("blocked_users")}</h2>
         <ul className="list-unstyled mb-0">
           {this.state.personBlocks.map(pb => (
             <li key={pb.target.id}>
@@ -453,7 +453,7 @@ export class Settings extends Component<any, SettingsState> {
   blockedCommunitiesList() {
     return (
       <>
-        <h5>{I18NextService.i18n.t("blocked_communities")}</h5>
+        <h2 className="h5">{I18NextService.i18n.t("blocked_communities")}</h2>
         <ul className="list-unstyled mb-0">
           {this.state.communityBlocks.map(cb => (
             <li key={cb.community.id}>
@@ -484,7 +484,7 @@ export class Settings extends Component<any, SettingsState> {
 
     return (
       <>
-        <h5>{I18NextService.i18n.t("settings")}</h5>
+        <h2 className="h5">{I18NextService.i18n.t("settings")}</h2>
         <form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
           <div className="mb-3 row">
             <label className="col-sm-3 col-form-label" htmlFor="display-name">

diff --git a/src/shared/components/person/verify-email.tsx b/src/shared/components/person/verify-email.tsx
index 1800c3f25753fc255b3807591cde390ea34941a5..66e595966b9fc27cfdcfb3e8e854d5fadc2559d3 100644 (file)
--- a/src/shared/components/person/verify-email.tsx
+++ b/src/shared/components/person/verify-email.tsx
@@ -60,7 +60,7 @@ export class VerifyEmail extends Component<any, State> {
         />
         <div className="row">
           <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>{I18NextService.i18n.t("verify_email")}</h5>
+            <h1 className="h4 mb-4">{I18NextService.i18n.t("verify_email")}</h1>
             {this.state.verifyRes.state == "loading" && (
               <h5>
                 <Spinner large />

diff --git a/src/shared/components/post/create-post.tsx b/src/shared/components/post/create-post.tsx
index fe941830c6ab648ef9d05647568ef8081d2906ca..36bc99d23a38bb65823bb60007255b327ed0f928 100644 (file)
--- a/src/shared/components/post/create-post.tsx
+++ b/src/shared/components/post/create-post.tsx
@@ -170,7 +170,9 @@ export class CreatePost extends Component<
               id="createPostForm"
               className="col-12 col-lg-6 offset-lg-3 mb-4"
             >
-              <h1 className="h4">{I18NextService.i18n.t("create_post")}</h1>
+              <h1 className="h4 mb-4">
+                {I18NextService.i18n.t("create_post")}
+              </h1>
               <PostForm
                 onCreate={this.handlePostCreate}
                 params={locationState}

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 29004078d1f67a8537d63acd7d4cb7f199014846..a4ce5db54af50d8ac60a6b5289034b126087a557 100644 (file)
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -466,7 +466,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     return (
       <>
         <div className="post-title overflow-hidden">
-          <h5 className="d-inline">
+          <h1 className="h5 d-inline">
             {url && this.props.showBody ? (
               <a
                 className={
@@ -482,7 +482,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             ) : (
               this.postLink
             )}
-          </h5>
+          </h1>
 
           {/**
            * If there is (a) a URL and an embed title, or (b) a post body, and

diff --git a/src/shared/components/private_message/create-private-message.tsx b/src/shared/components/private_message/create-private-message.tsx
index 840a442524dc3efdcef4ec7629fffdd71d35c414..f2b84f04c73130d55073b3770adcc8992dda9561 100644 (file)
--- a/src/shared/components/private_message/create-private-message.tsx
+++ b/src/shared/components/private_message/create-private-message.tsx
@@ -115,7 +115,7 @@ export class CreatePrivateMessage extends Component<
         return (
           <div className="row">
             <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-              <h1 className="h4">
+              <h1 className="h4 mb-4">
                 {I18NextService.i18n.t("create_private_message")}
               </h1>
               <PrivateMessageForm

diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 5360066c2a6bf0941cd1f3c02bcfbbc06cfcd453..e9aaaa1b3761c97b37fcb821ce6930ad7cfa8c35 100644 (file)
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -181,8 +181,8 @@ const Filter = ({
   loading: boolean;
 }) => {
   return (
-    <div className="mb-3 col-sm-6">
-      <label className="col-form-label me-2" htmlFor={`${filterType}-filter`}>
+    <div className="col-sm-6">
+      <label className="mb-1" htmlFor={`${filterType}-filter`}>
         {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
       </label>
       <SearchableSelect
@@ -467,7 +467,7 @@ export class Search extends Component<any, SearchState> {
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <h5>{I18NextService.i18n.t("search")}</h5>
+        <h1 className="h4 mb-4">{I18NextService.i18n.t("search")}</h1>
         {this.selects}
         {this.searchForm}
         {this.displayResults(type)}
@@ -500,8 +500,11 @@ export class Search extends Component<any, SearchState> {
 
   get searchForm() {
     return (
-      <form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
-        <div className="col-auto">
+      <form
+        className="row gx-2 gy-3"
+        onSubmit={linkEvent(this, this.handleSearchSubmit)}
+      >
+        <div className="col-auto flex-grow-1 flex-sm-grow-0">
           <input
             type="text"
             className="form-control me-2 mb-2 col-sm-8"
@@ -542,41 +545,45 @@ export class Search extends Component<any, SearchState> {
       communitiesRes.data.communities.length > 0;
 
     return (
-      <div className="mb-2">
-        <select
-          value={type}
-          onChange={linkEvent(this, this.handleTypeChange)}
-          className="form-select d-inline-block w-auto mb-2"
-          aria-label={I18NextService.i18n.t("type")}
-        >
-          <option disabled aria-hidden="true">
-            {I18NextService.i18n.t("type")}
-          </option>
-          {searchTypes.map(option => (
-            <option value={option} key={option}>
-              {I18NextService.i18n.t(
-                option.toString().toLowerCase() as NoOptionI18nKeys
-              )}
-            </option>
-          ))}
-        </select>
-        <span className="ms-2">
-          <ListingTypeSelect
-            type_={listingType}
-            showLocal={showLocal(this.isoData)}
-            showSubscribed
-            onChange={this.handleListingTypeChange}
-          />
-        </span>
-        <span className="ms-2">
-          <SortSelect
-            sort={sort}
-            onChange={this.handleSortChange}
-            hideHot
-            hideMostComments
-          />
-        </span>
-        <div className="row">
+      <>
+        <div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
+          <div className="col">
+            <select
+              value={type}
+              onChange={linkEvent(this, this.handleTypeChange)}
+              className="form-select d-inline-block w-auto"
+              aria-label={I18NextService.i18n.t("type")}
+            >
+              <option disabled aria-hidden="true">
+                {I18NextService.i18n.t("type")}
+              </option>
+              {searchTypes.map(option => (
+                <option value={option} key={option}>
+                  {I18NextService.i18n.t(
+                    option.toString().toLowerCase() as NoOptionI18nKeys
+                  )}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="col">
+            <ListingTypeSelect
+              type_={listingType}
+              showLocal={showLocal(this.isoData)}
+              showSubscribed
+              onChange={this.handleListingTypeChange}
+            />
+          </div>
+          <div className="col">
+            <SortSelect
+              sort={sort}
+              onChange={this.handleSortChange}
+              hideHot
+              hideMostComments
+            />
+          </div>
+        </div>
+        <div className="row gy-2 gx-4 mb-3">
           {hasCommunities && (
             <Filter
               filterType="community"
@@ -596,7 +603,7 @@ export class Search extends Component<any, SearchState> {
             loading={searchCreatorLoading}
           />
         </div>
-      </div>
+      </>
     );
   }