diff --git a/embark-ui/src/components/Converter.js b/embark-ui/src/components/Converter.js
index 4d5a30015..c21365a4f 100644
--- a/embark-ui/src/components/Converter.js
+++ b/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 {
this.handleOnChange(e, unit.key)} />
-
-
-
+
diff --git a/embark-ui/src/components/CopyButton.css b/embark-ui/src/components/CopyButton.css
new file mode 100644
index 000000000..d32b1fad5
--- /dev/null
+++ b/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;
+}
diff --git a/embark-ui/src/components/CopyButton.js b/embark-ui/src/components/CopyButton.js
new file mode 100644
index 000000000..a29fa6996
--- /dev/null
+++ b/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}) => (
+
+
+
+);
+
+CopyButton.propTypes = {
+ text: PropTypes.string.isRequired,
+ onCopy: PropTypes.func,
+ title: PropTypes.string,
+ size: PropTypes.number
+};
+
+export default CopyButton;
diff --git a/embark-ui/src/components/GasStation.js b/embark-ui/src/components/GasStation.js
index c4cb95ebf..777d1333e 100644
--- a/embark-ui/src/components/GasStation.js
+++ b/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 {
Gas Price Estimator
- this.setState({copied: true})}
- title="Copy gas price to clipboard">
-
-
+ this.setState({copied: true})}
+ title="Copy gas price to clipboard"/>
diff --git a/embark-ui/src/index.css b/embark-ui/src/index.css
index f9974c63b..d7e12ede1 100644
--- a/embark-ui/src/index.css
+++ b/embark-ui/src/index.css
@@ -18,6 +18,9 @@
word-wrap: break-word;
}
+.relative {
+ position: relative;
+}
.hidden {
display: none;
}