From 7ad4521f66b578c0aecf9afb09194626a4c2aa6a Mon Sep 17 00:00:00 2001
From: Andrey <ad@2d-arts.com>
Date: Mon, 5 Oct 2015 21:18:21 +0200
Subject: [PATCH 1/3] Fixes to dropdown, font colors for new project and merge
 request

---
 app/assets/stylesheets/generic/buttons.scss   | 311 ++++++++++--------
 app/assets/stylesheets/generic/common.scss    |   8 +
 app/assets/stylesheets/generic/forms.scss     |  24 +-
 app/assets/stylesheets/generic/issue_box.scss |   2 +-
 app/assets/stylesheets/generic/selects.scss   |  42 ++-
 app/assets/stylesheets/generic/timeline.scss  |   4 +-
 app/assets/stylesheets/pages/issuable.scss    |   9 +-
 .../stylesheets/pages/merge_requests.scss     |  23 +-
 app/assets/stylesheets/pages/note_form.scss   |   8 +-
 app/assets/stylesheets/pages/notes.scss       |   2 +-
 app/assets/stylesheets/pages/projects.scss    |  37 ++-
 .../projects/merge_requests/_show.html.haml   |   2 +-
 app/views/projects/new.html.haml              |  20 +-
 app/views/projects/notes/_form.html.haml      |   2 +-
 14 files changed, 303 insertions(+), 191 deletions(-)

diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss
index cf76f538e0..50c3de089f 100644
--- a/app/assets/stylesheets/generic/buttons.scss
+++ b/app/assets/stylesheets/generic/buttons.scss
@@ -1,8 +1,182 @@
 body {
     text-rendering: geometricPrecision;
 }
