diff --git a/src/popup/components/CopyButton.js b/src/popup/components/MediaButtons.js similarity index 55% rename from src/popup/components/CopyButton.js rename to src/popup/components/MediaButtons.js index 4736b8d..d97b675 100644 --- a/src/popup/components/CopyButton.js +++ b/src/popup/components/MediaButtons.js @@ -2,7 +2,7 @@ import React, { Component } from "react"; import browser from "webextension-polyfill"; import { CopyToClipboard } from "react-copy-to-clipboard"; import CopyIcon from "../icons/copy.svg"; -import "../styles/CopyButton.scss"; +import "../styles/MediaButtons.scss"; export default class CopyButton extends Component { constructor(props) { @@ -22,15 +22,17 @@ export default class CopyButton extends Component { const { resultText } = this.props; return ( resultText && ( -
- {this.state.isCopied && ( - {browser.i18n.getMessage("copiedLabel")} - )} - - - +
+
+ {this.state.isCopied && ( + {browser.i18n.getMessage("copiedLabel")} + )} + + + +
) ); diff --git a/src/popup/components/ResultArea.js b/src/popup/components/ResultArea.js index 84f40db..7364c4b 100644 --- a/src/popup/components/ResultArea.js +++ b/src/popup/components/ResultArea.js @@ -4,7 +4,7 @@ import getErrorMessage from "src/common/getErrorMessage"; import { getSettings } from "src/settings/settings"; import openUrl from "src/common/openUrl"; import "../styles/ResultArea.scss"; -import CopyButton from "./CopyButton"; +import MediaButtons from "./MediaButtons"; const splitLine = text => { const regex = /(\n)/g; @@ -33,7 +33,7 @@ export default props => { {browser.i18n.getMessage("openInGoogleLabel")}

)} - +
); }; diff --git a/src/popup/styles/CopyButton.scss b/src/popup/styles/CopyButton.scss deleted file mode 100644 index 9b65f20..0000000 --- a/src/popup/styles/CopyButton.scss +++ /dev/null @@ -1,28 +0,0 @@ -.row { - display: flex; - flex-direction: row; - justify-content: flex-end; - - .copiedText { - color: var(--sub-text); - font-size: 12px; - margin-right: 5px; - -moz-user-select: none; - -webkit-user-select: none; - } - .copyButton { - padding: 0; - border: 0; - background-color: var(--main-bg); - cursor: pointer; - - svg { - height: 16px; - width: 16px; - fill: var(--sub-text); - &:hover { - fill: var(--highlight); - } - } - } -} diff --git a/src/popup/styles/MediaButtons.scss b/src/popup/styles/MediaButtons.scss new file mode 100644 index 0000000..fd3d2ae --- /dev/null +++ b/src/popup/styles/MediaButtons.scss @@ -0,0 +1,33 @@ +.mediaButtons { + display: flex; + flex-direction: row; + justify-content: flex-end; + + .copy { + display: flex; + justify-content: center; + + .copiedText { + color: var(--sub-text); + font-size: 12px; + margin-right: 5px; + -moz-user-select: none; + -webkit-user-select: none; + } + .copyButton { + padding: 0; + border: 0; + background-color: var(--main-bg); + cursor: pointer; + + svg { + height: 16px; + width: 16px; + fill: var(--sub-text); + &:hover { + fill: var(--highlight); + } + } + } + } +}