From 3bfdd7e920d90683169be412fee21a3e6eb8adc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rave=20=7C=20=E5=9B=B3=E6=9B=B8=E9=A4=A8=E7=8C=AB?=
 <raphael.wickihalder@odysee.com>
Date: Wed, 22 Jun 2022 14:23:40 +0200
Subject: [PATCH] Add platforms to share buttons (#1721)

* Add Minds to share buttons

* Add Telegram & WhatsApp

* Adjust style on mobile

* Adjust WhatsApp share url on desktop

* Freeze icon size

* Adjust share buttons
---
 static/app-strings.json             |  1 -
 ui/component/common/icon-custom.jsx | 38 +++++++++++------------
 ui/component/socialShare/view.jsx   | 48 ++++++++++++++++++++---------
 ui/constants/icons.js               |  2 +-
 ui/scss/component/_card.scss        | 20 ++++++++++++
 ui/scss/component/_modal.scss       |  4 +--
 ui/scss/component/section.scss      |  5 +--
 7 files changed, 76 insertions(+), 42 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 68d868828..91e48c73a 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -347,7 +347,6 @@
   "Share on Facebook": "Share on Facebook",
   "Share on Twitter": "Share on Twitter",
   "Share on Telegram": "Share on Telegram",
-  "Share on LinkedIn": "Share on LinkedIn",
   "Share via...": "Share via...",
   "Embed this content": "Embed this content",
   "You currently have the highest bid for this name.": "You currently have the highest bid for this name.",
diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx
index 3c32b8b34..34848fee4 100644
--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@@ -822,6 +822,25 @@ export const icons = {
   //
   // Share modal social icons
   //
+  [ICONS.WHATSAPP]: buildIcon(
+    <g>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 30C0 13.4315 13.4315 0 30 0C46.5685 0 60 13.4315 60 30C60 46.5685 46.5685 60 30 60C13.4315 60 0 46.5685 0 30Z"
+        fill="#25d366"
+      />
+      <g transform="scale(2.5),translate(5.000000, 3.500000)">
+        <path
+          fill="white"
+          d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"
+        />
+      </g>
+    </g>,
+    {
+      viewBox: '0 0 60 60',
+    }
+  ),
   [ICONS.TWITTER]: buildIcon(
     <g>
       <path
@@ -945,25 +964,6 @@ export const icons = {
       viewBox: '0 0 60 60',
     }
   ),
-  [ICONS.LINKEDIN]: buildIcon(
-    <g>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0 30C0 13.4315 13.4315 0 30 0C46.5685 0 60 13.4315 60 30C60 46.5685 46.5685 60 30 60C13.4315 60 0 46.5685 0 30Z"
-        fill="#0077B5"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M21.6484 18.5283C21.6042 16.5255 20.1721 15 17.8462 15C15.5205 15 14 16.5255 14 18.5283C14 20.4897 15.4756 22.0592 17.7581 22.0592H17.8015C20.1721 22.0592 21.6484 20.4897 21.6484 18.5283ZM21.2007 24.8473H14.4021V45.2744H21.2007V24.8473ZM37.8914 24.3677C42.3652 24.3677 45.7192 27.2878 45.7192 33.5621L45.719 45.2745H38.9207V34.3459C38.9207 31.601 37.9368 29.7278 35.4756 29.7278C33.5974 29.7278 32.4785 30.9906 31.9873 32.2102C31.8074 32.6473 31.7634 33.2563 31.7634 33.8668V45.275H24.9639C24.9639 45.275 25.0535 26.7646 24.9639 24.8479H31.7634V27.7412C32.6658 26.3503 34.2817 24.3677 37.8914 24.3677Z"
-        fill="white"
-      />
-    </g>,
-    {
-      viewBox: '0 0 60 60',
-    }
-  ),
   [ICONS.EMBED]: buildIcon(
     <g>
       <path
diff --git a/ui/component/socialShare/view.jsx b/ui/component/socialShare/view.jsx
index 00bdca390..3ec32f597 100644
--- a/ui/component/socialShare/view.jsx
+++ b/ui/component/socialShare/view.jsx
@@ -172,6 +172,13 @@ function SocialShare(props: Props) {
           title={__('Share on Twitter')}
           href={tweetIntent}
         />
+        <Button
+          className="share"
+          iconSize={24}
+          icon={ICONS.FACEBOOK}
+          title={__('Share on Facebook')}
+          href={`https://facebook.com/sharer/sharer.php?u=${encodedLbryURL}`}
+        />
         <Button
           className="share"
           iconSize={24}
@@ -179,7 +186,32 @@ function SocialShare(props: Props) {
           title={__('Share on Reddit')}
           href={`https://reddit.com/submit?url=${encodedLbryURL}`}
         />
-        {IOS && (
+        {!isMobile ? (
+          <Button
+            className="share"
+            iconSize={24}
+            icon={ICONS.WHATSAPP}
+            title={__('Share on WhatsApp')}
+            href={`https://web.whatsapp.com/send?text=${encodedLbryURL}`}
+          />
+        ) : (
+          <Button
+            className="share"
+            iconSize={24}
+            icon={ICONS.WHATSAPP}
+            title={__('Share on WhatsApp')}
+            href={`whatsapp://send?text=${encodedLbryURL}`}
+          />
+        )}
+        {!IOS ? (
+          <Button
+            className="share"
+            iconSize={24}
+            icon={ICONS.TELEGRAM}
+            title={__('Share on Telegram')}
+            href={`https://t.me/share/url?url=${encodedLbryURL}`}
+          />
+        ) : (
           // Only ios client supports share urls
           <Button
             className="share"
@@ -189,20 +221,6 @@ function SocialShare(props: Props) {
             href={`tg://msg_url?url=${encodedLbryURL}&amp;text=text`}
           />
         )}
-        <Button
-          className="share"
-          iconSize={24}
-          icon={ICONS.LINKEDIN}
-          title={__('Share on LinkedIn')}
-          href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedLbryURL}`}
-        />
-        <Button
-          className="share"
-          iconSize={24}
-          icon={ICONS.FACEBOOK}
-          title={__('Share on Facebook')}
-          href={`https://facebook.com/sharer/sharer.php?u=${encodedLbryURL}`}
-        />
         {webShareable && !isCollection && (
           <Button
             className="share"
diff --git a/ui/constants/icons.js b/ui/constants/icons.js
index 37a14f03c..a8570c1d9 100644
--- a/ui/constants/icons.js
+++ b/ui/constants/icons.js
@@ -46,11 +46,11 @@ export const SHARE = 'Share2';
 export const EXTERNAL = 'ExternalLink';
 export const PLAY = 'Play';
 export const PLAY_PREVIOUS = 'Play Previous';
+export const WHATSAPP = 'WhatsApp';
 export const FACEBOOK = 'Facebook';
 export const TWITTER = 'Twitter';
 export const TELEGRAM = 'Telegram';
 export const REDDIT = 'Reddit';
-export const LINKEDIN = 'LinkedIn';
 export const EMBED = 'Embed';
 export const MORE = 'More';
 export const SHARE_LINK = 'ShareLink';
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index d9092732f..7d7f51251 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -89,6 +89,26 @@
       stroke: var(--color-primary-contrast) !important;
     }
   }
+  .section__actions {
+    margin-top: var(--spacing-m);
+  }
+
+  @media (max-width: $breakpoint-small) {
+    .section__actions {
+      .share {
+        .icon {
+          margin-right: var(--spacing-xxs);
+          margin-bottom: var(--spacing-xs);
+        }
+      }
+      &:last-child {
+        margin-right: 0 !important;
+        .icon {
+          margin-right: 0 !important;
+        }
+      }
+    }
+  }
 }
 
 .card--inline {
diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss
index 33a68127c..017042d9b 100644
--- a/ui/scss/component/_modal.scss
+++ b/ui/scss/component/_modal.scss
@@ -37,7 +37,7 @@
       border: 2px solid black;
       border-radius: var(--border-radius);
       .card {
-        padding: var(--spacing-m);
+        padding: var(--spacing-s);
         border: unset;
         .card__title {
           margin-top: var(--spacing-s);
@@ -121,7 +121,7 @@
       .section__actions {
         .button {
           margin-top: var(--spacing-m);
-          margin-right: var(--spacing-m);
+          margin-right: var(--spacing-s);
           padding: 0;
           .button__content {
             .button__label {
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index abf4bb437..795611f7f 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -174,10 +174,7 @@
 
   @media (max-width: $breakpoint-medium) {
     flex-wrap: wrap;
-
-    > * {
-      margin-bottom: var(--spacing-s);
-    }
+    margin-bottom: var(--spacing-s);
   }
 
   [aria-expanded='true'].button--file-action:last-of-type {