Add dearrow link to install page and add close button

5 files changed, 57 insertions, 0 deletions

diff --git a/public/_locales b/public/_locales
-Subproject 7c71786bb3d27f9ff6d62d2575f17b4bfee89b3
+Subproject 322a245df5b39875a0e30725b7b2980ed008aef
diff --git a/public/help/index.html b/public/help/index.html
index f3ac8212..d2e848f4 100644
--- a/public/help/index.html
+++ b/public/help/index.html
@@ -34,6 +34,20 @@
 	      Come contribute, make some suggestions and help out on <a href="https://discord.gg/SponsorBlock">Discord</a> or on <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org">Matrix</a>.
     </p>
 
+    <a href="https://dearrow.ajay.app"
+        target="_blank"
+        id="dearrow-link"
+        class="dearrow-link hidden"
+        rel="noreferrer">
+        <img src="/icons/dearrow.svg"/>
+
+        <span id="dearrow-link-text">
+          
+        </span>
+
+        <img src="/icons/close.png" class="close-button"/>
+    </a>
+
     <p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
 
     <p class="smallText">
diff --git a/public/help/styles.css b/public/help/styles.css
index 99ff809d..9c4720d0 100644
--- a/public/help/styles.css
+++ b/public/help/styles.css
@@ -322,4 +322,33 @@ svg {
   cursor: default;
   background-color: var(--disabled);
   color: grey;
+}
+
+.dearrow-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+
+  font-size: 16px;
+}
+
+.dearrow-link img {
+  width: 35px;
+  padding: 10px
+}
+
+.dearrow-link .close-button {
+  opacity: 0;
+  width: 15px;
+  filter: invert(0.3);
+  transition: opacity 0.2s;
+}
+
+.dearrow-link:hover .close-button {
+  opacity: 1;
+}
+
+.hidden {
+  display: none;
 }
\ No newline at end of file
diff --git a/public/options/options.css b/public/options/options.css
index 4ff811de..13cad69d 100644
--- a/public/options/options.css
+++ b/public/options/options.css
@@ -717,4 +717,16 @@ svg {
 .dearrow-link > img {
     width: 40px;
     margin-right: 4px;
+}
+
+.dearrow-link .close-button {
+    opacity: 0;
+    width: 15px;
+    filter: invert(0.3);
+    transition: opacity 0.2s;
+    margin-left: 10px;
+}
+  
+.dearrow-link:hover .close-button {
+    opacity: 1;
 }
\ No newline at end of file
diff --git a/public/options/options.html b/public/options/options.html
index 5e9f32de..6c09cfd9 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -75,6 +75,8 @@
                         <span class="promotion-description">
                             __MSG_DeArrowPromotionMessage__
                         </span>
+
+						<img src="/icons/close.png" class="close-button"/>
                     </a>
 				</div>