Tidied up .btn class and button-reset mixin

Even though FMS has had a `.btn` class for a while, styling buttons has
still been difficult, mainly because of the very opinionated base styles
applied to overpowered selectors like `input[type="submit"]`.

This commit brings the FMS styles more in line with modern frameworks
like Bootstrap – inputs and buttons are left completely unstyled by
default, with an opt-in `.btn` class to add the styles back in.

Since `.btn` is just a single class, it’s easy to override, and avoids
selector bloat like `.green-btn, button.green-btn, input.green-btn`.

7 files changed, 112 insertions, 72 deletions

diff --git a/templates/web/base/report/_inspect.html b/templates/web/base/report/_inspect.html
index a4501aebd..1296a9243 100644
--- a/templates/web/base/report/_inspect.html
+++ b/templates/web/base/report/_inspect.html
@@ -20,10 +20,10 @@
           <input type="hidden" name="latitude" value="[% problem.latitude %]">
         </p>
         <p>
-          <a href="https://www.google.com/maps/dir/Current+Location/[% problem.latitude %],[% problem.longitude %]" class="btn btn-block btn--navigate">[% loc('Navigate to this problem') %]</a>
+          <a href="https://www.google.com/maps/dir/Current+Location/[% problem.latitude %],[% problem.longitude %]" class="btn btn--block btn--navigate">[% loc('Navigate to this problem') %]</a>
         </p>
         <p>
-          <a href="#" class="btn btn-block btn--geolocate" id="geolocate_link">[% loc('Set to my current location') %]</a>
+          <a href="#" class="btn btn--block btn--geolocate" id="geolocate_link">[% loc('Set to my current location') %]</a>
         </p>
       </div>
 
@@ -97,8 +97,8 @@
 
         <p>
           <input type="hidden" name="token" value="[% csrf_token %]">
-          <a href="[% c.uri_for( '/report', problem.id ) %]" class="btn">[% loc('Cancel') %]</a>
-          <input type="submit" value="[% loc('Save changes') %]" name="save" />
+          <a class="btn" href="[% c.uri_for( '/report', problem.id ) %]">[% loc('Cancel') %]</a>
+          <input class="btn" type="submit" value="[% loc('Save changes') %]" name="save" />
         </p>
       </div>
 
@@ -112,7 +112,7 @@
             <textarea rows="2" name="public_update" id="public_update" class="form-control" required>[% public_update | html %]</textarea>
           </p>
           <p>
-            <input type="submit" value="[% loc('Save changes + send') %]" name="save_inspected" />
+            <input class="btn" type="submit" value="[% loc('Save changes + send') %]" name="save_inspected" />
           </p>
         [% ELSE %]
           <p>
@@ -123,6 +123,20 @@
             [% END %]
           </p>
         [% END %]
+
+        [% IF problem.get_extra_metadata('inspected') %]
+          [% IF problem.whensent %]
+            <p>[% loc("<strong>Note:</strong> This report has been sent onwards for action. Any changes made won't be passed on.") %]</p>
+          [% ELSE %]
+            <p>[% loc("<strong>Note:</strong> This report hasn't yet been sent onwards for action. Any changes made may not be passed on.") %]</p>
+          [% END %]
+        [% END %]
+
+        <p>
+          <input type="hidden" name="token" value="[% csrf_token %]">
+          <a class="btn" href="[% c.uri_for( '/report', problem.id ) %]">[% loc('Cancel') %]</a>
+          <input class="btn btn-primary" type="submit" value="[% loc('Save changes') %]" name="save" />
+        </p>
       </div>
     [% END %]
 
diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html
index a85bca08f..049b24d7d 100644
--- a/templates/web/base/report/_main.html
+++ b/templates/web/base/report/_main.html
@@ -126,10 +126,10 @@
   %]
     <div class="moderate-display segmented-control" role="menu">
       [% IF permissions.moderate %]
-        <a id="moderate-report" role="menuitem" aria-label="[% loc('Moderate this report') %]">[% loc('Moderate') %]</a>
+        <a class="btn" id="moderate-report" role="menuitem" aria-label="[% loc('Moderate this report') %]">[% loc('Moderate') %]</a>
       [% END %]
       [% IF !hide_inspect_button AND permissions.keys.grep('report_inspect|report_edit_category|report_edit_priority').size %]
