Re-arranging subscribed. Removing transparent cards. Fixes #38"

src/shared/components/community.tsx

@@ -243,7 +243,7 @@ export class Community extends Component<any, State> {
               <HtmlTags
                 title={this.documentTitle}
                 path={this.context.router.route.match.url}
-                description={this.state.communityRes.community.title}
+                description={this.state.communityRes.community.description}
                 image={this.state.communityRes.community.icon}
               />
               {this.communityInfo()}

src/shared/components/iframely-card.tsx

@@ -29,7 +29,7 @@ export class IFramelyCard extends Component<
     return (
       <>
         {post.embed_title && !this.state.expanded && (
-          <div class="card bg-transparent border-secondary mt-3 mb-2">
+          <div class="card border-secondary mt-3 mb-2">
             <div class="row">
               <div class="col-12">
                 <div class="card-body">

src/shared/components/main.tsx

@@ -274,28 +274,25 @@ export class Main extends Component<any, MainState> {
       <div>
         {!this.state.loading && (
           <div>
-            <div class="card bg-transparent border-secondary mb-3">
-              <div class="card-header bg-transparent border-secondary">
-                <div class="mb-2">
-                  {this.siteName()}
-                  {this.adminButtons()}
-                </div>
-                <BannerIconHeader banner={this.state.siteRes.site.banner} />
-              </div>
+            <div class="card border-secondary mb-3">
               <div class="card-body">
                 {this.trendingCommunities()}
                 {this.createCommunityButton()}
-                {/* TODO
-                {this.subscribedCommunities()}
-                */}
               </div>
             </div>
 
-            <div class="card bg-transparent border-secondary mb-3">
+            {UserService.Instance.user &&
+              this.state.subscribedCommunities.length > 0 && (
+                <div class="card border-secondary mb-3">
+                  <div class="card-body">{this.subscribedCommunities()}</div>
+                </div>
+              )}
+
+            <div class="card border-secondary mb-3">
               <div class="card-body">{this.sidebar()}</div>
             </div>
 
-            <div class="card bg-transparent border-secondary">
+            <div class="card border-secondary">
               <div class="card-body">{this.landing()}</div>
             </div>
           </div>
@@ -336,34 +333,31 @@ export class Main extends Component<any, MainState> {
 
   subscribedCommunities() {
     return (
-      UserService.Instance.user &&
-      this.state.subscribedCommunities.length > 0 && (
-        <div>
-          <h5>
-            <T i18nKey="subscribed_to_communities">
+      <div>
+        <h5>
+          <T i18nKey="subscribed_to_communities">
+            #
+            <Link className="text-body" to="/communities">
               #
-              <Link className="text-body" to="/communities">
-                #
-              </Link>
-            </T>
-          </h5>
-          <ul class="list-inline">
-            {this.state.subscribedCommunities.map(community => (
-              <li class="list-inline-item">
-                <CommunityLink
-                  community={{
-                    name: community.community_name,
-                    id: community.community_id,
-                    local: community.community_local,
-                    actor_id: community.community_actor_id,
-                    icon: community.community_icon,
-                  }}
-                />
-              </li>
-            ))}
-          </ul>
-        </div>
-      )
+            </Link>
+          </T>
+        </h5>
+        <ul class="list-inline mb-0">
+          {this.state.subscribedCommunities.map(community => (
+            <li class="list-inline-item">
+              <CommunityLink
+                community={{
+                  name: community.community_name,
+                  id: community.community_id,
+                  local: community.community_local,
+                  actor_id: community.community_actor_id,
+                  icon: community.community_icon,
+                }}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
     );
   }
 
@@ -371,7 +365,14 @@ export class Main extends Component<any, MainState> {
     return (
       <div>
         {!this.state.showEditSite ? (
-          this.siteInfo()
+          <div>
+            <div class="mb-2">
+              {this.siteName()}
+              {this.adminButtons()}
+            </div>
+            <BannerIconHeader banner={this.state.siteRes.site.banner} />
+            {this.siteInfo()}
+          </div>
         ) : (
           <SiteForm
             site={this.state.siteRes.site}
@@ -431,31 +432,31 @@ export class Main extends Component<any, MainState> {
   badges() {
     return (
       <ul class="my-2 list-inline">
-        <li className="list-inline-item badge badge-light">
+        <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_online', { count: this.state.siteRes.online })}
         </li>
-        <li className="list-inline-item badge badge-light">
+        <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_of_users', {
             count: this.state.siteRes.site.number_of_users,
           })}
         </li>
-        <li className="list-inline-item badge badge-light">
+        <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_of_communities', {
             count: this.state.siteRes.site.number_of_communities,
           })}
         </li>
-        <li className="list-inline-item badge badge-light">
+        <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_of_posts', {
             count: this.state.siteRes.site.number_of_posts,
           })}
         </li>
-        <li className="list-inline-item badge badge-light">
+        <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_of_comments', {
             count: this.state.siteRes.site.number_of_comments,
           })}
         </li>
         <li className="list-inline-item">
-          <Link className="badge badge-light" to="/modlog">
+          <Link className="badge badge-secondary" to="/modlog">
             {i18n.t('modlog')}
           </Link>
         </li>

src/shared/components/markdown-textarea.tsx

@@ -133,7 +133,7 @@ export class MarkdownTextArea extends Component<
             />
             {this.state.previewMode && (
               <div
-                className="card bg-transparent border-secondary card-body md-div"
+                className="card border-secondary card-body md-div"
                 dangerouslySetInnerHTML={mdToHtml(this.state.content)}
               />
             )}

src/shared/components/sidebar.tsx

@@ -73,14 +73,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   sidebar() {
     return (
       <div>
-        <div class="card bg-transparent border-secondary mb-3">
-          <div class="card-header bg-transparent border-secondary">
+        <div class="card border-secondary mb-3">
+          <div class="card-body">
             {this.communityTitle()}
             {this.adminButtons()}
+            {this.subscribe()}
+            {this.createPost()}
           </div>
-          <div class="card-body">{this.subscribes()}</div>
         </div>
-        <div class="card bg-transparent border-secondary mb-3">
+        <div class="card border-secondary mb-3">
           <div class="card-body">
             {this.description()}
             {this.badges()}
@@ -99,19 +100,31 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           {this.props.showIcon && (
             <BannerIconHeader icon={community.icon} banner={community.banner} />
           )}
-          <span>{community.title}</span>
+          <span class="mr-2">{community.title}</span>
+          {community.subscribed && (
+            <a
+              class="btn btn-secondary btn-sm mr-2"
+              href="#"
+              onClick={linkEvent(community.id, this.handleUnsubscribe)}
+            >
+              <svg class="text-success mr-1 icon icon-inline">
+                <use xlinkHref="#icon-check"></use>
+              </svg>
+              {i18n.t('joined')}
+            </a>
+          )}
           {community.removed && (
-            <small className="ml-2 text-muted font-italic">
+            <small className="mr-2 text-muted font-italic">
               {i18n.t('removed')}
             </small>
           )}
           {community.deleted && (
-            <small className="ml-2 text-muted font-italic">
+            <small className="mr-2 text-muted font-italic">
               {i18n.t('deleted')}
             </small>
           )}
           {community.nsfw && (
-            <small className="ml-2 text-muted font-italic">
+            <small className="mr-2 text-muted font-italic">
               {i18n.t('nsfw')}
             </small>
           )}
@@ -131,38 +144,38 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     let community = this.props.community;
     return (
       <ul class="my-1 list-inline">
-        <li className="list-inline-item badge badge-light">
+        <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_online', { count: this.props.online })}
         </li>
-        <li className="list-inline-item badge badge-light">
+        <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_of_subscribers', {
             count: community.number_of_subscribers,
           })}
         </li>
-        <li className="list-inline-item badge badge-light">
+        <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_of_posts', {
             count: community.number_of_posts,
           })}
         </li>
-        <li className="list-inline-item badge badge-light">
+        <li className="list-inline-item badge badge-secondary">
           {i18n.t('number_of_comments', {
             count: community.number_of_comments,
           })}
         </li>
         <li className="list-inline-item">
-          <Link className="badge badge-light" to="/communities">
+          <Link className="badge badge-secondary" to="/communities">
             {community.category_name}
           </Link>
         </li>
         <li className="list-inline-item">
           <Link
-            className="badge badge-light"
+            className="badge badge-secondary"
             to={`/modlog/community/${this.props.community.id}`}
           >
             {i18n.t('modlog')}
           </Link>
         </li>
-        <li className="list-inline-item badge badge-light">
+        <li className="list-inline-item badge badge-secondary">
           <CommunityLink community={community} realLink />
         </li>
       </ul>
@@ -191,29 +204,29 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     );
   }
 
-  subscribes() {
+  createPost() {
     let community = this.props.community;
     return (
-      <div class="d-flex flex-wrap">
+      community.subscribed && (
         <Link
-          className={`btn btn-secondary flex-fill mr-2 mb-2 ${
+          className={`btn btn-secondary btn-block mb-2 ${
             community.deleted || community.removed ? 'no-click' : ''
           }`}
           to={`/create_post?community=${community.name}`}
         >
           {i18n.t('create_a_post')}
         </Link>
-        {community.subscribed ? (
+      )
+    );
+  }
+
+  subscribe() {
+    let community = this.props.community;
+    return (
+      <div class="mb-2">
+        {!community.subscribed && (
           <a
-            class="btn btn-secondary flex-fill mb-2"
-            href="#"
-            onClick={linkEvent(community.id, this.handleUnsubscribe)}
-          >
-            {i18n.t('unsubscribe')}
-          </a>
-        ) : (
-          <a
-            class="btn btn-secondary flex-fill mb-2"
+            class="btn btn-secondary btn-block"
             href="#"
             onClick={linkEvent(community.id, this.handleSubscribe)}
           >
@@ -380,7 +393,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     this.setState(this.state);
   }
 
-  handleDeleteClick(i: Sidebar) {
+  handleDeleteClick(i: Sidebar, event: any) {
     event.preventDefault();
     let deleteForm: DeleteCommunityForm = {
       edit_id: i.props.community.id,
@@ -410,7 +423,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     i.setState(i.state);
   }
 
-  handleUnsubscribe(communityId: number) {
+  handleUnsubscribe(communityId: number, event: any) {
     event.preventDefault();
     let form: FollowCommunityForm = {
       community_id: communityId,
@@ -419,7 +432,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     WebSocketService.Instance.followCommunity(form);
   }
 
-  handleSubscribe(communityId: number) {
+  handleSubscribe(communityId: number, event: any) {
     event.preventDefault();
     let form: FollowCommunityForm = {
       community_id: communityId,
@@ -464,7 +477,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     i.setState(i.state);
   }
 
-  handleModRemoveSubmit(i: Sidebar) {
+  handleModRemoveSubmit(i: Sidebar, event: any) {
     event.preventDefault();
     let removeForm: RemoveCommunityForm = {
       edit_id: i.props.community.id,

src/shared/components/user.tsx

@@ -422,7 +422,7 @@ export class User extends Component<any, UserState> {
               <div className="flex-grow-1 unselectable pointer mx-2"></div>
               {this.isCurrentUser ? (
                 <button
-                  class="d-flex align-self-start btn btn-secondary ml-2"
+                  class="d-flex align-self-start btn btn-secondary mr-2"
                   onClick={linkEvent(this, this.handleLogoutClick)}
                 >
                   {i18n.t('logout')}
@@ -430,7 +430,7 @@ export class User extends Component<any, UserState> {
               ) : (
                 <>
                   <a
-                    className={`d-flex align-self-start btn btn-secondary ml-2 ${
+                    className={`d-flex align-self-start btn btn-secondary mr-2 ${
                       !user.matrix_user_id && 'invisible'
                     }`}
                     target="_blank"
@@ -440,7 +440,7 @@ export class User extends Component<any, UserState> {
                     {i18n.t('send_secure_message')}
                   </a>
                   <Link
-                    class="d-flex align-self-start btn btn-secondary ml-2"
+                    className={'d-flex align-self-start btn btn-secondary'}
                     to={`/create_private_message/recipient/${user.id}`}
                   >
                     {i18n.t('send_message')}
@@ -489,7 +489,7 @@ export class User extends Component<any, UserState> {
   userSettings() {
     return (
       <div>
-        <div class="card bg-transparent border-secondary mb-3">
+        <div class="card border-secondary mb-3">
           <div class="card-body">
             <h5>{i18n.t('settings')}</h5>
             <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
@@ -834,7 +834,7 @@ export class User extends Component<any, UserState> {
     return (
       <div>
         {this.state.userRes.moderates.length > 0 && (
-          <div class="card bg-transparent border-secondary mb-3">
+          <div class="card border-secondary mb-3">
             <div class="card-body">
               <h5>{i18n.t('moderates')}</h5>
               <ul class="list-unstyled mb-0">
@@ -857,7 +857,7 @@ export class User extends Component<any, UserState> {
     return (
       <div>
         {this.state.userRes.follows.length > 0 && (
-          <div class="card bg-transparent border-secondary mb-3">
+          <div class="card border-secondary mb-3">
             <div class="card-body">
               <h5>{i18n.t('subscribed')}</h5>
               <ul class="list-unstyled mb-0">