From 74511073d2f1afa113cbf4874364232767f8d4e6 Mon Sep 17 00:00:00 2001
From: Tanya Fomina <fomina.tatianaaa@yandex.ru>
Date: Tue, 13 Sep 2022 16:52:52 +0300
Subject: [PATCH] Update copy button styles

---
 src/backend/views/pages/blocks/header.twig |  7 +-
 src/frontend/styles/components/page.pcss   | 79 +++++++++++++---------
 src/frontend/styles/vars.pcss              |  1 -
 3 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/src/backend/views/pages/blocks/header.twig b/src/backend/views/pages/blocks/header.twig
index 4522986..d91fad4 100644
--- a/src/backend/views/pages/blocks/header.twig
+++ b/src/backend/views/pages/blocks/header.twig
@@ -2,9 +2,10 @@
   <a href="#{{ text | urlify  }}">
     {{ text }}
   </a>
-  <div class="block-header__copy-link"> {{ svg('copy') }} </div>
-  <div class="block-header__copy-link-success"> 
-    <div class="block-header__copy-link-success-inner">{{ svg('check') }}</div>
+  <div class="block-header__copy-link-splash"></div>
+  <div class="block-header__copy-link">
+    <div class="block-header__copy-link-icon--initial">{{ svg('copy') }}</div>
+    <div class="block-header__copy-link-icon--success">{{ svg('check') }}</div>
   </div>
 
 </h{{ level }}>
diff --git a/src/frontend/styles/components/page.pcss b/src/frontend/styles/components/page.pcss
index b1ec837..283087d 100644
--- a/src/frontend/styles/components/page.pcss
+++ b/src/frontend/styles/components/page.pcss
@@ -112,6 +112,7 @@
     text-decoration: none !important;
     border: 0;
     color: inherit !important;
+    pointer-events: none;
   }
 
   &--anchor {
@@ -119,62 +120,76 @@
   }
 
   &--link-copied {
-    .block-header__copy-link {
+    .block-header__copy-link, .block-header__copy-link:hover {
+      background: var(--color-success);
+    }
+
+    .block-header__copy-link-icon--initial {
       display: none;
     }
 
+    .block-header__copy-link-icon--success {
+      display: block;
+    }
+
+    .block-header__copy-link-splash {
+      opacity: 0.1;
+      transform: scale(2);
+    }
+
     .block-header__copy-link-success {
       display: flex;
     }
   }
 
-  &__copy-link-success {
+  &__copy-link-splash {
     position: absolute;
-    width: 64px;
-    height: 64px;
-    left: -63px;
-    top: -15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 100%;
-    background: var(--color-success-light);
-    color: white;
+    width: 28px;
+    height: 28px;
+    top: 3px;
+    left: -36px;
+    border-radius: 8px;
+    background-color: var(--color-success);
+    opacity: 0;
+    transform: scale(1);
+    transition: transform 300ms;
+  }
+
+  &__copy-link-icon--success {
+    width: 24px;
+    height: 24px;
     display: none;
+    color: white;
+  }
 
-    &-inner {
-      width: 34px;
-      height: 34px;
-      background-color: var(--color-success);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 100%;
-    }
-
-    svg {
-      width: 24px;
-      height: 24px;
-    }
+  &__copy-link-icon--initial {
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   &__copy-link {
     position: absolute;
-    width: 34px;
-    height: 34px;
-    left: -48px;
-    top: 0;
+    width: 28px;
+    height: 28px;
+    left: -36px;
+    top: 3px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 100%;
-    background: var(--color-link-hover);
+    border-radius: 8px;
     color: var(--color-text-second);
     opacity: 0;
     transition: opacity;
     transition-delay: 0.5s;
     transition-duration: 200ms;
+
+    @media (--can-hover) {
+      &:hover {
+        background: var(--color-link-hover);
+      }
+    }
   }
 
   @media (--can-hover) {
diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss
index ad12713..e83380a 100644
--- a/src/frontend/styles/vars.pcss
+++ b/src/frontend/styles/vars.pcss
@@ -36,7 +36,6 @@
   --color-button-warning-active: #BD4848;
 
   --color-success: #00e08f;
-  --color-success-light: #dbfbef;
 
 
   /**