summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>2015-10-07 17:03:14 +0000
committerDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>2015-10-07 17:03:14 +0000
commit92c33a8e7121e67aa0be7cd95f578b0f8dcfdfcb (patch)
treed939a72fe32d944adc7a9687fdcfaea46e0fbf99
parentac378e5b6a916ef57cae0483d9bf3d48d315b6f4 (diff)
parentb8e4d6bdbec8631663a017c1b651dc223f0cba16 (diff)
downloadgitlab-ce-92c33a8e7121e67aa0be7cd95f578b0f8dcfdfcb.tar.gz
Merge branch 'new-project' into 'master'
Create project and new merge request page Create project ![Screen_Shot_2015-10-05_at_21.22.28](https://gitlab.com/gitlab-org/gitlab-ce/uploads/2a3b0118b070f69460f693922bb37300/Screen_Shot_2015-10-05_at_21.22.28.png) new merge request ![Screen_Shot_2015-10-06_at_21.37.35](https://gitlab.com/gitlab-org/gitlab-ce/uploads/9b7b7ff7a979731a8bf20ceb3e32876b/Screen_Shot_2015-10-06_at_21.37.35.png) See merge request !1514
-rw-r--r--app/assets/stylesheets/base/gl_variables.scss4
-rw-r--r--app/assets/stylesheets/base/layout.scss1
-rw-r--r--app/assets/stylesheets/generic/buttons.scss297
-rw-r--r--app/assets/stylesheets/generic/common.scss8
-rw-r--r--app/assets/stylesheets/generic/forms.scss20
-rw-r--r--app/assets/stylesheets/generic/issue_box.scss2
-rw-r--r--app/assets/stylesheets/generic/selects.scss42
-rw-r--r--app/assets/stylesheets/generic/timeline.scss4
-rw-r--r--app/assets/stylesheets/pages/issuable.scss9
-rw-r--r--app/assets/stylesheets/pages/merge_requests.scss23
-rw-r--r--app/assets/stylesheets/pages/note_form.scss8
-rw-r--r--app/assets/stylesheets/pages/notes.scss2
-rw-r--r--app/assets/stylesheets/pages/projects.scss30
-rw-r--r--app/views/projects/merge_requests/_show.html.haml2
-rw-r--r--app/views/projects/new.html.haml20
-rw-r--r--app/views/projects/notes/_form.html.haml2
16 files changed, 272 insertions, 202 deletions
diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss
index 7378d404008..18632da4f2a 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 b91c15d8910..c7b3b60e769 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 cf76f538e01..62922e6a330 100644
--- a/app/assets/stylesheets/generic/buttons.scss
+++ b/app/assets/stylesheets/generic/buttons.scss
@@ -1,100 +1,6 @@
-body {
- text-rendering: geometricPrecision;
-}
-.btn {
- @extend .btn-default;
-
- &.btn-new {
- @extend .btn-success;
- }
-
- &.btn-create {
- @extend .btn-success;
- }
-
- &.btn-save {
- @extend .btn-success;
- }
-
- &.btn-remove {
- @extend .btn-danger;
- }
-
- &.btn-cancel {
- float: right;
- }
-
- &.btn-close {
- color: $gl-danger;
- border-color: $gl-danger;
- &:hover {
- color: #B94A48;
- }
- }
-
- &.btn-reopen {
- color: $gl-success;
- border-color: $gl-success;
- &:hover {
- color: #468847;
- }
- }
-
- &.btn-grouped {
- margin-right: 7px;
- float: left;
- &:last-child {
- margin-right: 0px;
- }
- }
-
- &.btn-save {
- @extend .btn-primary;
- }
-
- &.btn-new, &.btn-create {
- @extend .btn-success;
- }
-}
-
-.btn-block {
- width: 100%;
- margin: 0;
- margin-bottom: 15px;
- &.btn {
- padding: 6px 0;
- }
-}
-
-.btn-group {
- &.btn-grouped {
- margin-right: 7px;
- float: left;
- &:last-child {
- margin-right: 0px;
- }
- }
-}
-
-.btn-group-next {
- .btn {
- padding: 9px 0px;
- font-size: 15px;
- color: #7f8fa4;
- border-color: #e7e9ed;
- width: 140px;
-
- &.active {
- border-color: $gl-info;
- background: $gl-info;
- color: #fff;
- }
- }
-}
-
-@mixin btn-info {
+@mixin btn-default {
@include border-radius(2px);
-
+
border-width: 1px;
border-style: solid;
text-transform: uppercase;
@@ -103,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;
@@ -123,7 +29,7 @@ body {
@mixin btn-middle {
@include border-radius(2px);
-
+
border-width: 1px;
border-style: solid;
text-transform: uppercase;
@@ -132,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;
- }
+ }
}
@@ -155,74 +61,183 @@ 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;
- }
-}
-/*Butons*/
+ &: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;
+ }
+}
-@mixin bnt-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-remove {
+@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;
+ }
+}
+
+@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;
}
-
-} \ No newline at end of file
+}
+
+.btn {
+ @include btn-default;
+ @include btn-white;
+
+ &.btn-success,
+ &.btn-new,
+ &.btn-create,
+ &.btn-save,
+ &.btn-green {
+ @include btn-green;
+ }
+
+ &.btn-gray {
+ @include btn-gray;
+ }
+
+ &.btn-danger,
+ &.btn-remove,
+ &.btn-red {
+ @include btn-red;
+ }
+
+ &.btn-cancel {
+ float: right;
+ }
+
+ &.btn-close {
+ color: $gl-danger;
+ border-color: $gl-danger;
+ &:hover {
+ color: #B94A48;
+ }
+ }
+
+ &.btn-reopen {
+ color: $gl-success;
+ border-color: $gl-success;
+ &:hover {
+ color: #468847;
+ }
+ }
+
+ &.btn-grouped {
+ margin-right: 7px;
+ float: left;
+ &:last-child {
+ margin-right: 0px;
+ }
+ }
+}
+
+.btn-block {
+ width: 100%;
+ margin: 0;
+ margin-bottom: 15px;
+ &.btn {
+ padding: 6px 0;
+ }
+}
+
+.btn-group {
+ &.btn-grouped {
+ margin-right: 7px;
+ float: left;
+ &:last-child {
+ margin-right: 0px;
+ }
+ }
+}
+
+.btn-group-next {
+ .btn {
+ padding: 9px 0px;
+ font-size: 15px;
+ color: #7f8fa4;
+ border-color: #e7e9ed;
+ width: 140px;
+
+ &.active {
+ border-color: $gl-info;
+ background: $gl-info;
+ color: #fff;
+ }
+ }
+}
diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
index 45e284542d2..03919f15f1f 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 4282832e2bf..0edfe24f195 100644
--- a/app/assets/stylesheets/generic/forms.scss
+++ b/app/assets/stylesheets/generic/forms.scss
@@ -29,12 +29,6 @@ input[type='text'].danger {
border-top: 1px solid $border-color;
}
-@media (min-width: $screen-sm-min) {
- .form-actions {
- padding-left: 17%;
- }
-}
-
label {
&.control-label {
@extend .col-sm-2;
@@ -84,3 +78,17 @@ label {
.wiki-content {
margin-top: 35px;
}
+
+.form-group .control-label {
+ font-weight: normal;
+}
+
+.form-control::-webkit-input-placeholder {
+ color: #7f8fa4;
+}
+
+.input-group {
+ .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 b1fb87a6830..93377e45e70 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 f0860de1c49..cba621635b6 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;
+ border: none !important;
+}
+
+.select2-results .select2-result-label {
+ padding: 16px;
+}
+
+.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 {
@@ -114,5 +142,5 @@
}
.ajax-users-dropdown {
- min-width: 225px !important;
+ min-width: 250px !important;
}
diff --git a/app/assets/stylesheets/generic/timeline.scss b/app/assets/stylesheets/generic/timeline.scss
index 74bbaabad39..bf21d7fce76 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 b5c61f7f91d..9da085a3473 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 d8c8e5ad0a4..fe69d16fc4b 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 fdc2c3332df..dcd1aed7196 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 2a77f065aed..abb03b07f51 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 818aa10aefe..0031ab5151b 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -13,11 +13,15 @@
.edit_project {
fieldset.features {
.control-label {
- font-weight: bold;
+ font-weight: normal;
}
}
}
+.project-edit-content {
+ padding: 7px;
+}
+
.project-name-holder {
.help-inline {
vertical-align: top;
@@ -92,8 +96,7 @@
margin-bottom: 0px;
.btn {
- @include bnt-project;
- @include btn-info;
+ @include btn-gray;
.count {
display: inline-block;
@@ -149,7 +152,7 @@
.input-group-btn {
.btn {
- @include bnt-project;
+ @include btn-gray;
@include btn-middle;
&:hover {
@@ -183,8 +186,8 @@
margin: 0 12px 0 12px;
.btn{
- @include bnt-project;
- @include btn-info;
+ @include btn-gray;
+ @include btn-default;
}
.dropdown-toggle {
@@ -251,18 +254,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 +380,8 @@ table.table.protected-branches-list tr.no-border {
}
.nav > li > a {
- @include btn-info;
- @include bnt-project;
+ @include btn-default;
+ @include btn-gray;
background-color: transparent;
border: 1px solid #f7f8fa;
@@ -437,7 +441,7 @@ pre.light-well {
.btn-remove {
@include btn-middle;
- @include btn-remove;
+ @include btn-red;
float: left !important;
}
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 0b0f52c653c..58d8478744e 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 bccea21e7a8..1b093c8f514 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 d99445da59a..512ccd48b38 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