Merge branch 'ui/gl-padding' into 'master'

UI: More consistent alignment and padding

See the commits for more details, the messages mostly speak for themselves.

# Highlights:

## Merge request form bottom

Before:

![mr_before](/uploads/de2ae608d300784b61818bc33538ac64/mr_before.png)

After: 

![mr_after](/uploads/9b1568d8287704ee9497cc029e827778/mr_after.png)

## Issue header

Before:

![issue_before](/uploads/e8cc4fb316219f025ff7bd74c7da8677/issue_before.png)

After:

![issue_after](/uploads/5fbad99f038571196c3c3c2bea304381/issue_after.png)

## Empty repository message

Before:

![empty_before](/uploads/f6ab80aea9af9111c3dc260d5fa98cd6/empty_before.png)

After:

![empty_after](/uploads/40a528f5a45f4e47776356c88aab24c4/empty_after.png)

Fixes #3742 and https://dev.gitlab.org/gitlab/gitlabhq/issues/2594

See merge request !1953

app/assets/stylesheets/framework.scss

 @import "framework/fonts";
 @import "framework/variables";
 @import "framework/mixins";
-@import "framework/layout";
 @import 'framework/tw_bootstrap_variables';
 @import 'framework/tw_bootstrap';
+@import "framework/layout";
 
 @import "framework/avatar.scss";
 @import "framework/blocks.scss";
@@ -25,6 +25,7 @@
 @import "framework/markdown_area.scss";
 @import "framework/mobile.scss";
 @import "framework/pagination.scss";
+@import "framework/panels.scss";
 @import "framework/selects.scss";
 @import "framework/sidebar.scss";
 @import "framework/tables.scss";

app/assets/stylesheets/framework/blocks.scss

@@ -68,6 +68,10 @@
   .oneline {
     line-height: 42px;
   }
+
+  > p:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .cover-block {
@@ -114,3 +118,7 @@
     right: 10px;
   }
 }
+
+.block-connector {
+  margin-top: -1px;
+}

app/assets/stylesheets/framework/common.scss

@@ -7,7 +7,7 @@
 
 /** COMMON CLASSES **/
 .prepend-top-10 { margin-top:10px }
-.prepend-top-default { margin-top: $gl-padding; }
+.prepend-top-default { margin-top: $gl-padding !important; }
 .prepend-top-20 { margin-top:20px }
 .prepend-left-10 { margin-left:10px }
 .prepend-left-20 { margin-left:20px }
@@ -52,6 +52,10 @@ pre {
   }
 }
 
+hr {
+  margin: $gl-padding 0;
+}
+
 .dropdown-menu > li > a {
   text-shadow: none;
 }
@@ -433,3 +437,7 @@ table {
 .space-right {
   margin-right: 10px;
 }
+
+.alert, .progress {
+  margin-bottom: $gl-padding;
+}

app/assets/stylesheets/framework/files.scss

@@ -8,7 +8,6 @@
   border: none;
   border-top: 1px solid #E7E9EE;
   border-bottom: 1px solid #E7E9EE;
-  margin-bottom: 1em;
 
   &.readme-holder {
     border-bottom: 0;
@@ -25,7 +24,7 @@
     text-shadow: 0 1px 1px #fff;
     margin: 0;
     text-align: left;
-    padding: 10px 15px;
+    padding: 10px $gl-padding;
 
     .file-actions {
       float: right;
@@ -171,4 +170,3 @@
     }
   }
 }
-

app/assets/stylesheets/framework/forms.scss

@@ -22,9 +22,10 @@ input[type='text'].danger {
 }
 
 .form-actions {
-  padding: 17px 20px 18px;
-  margin-top: 18px;
-  margin-bottom: 18px;
+  margin: -$gl-padding;
+  margin-top: 0;
+  margin-bottom: -$gl-padding;
+  padding: $gl-padding;
   background-color: $background-color;
   border-top: 1px solid $border-color;
 }
