ShareModal: Change "..." icon to "Links"

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Publish Page improvements to prevent accidental overwrites of existing claims _community pr!_ ([#4416](https://github.com/lbryio/lbry-desktop/pull/4416))
 - Option to remove abandoned claims from Blocked Channels page _community pr!_ ([#4433](https://github.com/lbryio/lbry-desktop/pull/4433))
 - New channel create/edit page ([#4445](https://github.com/lbryio/lbry-desktop/pull/4445))
+- Add dialog to copy various types of links for a claim _community pr!_ ([#4474](https://github.com/lbryio/lbry-desktop/pull/4474))
 
 ### Changed
 

static/app-strings.json

@@ -1291,5 +1291,9 @@
   "Awesome! You just followed your first first channel.": "Awesome! You just followed your first first channel.",
   "After submitting, it will take a few minutes for your changes to be live for everyone.": "After submitting, it will take a few minutes for your changes to be live for everyone.",
   "Anything": "Anything",
-  "Paid": "Paid"
+  "Paid": "Paid",
+  "Start at": "Start at",
+  "Links": "Links",
+  "LBRY URL": "LBRY URL",
+  "Download Link": "Download Link"
 }

ui/component/common/icon-custom.jsx

@@ -620,6 +620,21 @@ export const icons = {
       viewBox: '0 0 60 60',
     }
   ),
+  [ICONS.SHARE_LINK]: 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="#eee"
+      />
+      <path d="M28 30a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="black" />
+      <path d="M32 27a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="black" />
+    </g>,
+    {
+      viewBox: '0 0 60 60',
+    }
+  ),
   [ICONS.PURCHASED]: buildIcon(
     <g>
       <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />

ui/component/socialShare/view.jsx

@@ -30,7 +30,7 @@ type Props = {
 function SocialShare(props: Props) {
   const { claim, title, referralCode, user, webShareable, position } = props;
   const [showEmbed, setShowEmbed] = React.useState(false);
-  const [showExtra, setShowExtra] = React.useState(false);
+  const [showClaimLinks, setShowClaimLinks] = React.useState(false);
   const [includeStartTime, setincludeStartTime]: [boolean, any] = React.useState(false);
   const [startTime, setStartTime]: [string, any] = React.useState(secondsToHms(position));
   const startTimeSeconds: number = hmsToSeconds(startTime);
@@ -140,16 +140,16 @@ function SocialShare(props: Props) {
               title={__('Embed this content')}
               onClick={() => {
                 setShowEmbed(!showEmbed);
-                setShowExtra(false);
+                setShowClaimLinks(false);
               }}
             />
             <Button
               className="share"
               iconSize={24}
-              icon={ICONS.MORE}
+              icon={ICONS.SHARE_LINK}
-              title={__('More actions')}
+              title={__('Links')}
               onClick={() => {
-                setShowExtra(!showExtra);
+                setShowClaimLinks(!showClaimLinks);
                 setShowEmbed(false);
               }}
             />
@@ -170,7 +170,7 @@ function SocialShare(props: Props) {
           startTime={startTimeSeconds}
         />
       )}
-      {showExtra && (
+      {showClaimLinks && (
         <div className="section">
           <CopyableText label={__('LBRY URL')} copyable={`lbry://${lbryUrl}`} />
           <CopyableText label={__('Download Link')} copyable={downloadUrl} />

ui/constants/icons.js

@@ -45,6 +45,7 @@ export const REDDIT = 'Reddit';
 export const LINKEDIN = 'LinkedIn';
 export const EMBED = 'Embed';
 export const MORE = 'More';
+export const SHARE_LINK = 'ShareLink';
 export const ACCOUNT = 'User';
 export const SETTINGS = 'Settings';
 export const INVITE = 'Users';