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

[lemmy-ui.git] / src / shared / components / community / sidebar.tsx

diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index d5cf2cb65c5bed9c4992fcb2c67f3ccbe76d8989..9f7eff2a87fff925bd8d7e422a8cd09a8a6a18fc 100644 (file)
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -166,43 +166,16 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
   communityTitle() {
     const community = this.props.community_view.community;
-    const subscribed = this.props.community_view.subscribed;
+
     return (
       <div>
-        <h5 className="mb-0">
+        <h2 className="h5 mb-0">
           {this.props.showIcon && !community.removed && (
             <BannerIconHeader icon={community.icon} banner={community.banner} />
           )}
           <span className="me-2">
             <CommunityLink community={community} hideAvatar />
           </span>
-          {subscribed === "Subscribed" && (
-            <button
-              className="btn btn-secondary btn-sm me-2"
-              onClick={linkEvent(this, this.handleUnfollowCommunity)}
-            >
-              {this.state.followCommunityLoading ? (
-                <Spinner />
-              ) : (
-                <>
-                  <Icon icon="check" classes="icon-inline text-success me-1" />
-                  {I18NextService.i18n.t("joined")}
-                </>
-              )}
-            </button>
-          )}
-          {subscribed === "Pending" && (
-            <button
-              className="btn btn-warning me-2"
-              onClick={linkEvent(this, this.handleUnfollowCommunity)}
-            >
-              {this.state.followCommunityLoading ? (
-                <Spinner />
-              ) : (
-                I18NextService.i18n.t("subscribe_pending")
-              )}
-            </button>
-          )}
           {community.removed && (
             <small className="me-2 text-muted fst-italic">
               {I18NextService.i18n.t("removed")}
@@ -218,7 +191,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               {I18NextService.i18n.t("nsfw")}
             </small>
           )}
-        </h5>
+        </h2>
         <CommunityLink
           community={community}
           realLink
@@ -259,8 +232,9 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
   subscribe() {
     const community_view = this.props.community_view;
-    return (
-      community_view.subscribed === "NotSubscribed" && (
+
+    if (community_view.subscribed === "NotSubscribed") {
+      return (
         <button
           className="btn btn-secondary d-block mb-2 w-100"
           onClick={linkEvent(this, this.handleFollowCommunity)}
@@ -271,8 +245,41 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             I18NextService.i18n.t("subscribe")
           )}
         </button>
-      )
-    );
+      );
+    }
+
+    if (community_view.subscribed === "Subscribed") {
+      return (
+        <button
+          className="btn btn-secondary d-block mb-2 w-100"
+          onClick={linkEvent(this, this.handleUnfollowCommunity)}
+        >
+          {this.state.followCommunityLoading ? (
+            <Spinner />
+          ) : (
+            <>
+              <Icon icon="check" classes="icon-inline me-1" />
+              {I18NextService.i18n.t("joined")}
+            </>
+          )}
+        </button>
+      );
+    }
+
+    if (community_view.subscribed === "Pending") {
+      return (
+        <button
+          className="btn btn-warning d-block mb-2 w-100"
+          onClick={linkEvent(this, this.handleUnfollowCommunity)}
+        >
+          {this.state.followCommunityLoading ? (
+            <Spinner />
+          ) : (
+            I18NextService.i18n.t("subscribe_pending")
+          )}
+        </button>
+      );
+    }
   }
 
   blockCommunity() {