+
+@mixin btn-default {
+  @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 btn-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-light {
+  background-color: #fff;
+  border-color: #dce0e5;
+  color: #313236;
+  
+  &:hover {
+    border-color:#dce0e5;
+    background-color: #f0f2f5;
+    color: #313236;
+  }
+   
+  &:focus {
+    border-color: #dce0e5;
+    background-color: #f0f2f5;
+    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;
+  }
+  
+}
+
+
+.btn-info {
+  @include btn-default;
+  @include btn-project;
+}
+
+.btn-success {
+  @include btn-default;
+  @include btn-green;
+  
+}
+
 .btn {
-  @extend .btn-default;
+  @include btn-default;
 
   &.btn-new {
     @extend .btn-success;
@@ -90,139 +264,4 @@ body {
       color: #fff;
     }
   }
-}
-
-@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/common.scss b/app/assets/stylesheets/generic/common.scss
index 45e284542d..03919f15f1 100644
--- a/app/assets/stylesheets/generic/common.scss
+++ b/app/assets/stylesheets/generic/common.scss
@@ -394,3 +394,11 @@ table {
 .dropzone .dz-preview .dz-progress .dz-upload {
   background: $gl-success !important;
 }
+
+.space-right {
+  margin-right: 10px;
+}
+
+.in-line {
+  display: inline-block;
+}
diff --git a/app/assets/stylesheets/generic/forms.scss b/app/assets/stylesheets/generic/forms.scss
index 4282832e2b..98a7c3ad8a 100644
--- a/app/assets/stylesheets/generic/forms.scss
+++ b/app/assets/stylesheets/generic/forms.scss
@@ -30,9 +30,6 @@ input[type='text'].danger {
 }
 
 @media (min-width: $screen-sm-min) {
-  .form-actions {
-    padding-left: 17%;
-  }
 }
 
 label {
@@ -84,3 +81,24 @@ label {
 .wiki-content {
   margin-top: 35px;
 }
+
+.form-group .control-label {
+  font-weight: normal;
+  font-color: #313236 !important;
+}
+
+.form-control {
+  @include border-radius (2px);
+}
+
+.form-control::-webkit-input-placeholder{
+  color:#7f8fa4;
+}
+
+.input-group {
+  @include border-radius (2px);
+  
+  .input-group-addon {
+    background-color: #f7f8fa;
+  }
+}
diff --git a/app/assets/stylesheets/generic/issue_box.scss b/app/assets/stylesheets/generic/issue_box.scss
index b1fb87a683..93377e45e7 100644
--- a/app/assets/stylesheets/generic/issue_box.scss
+++ b/app/assets/stylesheets/generic/issue_box.scss
@@ -5,7 +5,7 @@
  */
 
 .issue-box {
-  @include border-radius(3px);
+  @include border-radius(2px);
 
   display: inline-block;
   padding: 10px $gl-padding;
diff --git a/app/assets/stylesheets/generic/selects.scss b/app/assets/stylesheets/generic/selects.scss
index f0860de1c4..633dfea522 100644
--- a/app/assets/stylesheets/generic/selects.scss
+++ b/app/assets/stylesheets/generic/selects.scss
@@ -8,7 +8,7 @@
     font-size: $gl-font-size;
     line-height: 1.42857143;
 
-    @include border-radius(4px);
+    @include border-radius(2px);
 
     .select2-arrow {
       background: #FFF;
@@ -18,8 +18,39 @@
   }
 }
 
+.select2-container .select2-choice, .select2-container.select2-drop-above .select2-choice{
+  color: #7f8fa4;
+  border: 1px solid #e7e9ed;
+}
+
+.select2-drop {
+  @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);
+  
+  padding: 16px 20px;
+  border: none !important;
+}
+
+.select2-results .select2-result-label {
+  padding: 16px 20px;
+}
+
+.select2-drop{
+  color: #7f8fa4;
+}
+
+.select2-highlighted {
+  background: #3084bb !important;
+}
+
+.select2-results li.select2-result-with-children > .select2-result-label {
+  font-weight: 600;
+  color: #313236;
+}
+
+
 .select2-container-multi .select2-choices {
-  @include border-radius(4px);
+  @include border-radius(2px);
   border-color: #CCC;
 }
 
@@ -63,7 +94,7 @@
 
 .ajax-users-dropdown, .ajax-project-users-dropdown {
   .select2-search {
-    padding-top: 4px;
+    padding-top: 2px;
   }
 }
 
@@ -97,9 +128,6 @@
   }
   .user-name {
   }
-  .user-username {
-    color: #999;
-  }
 }
 
 .namespace-result {
@@ -115,4 +143,4 @@
 
 .ajax-users-dropdown {
   min-width: 225px !important;
-}
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/generic/timeline.scss b/app/assets/stylesheets/generic/timeline.scss
index 74bbaabad3..bf21d7fce7 100644
--- a/app/assets/stylesheets/generic/timeline.scss
+++ b/app/assets/stylesheets/generic/timeline.scss
@@ -10,8 +10,8 @@
     margin-left: -$gl-padding;
     margin-right: -$gl-padding;
     color: $gl-gray;
-    border-bottom: 1px solid #f1f2f4;
-    border-right: 1px solid #f1f2f4;
+    border-bottom: 1px solid #ECEEF1;
+    border-right: 1px solid #ECEEF1;
 
     &:last-child {
       border-bottom: none;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index b5c61f7f91..9da085a347 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -54,21 +54,22 @@
     margin-top: -15px;
     padding: 10px 0;
     margin-bottom: 0;
-    color: $gl-gray;
+    color: #5c5d5e;
     font-size: 16px;
 
     .author {
-      color: $gl-gray;
+      color: #5c5d5e;
     }
 
     .issue-id {
-      font-size: 19px;
-      color: $gl-text-color;
+      color: #5c5d5e;
     }
   }
 
   .issue-title {
     margin: 0;
+    font-size: 23px;
+    color: #313236;
   }
 
   .description {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index d8c8e5ad0a..fe69d16fc4 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -3,12 +3,11 @@
  *
  */
 .mr-state-widget {
-  background: #f8fafc;
+  background: #F7F8FA;
   margin-bottom: 20px;
   color: $gl-gray;
-  border: 1px solid #eef0f2;
-  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
-  @include border-radius(3px);
+  border: 1px solid #dce0e6;
+  @include border-radius(2px);
 
   form {
     margin-bottom: 0;
@@ -76,11 +75,17 @@
   .mr-widget-footer {
     padding: 15px;
   }
+  
+  .normal {
+    color: #5c5d5e;
+  }
 
   .mr-widget-body {
     h4 {
-      font-weight: bold;
+      font-weight: 600;
+      font-size: 17px;
       margin: 5px 0;
+      color: #313236;
     }
 
     p:last-child {
@@ -102,9 +107,7 @@
   margin: -$gl-padding;
   padding: $gl-padding;
   text-align: center;
-  border-top: 1px solid #e7e9ed;
-  margin-top: 18px;
-  margin-bottom: 3px;
+  margin-bottom: 1px;
 }
 
 .mr_source_commit,
@@ -120,10 +123,12 @@
 }
 
 .label-branch {
-  color: #222;
+  color: #313236;
   font-family: $monospace_font;
   font-weight: bold;
   overflow: hidden;
+  font-size: 14px;
+  margin: 0 3px;
 }
 
 .mr-list {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index fdc2c3332d..dcd1aed719 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -72,12 +72,12 @@
 
 .common-note-form {
   margin: 0;
-  background: #f8fafc;
+  background: #F7F8FA;
   padding: $gl-padding;
   margin-left: -$gl-padding;
   margin-right: -$gl-padding;
-  border-right: 1px solid #f1f2f4;
-  border-top: 1px solid #f1f2f4;
+  border-right: 1px solid #ECEEF1;
+  border-top: 1px solid #ECEEF1;
   margin-bottom: -$gl-padding;
 }
 
@@ -168,7 +168,7 @@
 .comment-hints {
   color: #999;
   background: #FFF;
-  padding: 5px;
+  padding: 7px;
   margin-top: -11px;
   border: 1px solid $border-color;
   font-size: 13px;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 2a77f065ae..abb03b07f5 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -18,7 +18,7 @@ ul.notes {
     font-size: 14px;
     padding-top: 10px;
     padding-bottom: 10px;
-    background: #f8fafc;
+    background: #FDFDFD;
 
     .timeline-icon {
       .avatar {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 818aa10aef..38b17be798 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -13,11 +13,19 @@
 .edit_project {
   fieldset.features {
     .control-label {
-      font-weight: bold;
+      font-weight: normal;
     }
   }
 }
 
+.btn, .commits-compare-switch {
+    @include btn-light;
+}
+
+.project-edit-content {
+  padding: 7px;
+}
+
 .project-name-holder {
   .help-inline {
     vertical-align: top;
@@ -92,8 +100,8 @@
     margin-bottom: 0px;
 
     .btn {
-      @include bnt-project;
-      @include btn-info;
+      @include btn-project;
+      @include btn-default;
 
       .count {
         display: inline-block;
@@ -139,7 +147,11 @@
     }
   }
 }
+.btn-green {
+   @include btn-green;
 
+   cursor: pointer;
+}
 .projects-search-form {
 
   .input-group .form-control {
@@ -149,7 +161,7 @@
 
 .input-group-btn {
   .btn {
-    @include bnt-project;
+    @include btn-project;
     @include btn-middle;
 
     &:hover {
@@ -183,8 +195,8 @@
   margin: 0 12px 0 12px;
 
   .btn{
-    @include bnt-project;
-    @include btn-info;
+    @include btn-project;
+    @include btn-default;
   }
 
   .dropdown-toggle  {
@@ -251,18 +263,19 @@
     margin-bottom: 10px;
 
     i {
-      margin: 0 3px;
+      margin: 2px 0;
       font-size: 20px;
     }
 
     .option-title {
-      font-weight: bold;
+      font-weight: normal;
       display: inline-block;
+      color: #313236;
     }
 
     .option-descr {
-      margin-left: 36px;
-      color: $gray;
+      margin-left: 29px;
+      color: #54565b;
     }
   }
 }
@@ -376,8 +389,8 @@ table.table.protected-branches-list tr.no-border {
   }
 
   .nav > li > a {
-    @include btn-info;
-    @include bnt-project;
+    @include btn-default;
+    @include btn-project;
 
     background-color: transparent;
     border: 1px solid #f7f8fa;
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 0b0f52c653..58d8478744 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -24,7 +24,7 @@
             %ul.dropdown-menu
               %li= link_to "Email Patches", merge_request_path(@merge_request, format: :patch)
               %li= link_to "Plain Diff",    merge_request_path(@merge_request, format: :diff)
-      .light
+      .normal
         %span Request to merge
         %span.label-branch #{source_branch_with_namespace(@merge_request)}
         %span into
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index bccea21e7a..1b093c8f51 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -8,7 +8,7 @@
     = form_for @project, html: { class: 'new_project form-horizontal js-requires-input' } do |f|
       .form-group.project-name-holder
         = f.label :path, class: 'control-label' do
-          %strong Project path
+          Project path
         .col-sm-10
           .input-group
             = f.text_field :path, placeholder: "my-awesome-project", class: "form-control", tabindex: 1, autofocus: true, required: true
@@ -23,7 +23,6 @@
             = f.select :namespace_id, namespaces_options(params[:namespace_id] || :current_user), {}, {class: 'select2', tabindex: 2}
 
       - if import_sources_enabled?
-        %hr
 
         .project-import.js-toggle-container
           .form-group
@@ -35,7 +34,7 @@
                     %i.fa.fa-github
                     GitHub
                 - else
-                  = link_to '#', class: 'how_to_import_link light btn import_github' do
+                  = link_to '#', class: 'how_to_import_link btn import_github' do
                     %i.fa.fa-github
                     GitHub
                   = render 'github_import_modal'
@@ -46,7 +45,7 @@
                     %i.fa.fa-bitbucket
                     Bitbucket
                 - else
-                  = link_to status_import_bitbucket_path, class: 'how_to_import_link light btn import_bitbucket', "data-no-turbolink" => "true" do
+                  = link_to status_import_bitbucket_path, class: 'how_to_import_link btn import_bitbucket', "data-no-turbolink" => "true" do
                     %i.fa.fa-bitbucket
                     Bitbucket
                   = render 'bitbucket_import_modal'
@@ -57,7 +56,7 @@
                     %i.fa.fa-heart
                     GitLab.com
                 - else
-                  = link_to status_import_gitlab_path, class: 'how_to_import_link light btn import_gitlab' do
+                  = link_to status_import_gitlab_path, class: 'how_to_import_link btn import_gitlab' do
                     %i.fa.fa-heart
                     GitLab.com
                   = render 'gitlab_import_modal'
@@ -97,7 +96,7 @@
                     %li
                       To migrate an SVN repository, check out #{link_to "this document", "http://doc.gitlab.com/ce/workflow/importing/migrating_from_svn.html"}.
 
-      %hr.prepend-botton-10
+      .prepend-botton-10
 
       .form-group
         = f.label :description, class: 'control-label' do
@@ -112,10 +111,11 @@
 
         - if current_user.can_create_group?
           .pull-right
-            .light
-              Need a group for several dependent projects?
-              = link_to new_group_path, class: "btn btn-xs" do
-                Create a group
+            .light.in-line
+              .space-right
+                Need a group for several dependent projects?
+            = link_to new_group_path, class: "btn btn-xs" do
+              Create a group
 
 .save-project-loader.hide
   .center
diff --git a/app/views/projects/notes/_form.html.haml b/app/views/projects/notes/_form.html.haml
index d99445da59..512ccd48b3 100644
--- a/app/views/projects/notes/_form.html.haml
+++ b/app/views/projects/notes/_form.html.haml
@@ -14,6 +14,6 @@
 
   .note-form-actions
     .buttons.clearfix
-      = f.submit 'Add Comment', class: "btn comment-btn btn-grouped js-comment-button"
+      = f.submit 'Add Comment', class: "btn btn-green comment-btn btn-grouped js-comment-button"
       = yield(:note_actions)
       %a.btn.grouped.js-close-discussion-note-form Cancel

From 2acb030beaf4a04969340d7d0ede12992f8dd6fe Mon Sep 17 00:00:00 2001
From: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Date: Wed, 7 Oct 2015 17:21:15 +0200
Subject: [PATCH 2/3] Refactor button css and do some cleanup

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
---
 app/assets/stylesheets/base/gl_variables.scss |   4 +-
 app/assets/stylesheets/base/layout.scss       |   1 +
 app/assets/stylesheets/generic/buttons.scss   | 131 ++++++++----------
 app/assets/stylesheets/generic/forms.scss     |  14 +-
 app/assets/stylesheets/generic/selects.scss   |  10 +-
 app/assets/stylesheets/pages/projects.scss    |  15 +-
 6 files changed, 76 insertions(+), 99 deletions(-)

diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss
index 7378d40400..18632da4f2 100644
--- a/app/assets/stylesheets/base/gl_variables.scss
+++ b/app/assets/stylesheets/base/gl_variables.scss
@@ -22,8 +22,8 @@ $brand-info:     $gl-info;
 $brand-warning:  $gl-warning;
 $brand-danger:   $gl-danger;
 
-$border-radius-base:        3px !default;
-$border-radius-large:       5px !default;
+$border-radius-base:        2px !default;
+$border-radius-large:       2px !default;
 $border-radius-small:       2px !default;
 
 
diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss
index b91c15d891..c7b3b60e76 100644
--- a/app/assets/stylesheets/base/layout.scss
+++ b/app/assets/stylesheets/base/layout.scss
@@ -5,6 +5,7 @@ html {
 
   body {
     padding-top: $header-height;
+    text-rendering: geometricPrecision;
   }
 }
 
diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss
index 50c3de089f..086a056bbf 100644
--- a/app/assets/stylesheets/generic/buttons.scss
+++ b/app/assets/stylesheets/generic/buttons.scss
@@ -1,10 +1,6 @@
-body {
-    text-rendering: geometricPrecision;
-}
-
 @mixin btn-default {
   @include border-radius(2px);
-  
+
   border-width: 1px;
   border-style: solid;
   text-transform: uppercase;
@@ -13,17 +9,17 @@ body {
   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;
@@ -33,7 +29,7 @@ body {
 
 @mixin btn-middle {
   @include border-radius(2px);
-  
+
   border-width: 1px;
   border-style: solid;
   text-transform: uppercase;
@@ -42,22 +38,22 @@ body {
   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;
-    }
+  }
 }
 
 
@@ -65,118 +61,113 @@ body {
   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;
-     } 
+
+  &: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 btn-project {
+@mixin btn-gray {
   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;
+    @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-light {
+@mixin btn-white {
   background-color: #fff;
   border-color: #dce0e5;
   color: #313236;
-  
+
   &:hover {
     border-color:#dce0e5;
     background-color: #f0f2f5;
     color: #313236;
   }
-   
+
   &:focus {
     border-color: #dce0e5;
     background-color: #f0f2f5;
     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;
+    @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 {
+@mixin btn-red {
   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;
   }
-  
 }
 
 
-.btn-info {
-  @include btn-default;
-  @include btn-project;
-}
-
-.btn-success {
-  @include btn-default;
-  @include btn-green;
-  
-}
-
 .btn {
   @include btn-default;
+  @include btn-white;
+
+  &.btn-success {
+    @include btn-green;
+  }
+
+  &.btn-gray {
+    @include btn-gray;
+  }
 
   &.btn-new {
     @extend .btn-success;
@@ -264,4 +255,4 @@ body {
       color: #fff;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/generic/forms.scss b/app/assets/stylesheets/generic/forms.scss
index 98a7c3ad8a..0edfe24f19 100644
--- a/app/assets/stylesheets/generic/forms.scss
+++ b/app/assets/stylesheets/generic/forms.scss
@@ -29,9 +29,6 @@ input[type='text'].danger {
   border-top: 1px solid $border-color;
 }
 
-@media (min-width: $screen-sm-min) {
-}
-
 label {
   &.control-label {
     @extend .col-sm-2;
@@ -84,20 +81,13 @@ label {
 
 .form-group .control-label {
   font-weight: normal;
-  font-color: #313236 !important;
 }
 
-.form-control {
-  @include border-radius (2px);
-}
-
-.form-control::-webkit-input-placeholder{
-  color:#7f8fa4;
+.form-control::-webkit-input-placeholder {
+  color: #7f8fa4;
 }
 
 .input-group {
-  @include border-radius (2px);
-  
   .input-group-addon {
     background-color: #f7f8fa;
   }
diff --git a/app/assets/stylesheets/generic/selects.scss b/app/assets/stylesheets/generic/selects.scss
index 633dfea522..cba621635b 100644
--- a/app/assets/stylesheets/generic/selects.scss
+++ b/app/assets/stylesheets/generic/selects.scss
@@ -26,13 +26,13 @@
 .select2-drop {
   @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);
-  
-  padding: 16px 20px;
+
+  padding: 16px;
   border: none !important;
 }
 
 .select2-results .select2-result-label {
-  padding: 16px 20px;
+  padding: 16px;
 }
 
 .select2-drop{
@@ -142,5 +142,5 @@
 }
 
 .ajax-users-dropdown {
-  min-width: 225px !important;
-}
\ No newline at end of file
+  min-width: 250px !important;
+}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 38b17be798..c36f5a394d 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -18,10 +18,6 @@
   }
 }
 
-.btn, .commits-compare-switch {
-    @include btn-light;
-}
-
 .project-edit-content {
   padding: 7px;
 }
@@ -100,8 +96,7 @@
     margin-bottom: 0px;
 
     .btn {
-      @include btn-project;
-      @include btn-default;
+      @include btn-gray;
 
       .count {
         display: inline-block;
@@ -161,7 +156,7 @@
 
 .input-group-btn {
   .btn {
-    @include btn-project;
+    @include btn-gray;
     @include btn-middle;
 
     &:hover {
@@ -195,7 +190,7 @@
   margin: 0 12px 0 12px;
 
   .btn{
-    @include btn-project;
+    @include btn-gray;
     @include btn-default;
   }
 
@@ -390,7 +385,7 @@ table.table.protected-branches-list tr.no-border {
 
   .nav > li > a {
     @include btn-default;
-    @include btn-project;
+    @include btn-gray;
 
     background-color: transparent;
     border: 1px solid #f7f8fa;
@@ -450,7 +445,7 @@ pre.light-well {
 
   .btn-remove {
     @include btn-middle;
-    @include btn-remove;
+    @include btn-red;
 
     float: left !important;
   }

From b8e4d6bdbec8631663a017c1b651dc223f0cba16 Mon Sep 17 00:00:00 2001
From: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Date: Wed, 7 Oct 2015 17:32:00 +0200
Subject: [PATCH 3/3] Refactor buttons

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
---
 app/assets/stylesheets/generic/buttons.scss | 33 ++++++---------------
 app/assets/stylesheets/pages/projects.scss  |  4 ---
 2 files changed, 9 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss
index 086a056bbf..62922e6a33 100644
--- a/app/assets/stylesheets/generic/buttons.scss
+++ b/app/assets/stylesheets/generic/buttons.scss
@@ -156,12 +156,15 @@
   }
 }
 
-
 .btn {
   @include btn-default;
   @include btn-white;
 
-  &.btn-success {
+  &.btn-success,
+  &.btn-new,
+  &.btn-create,
+  &.btn-save,
+  &.btn-green {
     @include btn-green;
   }
 
@@ -169,20 +172,10 @@
     @include btn-gray;
   }
 
-  &.btn-new {
-    @extend .btn-success;
-  }
-
-  &.btn-create {
-    @extend .btn-success;
-  }
-
-  &.btn-save {
-    @extend .btn-success;
-  }
-
-  &.btn-remove {
-    @extend .btn-danger;
+  &.btn-danger,
+  &.btn-remove,
+  &.btn-red {
+    @include btn-red;
   }
 
   &.btn-cancel {
@@ -212,14 +205,6 @@
       margin-right: 0px;
     }
   }
-
-  &.btn-save {
-    @extend .btn-primary;
-  }
-
-  &.btn-new, &.btn-create {
-    @extend .btn-success;
-  }
 }
 
 .btn-block {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index c36f5a394d..0031ab5151 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -142,11 +142,7 @@
     }
   }
 }
-.btn-green {
-   @include btn-green;
 
-   cursor: pointer;
-}
 .projects-search-form {
 
   .input-group .form-control {