[tbb-commits] [torbutton/master] Bug 40026: Add feedback survey banner

[sysrqb at torproject.org]

commit edad4c65724fecfcacec5afd7e8c394f850d9f1d
Author: Matthew Finkel <sysrqb at torproject.org>
Date:   Mon Feb 8 21:58:13 2021 +0000

    Bug 40026: Add feedback survey banner
---
 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 6c712a67..0eca9976 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">We’d love to get your feedback</div>
+            <br />
+            <div id="surveyDescription">We put our users at the center of our development process. You can help us improve Tor Browser by completing this short survey about your experience:</div>
+            <br />
+            <a id="surveyLink" target="_blank" href="https://survey.torproject.org/index.php/217469">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 8d5c4a83..d53e4060 100644
--- a/chrome/skin/aboutTor.css
+++ b/chrome/skin/aboutTor.css
@@ -212,6 +212,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..6e1eca1a
--- /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"><rect fill="#df58a9" height="32" rx="16" width="32"/><g fill="#240a3b"><path clip-rule="evenodd" d="m16.3397 25c-4.9708 0-8.99998-4.0295-8.99998-9.0002 0-4.9706 4.02918-8.9998 8.99998-8.9998 4.9706 0 9 4.0292 9 8.9998 0 4.9707-4.0294 9.0002-9 9.0002zm.0185-2.7279v1.091c4.0584-.01 7.3449-3.3024 7.3449-7.3633 0-4.0607-3.2865-7.35293-7.3449-7.36316v1.09101c3.4559.00997 6.2541 2.81395 6.2541 6.27215 0 3.4583-2.7982 6.2623-6.2541 6.2723zm3.527-6.2723c0 1.9519-1.5778 3.5344-3.527 3.5447v1.0907c2.552-.0099 4.618-2.0809 4.618-4.6354 0-2.5543-2.066-4.6253-4.618-4.6353v1.0908c1.9492.0102 3.527 1.5927 3.527 3.5445zm-3.527-1.9081c1.0456.01 1.8906.86 1.8906 1.908 0 1.0484-.845 1.8984-1.8906 1.9084z" fill-rule="evenodd"/><path d="m10.3461 4.99805c-.3237-.07201-.6639-.08099-1.00111-.02643s-.66484.17159-.96417.34441-.56449.39804-.78035.66279c-.21585.26475-.37816.56384-.47766.8802l-.2066.65635-.67173-.1492
 5c-.65378-.14527-1.36067-.03082-1.96515.31818-.60449.349-1.05705.90396-1.25814 1.54278-.20108.63883-.13422 1.30922.18589 1.86362.32011.5545.86723.9476 1.52102 1.0928l.67172.1493 4.93018 1.0955 1.5164-4.81745.2066-.65635c.0997-.31632.1345-.64373.1027-.96352-.0319-.31979-.1299-.6257-.2884-.90025s-.3744-.51236-.6354-.69985c-.261-.18748-.562-.32097-.8858-.39283z" stroke="#df58a9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/></g></svg>
\ No newline at end of file