feat: created copy to clipboard button

ts/components/basic/SessionButton.tsx

@@ -112,7 +112,7 @@ const StyledButton = styled.button<{
   }
 `;
 
-type Props = {
+export type SessionButtonProps = {
   text?: string;
   disabled?: boolean;
   buttonType?: SessionButtonType;
@@ -121,15 +121,17 @@ type Props = {
   onClick?: any;
   children?: ReactNode;
   margin?: string;
+  reference?: any;
   dataTestId?: string;
 };
 
-export const SessionButton = (props: Props) => {
+export const SessionButton = (props: SessionButtonProps) => {
   const {
     buttonType = SessionButtonType.Outline,
     buttonShape = buttonType === SessionButtonType.Ghost
       ? SessionButtonShape.None
       : SessionButtonShape.Round,
+    reference,
     dataTestId,
     buttonColor,
     text,
@@ -160,6 +162,7 @@ export const SessionButton = (props: Props) => {
       )}
       role="button"
       onClick={onClickFn}
+      ref={reference}
       data-testid={dataTestId}
       style={{ margin }}
     >

ts/components/buttons/CopyToClipboardButton.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { ToastUtils } from '../../session/utils';
+import { SessionButton, SessionButtonProps } from '../basic/SessionButton';
+
+type Props = Omit<SessionButtonProps, 'children' | 'text' | 'onClick'> & {
+  copyContent: string;
+  onCopyComplete?: (copiedValue: string | undefined) => void;
+};
+
+export const CopyToClipboardButton = (props: Props) => {
+  const { copyContent, onCopyComplete } = props;
+  const [copied, setCopied] = useState(false);
+
+  const [{ value }, copyToClipboard] = useCopyToClipboard();
+
+  return (
+    <SessionButton
+      {...props}
+      text={copied ? window.i18n('copiedToClipboard') : window.i18n('editMenuCopy')}
+      onClick={() => {
+        copyToClipboard(copyContent);
+        ToastUtils.pushCopiedToClipBoard();
+        setCopied(true);
+        if (onCopyComplete) {
+          onCopyComplete(value);
+        }
+      }}
+    />
+  );
+};

ts/components/dialog/UpdateGroupNameDialog.tsx

@@ -121,7 +121,6 @@ export class UpdateGroupNameDialog extends Component<Props, State> {
         {isAdmin ? (
           <input
             type="text"
-            className="profile-name-input"
             value={this.state.groupName}
             placeholder={window.i18n('groupNamePlaceholder')}
             onChange={this.onGroupNameChanged}

ts/components/leftpane/overlay/OverlayInvite.tsx

@@ -5,11 +5,11 @@ import { shell } from 'electron';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { resetLeftOverlayMode } from '../../../state/ducks/section';
-import { SessionButton } from '../../basic/SessionButton';
 
 import { UserUtils } from '../../../session/utils';
 import { Flex } from '../../basic/Flex';
 import { SpacerLG, SpacerMD, SpacerSM } from '../../basic/Text';
+import { CopyToClipboardButton } from '../../buttons/CopyToClipboardButton';
 import { SessionIcon, SessionIconButton } from '../../icon';
 import { SessionInput } from '../../inputs';
 import { StyledLeftPaneOverlay } from './OverlayMessage';
@@ -88,12 +88,9 @@ export const OverlayInvite = () => {
           <StyledDescription>{window.i18n('sessionInviteAFriendDescription')}</StyledDescription>
           <SpacerLG />
           <StyledButtonerContainer>
-            <SessionButton
+            <CopyToClipboardButton
-              text={window.i18n('editMenuCopy')}
+              copyContent={ourSessionID}
-              onClick={() => {
+              onCopyComplete={() => setIdCopied(true)}
-                window.clipboard.writeText(ourSessionID);
-                setIdCopied(true);
-              }}
               dataTestId="invite-account-id-copy"
             />
           </StyledButtonerContainer>