[tbb-commits] [torbutton/maint-10.5] Bug 40049: Add banner for VPN survey to about:tor

[sysrqb at torproject.org]

commit 1ecd3f2641264b1389c90af03c6310dbdb53e7e6
Author: Matthew Finkel <sysrqb at torproject.org>
Date:   Wed Sep 29 19:41:15 2021 +0000

    Bug 40049: Add banner for VPN survey to about:tor
---
 chrome/content/aboutTor/aboutTor.xhtml | 11 ++++++++
 chrome/skin/aboutTor.css               | 47 ++++++++++++++++++++++++++++++++++
 chrome/skin/tor-survey-icon.svg        |  1 +
 3 files changed, 59 insertions(+)

diff --git a/chrome/content/aboutTor/aboutTor.xhtml b/chrome/content/aboutTor/aboutTor.xhtml
index f3a9032f..56318d48 100644
--- a/chrome/content/aboutTor/aboutTor.xhtml
+++ b/chrome/content/aboutTor/aboutTor.xhtml
@@ -65,6 +65,17 @@
       </form>
     </div>
 
+    <div id="surveyBanner">
+        <img id="surveyImg" src="resource://torbutton-assets/tor-survey-icon.svg" />
+        <div id="surveyTextCol">
+            <div id="surveyHeader">Do you use a VPN?</div>
+            <br />
+            <div id="surveyDescription">We’d like to learn more about how and why our users use VPNs. Complete this short ten-minute survey to tell us about your experience:</div>
+            <br />
+            <a id="surveyLink" target="_blank" href="http://eh5esdnd6fkbkapfc6nuyvkjgbtnzq2is72lmpwbdbxepd2z7zbgzsqd.onion/index.php/664393">Launch the Survey</a>
+        </div>
+    </div>
+
     <div id="bottom">
       <p id="donate" class="moreInfoLink">&aboutTor.donationBanner.freeToUse;
         <a href="https://donate.torproject.org/">&aboutTor.donationBanner.buttonA; »</a>
diff --git a/chrome/skin/aboutTor.css b/chrome/skin/aboutTor.css
index 38486241..e0d692c9 100644
--- a/chrome/skin/aboutTor.css
+++ b/chrome/skin/aboutTor.css
@@ -220,6 +220,53 @@ body:not([showmanual]) .showForManual {
   background-color: rgba(12, 12, 13, 0.1);  /* same as Firefox's about:home */
 }
 
+#surveyBanner {
+  width: 690px;
+  padding: 20px 25px 25px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+  margin: 35px auto 0px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  position: static;
+}
+
+ at media only screen and (min-width: 900px) {
+  #surveyBanner {
+    margin: 35px 0px 0px 135px;
+  }
+}
+
+#surveyTextCol {
+  padding: 8px 0px 0px 15px;
+  font-size: 15px;
+  line-height: normal;
+  color: #FFFFFF;
+  width: 633px;
+}
+
+#surveyHeader {
+  font-weight: bold;
+}
+
+#surveyImg {
+    width: 32px;
+    position: static;
+}
+
+div.surveyDescription, div.surveyLink {
+  padding-top: 10px;
+}
+
+a#surveyLink {
+  text-decoration: underline;
+}
+
+a#surveyLink:hover {
+  text-decoration: none;
+}
+
 /* #search-text is the search input field */
 #search-text {
   flex: 1;
diff --git a/chrome/skin/tor-survey-icon.svg b/chrome/skin/tor-survey-icon.svg
new file mode 100644
index 00000000..2a0749bd
--- /dev/null
+++ b/chrome/skin/tor-survey-icon.svg
@@ -0,0 +1 @@
+<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" fill="#df58a9" r="16"/><path d="m16 5.6875c-2.735 0-5.3581 1.08649-7.29204 3.02046-1.93397 1.93394-3.02046 4.55704-3.02046 7.29204s1.08649 5.3581 3.02046 7.292c1.93394 1.934 4.55704 3.0205 7.29204 3.0205s5.3581-1.0865 7.292-3.0205c1.934-1.9339 3.0205-4.557 3.0205-7.292s-1.0865-5.3581-3.0205-7.29204c-1.9339-1.93397-4.557-3.02046-7.292-3.02046zm3.3646 2.40625c1.4118.60622 2.6355 1.57956 3.5437 2.81885.9082 1.2393 1.4679 2.6992 1.6208 4.228h-3.0649c-.1692-2.5604-1.0947-5.0129-2.6592-7.04685zm-2.8174 0c1.8605 1.89985 2.9907 4.39535 3.1914 7.04685h-7.4772c.2007-2.6515 1.3309-5.147 3.1914-7.04685zm-3.9132 0h.561c-1.5639 2.03425-2.4893 4.48665-2.6592 7.04685h-3.06493c.15266-1.5287.71207-2.9886 1.62007-4.2279.908-1.23927 2.13146-2.21266 3.54306-2.81895zm0 15.81245c-1.4118-.606-2.63538-1.5793-3.54342-2.8187-.90803-1.2393-1.46734-2.6993-1.61971-4.2281h3.06493c.1692 2.5604 1.0
 947 5.0129 2.6592 7.0468zm2.8188 0c-1.8605-1.8998-2.9907-4.3953-3.1914-7.0468h7.4759c-.2008 2.6515-1.331 5.147-3.1914 7.0468zm3.9132 0h-.5624c1.5651-2.0335 2.4906-4.4863 2.6593-7.0468h3.0648c-.1523 1.5286-.7115 2.9885-1.6193 4.2278-.9077 1.2392-2.1309 2.2127-3.5424 2.819z" fill="#240a3b"/></svg>
\ No newline at end of file