Change component name of CopyButton

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 && (
-        <div className="row">
+        <div className="mediaButtons">
-          {this.state.isCopied && (
+          <div className="copy">
-            <span className="copiedText">{browser.i18n.getMessage("copiedLabel")}</span>
+            {this.state.isCopied && (
-          )}
+              <span className="copiedText">{browser.i18n.getMessage("copiedLabel")}</span>
-          <CopyToClipboard text={resultText} onCopy={this.handleCopy}>
+            )}
-            <button className="copyButton" title={browser.i18n.getMessage("copyLabel")}>
+            <CopyToClipboard text={resultText} onCopy={this.handleCopy}>
-              <CopyIcon />
+              <button className="copyButton" title={browser.i18n.getMessage("copyLabel")}>
-            </button>
+                <CopyIcon />
-          </CopyToClipboard>
+              </button>
+            </CopyToClipboard>
+          </div>
         </div>
       )
     );

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 => {
           <a onClick={handleLinkClick}>{browser.i18n.getMessage("openInGoogleLabel")}</a>
         </p>
       )}
-      <CopyButton resultText={resultText} />
+      <MediaButtons resultText={resultText} />
     </div>
   );
 };

src/popup/styles/CopyButton.scss

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

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