-        <a href="/report/[% problem.id %]/inspect" role="menuitem">
+        <a class="btn" href="/report/[% problem.id %]/inspect" role="menuitem">
           [%~ IF permissions.report_inspect ~%]
             [%~ loc('Inspect') ~%]
           [%~ ELSE ~%]
@@ -139,9 +139,9 @@
       [% END %]
       [% IF c.user.has_permission_to('planned_reports', problem.bodies_str_ids) %]
           [%~ IF c.user.is_planned_report(problem) ~%]
-            <label for="shortlist-report" role="menuitem" aria-label="[% loc('Remove from shortlist') %]">[% loc('Shortlisted') %]</label>
+            <label class="btn" for="shortlist-report" role="menuitem" aria-label="[% loc('Remove from shortlist') %]">[% loc('Shortlisted') %]</label>
           [%~ ELSE ~%]
-            <label for="shortlist-report" role="menuitem" aria-label="[% loc('Add to shortlist') %]">[% loc('Shortlist') %]</label>
+            <label class="btn" for="shortlist-report" role="menuitem" aria-label="[% loc('Add to shortlist') %]">[% loc('Shortlist') %]</label>
           [%~ END ~%]
       [% END %]
     </div>
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 869654b87..905f20f41 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -152,6 +152,19 @@
     }
 }
 
