Redesign: Use new design for "Copy profile link" button (#40649)

app/javascript/mastodon/components/account_header/buttons.tsx

@@ -13,10 +13,9 @@ import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 import { isRedesignEnabled } from '@/mastodon/utils/environment';
 import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
 import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react';
-import ShareIcon from '@/material-icons/400-24px/share.svg?react';
 
 import { ToggleIconButton } from '../button/redesign';
-import { CopyIconButton } from '../copy_button';
+import { CopyIconButton, CopyIconButtonLegacy } from '../copy_button';
 import { FollowButton } from '../follow_button';
 import { IconButton as LegacyIconButton } from '../icon_button';
 
@@ -77,14 +76,6 @@ const AccountButtonsOther: FC<
       dispatch(followAccount(account.id, { notify: !relationship?.notifying }));
     }
   }, [dispatch, account, relationship]);
-  const accountUrl = account?.url;
-  const handleShare = useCallback(() => {
-    if (accountUrl) {
-      void navigator.share({
-        url: accountUrl,
-      });
-    }
-  }, [accountUrl]);
 
   const reference = useFollowReference('profile');
 
@@ -144,18 +135,14 @@ const AccountButtonsOther: FC<
           />
         ))}
       {!noShare &&
-        ('share' in navigator ? (
-          <LegacyIconButton
-            className='optional'
-            icon=''
-            iconComponent={ShareIcon}
-            title={intl.formatMessage(messages.share, {
-              name: account.username,
-            })}
-            onClick={handleShare}
+        (isRedesignEnabled() ? (
+          <CopyIconButton
+            title={intl.formatMessage(messages.copy)}
+            value={account.url}
+            size='sm'
           />
         ) : (
-          <CopyIconButton
+          <CopyIconButtonLegacy
             className='optional'
             title={intl.formatMessage(messages.copy)}
             value={account.url}

app/javascript/mastodon/components/copy_button.tsx

@@ -4,12 +4,17 @@ import { defineMessages } from 'react-intl';
 
 import classNames from 'classnames';
 
+import { CopyIcon } from '@phosphor-icons/react';
+import type { DistributedOmit } from 'type-fest';
+
 import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
 import { showAlert } from 'mastodon/actions/alerts';
-import { IconButton } from 'mastodon/components/icon_button';
+import { IconButton as LegacyIconButton } from 'mastodon/components/icon_button';
 import { useAppDispatch } from 'mastodon/store';
 
 import { Button } from './button';
+import type { IconButtonProps } from './button/redesign';
+import { IconButton } from './button/redesign';
 
 const messages = defineMessages({
   copied: {
@@ -54,7 +59,7 @@ export const CopyButton: React.FC<
   );
 };
 
-export const CopyIconButton: React.FC<{
+export const CopyIconButtonLegacy: React.FC<{
   title: string;
   value: string;
   className?: string;
@@ -63,7 +68,7 @@ export const CopyIconButton: React.FC<{
   const { copyText, wasCopied } = useCopyToClipboard({ text: value });
 
   return (
-    <IconButton
+    <LegacyIconButton
       className={classNames(className, wasCopied ? 'copied' : 'copyable')}
       title={title}
       onClick={copyText}
@@ -73,3 +78,23 @@ export const CopyIconButton: React.FC<{
     />
   );
 };
+
+export const CopyIconButton: React.FC<
+  {
+    title: string;
+    value: string;
+  } & DistributedOmit<IconButtonProps, 'icon' | 'children'>
+> = ({ title, value, ...otherProps }) => {
+  const { copyText, wasCopied } = useCopyToClipboard({ text: value });
+
+  return (
+    <IconButton
+      {...otherProps}
+      onClick={copyText}
+      icon={CopyIcon}
+      variant={wasCopied ? 'solid' : otherProps.variant}
+    >
+      {title}
+    </IconButton>
+  );
+};

app/javascript/mastodon/components/form_fields/copy_link_field.tsx

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 
 import classNames from 'classnames';
 
-import { CopyIconButton } from '@/mastodon/components/copy_button';
+import { CopyIconButtonLegacy } from '@/mastodon/components/copy_button';
 
 import classes from './copy_link_field.module.scss';
 import { FormFieldWrapper } from './form_field_wrapper';
@@ -73,7 +73,7 @@ export const CopyLinkField = forwardRef<HTMLInputElement, CopyLinkFieldProps>(
               onFocus={handleFocus}
               className={classNames(className, classes.input)}
             />
-            <CopyIconButton
+            <CopyIconButtonLegacy
               value={value}
               title={intl.formatMessage({
                 id: 'copy_icon_button.copy_this_text',