From 25bfdafe0e1ab4fd2b9f67ab095889d7343dd129 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Thu, 3 Mar 2022 20:13:08 -0600
Subject: [PATCH] improved copyable in ReceiveModal

---
 src/components/modals/ReceiveModal.vue | 34 ++++----------------------
 1 file changed, 5 insertions(+), 29 deletions(-)

diff --git a/src/components/modals/ReceiveModal.vue b/src/components/modals/ReceiveModal.vue
index 0c7687abf..364b14df0 100644
--- a/src/components/modals/ReceiveModal.vue
+++ b/src/components/modals/ReceiveModal.vue
@@ -16,9 +16,7 @@
                 <QrCodeIcon/>
             </button>
             <Identicon :address="activeAddressInfo.address"/>
-            <Copyable :text="activeAddressInfo.address">
-                <AddressDisplay :address="activeAddressInfo.address"/>
-            </Copyable>
+            <AddressDisplay :address="activeAddressInfo.address" copyable/>
             <button
                 v-if="activeAddressInfo.type === AddressType.BASIC"
                 @click="receiveLinkOverlayOpened = true"
@@ -48,7 +46,6 @@ import {
     AddressDisplay,
     QrCodeIcon,
     QrCode,
-    Copyable,
 } from '@nimiq/vue-components';
 import Modal, { disableNextModalTransition } from './Modal.vue';
 import { useAddressStore, AddressType } from '../../stores/Address';
@@ -90,7 +87,6 @@ export default defineComponent({
         AddressDisplay,
         QrCodeIcon,
         QrCode,
-        Copyable,
         PaymentLinkOverlay,
         QrCodeOverlay,
     } as any,
@@ -127,31 +123,11 @@ export default defineComponent({
         margin-top: 3rem;
     }
 
-    .copyable {
-        padding: 0.5rem;
+    & ::v-deep .copyable {
         background: var(--nimiq-highlight-bg);
-        border-radius: 0.625rem;
-        margin: 1rem 0 4rem;
-
-        transition:
-            color .3s var(--nimiq-ease),
-            background 0.3s var(--nimiq-ease);
-
-        ::v-deep .background {
-            display: none;
-        }
-
-        .address-display {
-            transition: opacity 0.3s var(--nimiq-ease);
-            font-weight: 500;
-            opacity: 1;
-        }
-
-        &:hover,
-        &:focus,
-        &.copied {
-            background: rgba(5, 130, 202, 0.07); // Based on Nimiq Light Blue
-        }
+        color: var(--nimiq-blue);
+        padding: 1.25rem 1.5rem;
+        font-weight: 500;
     }
 }