diff --git a/src/components/atoms/Copy.module.scss b/src/components/atoms/Copy.module.scss
new file mode 100644
index 00000000..43642f39
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/components/atoms/Copy.tsx b/src/components/atoms/Copy.tsx
new file mode 100644
index 00000000..2b903838
--- /dev/null
+++ b/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 (
+
> ) diff --git a/src/pages/thanks.module.scss b/src/pages/thanks.module.scss index 51241a3c..d7d7908a 100644 --- a/src/pages/thanks.module.scss +++ b/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;{address}
-onCopySuccess(e)} - className={styles.button} - > - +-