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,7 +22,8 @@ export default class CopyButton extends Component {
     const { resultText } = this.props;
     return (
       resultText && (
-        <div className="row">
+        <div className="mediaButtons">
+          <div className="copy">
             {this.state.isCopied && (
               <span className="copiedText">{browser.i18n.getMessage("copiedLabel")}</span>
             )}
@@ -32,6 +33,7 @@ export default class CopyButton extends Component {
               </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);
+        }
+      }
+    }
+  }
+}