+.btn-primary {
+    @include button-reset(
+        mix($primary, #fff, 50%),
+        $primary,
+        mix($primary, #ccc, 30%),
+        inherit,
+        darken($primary, 3%),
+        darken(mix($primary, #fff, 50%), 3%),
+        mix($primary, #ccc, 30%),
+        inherit
+    );
+}
+
 .variant1 {
     #site-header {
         border-top-color: #fff;
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 12f92b531..16ec91244 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -70,3 +70,16 @@ dd, p {
     margin-bottom: 0;
   }
 }
+
+.btn-primary {
+    @include button-reset(
+        $oxfordshire_button_top,
+        $oxfordshire_button_bottom,
+        $oxfordshire_button_border,
+        #fff,
+        darken($oxfordshire_button_bottom, 3%),
+        darken($oxfordshire_button_top, 3%),
+        $oxfordshire_button_border,
+        #fff
+    );
+}
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index c44e91586..0a0b49fc2 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -286,11 +286,12 @@ h4.static-with-rule {
 
 #oxford-wrapper #front-main #postcodeForm div {
   border: 1px solid #fff; // because orange "Go" button (see below) abuts this border, looks a tiny bit better if it's not dark green
+  width: 24em; // up from default 20em
 
   #pc {
-    padding: 0 2%;
-    width: 89%;
-    height: 38px;
+    padding: 0 0 0 2%;
+    width: 20em;
+    height: 40px;
   }
 }
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 60f992410..98f578fa2 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -701,22 +701,22 @@ footer {
 
 /*BUTTONS*/
 
-// Default style set for buttons, inputs and .btn class. Red and green class available.
-// NB: a.btn is included in the selector otherwise a:visited is more specific and
-// the wrong text colour is applied.
-button, input[type=submit], .btn, a.btn {
+.btn {
   @include button-reset;
 }
 
-.green-btn,
-button.green-btn,
-input.green-btn{
+.btn + .btn {
+  // Ensure extra space between inline buttons placed next to each other.
+  margin-#{$left}: 0.5em;
+}
+
+.btn-primary,
+.green-btn {
   @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff);
 }
 
-.red-btn,
-button.red-btn,
-input.red-btn{
+.btn-danger,
+.red-btn {
   @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff);
 }
 
@@ -726,20 +726,9 @@ input.final-submit {
   float: $right;
 }
 
-// TODO: Sort out this a/a:visited/a.btn hideousness
-.btn-block,
-a.btn-block {
-  display: block;
-  text-align: center;
-}
-
 .btn--facebook {
     @include button-reset(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff);
 
-    &:visited {
-        color: #fff;
-    }
-
     img {
         margin-right: 0.5em;
         vertical-align: -0.2em;
@@ -751,10 +740,6 @@ a.btn-block {
 .btn--twitter {
     @include button-reset(#55acee, darken(#55acee, 10%), #55acee, #fff, darken(#55acee, 5%), darken(#55acee, 10%), #55acee, #fff);
 
-    &:visited {
-        color: #fff;
-    }
-
     img {
         margin-right: 0.5em;
         vertical-align: -0.2em;
@@ -801,7 +786,7 @@ a.btn-block {
 
 .btn--block {
     display: block;
-    width: auto;
+    text-align: center;
 }
 
 // Under the button to override its text transform and width
@@ -1847,32 +1832,33 @@ table.nicetable {
 
   & > * {
     display: block;
-    margin: 0;
-    padding: 0.75em 0.5em;
     text-align: center;
-    background: #fff linear-gradient(to bottom, #fff 0%, #eee 100%) 0 0 no-repeat;
-    border: 1px solid #ccc;
     border-right-width: 0; // avoid double border between items
-    font-weight: bold;
-    color: inherit !important;
-    text-decoration: none !important;
-    cursor: pointer;
     float: left; // float fallback for browsers that don't support flexbox
     flex: 1 0 auto;
+  }
 
-    &:hover {
-      background: #f3f3f3 linear-gradient(to bottom, #f9f9f9 0%, #e9e9e9 100%) 0 0 no-repeat;
-    }
+  .btn {
+    padding: 0.75em 0.5em;
+    border-radius: 0;
+  }
+
+  .btn + .btn {
+    margin-#{$left}: 0;
   }
 
   & > :first-child {
-    border-radius: 0.25em 0 0 0.25em;
+    border-radius: 4px 0 0 4px;
   }
 
   & > :last-child {
-    border-radius: 0 0.25em 0.25em 0;
+    border-radius: 0 4px 4px 0;
     border-right-width: 1px; // reinstate border on last item
   }
+
+  & > :first-child:last-child {
+    border-radius: 4px;
+  }
 }
 
 // A special case of segmented control, where each "button" (or label) is
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index a1a278ad0..f5bf1fbdf 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -1,32 +1,45 @@
 $direction: 'left' !default;
 
 // Button reset
-@mixin button-reset($c1: #eee, $c2: #ccc, $c3: #999, $c4: #333, $c5: #777, $c6: #999, $c7: #666, $c8: #fff){
+// Uses !important a few times to quickly reset
+// styles from a:link, a:hover, a:visited etc.
+@mixin button-reset($bg-top: #fff, $bg-bottom: #eee, $border: #ccc, $text: inherit, $hover-bg-bottom: #e9e9e9, $hover-bg-top: #f9f9f9, $hover-border: #ccc, $hover-text: inherit){
   display: inline-block;
-  cursor:pointer;
-  font:{
-    size: 0.875em;
-    family: Helmet, Freesans, sans-serif;
-    weight:bold;
-  }
-  text-transform:uppercase;
-  line-height: 1.375em;
-  padding: 0.7em 0.5em 0.5em;
-  margin:0;
+  margin: 0;
+  padding: 0.75em 1em;
   width: auto;
   height: auto;
   vertical-align: top;
+  text-align: center;
+
+  font-size: 1em;
+  line-height: 1em;
+  font-weight: bold;
+  font-family: inherit;
+  text-decoration: none !important;
+  color: $text !important;
+
+  cursor: pointer;
+  background: $bg-bottom;
+  @include linear-gradient($bg-top, $bg-bottom);
+
+  border: 1px solid $border;
   @include border-radius(4px);
-  background: $c1;
-  @include linear-gradient($c1, $c2);
-  border:1px solid $c3;
-  color:$c4;
-  &:hover, &:hover:enabled {
-    background:$c5;
-    @include linear-gradient($c6, $c5);
-    text-decoration: none;
-    border:1px solid $c7;
-    color:$c8;
+
+  &:hover,
+  &:focus {
+    background: $hover-bg-bottom;
+    @include linear-gradient($hover-bg-top, $hover-bg-bottom);
+    text-decoration: none !important;
+    border-color: $hover-border;
+    color: $hover-text !important;
+  }
+
+  &:disabled {
+    background: $bg-bottom;
+    border-color: $border;
+    color: desaturate(darken($bg-bottom, 50%), 50%) !important;
+    cursor: default;
   }
 }