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

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"

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">

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

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)}

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

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">

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

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 ? (
+          <>
+            <h1 className="h4 mb-4">{I18NextService.i18n.t("instances")}</h1>
             <div className="row">
               <div className="col-md-6">
-              <h5>{I18NextService.i18n.t("linked_instances")}</h5>
+                <h2 className="h5 mb-3">
+                  {I18NextService.i18n.t("linked_instances")}
+                </h2>
                 {this.itemList(instances.linked)}
               </div>
+            </div>
+            <div className="row">
               {instances.allowed && instances.allowed.length > 0 && (
                 <div className="col-md-6">
-                <h5>{I18NextService.i18n.t("allowed_instances")}</h5>
+                  <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">
-                <h5>{I18NextService.i18n.t("blocked_instances")}</h5>
+                  <h2 className="h5 mb-3">
+                    {I18NextService.i18n.t("blocked_instances")}
+                  </h2>
                   {this.itemList(instances.blocked)}
                 </div>
               )}
             </div>
+          </>
         ) : (
           <></>
         );

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">

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"

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,

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")}

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">

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")}

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">

src/shared/components/modlog.tsx

@@ -751,7 +751,8 @@ export class Modlog extends Component<
           path={this.context.router.route.match.url}
         />
 
-        <div>
+        <h1 className="h4 mb-4">{I18NextService.i18n.t("modlog")}</h1>
+
         <div
           className="alert alert-warning text-sm-start text-xs-center"
           role="alert"
@@ -792,15 +793,11 @@ export class Modlog extends Component<
               <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={"ModRemoveCommunity"}>Removing Communities</option>
               <option value={"ModBanFromCommunity"}>
                 Banning From Communities
               </option>
-                <option value={"ModAddCommunity"}>
-                  Adding Mod to Community
-                </option>
+              <option value={"ModAddCommunity"}>Adding Mod to Community</option>
               <option value={"ModTransferCommunity"}>
                 Transferring Communities
               </option>
@@ -832,7 +829,6 @@ export class Modlog extends Component<
         </div>
         {this.renderModlogTable()}
       </div>
-      </div>
     );
   }
 

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,14 +382,16 @@ 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>
+      <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;

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>

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">

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

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

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">

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 />

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}

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

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

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,11 +545,13 @@ export class Search extends Component<any, SearchState> {
       communitiesRes.data.communities.length > 0;
 
     return (
-      <div className="mb-2">
+      <>
+        <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 mb-2"
+              className="form-select d-inline-block w-auto"
               aria-label={I18NextService.i18n.t("type")}
             >
               <option disabled aria-hidden="true">
@@ -560,23 +565,25 @@ export class Search extends Component<any, SearchState> {
                 </option>
               ))}
             </select>
-        <span className="ms-2">
+          </div>
+          <div className="col">
             <ListingTypeSelect
               type_={listingType}
               showLocal={showLocal(this.isoData)}
               showSubscribed
               onChange={this.handleListingTypeChange}
             />
-        </span>
-        <span className="ms-2">
+          </div>
+          <div className="col">
             <SortSelect
               sort={sort}
               onChange={this.handleSortChange}
               hideHot
               hideMostComments
             />
-        </span>
-        <div className="row">
+          </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>
+      </>
     );
   }