Project page Update

refactoring buttons, fixes for projects filter on the dashboard and
group page

12 files changed, 263 insertions, 195 deletions

diff --git a/app/assets/stylesheets/base/mixins.scss b/app/assets/stylesheets/base/mixins.scss
index cdebe498914..5a7e79ddecd 100644
--- a/app/assets/stylesheets/base/mixins.scss
+++ b/app/assets/stylesheets/base/mixins.scss
@@ -299,4 +299,4 @@
       color: #78a;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss
index 46ef595ddf0..cf76f538e01 100644
--- a/app/assets/stylesheets/generic/buttons.scss
+++ b/app/assets/stylesheets/generic/buttons.scss
@@ -1,3 +1,6 @@
+body {
+    text-rendering: geometricPrecision;
+}
 .btn {
   @extend .btn-default;
 
@@ -88,3 +91,138 @@
     }
   }
 }
+
+@mixin btn-info {
+  @include border-radius(2px);
+  
+  border-width: 1px;
+  border-style: solid;
+  text-transform: uppercase;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  padding: 11px 16px;
+  letter-spacing: .4px;
+  
+  &:hover {
+    border-width: 1px;
+    border-style: solid;
+  }
+  
+  &:focus {
+    border-width: 1px;
+    border-style: solid;
+  }
+  
+  &:active {
+    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+    border-width: 1px;
+    border-style: solid;
+  }
+}
+
+@mixin btn-middle {
+  @include border-radius(2px);
+  
+  border-width: 1px;
+  border-style: solid;
+  text-transform: uppercase;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  padding: 11px 24px;
+  letter-spacing: .4px;
+  
+  &:hover {
+    border-width: 1px;
+    border-style: solid;
+  }
+  
+  &:focus {
+    border-width: 1px;
+    border-style: solid;
+  }
+  
+  &:active {
+    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+    border-width: 1px;
+    border-style: solid;
+    }
+}
+
+
+@mixin btn-green {
+  background-color: #28b061;
+  border: 1px solid #26a65c;
+  color: #fff;
+    
+     &:hover {
+       background-color: #26ab5d;
+       border: 1px solid #229954;
+       color: #fff;
+     }
+     
+     &:focus {
+       background-color: #26ab5d;
+       border: 1px solid #229954;
+       color: #fff;
+     }
+     
+     &:active {
+       @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
+        
+       background-color: #23a158 !important;
+       border: 1px solid #229954 !important;
+       color: #fff !important;
+     } 
+}
+
+/*Butons*/
+
+@mixin bnt-project {
+  background-color: #f0f2f5;
+  border-color: #dce0e5;
+  color: #313236;
+  
+  &:hover {
+    border-color:#dce0e5;
+    background-color: #ebeef2;
+    color: #313236;
+  }
+   
+  &:focus {
+    border-color: #dce0e5;
+    background-color: #ebeef2;
+    color: #313236;
+  }
+  
+  &:active {
+   @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+   
+      color: #313236 !important;
+      border-color: #c6cacf !important;
+      background-color: #e4e7ed !important;
+  }
+}
+
+@mixin btn-remove {
+  background-color: #f72e60;
+  border-color: #ee295a;
+  
+  &:hover {
+    background-color: #e82757;
+    border-color: #e32555;
+  }
+  
+  &:focus {
+    background-color: #e82757;
+    border-color: #e32555;
+  }
+  
+  &:active {
+    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+    background-color: #d42450 !important;
+    border-color: #e12554 !important;
+  }
+  
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss
index b758a526fbb..543ce41ab52 100644
--- a/app/assets/stylesheets/generic/header.scss
+++ b/app/assets/stylesheets/generic/header.scss
@@ -26,7 +26,6 @@ header {
     min-height: $header-height;
     background-color: #fff;
     border: none;
-    border-bottom: 1px solid #EEE;
 
     .container-fluid {
       width: 100% !important;
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
index 3d055f0e66f..c5ea3aca7ca 100644
--- a/app/assets/stylesheets/generic/sidebar.scss
+++ b/app/assets/stylesheets/generic/sidebar.scss
@@ -21,12 +21,11 @@
   min-height: 100vh;
   width: 100%;
   padding: 20px;
-  background: #f1f4f8;
+  background: #EAEBEC;
 
   .container-fluid {
     background: #FFF;
     padding: $gl-padding;
-    border: 1px solid #e7e9ed;
     min-height: 90vh;
 
     &.container-blank {
diff --git a/app/assets/stylesheets/generic/typography.scss b/app/assets/stylesheets/generic/typography.scss
index bfb559c294b..0ccb21f3cd1 100644
--- a/app/assets/stylesheets/generic/typography.scss
+++ b/app/assets/stylesheets/generic/typography.scss
@@ -2,10 +2,10 @@
  * Headers
  *
  */
- 
- body {
-  text-rendering: optimizeLegibility
- }
+body {
+  text-rendering:optimizeLegibility;
+  -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
+}
  
 .page-title {
   margin-top: 0px;
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 2b1b747139a..07a38a19fad 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -10,3 +10,9 @@
 .milestone-row {
   @include str-truncated(90%);
 }
+
+.dashboard .side .panel .panel-heading .input-group {
+  .form-control {
+    height: 42px;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 621ba2fe2c8..a5940543a9d 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -1,3 +1,14 @@
+.alert_holder {
+  margin: -16px;
+  
+  .alert-link {
+    font-weight: normal;
+  }
+}
+.no-ssh-key-message {
+  background-color: #f28d35;
+  margin-bottom: 16px;
+}
 .new_project,
 .edit_project {
   fieldset.features {
@@ -20,20 +31,20 @@
   margin: -$gl-padding;
   padding: $gl-padding;
   padding: 44px 0 17px 0;
-
+  
   .project-identicon-holder {
     margin-bottom: 16px;
-
+    
     .avatar, .identicon {
       margin: 0 auto;
       float: none;
     }
-
+    
     .identicon {
       @include border-radius(50%);
     }
   }
-
+  
   .project-home-dropdown {
     margin: 11px 3px 0;
   }
@@ -59,7 +70,7 @@
       background: #FFF;
       font-size: 14px;
       height: 42px;
-      margin-left: -2px;
+      margin-left: -1px;
     }
   }
 
@@ -75,45 +86,15 @@
     top: 17px;
     margin-bottom: 44px;
   }
+  
   .project-repo-buttons {
     margin-top: 12px;
     margin-bottom: 0px;
-
+    
     .btn {
-      @extend .btn-info;
-      @include border-radius(2px);
+      @include bnt-project;
+      @include btn-info;
       
-      background-color: #f0f2f5;
-      border: 1px solid #dce0e5;
-      text-transform: uppercase;
-      color: #313236;
-      font-size: 13px;
-      font-weight: 600;
-      line-height: 18px;
-      padding: 11px 16px;
-      margin-left: 12px;
-
-      &:hover {
-        @include border-radius(2px);
-        color: #313236;
-        border: 1px solid #dce0e5;
-        background-color: #ebeef2;
-      }
-    
-      &:focus {
-        @include border-radius(2px);
-        color: #313236;
-        border: 1px solid #dce0e5;
-        background-color: #ebeef2;
-      }
-    
-      &:active {
-        @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
-        color: #313236 !important;
-        border: 1px solid #c6cacf !important;
-	      background-color: #e4e7ed !important;
-      }
-
       .count {
         display: inline-block;
       }
@@ -123,6 +104,7 @@
 
 .split-one {
   display: inline-table;
+  margin-right: 12px;
   
   a {
     margin: -1px !important;
@@ -138,7 +120,7 @@
     cursor: auto;
     @extend .monospace;
     background: #FAFAFA;
-    width: 100%;
+    width: 101%;
   }
 
   .input-group-addon {
@@ -147,106 +129,66 @@
     &.git-protocols {
       padding: 0;
       border: none;
-
+      
       .input-group-btn:last-child > .btn {
         @include border-radius-right(0);
         
         border-left: 1px solid #c6cacf;
         margin-left: -2px !important;
       }
-      input-group-btn:first-child > .btn {
-        @include border-radius-left(0);
-      }
     }
   }
 }
 
 .projects-search-form {
   
-  .input-group .btn-success {
-    background-color: #2ebf6b !important;
-    border: 1px solid #28b061 !important;
-    color: #fff !important;
-    
-     &:hover {
-       background-color: #2eb867 !important;
-     }
-     
-     &:focus {
-       background-color: #2eb867 !important;
-     }
-     
-     &:active {
-       @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
-        
-       background-color: #28b061 !important;
-       border: 1px solid #26a65c !important;
-       color: #fff !important;
-     } 
-  }
-  
   .input-group .form-control {
-    height: 39px !important;
+    height: 42px;
   }
-    
 }
 
-.input-group-btn > .btn {
-  background-color: #f0f2f5;
-  border: 1px solid #dce0e5;
-  text-transform: uppercase;
-  color: #313236;
-  font-size: 13px;
-  font-weight: 600;
-  
-  &:focus {
-    outline: none;
-    color: #313236;
-    border: 1px solid #dce0e5;
-    background-color: #ebeef2;
-  }
-  
-  &:hover {
-    outline: none;
-    color: #313236;
-    border: 1px solid #dce0e5;
-    background-color: #ebeef2;
+.input-group-btn {
+  .btn {    
+    @include bnt-project;
+    @include btn-middle;
+    
+    &:hover {
+      outline: none;
+    }
+    
+    &:focus {
+      outline: none;
+    }
+    
+    &:active {
+      outline: none;
+    }
   }
   
-  &:active {
+  .active {
     @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
     
-    color: #313236 !important;
     border: 1px solid #c6cacf !important;
     background-color: #e4e7ed !important;
   }
-
-}
-
-.input-group-btn > .btn.active {
-  @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
   
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-  color: #313236 !important;
-  border: 1px solid #c6cacf !important;
-  background-color: #e4e7ed !important;
+  .btn-green {
+    @include btn-green
+  }
+  
 }
 
 .split-repo-buttons {
   display: inline-table;
-  margin-left: 12px;
+  margin: 0 12px 0 12px;
   
-  .btn {
-    margin: 0 !important;
-  }
-  
-  .dropdown {
-    margin: 0 !important;
+  .btn{
+    @include bnt-project;
+    @include btn-info;
   }
   
   .dropdown-toggle  {
-    margin: -5px !important;
+    margin: -5px;
   }  
 }
 
@@ -254,22 +196,25 @@
   margin-left: 5px;
 }
 
-.open > .dropdown-toggle.btn {
+.dropdown-new {
+  margin-left: -5px;
+}
+
+.open > .dropdown-new.btn {
   @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
  
   border: 1px solid #c6cacf !important;
   background-color: #e4e7ed !important;
   text-transform: uppercase;
-  color: #313236;
+  color: #313236 !important;
   font-size: 13px;
   font-weight: 600;
-  color: #313236 !important;
 }
 
 .dropdown-menu {
   @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
   @include border-radius (0px);
-   
+  
   border: none;
   padding: 16px 0;
   font-size: 14px;
@@ -298,7 +243,7 @@
 }
 
 .project-home-panel .project-home-dropdown {
-    margin: 13px 0px 0;
+  margin: 13px 0px 0;
 }
 
 .project-visibility-level-holder {
@@ -431,32 +376,12 @@ table.table.protected-branches-list tr.no-border {
   }
 
   .nav > li > a {
-    border: 1px solid transparent;
-    color: #313236;
-    font-size: 13px;
-    font-weight: 600;
-    text-decoration: none;
-    text-transform: uppercase;
-    margin: 0 8px 0 0;
-    padding: 10px 16px 10px 16px;
-    
-    &:hover {
-      @include border-radius(2px);
-      border: 1px solid #dce0e5;
-      background-color: #f0f2f5;
-    }
-    
-    &:focus {
-      @include border-radius(2px);
-      border: 1px solid #dce0e5;
-      background-color: #f0f2f5;
-    }
+    @include btn-info;
+    @include bnt-project;
     
-    &:active {
-       @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
-      border: 1px solid #c6cacf;
-	    background-color: #e4e7ed;
-   }
+    background-color: transparent;
+    border: 1px solid #f7f8fa;
+    margin-left: 12px;
   }
   
   li {
@@ -501,29 +426,27 @@ pre.light-well {
   .light-well {
     @include border-radius (2px);
     
-    color: #5b6169 !important;
-    font-size: 13px !important;
-    line-height: 1.6em !important;
+    color: #5b6169;
+    font-size: 13px; 
+    line-height: 1.6em; 
   }
 }
 
 .prepend-top-20 {
-  margin: 20px 8px 20px 8px;
+  margin-top: 20px;
   
   .btn-remove {
-    @include border-radius (2px);
+    @include btn-middle;
+    @include btn-remove;
     
-    font-size: 13px;
-    font-weight: 600px;
-    text-transform: uppercase;
     float: left !important;
-    margin-bottom: 14px;
   }
 }
 
 /*
  * Projects list rendered on dashboard and user page
  */
+ 
 .projects-list {
   @include basic-list;
 
@@ -581,3 +504,4 @@ pre.light-well {
 .inline-form {
   display: inline-block;
 }
+
diff --git a/app/views/dashboard/projects/_projects.html.haml b/app/views/dashboard/projects/_projects.html.haml
index ef9b9ce756a..0afe4e651c7 100644
--- a/app/views/dashboard/projects/_projects.html.haml
+++ b/app/views/dashboard/projects/_projects.html.haml
@@ -4,7 +4,7 @@
       = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control'
       - if current_user.can_create_project?
         %span.input-group-btn
-          = link_to new_project_path, class: 'btn btn-success' do
+          = link_to new_project_path, class: 'btn btn-green' do
             New project
 
   = render 'shared/projects/list', projects: @projects
diff --git a/app/views/groups/_projects.html.haml b/app/views/groups/_projects.html.haml
index 9ac56b1e5fe..2b27a88794d 100644
--- a/app/views/groups/_projects.html.haml
+++ b/app/views/groups/_projects.html.haml
@@ -4,7 +4,7 @@
       = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control'
       - if can? current_user, :create_projects, @group
         %span.input-group-btn
-          = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-success' do
+          = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-green' do
             New project
 
   = render 'shared/projects/list', projects: @projects, projects_limit: 20, stars: false
diff --git a/app/views/projects/buttons/_dropdown.html.haml b/app/views/projects/buttons/_dropdown.html.haml
index bc7625e8989..4580c912692 100644
--- a/app/views/projects/buttons/_dropdown.html.haml
+++ b/app/views/projects/buttons/_dropdown.html.haml
@@ -1,6 +1,6 @@
 - if current_user
   %span.dropdown
-    %a.dropdown-toggle.btn.btn-new{href: '#', "data-toggle" => "dropdown"}
+    %a.dropdown-new.btn.btn-new{href: '#', "data-toggle" => "dropdown"}
       = icon('plus')
     %ul.dropdown-menu.dropdown-menu-right.project-home-dropdown
       - if can?(current_user, :create_issue, @project)
diff --git a/app/views/projects/buttons/_notifications.html.haml b/app/views/projects/buttons/_notifications.html.haml
index 57f764178d5..4b69a6d7a6f 100644
--- a/app/views/projects/buttons/_notifications.html.haml
+++ b/app/views/projects/buttons/_notifications.html.haml
@@ -5,7 +5,7 @@
   = hidden_field_tag :notification_id, @membership.id
   = hidden_field_tag :notification_level
   %span.dropdown
-    %a.dropdown-toggle.btn.btn-new#notifications-button{href: '#', "data-toggle" => "dropdown"}
+    %a.dropdown-new.btn.btn-new#notifications-button{href: '#', "data-toggle" => "dropdown"}
       = icon('bell')
       = notification_label(@membership)
       = icon('angle-down')
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 185ebf23934..d8f9f692c0b 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -1,7 +1,8 @@
-- if current_user && can?(current_user, :download_code, @project)
-  = render 'shared/no_ssh'
-  = render 'shared/no_password'
-
+.alert_holder
+  - if current_user && can?(current_user, :download_code, @project)
+    = render 'shared/no_ssh'
+    = render 'shared/no_password'
+    
 = render "home_panel"
 
 .gray-content-block.center
@@ -15,38 +16,39 @@
     file to this project.
 
 .prepend-top-20
-%h3.page-title
-  Command line instructions
-%div.git-empty
-  %fieldset
-    %h5 Git global setup
-    %pre.light-well
-      :preserve
-        git config --global user.name "#{h git_user_name}"
-        git config --global user.email "#{h git_user_email}"
+.empty_wrapper
+  %h3.page-title
+    Command line instructions
+  %div.git-empty
+    %fieldset
+      %h5 Git global setup
+      %pre.light-well
+        :preserve
+          git config --global user.name "#{h git_user_name}"
+          git config --global user.email "#{h git_user_email}"
 
-  %fieldset
-    %h5 Create a new repository
-    %pre.light-well
-      :preserve
-        git clone #{ content_tag(:span, default_url_to_repo, class: 'clone')}
-        cd #{h @project.path}
-        touch README.md
-        git add README.md
-        git commit -m "add README"
-        git push -u origin master
+    %fieldset
+      %h5 Create a new repository
+      %pre.light-well
+        :preserve
+          git clone #{ content_tag(:span, default_url_to_repo, class: 'clone')}
+          cd #{h @project.path}
+          touch README.md
+          git add README.md
+          git commit -m "add README"
+          git push -u origin master
 
-  %fieldset
-    %h5 Existing folder or Git repository
-    %pre.light-well
-      :preserve
-        cd existing_folder
-        git init
-        git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')}
-        git add .
-        git commit
-        git push -u origin master
+    %fieldset
+      %h5 Existing folder or Git repository
+      %pre.light-well
+        :preserve
+          cd existing_folder
+          git init
+          git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')}
+          git add .
+          git commit
+          git push -u origin master
 
-- if can? current_user, :remove_project, @project
-  .prepend-top-20
-    = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-remove pull-right"
+      - if can? current_user, :remove_project, @project
+        .prepend-top-20
+          = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-remove pull-right"