create CopyButton component to wrap arround CopyToClipboard

embark-ui/src/components/Converter.js

@@ -1,7 +1,6 @@
 import PropTypes from "prop-types";
 import React from 'react';
 import {
-  Button,
   InputGroup,
   Card,
   CardBody,
@@ -13,7 +12,7 @@ import {
   InputGroupAddon,
   Label
 } from 'reactstrap';
-import {CopyToClipboard} from 'react-copy-to-clipboard';
+import CopyButton from './CopyButton';
 
 import { calculateUnits } from '../services/unitConverter';
 
@@ -50,9 +49,7 @@ class Converter extends React.Component {
                     <InputGroup>
                       <Input id={unit.name} placeholder={unit.name} value={unit.value} onChange={e => this.handleOnChange(e, unit.key)} />
                       <InputGroupAddon addonType="append">
-                        <CopyToClipboard text={unit.value} title="Copy value to clipboard">
-                          <Button color="primary"><i className="fa fa-copy"></i></Button>
-                        </CopyToClipboard>
+                        <CopyButton text={unit.value} title="Copy value to clipboard" size={2}/>
                       </InputGroupAddon>
                     </InputGroup>
                   </FormGroup>

embark-ui/src/components/CopyButton.css

@@ -0,0 +1,8 @@
+.copy-to-clipboard {
+  position: absolute;
+  right: 0;
+  top: 0;
+  border-top-left-radius: 0;
+  border-bottom-right-radius: 0;
+  cursor: pointer;
+}

embark-ui/src/components/CopyButton.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Badge} from "reactstrap";
+import classNames from 'classnames';
+import {CopyToClipboard} from 'react-copy-to-clipboard';
+
+import './CopyButton.css';
+
+const CopyButton = ({text, onCopy, title, size}) => (
+  <CopyToClipboard text={text}
+                   onCopy={onCopy}
+                   title={title}>
+    <Badge className={classNames('copy-to-clipboard', 'p-' + (size ? size : 3))}
+           color="primary"><i className="fa fa-copy"/></Badge>
+  </CopyToClipboard>
+);
+
+CopyButton.propTypes = {
+  text: PropTypes.string.isRequired,
+  onCopy: PropTypes.func,
+  title: PropTypes.string,
+  size: PropTypes.number
+};
+
+export default CopyButton;

embark-ui/src/components/GasStation.js

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
 import {Card, CardBody, CardHeader, CardTitle, Row, Col, Input, Badge} from 'reactstrap';
-import {CopyToClipboard} from 'react-copy-to-clipboard';
+import CopyButton from './CopyButton';
 
 const COLORS = {
   good: 'success',
@@ -95,11 +95,9 @@ class GasStation extends Component {
           <CardHeader>
             <CardTitle>
               Gas Price Estimator
-              <CopyToClipboard text={currentGasStep.gasPrice / this.PRICE_UNIT_DIVIDER}
-                               onCopy={() => this.setState({copied: true})}
-                               title="Copy gas price to clipboard">
-                <Badge className="p-3" color="primary"><i className="fa fa-copy"/></Badge>
-              </CopyToClipboard>
+              <CopyButton text={currentGasStep.gasPrice / this.PRICE_UNIT_DIVIDER}
+                          onCopy={() => this.setState({copied: true})}
+                          title="Copy gas price to clipboard"/>
             </CardTitle>
           </CardHeader>
 

embark-ui/src/index.css

@@ -18,6 +18,9 @@
   word-wrap: break-word; 
 }
 
+.relative {
+  position: relative;
+}
 .hidden {
   display: none;
 }