Use common/button component fot copy button

The proprietary button had displaying issues. This commit add props
that enable connection with a tooltip into the common button and replaces
the proprietary button with the common component.
[MAILPOET-4302]

mailpoet/assets/css/src/generic/_forms.scss

@@ -23,9 +23,3 @@ label[for] {
   height: 16px;
   width: 16px;
 }
-
-.mailpoet-form-tooltip-without-icon {
-  height: 35px;
-  padding: 5px;
-  width: 35px;
-}

mailpoet/assets/js/src/common/button/button.tsx

@@ -17,10 +17,14 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   target?: '_blank' | '_self' | '_parent' | '_top' | string;
   automationId?: string;
   className?: string;
+  dataTip?: boolean;
+  dataFor?: string;
 }
 
 export function Button({
   children,
+  dataFor,
+  dataTip,
   dimension,
   variant,
   withSpinner,
@@ -56,6 +60,8 @@ export function Button({
         'button-small': dimension === 'small',
       })}
       data-automation-id={automationId}
+      data-tip={dataTip}
+      data-for={dataFor}
     >
       {iconStart}
       {children && <span>{children}</span>}

mailpoet/assets/js/src/common/manage_sender_domain/domain_key_component.tsx

@@ -1,6 +1,8 @@
 import classnames from 'classnames';
 import { Tooltip } from 'common/tooltip/tooltip';
+import { Button } from 'common/button/button';
 import { useRef } from 'react';
+import { copy } from '@wordpress/icons';
 
 const copyTextToClipboard = (value: string) => {
   if (!navigator.clipboard) {
@@ -34,15 +36,13 @@ function DomainKeyComponent({ className = '', tooltip = '', ...props }) {
 
       {tooltip && (
         <>
-          <button
-            className="mailpoet-form-tooltip-without-icon button-secondary"
-            data-tip
-            data-for={props.name}
-            type="button"
+          <Button
+            iconStart={copy}
+            variant="secondary"
             onClick={performActionOnClick}
-          >
-            <span className="dashicons dashicons-clipboard" />
-          </button>
+            dataTip
+            dataFor={props.name}
+          />
           <Tooltip id={props.name} place="top">
             <span> {tooltip} </span>
           </Tooltip>