From 76479714a4b11641f467f937eaf68e0a641ad27c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Sat, 20 Apr 2019 23:01:13 +0300
Subject: [PATCH] Use ripple effect instead of arrows in setup instruction
 screenshots

---
 static/css/channels.css                   | 32 +++++++++++++++++++++++
 templates/integrations/add_pagertree.html | 25 +++++++++++-------
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/static/css/channels.css b/static/css/channels.css
index 0c5aa593..ad21fdfc 100644
--- a/static/css/channels.css
+++ b/static/css/channels.css
@@ -203,6 +203,38 @@ table.channels-table > tbody > tr > th {
     font-weight: 300;
 }
 
+.ai-step .marker-wrap {
+    position: relative;
+    clear: both;
+}
+
+.ai-step .marker {
+    width: 20px;
+    height: 20px;
+    margin-left: -10px;
+    margin-top: -10px;
+    background: #2abb66;
+    position: absolute;
+    border-radius: 10px;
+    opacity: 0;
+    animation: marker-ripple 1.2s ease-out infinite;
+}
+
+@keyframes marker-ripple {
+  0%, 35% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.5);
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(4);
+  }
+}
+
 .ai-guide-screenshot {
     max-width: 100%;
     border: 6px solid #EEE;
diff --git a/templates/integrations/add_pagertree.html b/templates/integrations/add_pagertree.html
index 3e2991ee..e3ebef2c 100644
--- a/templates/integrations/add_pagertree.html
+++ b/templates/integrations/add_pagertree.html
@@ -24,10 +24,13 @@
             </p>
         </div>
         <div class="col-sm-6">
-            <img
-                class="ai-guide-screenshot"
-                alt="Click create integration button"
-                src="{% static 'img/integrations/setup_pagertree_1.png' %}">
+            <div class="marker-wrap">
+                <span style="left: 89%; top: 19%;" class="marker"></span>
+                <img
+                    class="ai-guide-screenshot"
+                    alt="Click create integration button"
+                    src="{% static 'img/integrations/setup_pagertree_1.png' %}" />
+            </div>
         </div>
       </div>
 
@@ -50,16 +53,20 @@
           <div class="col-sm-6">
               <span class="step-no">3</span>
               <p>
-                Copy the <strong>Endpoint URL</strong> and paste it
+                Copy the <strong>Endpoint address</strong> and paste it
                 in the form below.
                 Save the integration, and you are done!
               </p>
           </div>
           <div class="col-sm-6">
-              <img
-                  class="ai-guide-screenshot"
-                  alt="Copy the Webhook URL"
-                  src="{% static 'img/integrations/setup_pagertree_3.png' %}">
+            <div class="marker-wrap">
+                <span style="left: 32%; top: 59%;" class="marker"></span>
+
+                  <img
+                      class="ai-guide-screenshot"
+                      alt="Copy the Webhook URL"
+                      src="{% static 'img/integrations/setup_pagertree_3.png' %}">
+            </div>
           </div>
       </div>