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; }