broken site button

css/_mixins.scss

@@ -92,7 +92,14 @@
     }
 }
 
-
+@mixin button () {
+    .button {
+        background:none;
+        border:none;
+        margin:0;
+        padding:0;
+    }
+}
 /* Images & icons */
 @mixin icon_display () {
     background-repeat: no-repeat;

css/_vars.scss

@@ -8,8 +8,8 @@ $color--neutral-bg: #f5f5f5;
 
 /* Popup */
 $popup__width: 270px;
-$popup__height: 505px;
-$popup__height--moz: 520px;
+$popup__height: 540px;
+$popup__height--moz: 540px;
 
 /* Cards */
 $card__bg-color: $white;

css/trackers.scss

@@ -255,6 +255,20 @@ body {
                 margin-top: 5px;
             }
         }
+
+        .site-info__li--report {
+            height: 24.5px;
+
+            .site-info__report-text {
+                font-weight: bold;
+                margin-top: 3.5px;
+                display: inline-block;
+            }
+
+            .pull-right {
+                margin-top: 5px;
+            }
+        }
     }
 
     .linkable {
@@ -372,7 +386,7 @@ body {
 
 /* Generic toggle button styling */
 @include toggle_button();
-
+@include button();
 
 /* Sliding subviews */
 @include sliding_subview();

js/ui/templates/shared/button.js

@@ -0,0 +1,11 @@
+const bel = require('bel');
+
+module.exports = function (site, text, klass) {
+
+    return bel`
+    <button class="${klass}"
+            type="button">
+    ${text}
+    </button>`;
+}
+

js/ui/templates/site.es6.js

@@ -1,5 +1,6 @@
 const bel = require('bel');
 const toggleButton = require('./shared/toggle-button');
+const Button = require('./shared/button');
 
 module.exports = function () {
 
@@ -32,6 +33,10 @@ module.exports = function () {
                 <span class="site-info__toggle-text">${this.model.whitelistStatusText}</span>
                 ${toggleButton(!this.model.isWhitelisted, 'js-site-toggle pull-right')}
             </li>
+            <li class="site-info__li--report">
+                ${Button(this.model.domain, 'Report Broken Site', 'button site-info__report-text js-site-report')}
+                <span class="icon icon__arrow pull-right"></span>
+            </li>
         </ul>
     </section>`;
 

js/ui/views/site.es6.js

@@ -43,12 +43,14 @@ Site.prototype = $.extend({},
 
             this._cacheElems('.js-site', [
                 'toggle',
-                'show-all-trackers'
+                'show-all-trackers',
+                'report'
             ]);
 
             this.bindEvents([
               [this.$toggle, 'click', this._whitelistClick],
-              [this.$showalltrackers, 'click', this._showAllTrackers]
+              [this.$showalltrackers, 'click', this._showAllTrackers],
+              [this.$report, 'click', this._reportSiteClick]
             ]);
 
         },
@@ -76,6 +78,11 @@ Site.prototype = $.extend({},
             });
         },
 
+        _reportSiteClick: function() {
+            let reportURL = "https://www.surveymonkey.com/r/V6L5ZY2?url="
+            chrome.tabs.create({url: reportURL + this.model.domain})
+        },
+
         _whitelistClick: function (e) {
             this.model.toggleWhitelist();
             console.log('isWhitelisted: ', this.model.isWhitelisted);