@@ -73,6 +74,8 @@ label {
 
 .form-control {
   @include box-shadow(none);
+  height: 42px;
+  padding: 8px $gl-padding;
 }
 
 .wiki-content {
@@ -92,3 +95,7 @@ label {
     background-color: #f7f8fa;
   }
 }
+
+.help-block {
+  margin-bottom: 0;
+}

app/assets/stylesheets/framework/issue_box.scss

@@ -7,8 +7,9 @@
 .issue-box {
   @include border-radius(2px);
 
-  display: inline-block;
-  padding: 10px $gl-padding;
+  display: block;
+  float: left;
+  padding: 0 $gl-padding;
   font-weight: normal;
   margin-right: 10px;
   font-size: $gl-font-size;

app/assets/stylesheets/framework/panels.scss

+.panel {
+  margin-bottom: $gl-padding;
+  
+  .panel-heading {
+    padding: 10px $gl-padding;
+  }
+  .panel-body {
+    padding: $gl-padding;
+
+    .form-actions {
+      margin: -$gl-padding;
+      margin-top: $gl-padding;
+    }
+  }
+}

app/assets/stylesheets/framework/tables.scss

@@ -6,6 +6,8 @@
 
 table {
   &.table {
+    margin-bottom: $gl-padding;
+    
     .dropdown-menu a {
       text-decoration: none;
     }

app/assets/stylesheets/framework/typography.scss

@@ -181,6 +181,10 @@ body {
   line-height: 1.3;
   font-size: 1.25em;
   font-weight: 600;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .page-title-empty {

app/assets/stylesheets/pages/commit.scss

@@ -108,16 +108,3 @@
     z-index: 2;
   }
 }
-
-.commit-ci-menu {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  margin-top: 5px;
-  height: 56px;
-  margin: -16px;
-  padding: 16px;
-  text-align: center;
-  margin-top: 0px;
-  margin-bottom: 2px;
-}

app/assets/stylesheets/pages/editor.scss

@@ -19,48 +19,38 @@
       color: #B94A48;
     }
   }
-  .commit-button-annotation {
-    display: inline-block;
-    margin: 0;
-    padding: 2px;
-
-    > * {
-      float: left;
-    }
-
-    .message {
-      display: inline-block;
-      margin: 5px 8px 0 8px;
-    }
-  }
 
   .file-title {
     @extend .monospace;
+
+    line-height: 42px;
+    padding-top: 7px;
+    padding-bottom: 7px;
   }
 
   .editor-ref {
     background: $background-color;
-    padding: 11px 15px;
+    padding-right: $gl-padding;
     border-right: 1px solid $border-color;
-    display: inline-block;
-    margin: -5px -5px;
+    display: block;
+    float: left;
     margin-right: 10px;
   }
 
   .editor-file-name {
-    .new-file-name {
-      display: inline-block;
-      width: 450px;
-    }
+    @extend .monospace;
+    
+    float: left;
+    margin-right: 10px;
+  }
 
-    .form-control {
-      margin-top: -3px;
-    }
+  .new-file-name {
+    display: inline-block;
+    width: 450px;
+    float: left;
   }
 
-  .form-actions {
-    margin: -$gl-padding;
-    margin-top: 0;
-    padding: $gl-padding
+  .select2 {
+    float: right;
   }
 }

app/assets/stylesheets/pages/issuable.scss

@@ -51,11 +51,12 @@
 
 .issuable-details {
   .page-title {
-    margin-top: -15px;
-    padding: 10px 0;
+    margin-top: -$gl-padding;
+    padding: 7px 0;
     margin-bottom: 0;
     color: #5c5d5e;
     font-size: 16px;
+    line-height: 42px;
 
     .author {
       color: #5c5d5e;

app/assets/stylesheets/pages/merge_requests.scss

@@ -4,7 +4,6 @@
  */
 .mr-state-widget {
   background: #F7F8FA;
-  margin-bottom: 20px;
   color: $gl-gray;
   border: 1px solid #dce0e6;
   @include border-radius(2px);
@@ -87,7 +86,7 @@
   .mr-widget-body,
   .ci_widget,
   .mr-widget-footer {
-    padding: 15px;
+    padding: $gl-padding;
   }
 
   .normal {
@@ -116,26 +115,8 @@
   }
 }
 
-.merge-request .merge-request-tabs {
-  @include nav-menu;
-  margin: -$gl-padding;
-  padding: $gl-padding;
-  text-align: center;
-  margin-bottom: 1px;
-}
-
-// Mobile
-@media (max-width: 480px) {
-  .merge-request .merge-request-tabs {
-    margin: 0;
-    padding: 0;
-
-    li {
-      a {
-        padding: 0;
-      }
-    }
-  }
+.merge-request-details {
+  margin-bottom: $gl-padding;
 }
 
 .mr_source_commit,

app/assets/stylesheets/pages/note_form.scss

@@ -7,6 +7,7 @@
 }
 .reply-btn {
   @extend .btn-primary;
+  margin: 10px $gl-padding;
 }
 .diff-file .diff-content {
   tr.line_holder:hover {
@@ -38,9 +39,8 @@
 }
 
 .new_note, .edit_note {
-  .buttons {
-    margin-top: 8px;
-    margin-bottom: 3px;
+  .note-form-actions {
+    margin-top: $gl-padding;
   }
 
   .note-preview-holder {
@@ -79,8 +79,8 @@
   padding: $gl-padding;
   margin-left: -$gl-padding;
   margin-right: -$gl-padding;
-  border-right: 1px solid #ECEEF1;
-  border-top: 1px solid #ECEEF1;
+  border-right: 1px solid $border-color;
+  border-top: 1px solid $border-color;
   margin-bottom: -$gl-padding;
 }
 
@@ -150,7 +150,6 @@
 
   .discussion-reply-holder {
     background: $background-color;
-    padding: 10px 15px;
     border-top: 1px solid $border-color;
   }
 }

app/assets/stylesheets/pages/projects.scss

@@ -18,10 +18,6 @@
   }
 }
 
-.project-edit-content {
-  padding: 7px;
-}
-
 .project-name-holder {
   .help-inline {
     vertical-align: top;
@@ -30,12 +26,6 @@
 }
 
 .project-home-panel {
-  text-align: center;
-  background: #f7f8fa;
-  margin: -$gl-padding;
-  padding: $gl-padding;
-  padding: 44px 0 17px 0;
-
   .project-identicon-holder {
     margin-bottom: 16px;
 
@@ -105,7 +95,6 @@
     display: inline-table;
     position: relative;
     top: 17px;
-    margin-bottom: 44px;
   }
 
   .project-repo-buttons {
@@ -376,7 +365,7 @@ table.table.protected-branches-list tr.no-border {
 
 .project-stats {
   text-align: center;
-  margin-top: 15px;
+  margin-top: $gl-padding;
   margin-bottom: 0;
   padding-top: 10px;
   padding-bottom: 4px;

app/assets/stylesheets/pages/snippets.scss

@@ -27,56 +27,22 @@
 }
 
 .snippet-holder {
-  .snippet-details {
-    .page-title {
-      margin-top: -15px;
-      padding: 10px 0;
-      margin-bottom: 0;
-      color: #5c5d5e;
-      font-size: 16px;
-
-      .author {
-        color: #5c5d5e;
-      }
-
-      .snippet-id {
-        color: #5c5d5e;
-      }
-    }
-
-    .snippet-title {
-      margin: 0;
-      font-size: 23px;
-      color: #313236;
-    }
-
-    @media (max-width: $screen-md-max) {
-      .new-snippet-link {
-        display: none;
-      }
-    }
-
-    @media (max-width: $screen-sm-max) {
-      .creator,
-      .page-title .btn-close {
-        display: none;
-      }
-    }
-  }
+  margin-bottom: -$gl-padding;
 
   .file-holder {
     border-top: 0;
   }
 }
 
-
 .snippet-box {
   @include border-radius(2px);
 
-  display: inline-block;
-  padding: 10px $gl-padding;
+  display: block;
+  float: left;
+  padding: 0 $gl-padding;
   font-weight: normal;
   margin-right: 10px;
   font-size: $gl-font-size;
   border: 1px solid;
+  line-height: 40px;
 }

app/views/dashboard/groups/index.html.haml

@@ -8,8 +8,8 @@
       = link_to new_group_path, class: "btn btn-new" do
         %i.fa.fa-plus
         New Group
-  .title Welcome to the groups!
-  Group members have access to all group projects.
+  .oneline
+    Group members have access to all group projects.
 
 %ul.content-list
   - @group_members.each do |group_member|

app/views/profiles/applications.html.haml

@@ -15,24 +15,25 @@
       .pull-right
         = link_to 'New Application', new_oauth_application_path, class: 'btn btn-success'
     - if @applications.any?
-      %table.table.table-striped
-        %thead
-          %tr
-            %th Name
-            %th Callback URL
-            %th Clients
-            %th
-            %th
-        %tbody
-          - @applications.each do |application|
-            %tr{:id => "application_#{application.id}"}
-              %td= link_to application.name, oauth_application_path(application)
-              %td
-                - application.redirect_uri.split.each do |uri|
-                  %div= uri
-              %td= application.access_tokens.count
-              %td= link_to 'Edit', edit_oauth_application_path(application), class: 'btn btn-link btn-sm'
-              %td= render 'doorkeeper/applications/delete_form', application: application
+      .table-holder
+        %table.table.table-striped
+          %thead
+            %tr
+              %th Name
+              %th Callback URL
+              %th Clients
+              %th
+              %th
+          %tbody
+            - @applications.each do |application|
+              %tr{:id => "application_#{application.id}"}
+                %td= link_to application.name, oauth_application_path(application)
+                %td
+                  - application.redirect_uri.split.each do |uri|
+                    %div= uri
+                %td= application.access_tokens.count
+                %td= link_to 'Edit', edit_oauth_application_path(application), class: 'btn btn-link btn-sm'
+                %td= render 'doorkeeper/applications/delete_form', application: application
 
 .oauth-authorized-applications.prepend-top-20
   - if user_oauth_applications?
@@ -40,29 +41,30 @@
       Authorized applications
 
   - if @authorized_tokens.any?
-    %table.table.table-striped
-      %thead
-        %tr
-          %th Name
-          %th Authorized At
-          %th Scope
-          %th
-      %tbody
-        - @authorized_apps.each do |app|
-          - token = app.authorized_tokens.order('created_at desc').first
-          %tr{:id => "application_#{app.id}"}
-            %td= app.name
-            %td= token.created_at
-            %td= token.scopes
-            %td= render 'doorkeeper/authorized_applications/delete_form', application: app
-        - @authorized_anonymous_tokens.each do |token|
+    .table-holder
+      %table.table.table-striped
+        %thead
           %tr
-            %td
-              Anonymous
-              %div.help-block
-                %em Authorization was granted by entering your username and password in the application.
-            %td= token.created_at
-            %td= token.scopes
-            %td= render 'doorkeeper/authorized_applications/delete_form', token: token
+            %th Name
+            %th Authorized At
+            %th Scope
+            %th
+        %tbody
+          - @authorized_apps.each do |app|
+            - token = app.authorized_tokens.order('created_at desc').first
+            %tr{:id => "application_#{app.id}"}
+              %td= app.name
+              %td= token.created_at
+              %td= token.scopes
+              %td= render 'doorkeeper/authorized_applications/delete_form', application: app
+          - @authorized_anonymous_tokens.each do |token|
+            %tr
+              %td
+                Anonymous
+                %div.help-block
+                  %em Authorization was granted by entering your username and password in the application.
+              %td= token.created_at
+              %td= token.scopes
+              %td= render 'doorkeeper/authorized_applications/delete_form', token: token
   - else
     %p.light You don't have any authorized applications

app/views/profiles/keys/_key_table.html.haml

 - is_admin = defined?(admin) ? true : false
-.panel.panel-default
-  - if @keys.any?
+- if @keys.any?
+  .table-holder
     %table.table
       %thead.panel-heading
         %tr
@@ -11,9 +11,9 @@
       %tbody
         - @keys.each do |key|
           = render 'profiles/keys/key', key: key, is_admin: is_admin
-  - else
-    .nothing-here-block
-      - if is_admin
-        User has no ssh keys
-      - else
-        There are no SSH keys with access to your account.
+- else
+  .nothing-here-block
+    - if is_admin
+      User has no ssh keys
+    - else
+      There are no SSH keys with access to your account.

app/views/profiles/notifications/show.html.haml

@@ -50,12 +50,10 @@
             Watch
           %p You will receive notifications for any activity
 
-  .form-actions
+  .gray-content-block
     = f.submit 'Save changes', class: "btn btn-create"
 
-.clearfix
-  %hr
-.row.all-notifications
+.row.all-notifications.prepend-top-default
   .col-md-6
     %p
       You can also specify notification level per group or per project.

app/views/projects/_readme.html.haml

@@ -7,15 +7,16 @@
       = cache(readme_cache_key) do
         = render_readme(readme)
 - else
-  %h3.page-title
-    This project does not have README yet
-  - if can?(current_user, :push_code, @project)
-    %p.slead
-      A
-      %code README
-      file contains information about other files in a repository and is commonly
-      distributed with computer software, forming part of its documentation.
-      %br
-      We recommend you to
-      = link_to "add README", new_readme_path, class: 'underlined-link'
-      file to the repository and GitLab will render it here instead of this message.
+  .gray-content-block.second-block.center
+    %h3.page-title
+      This project does not have README yet
+    - if can?(current_user, :push_code, @project)
+      %p
+        A
+        %code README
+        file contains information about other files in a repository and is commonly
+        distributed with computer software, forming part of its documentation.
+      %p
+        We recommend you to
+        = link_to "add README", new_readme_path, class: 'underlined-link'
+        file to the repository and GitLab will render it here instead of this message.

app/views/projects/blob/_editor.html.haml

-.file-holder.file
-  .file-title
+.file-holder.file.append-bottom-default
+  .file-title.clearfix
     .editor-ref
-      %i.fa.fa-code-fork
+      = icon('code-fork')
       = ref
     %span.editor-file-name
-      - if @path
-        %span.monospace
-          = @path
+      = @path
 
-      - if current_action?(:new) || current_action?(:create)
+    - if current_action?(:new) || current_action?(:create)
+      %span.editor-file-name
         \/
-        = text_field_tag 'file_name', params[:file_name], placeholder: "File name",
-          required: true, class: 'form-control new-file-name js-quick-submit'
-      .pull-right
-        = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'form-control'
+      = text_field_tag 'file_name', params[:file_name], placeholder: "File name",
+        required: true, class: 'form-control new-file-name js-quick-submit'
+
+    .pull-right
+      = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2'
 
   .file-content.code
     %pre.js-edit-mode-pane#editor

app/views/projects/commit/_ci_menu.html.haml

-%ul.center-top-menu.commit-ci-menu
+%ul.center-top-menu.no-top.no-bottom.commit-ci-menu
   = nav_link(path: 'commit#show') do
     = link_to namespace_project_commit_path(@project.namespace, @project, @commit.id) do
       Changes

app/views/projects/commit/show.html.haml

 - page_title "#{@commit.title} (#{@commit.short_id})", "Commits"
 = render "projects/commits/header_title"
 = render "commit_box"
-= render "ci_menu" if @ci_commit
+- if @ci_commit
+  = render "ci_menu"
+- else
+  %div.block-connector
 = render "projects/diffs/diffs", diffs: @diffs, project: @project
 = render "projects/notes/notes_with_form"

app/views/projects/compare/show.html.haml

@@ -7,11 +7,11 @@
   = render "form"
 
 - if @commits.present?
-  .prepend-top-20
+  .prepend-top-default
     = render "projects/commits/commit_list"
     = render "projects/diffs/diffs", diffs: @diffs, project: @project
 - else
-  .light-well.prepend-top-20
+  .light-well.prepend-top-default
     .center
       %h4
         There isn't anything to compare.

app/views/projects/diffs/_diffs.html.haml

@@ -3,7 +3,7 @@
 
 - diff_files = safe_diff_files(diffs)
 
-.gray-content-block.second-block.oneline-block
+.gray-content-block.middle-block.oneline-block
   .inline-parallel-buttons
     .btn-group
       = inline_diff_btn

app/views/projects/empty.html.haml

@@ -5,17 +5,16 @@
 
 = render "home_panel"
 
-.gray-content-block.center
+.gray-content-block.second-block.center
   %h3.page-title
     The repository for this project is empty
-  - if can?(current_user, :download_code, @project)
+  - if can?(current_user, :push_code, @project)
     %p
       If you already have files you can push them using command line instructions below.
-      %br
-      - if can?(current_user, :push_code, @project)
-        Otherwise you can start with
-        = link_to "adding README", new_readme_path, class: 'underlined-link'
-        file to this project.
+    %p
+      Otherwise you can start with
+      = link_to "adding README", new_readme_path, class: 'underlined-link'
+      file to this project.
 
 - if can?(current_user, :download_code, @project)
   .prepend-top-20

app/views/projects/merge_requests/_discussion.html.haml

@@ -7,7 +7,7 @@
 
 = render 'shared/show_aside'
 
-.gray-content-block.second-block.oneline-block
+.gray-content-block.middle-block.oneline-block
   .row
     .col-md-9
       .votes-holder.pull-right

app/views/projects/merge_requests/_new_compare.html.haml

@@ -37,7 +37,7 @@
         %h4 Compare failed
         %p We can't compare selected branches. It may be because of huge diff. Please try again or select different branches.
     - else
-      .light-well.append-bottom-10
+      .light-well.append-bottom-default
         .center
           %h4
             There isn't anything to merge.
@@ -86,4 +86,3 @@
       return;
     }
   });
-

app/views/projects/merge_requests/_new_submit.html.haml

@@ -19,7 +19,7 @@
     = f.hidden_field :target_branch
 
 .mr-compare.merge-request
-  %ul.merge-request-tabs
+  %ul.merge-request-tabs.center-top-menu.no-top.no-bottom
     %li.commits-tab
       = link_to url_for(params), data: {target: '#commits', action: 'commits', toggle: 'tab'} do
         Commits
@@ -31,7 +31,7 @@
 
   .tab-content
     #commits.commits.tab-pane
-      = render "projects/commits/commits", project: @project
+      = render "projects/merge_requests/show/commits"
     #diffs.diffs.tab-pane.active
       - if @diffs.present?
         = render "projects/diffs/diffs", diffs: @diffs, project: @project
@@ -57,4 +57,3 @@
     diffs_loaded: true,
     commits_loaded: true
   });
-

app/views/projects/merge_requests/_show.html.haml

@@ -8,7 +8,7 @@
   .merge-request-details.issuable-details
     = render "projects/merge_requests/show/mr_title"
     = render "projects/merge_requests/show/mr_box"
-    .append-bottom-20.mr-source-target.prepend-top-default
+    .append-bottom-default.mr-source-target.prepend-top-default
       - if @merge_request.open?
         .pull-right
           - if @merge_request.source_branch_exists?
@@ -40,7 +40,7 @@
           = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
 
   - if @commits.present?
-    %ul.merge-request-tabs
+    %ul.merge-request-tabs.center-top-menu.no-top.no-bottom
       %li.notes-tab
         = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: '#notes', action: 'notes', toggle: 'tab'} do
           Discussion

app/views/projects/merge_requests/show/_commits.html.haml

-.gray-content-block.second-block.oneline-block
+.gray-content-block.middle-block.oneline-block
   = icon("sort-amount-desc")
   Most recent commits displayed first
 

app/views/projects/releases/edit.html.haml

@@ -14,6 +14,6 @@
       = render 'projects/zen', f: f, attr: :description, classes: 'description js-quick-submit form-control'
       = render 'projects/notes/hints'
       .error-alert
-      .prepend-top-default
+      .form-actions.prepend-top-default
         = f.submit 'Save changes', class: 'btn btn-save'
         = link_to "Cancel", namespace_project_tag_path(@project.namespace, @project, @tag.name), class: "btn btn-default btn-cancel"

app/views/projects/show.html.haml

@@ -11,7 +11,7 @@
 
 = render "home_panel"
 
-.project-stats.gray-content-block
+.project-stats.gray-content-block.second-block
   %ul.nav.nav-pills
     %li
       = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do

app/views/shared/issuable/_context.html.haml

 = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
-  %div.prepend-top-20
+  %div.prepend-top-default
     .issuable-context-title
       %label
         Assignee:
@@ -11,7 +11,7 @@
       - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
         = users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true)
 
-  %div.prepend-top-20.clearfix
+  %div.prepend-top-default.clearfix
     .issuable-context-title
       %label
         Milestone:
@@ -31,7 +31,7 @@
 
   - if current_user
     - subscribed = issuable.subscribed?(current_user)
-    %div.prepend-top-20.clearfix
+    %div.prepend-top-default.clearfix
       .issuable-context-title
         %label
           Subscription:

app/views/shared/issuable/_form.html.haml

@@ -93,7 +93,8 @@
         %p.help-block
         = link_to 'Change branches', mr_change_branches_path(@merge_request)
 
-.form-actions
+- is_footer = !(issuable.is_a?(MergeRequest) && issuable.new_record?)
+.gray-content-block{class: (is_footer ? "footer-block" : "middle-block")}
   - if !issuable.project.empty_repo? && (guide_url = contribution_guide_path(issuable.project)) && !issuable.persisted?
     %p
       Please review the

app/views/shared/snippets/_header.html.haml

-.snippet-details
+.issuable-details
   .page-title
     .snippet-box{class: visibility_level_color(@snippet.visibility_level)}
       = visibility_level_icon(@snippet.visibility_level)
       = visibility_level_label(@snippet.visibility_level)
-    %span.snippet-id Snippet ##{@snippet.id}
+    Snippet ##{@snippet.id}
     %span.creator
       · created by #{link_to_member(@project, @snippet.author, size: 24)}
       ·
@@ -19,6 +19,7 @@
         = render "projects/snippets/actions"
       - else
         = render "snippets/actions"
+
   .gray-content-block.middle-block
-    %h2.snippet-title
+    %h2.issue-title
       = gfm escape_once(@snippet.title)