From 1baf634d1fc78495ab4c2eb3fb89d45d5a5ce561 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Wed, 27 Aug 2014 14:36:49 +0200
Subject: [PATCH] Improved filters styles. Fixes #711

---
 .../views/modules/backlog-filters.jade        |  2 +-
 app/partials/views/modules/filters.jade       |  2 +-
 .../views/modules/issues-filters.jade         | 10 ++--
 app/styles/modules/filters/filters.scss       | 46 +++++++++----------
 4 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/app/partials/views/modules/backlog-filters.jade b/app/partials/views/modules/backlog-filters.jade
index aa98ad52..442e1eb7 100644
--- a/app/partials/views/modules/backlog-filters.jade
+++ b/app/partials/views/modules/backlog-filters.jade
@@ -1,7 +1,7 @@
 section.filters
     div.filters-inner
         h1
-            a.title(href="", title="back to categories") filters
+            span.title filters
 
         form
             fieldset
diff --git a/app/partials/views/modules/filters.jade b/app/partials/views/modules/filters.jade
index 79b70554..a98fc35b 100644
--- a/app/partials/views/modules/filters.jade
+++ b/app/partials/views/modules/filters.jade
@@ -4,7 +4,7 @@
 section.filters
     div.filters-inner
         h1
-            a.title(href="", title="back to categories") filters
+            span.title filters
 
         form
             fieldset
diff --git a/app/partials/views/modules/issues-filters.jade b/app/partials/views/modules/issues-filters.jade
index 9731321a..c0b89bc3 100644
--- a/app/partials/views/modules/issues-filters.jade
+++ b/app/partials/views/modules/issues-filters.jade
@@ -1,14 +1,14 @@
 section.filters
     div.filters-inner
         h1
-            a.title filters
+            span.title filters
         form
             fieldset
                 input(type="text", placeholder="Search by subject...", ng-model="filtersSubject")
                 a.icon.icon-search(href="", title="search")
         div.filters-step-cat
             div.filters-applied
-            a.hide.button.save-filters(href="", title="save", ng-class="{hide: filters.length}") save
+            a.hide.button.button-gray.save-filters(href="", title="save", ng-class="{hide: filters.length}") save as custom filter
             h2.hidden.breadcrumb
                 a.back(href="", title="back to categories") Filters
                 span.icon-arrow-right
@@ -44,9 +44,9 @@ section.filters
                         a(href="", title="Created by", data-type="createdBy")
                             span.title Created by
                             span.icon.icon-arrow-right
-                    li(ng-if="filters.myFilters.length")
-                        a(href="", title="My filters", data-type="myFilters")
-                            span.title My filters
+                    li.custom-filters(ng-if="filters.myFilters.length")
+                        a(href="", title="Custom filters", data-type="myFilters")
+                            span.title Custom filters
                             span.icon.icon-arrow-right
 
         div.filter-list.hidden
diff --git a/app/styles/modules/filters/filters.scss b/app/styles/modules/filters/filters.scss
index 25240cbf..4bf75748 100644
--- a/app/styles/modules/filters/filters.scss
+++ b/app/styles/modules/filters/filters.scss
@@ -27,26 +27,26 @@
         }
     }
     h2 {
+        @extend %large;
         margin-top: 1rem;
-        .subfilter {
-            @extend %large;
+        .icon-arrow-right {
+            @extend %medium;
+            vertical-align: middle;
         }
     }
-    form {
-        input {
-            background: $grayer;
-            color: $white;
-            @include placeholder {
-                color: $gray-light;
-            }
-        }
-        .icon-search {
+    input[type="text"] {
+        background: $grayer;
+        color: $white;
+        @include placeholder {
             color: $gray-light;
-            position: absolute;
-            right: .7rem;
-            top: .7rem;
         }
     }
+    .icon-search {
+        color: $gray-light;
+        position: absolute;
+        right: .7rem;
+        top: .7rem;
+    }
 }
 
 .filters-inner {
@@ -63,8 +63,9 @@
 
 .filters-step-cat {
     .save-filters {
-        float: right;
-        padding: 8 0;
+        color: $white;
+        display: block;
+        text-align: center;
     }
     .my-filter-name {
         background: $grayer;
@@ -74,14 +75,6 @@
             color: $gray-light;
         }
     }
-    .breadcrumb {
-        .back {
-            @extend %xlarge;
-        }
-        .icon-arrow-right {
-            @extend %large;
-        }
-    }
 }
 
 .filters-cats {
@@ -90,6 +83,11 @@
         border-bottom: 1px solid $gray-light;
         text-transform: uppercase;
     }
+    .custom-filters {
+        .title {
+            color: $green-taiga;
+        }
+    }
     a {
         @include transition (color .2s ease-in);
         color: $grayer;