use badge-muted

[lemmy-ui.git] / src / shared / components / post / post-listing.tsx

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index cfaa81ee1ccfebee36ee501b35d95dcfc852343a..137ded9e80626b20ab5b81d264301ec1161df1af 100644 (file)
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -22,7 +22,7 @@ import {
   SavePost,
   TransferCommunity,
 } from "lemmy-js-client";
-import { getExternalHost } from "../../env";
+import { getExternalHost, getHttpBase } from "../../env";
 import { i18n } from "../../i18next";
 import { BanType, PostFormParams, PurgeType } from "../../interfaces";
 import { UserService, WebSocketService } from "../../services";
@@ -32,6 +32,7 @@ import {
   amMod,
   canAdmin,
   canMod,
+  canShare,
   futureDaysToUnixTime,
   hostname,
   isAdmin,
@@ -46,6 +47,7 @@ import {
   numToSI,
   relTags,
   setupTippy,
+  share,
   showScores,
   wsClient,
 } from "../../utils";
@@ -325,13 +327,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           <PersonListing person={post_view.creator} />
 
           {this.creatorIsMod_ && (
-            <span className="mx-1 badge badge-light">{i18n.t("mod")}</span>
+            <span className="mx-1 badge badge-muted">{i18n.t("mod")}</span>
           )}
           {this.creatorIsAdmin_ && (
-            <span className="mx-1 badge badge-light">{i18n.t("admin")}</span>
+            <span className="mx-1 badge badge-muted">{i18n.t("admin")}</span>
           )}
           {post_view.creator.bot_account && (
-            <span className="mx-1 badge badge-light">
+            <span className="mx-1 badge badge-muted">
               {i18n.t("bot_account").toLowerCase()}
             </span>
           )}
@@ -342,13 +344,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             </span>
           )}
         </li>
-        <span className="mx-1 badge badge-secondary">
-          {
-            this.props.allLanguages.find(
-              lang => lang.id === post_view.post.language_id
-            )?.name
-          }
-        </span>
+        {post_view.post.language_id !== 0 && (
+          <span className="mx-1 badge badge-muted">
+            {
+              this.props.allLanguages.find(
+                lang => lang.id === post_view.post.language_id
+              )?.name
+            }
+          </span>
+        )}
         <li className="list-inline-item">•</li>
         {url && !(hostname(url) === getExternalHost()) && (
           <>
@@ -567,9 +571,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
   commentsLine(mobile = false) {
     let post = this.props.post_view.post;
+
     return (
       <div className="d-flex justify-content-start flex-wrap text-muted font-weight-bold mb-1">
         {this.commentsButton}
+        {canShare() && (
+          <button
+            className="btn btn-link"
+            onClick={linkEvent(this, this.handleShare)}
+            type="button"
+          >
+            <Icon icon="share" inline />
+          </button>
+        )}
         {!post.local && (
           <a
             className="btn btn-link btn-animate text-muted py-0"
@@ -1406,6 +1420,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     this.setState({ showEdit: false });
   }
 
+  handleShare(i: PostListing) {
+    const { name, body, id } = i.props.post_view.post;
+    share({
+      title: name,
+      text: body?.slice(0, 50),
+      url: `${getHttpBase()}/post/${id}`,
+    });
+  }
+
   handleShowReportDialog(i: PostListing) {
     i.setState({ showReportDialog: !i.state.showReportDialog });
   }