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 ( + onCopySuccess(e)} + className={styles.button} + > + + + ) +} diff --git a/src/components/atoms/Qr.module.scss b/src/components/atoms/Qr.module.scss index 2c4d58d8..bf8b48b0 100644 --- a/src/components/atoms/Qr.module.scss +++ b/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; - } -} diff --git a/src/components/atoms/Qr.tsx b/src/components/atoms/Qr.tsx index b2a23cc8..77c40491 100644 --- a/src/components/atoms/Qr.tsx +++ b/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' - -const onCopySuccess = (e: any) => { - e.trigger.classList.add(styles.copied) -} +import Copy from './Copy' export default function Qr({ address, @@ -30,14 +24,7 @@ export default function Qr({
         {address}
-         onCopySuccess(e)}
-          className={styles.button}
-        >
-          
-        
+        
       
) 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;