copy button component

src/components/atoms/Copy.module.scss

@@ -0,0 +1,35 @@
+@import 'variables';
+
+.button {
+  margin: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border: 0;
+  box-shadow: none;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  background: rgba($brand-grey, 0.3);
+  padding: $spacer / 3;
+
+  svg {
+    stroke: $brand-grey-light;
+    transition: 0.15s ease-out;
+  }
+
+  &:hover {
+    svg {
+      stroke: $brand-grey-dimmed;
+    }
+  }
+}
+
+.copied {
+  background: green;
+
+  // stylelint-disable-next-line no-descending-specificity
+  svg {
+    stroke: $brand-grey-dimmed;
+  }
+}

src/components/atoms/Copy.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Clipboard from 'react-clipboard.js'
+
+import styles from './Copy.module.scss'
+import Icon from './Icon'
+
+const onCopySuccess = (e: any) => {
+  e.trigger.classList.add(styles.copied)
+}
+
+export default function Copy({ text }: { text: string }) {
+  return (
+    <Clipboard
+      data-clipboard-text={text}
+      button-title="Copy to clipboard"
+      onSuccess={e => onCopySuccess(e)}
+      className={styles.button}
+    >
+      <Icon name="Copy" />
+    </Clipboard>
+  )
+}

src/components/atoms/Qr.module.scss

@@ -17,37 +17,3 @@
     text-align: center;
   }
 }
-
-.button {
-  margin: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  border: 0;
-  box-shadow: none;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  background: rgba($brand-grey, 0.3);
-  padding: $spacer / 3;
-
-  svg {
-    stroke: $brand-grey-light;
-    transition: 0.15s ease-out;
-  }
-
-  &:hover {
-    svg {
-      stroke: $brand-grey-dimmed;
-    }
-  }
-}
-
-.copied {
-  background: green;
-
-  // stylelint-disable-next-line no-descending-specificity
-  svg {
-    stroke: $brand-grey-dimmed;
-  }
-}

src/components/atoms/Qr.tsx

@@ -1,13 +1,7 @@
 import React from 'react'
 import { QRCode } from 'react-qr-svg'
-import Clipboard from 'react-clipboard.js'
-
 import styles from './Qr.module.scss'
-import Icon from './Icon'
+import Copy from './Copy'
-
-const onCopySuccess = (e: any) => {
-  e.trigger.classList.add(styles.copied)
-}
 
 export default function Qr({
   address,
@@ -30,14 +24,7 @@ export default function Qr({
 
       <pre className={styles.code}>
         <code>{address}</code>
-        <Clipboard
+        <Copy text={address} />
-          data-clipboard-text={address}
-          button-title="Copy to clipboard"
-          onSuccess={e => onCopySuccess(e)}
-          className={styles.button}
-        >
-          <Icon name="Copy" />
-        </Clipboard>
       </pre>
     </>
   )

src/pages/thanks.module.scss

@@ -2,6 +2,13 @@
 @import 'mixins';
 
 .buttonBack {
+  margin-bottom: $spacer;
+  display: block;
+
+  @media (min-width: $screen-md) {
+    margin-top: -($spacer);
+  }
+
   svg {
     stroke: $brand-grey-light;
     display: inline-block;