From d258edfbafba7b08fc5667417c55c0a325de89cf Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 12:31:56 -0400
Subject: [PATCH 1/7] fix: Small cleanup to search/inbox controls

---
 .../components/common/searchable-select.tsx   |   2 +-
 src/shared/components/person/inbox.tsx        |  40 +++---
 src/shared/components/search.tsx              | 124 ++++++++++--------
 3 files changed, 90 insertions(+), 76 deletions(-)

diff --git a/src/shared/components/common/searchable-select.tsx b/src/shared/components/common/searchable-select.tsx
index 801cd867..ef59a8c2 100644
--- 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/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index c414e8be..982044b8 100644
--- 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,7 +235,7 @@ export class Inbox extends Component<any, InboxState> {
                   />
                 </small>
               )}
-            </h5>
+            </h1>
             {this.hasUnreads && (
               <button
                 className="btn btn-secondary mb-2"
@@ -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 g-2">
+        <div className="col-auto">{this.unreadOrAllRadios()}</div>
+        <div className="col-auto">{this.messageTypeRadios()}</div>
+        <div className="col-auto">
+          <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/search.tsx b/src/shared/components/search.tsx
index 5360066c..8a71d60e 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -181,23 +181,28 @@ const Filter = ({
   loading: boolean;
 }) => {
   return (
-    <div className="mb-3 col-sm-6">
-      <label className="col-form-label me-2" htmlFor={`${filterType}-filter`}>
-        {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
-      </label>
-      <SearchableSelect
-        id={`${filterType}-filter`}
-        options={[
-          {
-            label: I18NextService.i18n.t("all"),
-            value: "0",
-          },
-        ].concat(options)}
-        value={value ?? 0}
-        onSearch={onSearch}
-        onChange={onChange}
-        loading={loading}
-      />
+    <div className="col-sm-6">
+      <div className="row gx-2">
+        <label
+          className="col-12 col-sm-auto col-form-label flex-grow-0"
+          htmlFor={`${filterType}-filter`}
+        >
+          {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
+        </label>
+        <SearchableSelect
+          id={`${filterType}-filter`}
+          options={[
+            {
+              label: I18NextService.i18n.t("all"),
+              value: "0",
+            },
+          ].concat(options)}
+          value={value ?? 0}
+          onSearch={onSearch}
+          onChange={onChange}
+          loading={loading}
+        />
+      </div>
     </div>
   );
 };
@@ -467,7 +472,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 +505,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 +550,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 gx-2 gy-3 mb-2 mb-sm-3">
+          <div className="col-auto">
+            <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-auto">
+            <ListingTypeSelect
+              type_={listingType}
+              showLocal={showLocal(this.isoData)}
+              showSubscribed
+              onChange={this.handleListingTypeChange}
+            />
+          </div>
+          <div className="col-auto">
+            <SortSelect
+              sort={sort}
+              onChange={this.handleSortChange}
+              hideHot
+              hideMostComments
+            />
+          </div>
+        </div>
+        <div className="row gx-5 gy-2 mb-3">
           {hasCommunities && (
             <Filter
               filterType="community"
@@ -596,7 +608,7 @@ export class Search extends Component<any, SearchState> {
             loading={searchCreatorLoading}
           />
         </div>
-      </div>
+      </>
     );
   }
 

From 350b1b28eeb1fd2f26e5d9c14515c9d964ba0d95 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 13:22:03 -0400
Subject: [PATCH 2/7] fix: Add bottom margin to inbox controls

---
 src/shared/components/person/inbox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index 982044b8..6500e961 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -382,7 +382,7 @@ export class Inbox extends Component<any, InboxState> {
 
   selects() {
     return (
-      <div className="row g-2">
+      <div className="row g-2 mb-2">
         <div className="col-auto">{this.unreadOrAllRadios()}</div>
         <div className="col-auto">{this.messageTypeRadios()}</div>
         <div className="col-auto">

From 2c56c2e59d7dcbc6a9e35de75ca3aaa511b1268e Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 13:26:07 -0400
Subject: [PATCH 3/7] fix: Fix row gap on search options

---
 src/shared/components/search.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 8a71d60e..b010fcec 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -551,7 +551,7 @@ export class Search extends Component<any, SearchState> {
 
     return (
       <>
-        <div className="row gx-2 gy-3 mb-2 mb-sm-3">
+        <div className="row g-2 mb-2 mb-sm-3">
           <div className="col-auto">
             <select
               value={type}

From 302c6b496d8e6f0ae420449c30dfdaadeae3f98b Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 13:36:00 -0400
Subject: [PATCH 4/7] fix: Fix some gaps in search filters

---
 src/shared/components/search.tsx | 39 ++++++++++++++------------------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index b010fcec..c7a8cbaf 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -182,27 +182,22 @@ const Filter = ({
 }) => {
   return (
     <div className="col-sm-6">
-      <div className="row gx-2">
-        <label
-          className="col-12 col-sm-auto col-form-label flex-grow-0"
-          htmlFor={`${filterType}-filter`}
-        >
-          {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
-        </label>
-        <SearchableSelect
-          id={`${filterType}-filter`}
-          options={[
-            {
-              label: I18NextService.i18n.t("all"),
-              value: "0",
-            },
-          ].concat(options)}
-          value={value ?? 0}
-          onSearch={onSearch}
-          onChange={onChange}
-          loading={loading}
-        />
-      </div>
+      <label className="mb-1" htmlFor={`${filterType}-filter`}>
+        {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
+      </label>
+      <SearchableSelect
+        id={`${filterType}-filter`}
+        options={[
+          {
+            label: I18NextService.i18n.t("all"),
+            value: "0",
+          },
+        ].concat(options)}
+        value={value ?? 0}
+        onSearch={onSearch}
+        onChange={onChange}
+        loading={loading}
+      />
     </div>
   );
 };
@@ -588,7 +583,7 @@ export class Search extends Component<any, SearchState> {
             />
           </div>
         </div>
-        <div className="row gx-5 gy-2 mb-3">
+        <div className="row gy-2 gx-4 mb-3">
           {hasCommunities && (
             <Filter
               filterType="community"

From 93d0bc44ea8e6b13cda4a3ae0773606e2305cd99 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 13:43:28 -0400
Subject: [PATCH 5/7] fix: Simplify row classes a bit

---
 src/shared/components/person/inbox.tsx | 8 ++++----
 src/shared/components/search.tsx       | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index 6500e961..294ba556 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -382,10 +382,10 @@ export class Inbox extends Component<any, InboxState> {
 
   selects() {
     return (
-      <div className="row g-2 mb-2">
-        <div className="col-auto">{this.unreadOrAllRadios()}</div>
-        <div className="col-auto">{this.messageTypeRadios()}</div>
-        <div className="col-auto">
+      <div className="row row-cols-auto g-2 mb-2">
+        <div className="col">{this.unreadOrAllRadios()}</div>
+        <div className="col">{this.messageTypeRadios()}</div>
+        <div className="col">
           <CommentSortSelect
             sort={this.state.sort}
             onChange={this.handleSortChange}
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index c7a8cbaf..3774d0a1 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -546,8 +546,8 @@ export class Search extends Component<any, SearchState> {
 
     return (
       <>
-        <div className="row g-2 mb-2 mb-sm-3">
-          <div className="col-auto">
+        <div className="row row-cols-auto g-2 mb-2 mb-sm-3">
+          <div className="col">
             <select
               value={type}
               onChange={linkEvent(this, this.handleTypeChange)}
@@ -566,7 +566,7 @@ export class Search extends Component<any, SearchState> {
               ))}
             </select>
           </div>
-          <div className="col-auto">
+          <div className="col">
             <ListingTypeSelect
               type_={listingType}
               showLocal={showLocal(this.isoData)}
@@ -574,7 +574,7 @@ export class Search extends Component<any, SearchState> {
               onChange={this.handleListingTypeChange}
             />
           </div>
-          <div className="col-auto">
+          <div className="col">
             <SortSelect
               sort={sort}
               onChange={this.handleSortChange}

From a48c20a772c40e519f64863e3d7edb2985f2a31c Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 14:29:56 -0400
Subject: [PATCH 6/7] fix: Fix heading levels

---
 .../components/community/communities.tsx      |   2 +-
 src/shared/components/community/community.tsx |   2 +-
 .../components/community/create-community.tsx |   4 +-
 src/shared/components/community/sidebar.tsx   |   4 +-
 src/shared/components/home/admin-settings.tsx |  10 +-
 src/shared/components/home/emojis-form.tsx    |   2 +-
 src/shared/components/home/instances.tsx      |  45 +++--
 src/shared/components/home/login-reset.tsx    |   4 +-
 src/shared/components/home/login.tsx          |   2 +-
 .../components/home/rate-limit-form.tsx       |   4 +-
 src/shared/components/home/setup.tsx          |   6 +-
 src/shared/components/home/signup.tsx         |   2 +-
 src/shared/components/home/site-form.tsx      |   4 +-
 src/shared/components/home/tagline-form.tsx   |   2 +-
 src/shared/components/modlog.tsx              | 156 +++++++++---------
 src/shared/components/person/inbox.tsx        |   4 +-
 .../components/person/password-change.tsx     |   4 +-
 src/shared/components/person/profile.tsx      |   4 +-
 .../person/registration-applications.tsx      |   4 +-
 src/shared/components/person/reports.tsx      |   2 +-
 src/shared/components/person/settings.tsx     |   8 +-
 src/shared/components/person/verify-email.tsx |   2 +-
 src/shared/components/post/create-post.tsx    |   4 +-
 src/shared/components/post/post-listing.tsx   |   4 +-
 .../create-private-message.tsx                |   2 +-
 src/shared/components/search.tsx              |   2 +-
 26 files changed, 156 insertions(+), 133 deletions(-)

diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx
index 8d86d9d8..7510bb1a 100644
--- 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 879db3e3..c00380ab 100644
--- 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 2ce5af5a..a1a9a97a 100644
--- 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 fcb0dad7..066754f5 100644
--- 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 76877d84..b56dc42c 100644
--- 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 4108e7a4..997b60fd 100644
--- 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 b54c96af..0d6748a7 100644
--- 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)}
+          <>
+            <h1 className="h4 mb-4">{I18NextService.i18n.t("instances")}</h1>
+            <div className="row">
+              <div className="col-md-6">
+                <h2 className="h5 mb-3">
+                  {I18NextService.i18n.t("linked_instances")}
+                </h2>
+                {this.itemList(instances.linked)}
+              </div>
             </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 && (
-              <div className="col-md-6">
-                <h5>{I18NextService.i18n.t("blocked_instances")}</h5>
-                {this.itemList(instances.blocked)}
-              </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 c96255d5..7d1d0023 100644
--- 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 397288e8..ffc372b3 100644
--- 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 9003962a..78229da0 100644
--- 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 966e6d49..943fd5f8 100644
--- 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 516cd43f..1e1f636a 100644
--- 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 45857a0d..fe47238d 100644
--- 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 f7cf99a6..c933ffe8 100644
--- 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 f12f5b63..5b47f924 100644
--- 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>
-          </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="mod"
-                onChange={this.handleModChange}
-                onSearch={this.handleSearchMods}
-                value={modId}
-                options={modSearchOptions}
-                loading={loadingModSearch}
-              />
-            )}
-          </div>
-          {this.renderModlogTable()}
+        <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>
+        <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="mod"
+              onChange={this.handleModChange}
+              onSearch={this.handleSearchMods}
+              value={modId}
+              options={modSearchOptions}
+              loading={loadingModSearch}
+            />
+          )}
+        </div>
+        {this.renderModlogTable()}
       </div>
     );
   }
diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index c414e8be..f9ce1840 100644
--- 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,7 +235,7 @@ export class Inbox extends Component<any, InboxState> {
                   />
                 </small>
               )}
-            </h5>
+            </h1>
             {this.hasUnreads && (
               <button
                 className="btn btn-secondary mb-2"
diff --git a/src/shared/components/person/password-change.tsx b/src/shared/components/person/password-change.tsx
index dd85e05b..68a22f62 100644
--- 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 ad7c5fe5..86b01d58 100644
--- 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 d9eb6ad0..a26dd79e 100644
--- 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 8f5eaf36..c16b17ac 100644
--- 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 6ed11ef8..dfdf79c4 100644
--- 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 1800c3f2..66e59596 100644
--- 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 fe941830..36bc99d2 100644
--- 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 462087f3..8e792ec6 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -478,7 +478,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={
@@ -494,7 +494,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             ) : (
               this.postLink
             )}
-          </h5>
+          </h1>
 
           {/**
            * If there is a URL, an embed title, and we were not told to show the
diff --git a/src/shared/components/private_message/create-private-message.tsx b/src/shared/components/private_message/create-private-message.tsx
index 840a4425..f2b84f04 100644
--- 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 5360066c..ec07fe4c 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -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)}

From b8c2e1e2cae82cd5b81be28b25ad7e388a48611b Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 14:42:30 -0400
Subject: [PATCH 7/7] fix: Fix up filter row gaps and margins a little

---
 src/shared/components/person/inbox.tsx | 4 ++--
 src/shared/components/search.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index 294ba556..28bb0716 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -238,7 +238,7 @@ export class Inbox extends Component<any, InboxState> {
             </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" ? (
@@ -382,7 +382,7 @@ export class Inbox extends Component<any, InboxState> {
 
   selects() {
     return (
-      <div className="row row-cols-auto g-2 mb-2">
+      <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">
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 3774d0a1..e9aaaa1b 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -546,7 +546,7 @@ export class Search extends Component<any, SearchState> {
 
     return (
       <>
-        <div className="row row-cols-auto g-2 mb-2 mb-sm-3">
+        <div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
           <div className="col">
             <select
               value={type}