From 9ffb1df03a5437a2869db6374dd1c52699fcaa11 Mon Sep 17 00:00:00 2001
From: Elbert Alias <77259+AliasIO@users.noreply.github.com>
Date: Thu, 24 Sep 2020 10:16:35 +1000
Subject: [PATCH] Style popup links

---
 src/drivers/webextension/css/styles.css  | 26 +++++++++++++++++++++++-
 src/drivers/webextension/html/popup.html | 16 ++++++++++-----
 src/drivers/webextension/js/popup.js     |  9 ++++----
 src/technologies.json                    | 15 +++++++++-----
 4 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/src/drivers/webextension/css/styles.css b/src/drivers/webextension/css/styles.css
index 45bd52ab3..7e88a4aed 100644
--- a/src/drivers/webextension/css/styles.css
+++ b/src/drivers/webextension/css/styles.css
@@ -186,6 +186,19 @@ a:hover {
   margin-bottom: .2rem;
 }
 
+.technology__open-in-new {
+  color: var(--color-primary);
+  visibility: hidden;
+  height: 1.1rem;
+  margin-left: .1rem;
+  vertical-align: middle;
+  width: 1.1rem;
+}
+
+.technology__heading:hover .technology__open-in-new {
+  visibility: visible;
+}
+
 .technology__icon {
   height: 16px;
   margin-right: .5rem;
@@ -195,6 +208,17 @@ a:hover {
 
 .technology__link {
   color: var(--color-text);
+  display: block;
+  width: 100%;
+}
+
+.technology__link:hover {
+  text-decoration: none;
+}
+
+.technology__link:hover .technology__name {
+  border-bottom: 1px solid var(--color-primary);
+  color: var(--color-primary);
 }
 
 .technology__confidence {
@@ -208,7 +232,7 @@ a:hover {
   border-radius: 3px;
   font-size: .7rem;
   padding: .1rem .3rem;
-  margin-left: .4rem;
+  margin-left: .2rem;
   vertical-align: middle;
 }
 
diff --git a/src/drivers/webextension/html/popup.html b/src/drivers/webextension/html/popup.html
index 2d3d2b84e..c41b3d9d3 100644
--- a/src/drivers/webextension/html/popup.html
+++ b/src/drivers/webextension/html/popup.html
@@ -51,15 +51,21 @@
 
     <div data-template="technology" class="technology">
       <div class="technology__heading">
+        <a class="technology__link" href="#">
         <img class="technology__icon" alt="" src="../images/icons/default.svg" />
 
-        <a class="technology__link" href="#"></a>
+          <span class="technology__name">&nbsp;</span>
 
-        <span>
-          <span class="technology__version">&nbsp;</span>
-        </span>
+          <span>
+            <span class="technology__version">&nbsp;</span>
+          </span>
 
-        <span class="technology__confidence">&nbsp;</span>
+          <span class="technology__confidence">&nbsp;</span>
+
+          <svg class="technology__open-in-new" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
+          </svg>
+        </a>
       </div>
     </div>
 
diff --git a/src/drivers/webextension/js/popup.js b/src/drivers/webextension/js/popup.js
index 2086f3b0b..9ffbc2960 100644
--- a/src/drivers/webextension/js/popup.js
+++ b/src/drivers/webextension/js/popup.js
@@ -96,7 +96,7 @@ const Popup = {
           '.alerts__link'
         ).href = `https://www.wappalyzer.com/alerts/?url=${encodeURIComponent(
           `${url}`
-        )}`
+        )}&utm_source=popup&utm_medium=extension&utm_campaign=wappalyzer`
 
         const { hostname } = new URL(url)
 
@@ -210,7 +210,7 @@ const Popup = {
 
       const link = categoryNode.querySelector('.category__link')
 
-      link.href = `https://www.wappalyzer.com/technologies/${categorySlug}/`
+      link.href = `https://www.wappalyzer.com/technologies/${categorySlug}/?utm_source=popup&utm_medium=extension&utm_campaign=wappalyzer`
       link.dataset.i18n = `categoryName${id}`
 
       const pins = categoryNode.querySelectorAll('.category__pin')
@@ -247,9 +247,10 @@ const Popup = {
           image.src = `../images/icons/${icon}`
 
           const link = technologyNode.querySelector('.technology__link')
+          const linkText = technologyNode.querySelector('.technology__name')
 
-          link.href = `https://www.wappalyzer.com/technologies/${categorySlug}/${slug}/`
-          link.textContent = name
+          link.href = `https://www.wappalyzer.com/technologies/${categorySlug}/${slug}/?utm_source=popup&utm_medium=extension&utm_campaign=wappalyzer`
+          linkText.textContent = name
 
           const confidenceNode = technologyNode.querySelector(
             '.technology__confidence'
diff --git a/src/technologies.json b/src/technologies.json
index b8fa4e100..c41774662 100644
--- a/src/technologies.json
+++ b/src/technologies.json
@@ -3850,7 +3850,8 @@
     },
     "Drift": {
       "cats": [
-        52
+        52,
+        61
       ],
       "description": "Drift is a conversational marketing platform.",
       "icon": "Drift.svg",
@@ -5372,7 +5373,8 @@
     },
     "Google Analytics": {
       "cats": [
-        10
+        10,
+        61
       ],
       "cookies": {
         "__utma": "",
@@ -5391,7 +5393,8 @@
     },
     "Google Analytics Enhanced eCommerce": {
       "cats": [
-        10
+        10,
+        61
       ],
       "description": "Google analytics enhanced ecommerce is a plug-in which enables the measurement of user interactions with products on ecommerce websites.",
       "icon": "Google Analytics.svg",
@@ -5414,7 +5417,8 @@
     },
     "Google Charts": {
       "cats": [
-        25
+        25,
+        61
       ],
       "icon": "Google Charts.png",
       "js": {
@@ -12475,7 +12479,8 @@
     },
     "Stripe": {
       "cats": [
-        41
+        41,
+        61
       ],
       "cookies": {
         "__stripe_mid": "",