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 733c19a12db6e8b7c1b57eb8047111c143167b9c..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,40 +232,70 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
   subscribe() {
     const community_view = this.props.community_view;
-    return (
-      <>
-        {community_view.subscribed == "NotSubscribed" && (
-          <button
-            className="btn btn-secondary d-block mb-2 w-100"
-            onClick={linkEvent(this, this.handleFollowCommunity)}
-          >
-            {this.state.followCommunityLoading ? (
-              <Spinner />
-            ) : (
-              I18NextService.i18n.t("subscribe")
-            )}
-          </button>
-        )}
-      </>
-    );
+
+    if (community_view.subscribed === "NotSubscribed") {
+      return (
+        <button
+          className="btn btn-secondary d-block mb-2 w-100"
+          onClick={linkEvent(this, this.handleFollowCommunity)}
+        >
+          {this.state.followCommunityLoading ? (
+            <Spinner />
+          ) : (
+            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() {
     const { subscribed, blocked } = this.props.community_view;
 
     return (
-      <>
-        {subscribed == "NotSubscribed" && (
-          <button
-            className="btn btn-danger d-block mb-2 w-100"
-            onClick={linkEvent(this, this.handleBlockCommunity)}
-          >
-            {I18NextService.i18n.t(
-              blocked ? "unblock_community" : "block_community"
-            )}
-          </button>
-        )}
-      </>
+      subscribed === "NotSubscribed" && (
+        <button
+          className="btn btn-danger d-block mb-2 w-100"
+          onClick={linkEvent(this, this.handleBlockCommunity)}
+        >
+          {I18NextService.i18n.t(
+            blocked ? "unblock_community" : "block_community"
+          )}
+        </button>
+      )
     );
   }