Tiny copy button (same as edit, full-row action) (#1211)

packages/ui-app/src/AddressSummary.tsx

@@ -279,7 +279,7 @@ class AddressSummary extends React.PureComponent<Props, State> {
 
     return (
       <Button
-        className='editButton'
+        className='iconButton'
         onClick={callback}
         icon='edit'
         size='mini'

packages/ui-app/src/CopyButton.tsx

@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Button$Sizes } from './Button/types';
 import { QueueAction$Add } from './Status/types';
 import { BareProps, I18nProps } from './types';
 
@@ -12,14 +11,12 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { QueueConsumer } from './Status/Context';
 import Button from './Button';
 import translate from './translate';
+import styled from 'styled-components';
 
 type Props = BareProps & {
   children?: React.ReactNode,
   icon?: string,
   isAddress?: boolean,
-  isCircular?: boolean,
-  isPrimary?: boolean,
-  size?: Button$Sizes,
   value?: any
 };
 
@@ -29,23 +26,23 @@ type InnerProps = Props & I18nProps & {
 
 class CopyButtonInner extends React.PureComponent<InnerProps> {
   render () {
-    const { children, className, icon = 'copy', isCircular = true, isPrimary = true, size = 'tiny', style, value } = this.props;
+    const { children, className, icon = 'copy', value } = this.props;
 
     return (
       <div className={className}>
-        {children}
         <CopyToClipboard
           onCopy={this.onCopy}
           text={value}
         >
-          <Button
-            className='ui--CopyButton'
-            icon={icon}
-            isCircular={isCircular}
-            isPrimary={isPrimary}
-            size={size}
-            style={style}
-          />
+          <div>
+            {children}
+            <Button
+              className='iconButton'
+              icon={icon}
+              size='mini'
+              isPrimary
+            />
+          </div>
         </CopyToClipboard>
       </div>
     );
@@ -67,7 +64,7 @@ class CopyButtonInner extends React.PureComponent<InnerProps> {
 
 const CopyButtonI18n = translate(CopyButtonInner);
 
-export default class CopyButton extends React.PureComponent<Props> {
+class CopyButton extends React.PureComponent<Props> {
   render () {
     return (
       <QueueConsumer>
@@ -81,3 +78,8 @@ export default class CopyButton extends React.PureComponent<Props> {
     );
   }
 }
+
+export default styled(CopyButton)`
+  cursor: copy;
+  margin: 0.25rem;
+`;

packages/ui-app/src/styles/app.css

@@ -94,11 +94,15 @@ article {
     margin: 0;
     padding: 0;
   }
-  
+
   &:not(:hover) {
     .ui.button {
       background: #eee !important;
       color: #555 !important;
+
+      &.mini {
+        visibility: none;
+      }
     }
   }
 }

packages/ui-app/src/styles/components.css

@@ -112,25 +112,22 @@ button.ui.icon.withDrawUnbonded {
   margin-left: .3em
 }
 
-.overview--Account:hover  button.ui.icon.editButton,
-.overview--Account:hover  button.ui.icon.editButton {
+article:hover  button.ui.icon.iconButton {
   visibility: visible;
 }
 
-.overview--Account button.ui.icon.editButton,
-.overview--Account button.ui.icon.editButton {
+article button.ui.icon.iconButton {
   visibility: hidden;
 }
 
-.ui--AddressSummary-name.editable > button.ui.icon.editButton,
-.ui--AddressSummary-tags.editable > button.ui.icon.editButton {
-  padding: 0em .3em .3em .3em;
-  color: #2e86ab;
-  background: none;
+button.ui.icon.iconButton {
+  padding: 0em .3em .3em .3em !important;
+  color: #2e86ab  !important;
+  background: none  !important;
   /*trick to let the button in the flow but keep the content centered regardless*/
-  margin-left: -2em;
-  position: relative;
-  right: -2.3em;
+  margin-left: -2em  !important;
+  position: relative  !important;
+  right: -2.3em  !important;
 }
 
 .ui--AddressSummary-tags.editable {
@@ -344,15 +341,6 @@ button.ui.icon.withDrawUnbonded {
   }
 }
 
-.ui--CopyButton {
-  cursor: copy !important;
-  margin-left: 0.25rem !important;
-  margin-right: 0.25rem !important;
-  position: relative;
-  margin-left: -3em!important;
-  right: -3.3em;
-}
-
 .ui--DropdownLinked.ui--row {
   .small .ui.selection.dropdown {
     min-width: 5rem;