From c01e2981c44711ce971c320e15ce80fb6624c94a Mon Sep 17 00:00:00 2001
From: Guillaume Demesy <guillaume.demesy@gmail.com>
Date: Tue, 14 Jun 2016 19:30:37 +0200
Subject: [PATCH 1/4] Issue #482 - fixed classNames

---
 .../static/css/development/components/tag.css | 36 +++++++++----------
 webcompat/templates/web_modules/tag.html      | 20 ++++++-----
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/webcompat/static/css/development/components/tag.css b/webcompat/static/css/development/components/tag.css
index 7ad1be38e..1f2ee91ba 100644
--- a/webcompat/static/css/development/components/tag.css
+++ b/webcompat/static/css/development/components/tag.css
@@ -45,8 +45,8 @@
   }
 
     /* event */
-    .wc-Tag--new.wc-tag--filter:hover
-    .wc-Tag--new.wc-tag--filter:focus,
+    .wc-Tag--new.wc-Tag--filter:hover
+    .wc-Tag--new.wc-Tag--filter:focus,
     .wc-Tag--new.is-active,
     .wc-Tag--new.wc-Tag--label {
       background-color:var(--base-stateNew);
@@ -58,8 +58,8 @@
   }
 
     /* event */
-    .wc-Tag--needsDiagnosis.wc-tag--filter:hover
-    .wc-Tag--needsDiagnosis.wc-tag--filter:focus,
+    .wc-Tag--needsDiagnosis.wc-Tag--filter:hover
+    .wc-Tag--needsDiagnosis.wc-Tag--filter:focus,
     .wc-Tag--needsDiagnosis.is-active,
     .wc-Tag--needsDiagnosis.wc-Tag--label {
       background-color:var(--base-stateNeedsDiagnosis);
@@ -71,8 +71,8 @@
   }
 
     /* event */
-    .wc-Tag--needsContact.wc-tag--filter:hover,
-    .wc-Tag--needsContact.wc-tag--filter:focus,
+    .wc-Tag--needsContact.wc-Tag--filter:hover,
+    .wc-Tag--needsContact.wc-Tag--filter:focus,
     .wc-Tag--needsContact.is-active,
     .wc-Tag--needsContact.wc-Tag--label {
       background-color:var(--base-stateNeedsContact);
@@ -84,8 +84,8 @@
   }
 
     /* event */
-    .wc-Tag--ready.wc-tag--filter:hover,
-    .wc-Tag--ready.wc-tag--filter:focus,
+    .wc-Tag--ready.wc-Tag--filter:hover,
+    .wc-Tag--ready.wc-Tag--filter:focus,
     .wc-Tag--ready.is-active,
     .wc-Tag--ready.wc-Tag--label {
       background-color:var(--base-stateReady);
@@ -97,8 +97,8 @@
   }
 
     /* event */
-    .wc-Tag--sitewait.wc-tag--filter:hover,
-    .wc-Tag--sitewait.wc-tag--filter:focus,
+    .wc-Tag--sitewait.wc-Tag--filter:hover,
+    .wc-Tag--sitewait.wc-Tag--filter:focus,
     .wc-Tag--sitewait.is-active,
     .wc-Tag--sitewait.wc-Tag--label {
       background-color:var(--base-stateSitewait);
@@ -110,8 +110,8 @@
   }
 
     /* event */
-    .wc-Tag--close.wc-tag--filter:hover,
-    .wc-Tag--close.wc-tag--filter:focus,
+    .wc-Tag--close.wc-Tag--filter:hover,
+    .wc-Tag--close.wc-Tag--filter:focus,
     .wc-Tag--close.is-active,
     .wc-Tag--close.wc-Tag--label {
       background-color:var(--base-stateClose);
@@ -123,22 +123,22 @@
   }
 
     /* event */
-    .wc-Tag--fixed.wc-tag--filter:hover,
-    .wc-Tag--fixed.wc-tag--filter:focus,
+    .wc-Tag--fixed.wc-Tag--filter:hover,
+    .wc-Tag--fixed.wc-Tag--filter:focus,
     .wc-Tag--fixed.is-active,
     .wc-Tag--fixed.wc-Tag--label {
       background-color:var(--base-stateFixed);
     }
-    
+
   /* Tag Appears to work */
   .wc-Tag--worksforme {
     border-color:var(--base-stateWorksForMe);
   }
 
     /* event */
