commit edad4c65724fecfcacec5afd7e8c394f850d9f1d Author: Matthew Finkel <sysrqb@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; +} + +@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