Merge branch 'refactor-ui-lists' into 'master'

Refactor colors and lists

* Introduce 2 color links: black and blue
* Use black color link for UI elements like lists
* Refactor lists to use .title nested under li
* Make all lists (events, todos, activity, projects etc) use style
* List colorschema is now 333 for links and 555 for text

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

cc @jschatz1 @skyruler 

See merge request !3307

14 files changed, 61 insertions, 76 deletions

diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 2b4bb1eebf9..b17c8bcbb1e 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -111,14 +111,17 @@ ul.content-list {
 
   > li {
     border-color: $table-border-color;
-    color: $list-text-color;
     font-size: $list-font-size;
+    color: $list-text-color;
 
     .title {
-      color: $list-title-color;
       font-weight: 600;
     }
 
+    a {
+      color: $gl-dark-link-color;
+    }
+
     .description {
       p {
         @include str-truncated;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index d455a3d8e29..be626678bd7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -10,36 +10,37 @@ $gutter_inner_width: 258px;
 /*
  * UI elements
  */
-$border-color: #efeff1;
+$border-color:       #efeff1;
 $table-border-color: #eef0f2;
-$background-color: #faf9f9;
+$background-color:   #faf9f9;
 
 /*
  * Text
  */
-$gl-font-size: 15px;
-$gl-title-color: #333;
-$gl-text-color: #555;
+$gl-font-size:         15px;
+$gl-title-color:       #333;
+$gl-text-color:        #555;
+$gl-text-green:        #4a2;
+$gl-text-red:          #d12f19;
+$gl-text-orange:       #d90;
+$gl-link-color:        #3084bb;
+$gl-dark-link-color:   #333;
 $gl-placeholder-color: #8f8f8f;
-$gl-text-green: #4a2;
-$gl-text-red: #d12f19;
-$gl-text-orange: #d90;
-$gl-header-color: $gl-title-color;
-$gl-link-color: #333c48;
-$gl-gray: $gl-text-color;
+$gl-gray:              $gl-text-color;
+$gl-header-color:      $gl-title-color;
 
 /*
  * Lists
  */
-$list-font-size: $gl-font-size;
+$list-font-size:   $gl-font-size;
 $list-title-color: $gl-title-color;
-$list-text-color: $gl-text-color;
+$list-text-color:  $gl-text-color;
 
 /*
  * Markdown
  */
-$md-text-color: #444;
-$md-link-color: #3084bb;
+$md-text-color: $gl-text-color;
+$md-link-color: $gl-link-color;
 
 /*
  * Code
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index d57be1b2daa..33b3c7558ed 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -55,7 +55,7 @@ li.commit {
     }
 
     .commit-row-message {
-      color: $gl-link-color;
+      color: $gl-dark-link-color;
 
       &:hover {
         text-decoration: underline;
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 040e1d38678..84eefd01cfe 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -21,7 +21,7 @@
   }
 
   a {
-    color: #4c4e54;
+    color: $gl-dark-link-color;
   }
 
   .avatar {
@@ -31,11 +31,7 @@
   .event-title {
     @include str-truncated(calc(100% - 174px));
     font-weight: 600;
-    color: $list-title-color;
-
-    a {
-      color: $list-title-color;
-    }
+    color: $list-text-color;
   }
 
   .event-body {
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 76bd6d9a8a7..6a1d28590c2 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -3,7 +3,7 @@
     padding: 10px $gl-padding;
     position: relative;
 
-    .issue-title {
+    .title {
       margin-bottom: 2px;
     }
 
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index dbd6585fc31..f983e9829e6 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -14,26 +14,8 @@
 }
 
 .todo-item {
-  font-size: $gl-font-size;
-  padding-left: $gl-avatar-size + $gl-padding-top;
-  color: $gl-text-color;
-
-  a {
-    color: #4c4e54;
-  }
-
-  .avatar {
-    margin-left: -($gl-avatar-size + $gl-padding-top);
-  }
-
   .todo-title {
     @include str-truncated(calc(100% - 174px));
-    font-weight: 600;
-    color: $list-title-color;
-
-    a {
-      color: $list-title-color;
-    }
   }
 
   .todo-body {
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 73c7c9f687c..25b5e95583e 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -41,7 +41,7 @@
       vertical-align: middle;
 
       i, a {
-        color: $gl-link-color;
+        color: $gl-dark-link-color;
       }
 
       img {
diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml
index 4c848a50181..e3a4d64df01 100644
--- a/app/views/dashboard/todos/_todo.html.haml
+++ b/app/views/dashboard/todos/_todo.html.haml
@@ -2,7 +2,7 @@
   .todo-item.todo-block
     = image_tag avatar_icon(todo.author_email, 40), class: 'avatar s40', alt:''
 
-    .todo-title
+    .todo-title.title
       %span.author-name
         - if todo.author
           = link_to_author(todo)
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 623381375a5..f9ec3a89158 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -51,7 +51,7 @@
         .panel-heading
           = link_to project.name_with_namespace, namespace_project_path(project.namespace, project)
 
-        %ul.well-list.todos-list
+        %ul.content-list.todos-list
           = render group[1]
     = paginate @todos, theme: "gitlab"
   - else
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index 00e1a3d8069..4aa92d0b39e 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -3,11 +3,11 @@
     .issue-check
       = check_box_tag dom_id(issue,"selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
 
-  .issue-title
+  .issue-title.title
     %span.issue-title-text
       = confidential_icon(issue)
-      = link_to_gfm issue.title, issue_path(issue), class: "title"
-    %ul.controls.light
+      = link_to_gfm issue.title, issue_path(issue)
+    %ul.controls
       - if issue.closed?
         %li
           CLOSED
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 18cf3f14f0b..13d0cbdde1d 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -1,8 +1,8 @@
 %li{ class: mr_css_classes(merge_request) }
-  .merge-request-title
+  .merge-request-title.title
     %span.merge-request-title-text
-      = link_to_gfm merge_request.title, merge_request_path(merge_request), class: "title"
-    %ul.controls.light
+      = link_to_gfm merge_request.title, merge_request_path(merge_request)
+    %ul.controls
       - if merge_request.merged?
         %li
           MERGED
diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml
index fb9a8db0889..f172350f5ff 100644
--- a/app/views/shared/groups/_group.html.haml
+++ b/app/views/shared/groups/_group.html.haml
@@ -10,7 +10,7 @@
           %i.fa.fa-cogs
 
       = link_to leave_group_group_members_path(group), data: { confirm: leave_group_message(group.name) }, method: :delete, class: "btn-sm btn btn-grouped", title: 'Leave this group' do
-        %i.fa.fa-sign-out
+        = icon('sign-out')
 
   .stats
     %span
@@ -22,12 +22,13 @@
       = number_with_delimiter(group.users.count)
 
   = image_tag group_icon(group), class: "avatar s40 hidden-xs"
-  = link_to group, class: 'group-name title' do
-    = group.name
+  .title
+    = link_to group, class: 'group-name' do
+      = group.name
 
-  - if group_member
-    as
-    %span #{group_member.human_access}
+    - if group_member
+      as
+      %span #{group_member.human_access}
 
   - if group.description.present?
     .description
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 97cfb76cdb0..872d2bdf46d 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -7,26 +7,11 @@
 - show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true && project.commit
 - css_class += " no-description" if project.description.blank? && !show_last_commit_as_description
 - ci_commit = project.ci_commit(project.commit.sha) if ci && !project.empty_repo? && project.commit
-- cache_key = [project.namespace, project, controller.controller_name, controller.action_name, current_application_settings, 'v2.2']
+- cache_key = [project.namespace, project, controller.controller_name, controller.action_name, current_application_settings, 'v2.3']
 - cache_key.push(ci_commit.status) if ci_commit
 
 %li.project-row{ class: css_class }
   = cache(cache_key) do
-    = link_to project_path(project), class: dom_class(project) do
-      - if avatar
-        .dash-project-avatar
-          - if use_creator_avatar
-            = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
-          - else
-            = project_icon(project, alt: '', class: 'avatar project-avatar s40')
-      %span.project-full-name.title
-        %span.namespace-name
-          - if project.namespace && !skip_namespace
-            = project.namespace.human_name
-            \/
-        %span.project-name.filter-title
-          = project.name
-
     .controls
       - if project.main_language
         %span
@@ -45,6 +30,23 @@
       %span.visibility-icon.has_tooltip{data: { container: 'body', placement: 'left' },
         title: "#{visibility_level_label(project.visibility_level)} - #{project_visibility_level_description(project.visibility_level)}"}
         = visibility_level_icon(project.visibility_level, fw: false)
+
+    .title
+      = link_to project_path(project), class: dom_class(project) do
+        - if avatar
+          .dash-project-avatar
+            - if use_creator_avatar
+              = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
+            - else
+              = project_icon(project, alt: '', class: 'avatar project-avatar s40')
+        %span.project-full-name
+          %span.namespace-name
+            - if project.namespace && !skip_namespace
+              = project.namespace.human_name
+              \/
+          %span.project-name.filter-title
+            = project.name
+
     - if show_last_commit_as_description
       .description
         = link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml
index a316a085107..c96dfefe17f 100644
--- a/app/views/shared/snippets/_snippet.html.haml
+++ b/app/views/shared/snippets/_snippet.html.haml
@@ -1,8 +1,8 @@
 %li.snippet-row
   = image_tag avatar_icon(snippet.author_email), class: "avatar s40 hidden-xs", alt: ''
 
-  .snippet-title
-    = link_to reliable_snippet_path(snippet), class: 'title' do
+  .title
+    = link_to reliable_snippet_path(snippet) do
       = truncate(snippet.title, length: 60)
       - if snippet.private?
         %span.label.label-gray