-    .wc-Tag--worksforme.wc-tag--filter:hover,
-    .wc-Tag--worksforme.wc-tag--filter:focus,
+    .wc-Tag--worksforme.wc-Tag--filter:hover,
+    .wc-Tag--worksforme.wc-Tag--filter:focus,
     .wc-Tag--worksforme.is-active,
     .wc-Tag--worksforme.wc-Tag--label {
       background-color:var(--base-stateWorksForMe);
-    }
\ No newline at end of file
+    }
diff --git a/webcompat/templates/web_modules/tag.html b/webcompat/templates/web_modules/tag.html
index d3c2e4324..f114e87de 100644
--- a/webcompat/templates/web_modules/tag.html
+++ b/webcompat/templates/web_modules/tag.html
@@ -1,16 +1,18 @@
 {% macro tag(type, category) %}
 
-{% if type == 'filter' %}
+  {% if type == 'filter' %}
 
+    <button
+      type="button"
+      class="wc-Tag wc-Tag--filter wc-Tag--{{ category.name }} r-ResetButton js-Tag"
+      data-filter="{{ category.dataAttribute }}"
+    >
+      <span class="wc-Tag-count"></span> {{ category.label }}</span>
+    </button>
 
-<button type="button" class="wc-Tag wc-tag--filter wc-Tag--{{ category.name }} r-ResetButton js-Tag" data-filter="{{ category.dataAttribute }}">
-  <span class="wc-Tag-count"></span> {{ category.label }}</span>
-</button>
+  {% elif type == 'tag' %}
 
-{% elif type == 'tag' %}
+    <div class="wc-Tag wc-Tag--label wc-Tag--<%= stateClass %>"><%= issueState %></div>
 
-<div class="wc-Tag wc-Tag--label wc-Tag--<%= stateClass %>"><%= issueState %></div>
-
-
-{% endif %}
+  {% endif %}
 {% endmacro %}

From ee58244609ae6d4a3c00767c057f6ab868844296 Mon Sep 17 00:00:00 2001
From: Guillaume Demesy <guillaume.demesy@gmail.com>
Date: Tue, 14 Jun 2016 19:31:05 +0200
Subject: [PATCH 2/4] Issue #482 - fixed hover on button

---
 webcompat/static/css/development/components/tag.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webcompat/static/css/development/components/tag.css b/webcompat/static/css/development/components/tag.css
index 1f2ee91ba..c81ba567d 100644
--- a/webcompat/static/css/development/components/tag.css
+++ b/webcompat/static/css/development/components/tag.css
@@ -45,7 +45,7 @@
   }
 
     /* event */
-    .wc-Tag--new.wc-Tag--filter:hover
+    .wc-Tag--new.wc-Tag--filter:hover,
     .wc-Tag--new.wc-Tag--filter:focus,
     .wc-Tag--new.is-active,
     .wc-Tag--new.wc-Tag--label {
@@ -58,7 +58,7 @@
   }
 
     /* event */
-    .wc-Tag--needsDiagnosis.wc-Tag--filter:hover
+    .wc-Tag--needsDiagnosis.wc-Tag--filter:hover,
     .wc-Tag--needsDiagnosis.wc-Tag--filter:focus,
     .wc-Tag--needsDiagnosis.is-active,
     .wc-Tag--needsDiagnosis.wc-Tag--label {

From 816c112eb859468fcebe27ce0d092510b83f3192 Mon Sep 17 00:00:00 2001
From: Guillaume Demesy <guillaume.demesy@gmail.com>
Date: Tue, 14 Jun 2016 19:42:12 +0200
Subject: [PATCH 3/4] Issue #482 - improved label constrast

---
 webcompat/static/css/development/components/tag.css | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/webcompat/static/css/development/components/tag.css b/webcompat/static/css/development/components/tag.css
index c81ba567d..fbe200d85 100644
--- a/webcompat/static/css/development/components/tag.css
+++ b/webcompat/static/css/development/components/tag.css
@@ -15,13 +15,6 @@
   color:#404040;
 }
 
-  /* event */
-  .wc-Tag--filter:hover,
-  .wc-Tag.is-active,
-  .wc-Tag-filter:focus {
-    color:#fff;
-  }
-
   /* modifier */
   .wc-tag--filter {
     cursor:pointer;

From 68d309c91a9e21bc858a4d8810adbedf2b1041e6 Mon Sep 17 00:00:00 2001
From: Guillaume Demesy <guillaume.demesy@gmail.com>
Date: Tue, 14 Jun 2016 19:42:37 +0200
Subject: [PATCH 4/4] Issue #482 - fixed className

---
 webcompat/static/css/development/components/tag.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webcompat/static/css/development/components/tag.css b/webcompat/static/css/development/components/tag.css
index fbe200d85..51819b40b 100644
--- a/webcompat/static/css/development/components/tag.css
+++ b/webcompat/static/css/development/components/tag.css
@@ -16,7 +16,7 @@
 }
 
   /* modifier */
-  .wc-tag--filter {
+  .wc-Tag--filter {
     cursor:pointer;
   }