Updated mirror repo UI

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/14026

app/views/projects/mirrors/_instructions.html.haml

+.account-well.prepend-top-default.append-bottom-default
+  %ul
+    %li
+      The repository must be accessible over <code>http://</code>, <code>https://</code>, <code>ssh://</code> or <code>git://</code>.
+    %li
+      If your HTTP repository is not publicly accessible, add authentication information to the URL: <code>https://username:password@gitlab.company.com/group/project.git</code>.
+    %li
+      If your SSH repository is not publicly accessible, add the public SSH key of the GitLab server to the remote repository.
+    %li
+      The update action will time out after 10 minutes. For big repositories, use a clone/push combination.

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

 - page_title "Mirror Repository"
-%h3.page-title
-  Mirror Repository
 
-%p.light
-  A repository can be setup as a mirror of another repository, and can also have a remote mirror associated.
-
-%p.light
-  When the repository is configured as a mirror, all of its branches, tags, and commits will automatically be updated from the repository configured in the
-  %strong Pull from a remote repository
-  section.
-
-%p.light
-  When the repository has a remote mirror associated, it means that the remote repository configured in the <strong>Push to a remote repository</strong> section will automatically receive updates from the current repository.
-
-%hr.clearfix
-
-= form_for @project, url: namespace_project_mirror_path(@project.namespace, @project), html: { class: 'form-horizontal' } do |f|
-  - if @project.errors.any?
-    .alert.alert-danger
-      - @project.errors.full_messages.each do |msg|
-        %p= msg
-
-  %h4 Pull from a remote repository
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    %h4.prepend-top-0
+      Pull from a remote repository
     %p.light
       Set up your project to automatically have its branches, tags, and commits updated from an upstream repository every hour.
+  .col-lg-9
+    %h5.prepend-top-0
+      Set up mirror repository
+    = form_for @project, url: namespace_project_mirror_path(@project.namespace, @project) do |f|
+      = form_errors(@project)
       = render "shared/mirror_update_button"
-  - if @project.mirror_last_update_success?
-    %span.prepend-left-default Successfully updated #{time_ago_with_tooltip(@project.mirror_last_successful_update_at)}.
-  %hr.clearfix
-
       - if @project.mirror_last_update_failed?
         .panel.panel-danger
           .panel-heading
@@ -39,56 +22,38 @@
             %pre
               :preserve
                 #{@project.import_error.try(:strip)}
-
       .form-group
-    .col-sm-offset-2.col-sm-10
-      .checkbox
-        = f.label :mirror do
-          = f.check_box :mirror
-          %strong
-            Mirror repository
-        .help-block
+        = f.check_box :mirror, class: "pull-left"
+        .prepend-left-20
+          = f.label :mirror, "Mirror repository", class: "label-light append-bottom-0"
+          %p.light.append-bottom-0
             Automatically update this project's branches, tags, and commits from the upstream repository every hour.
-
       .form-group
-    = f.label :import_url, class: 'control-label' do
-      %span Git repository URL
-    .col-sm-10
+        = f.label :import_url, "Git repository URL", class: "label-light"
         = f.text_field :import_url, class: 'form-control', placeholder: 'https://username:password@gitlab.company.com/group/project.git'
-      .well.prepend-top-20
-        %ul
-          %li
-            The repository must be accessible over <code>http://</code>, <code>https://</code>, <code>ssh://</code> or <code>git://</code>.
-          %li
-            If your HTTP repository is not publicly accessible, add authentication information to the URL: <code>https://username:password@gitlab.company.com/group/project.git</code>.
-          %li
-            If your SSH repository is not publicly accessible, add the public SSH key of the GitLab server to the remote repository.
-          %li
-            The update action will time out after 10 minutes. For big repositories, use a clone/push combination.
-
+        = render "instructions"
       .form-group
-    = f.label :mirror_user_id, class: 'control-label' do
-      Mirror user
-    .col-sm-10
+        = f.label :mirror_user_id, "Mirror user", class: "label-light"
         = users_select_tag("project[mirror_user_id]", class: 'input-large', selected: @project.mirror_user_id || current_user.id,
           first_user: true, current_user: true, push_code_to_protected_branches: true)
         .help-block
           This user will be the author of all events in the activity feed that are the result of an update,
           like new branches being created or new commits being pushed to existing branches.
           They need to have at least master access to this project.
-
       - if @project.builds_enabled?
-    = render 'shared/mirror_trigger_builds_setting', f: f
-
-  %h4 Push to a remote repository
+        = render "shared/mirror_trigger_builds_setting", f: f
+      = f.submit "Update", class: "btn btn-save"
+  .col-sm-12
+    %hr
+  .col-lg-3
+    %h4.prepend-top-0
+      Push to a remote repository
     %p.light
       Set up the remote repository that you want to update with the content of the current repository every hour.
+  .col-lg-9
+    = form_for @project, url: namespace_project_mirror_path(@project.namespace, @project) do |f|
+      = form_errors(@project)
       = render "shared/remote_mirror_update_button", remote_mirror: @remote_mirror
-  - if @remote_mirror.last_successful_update_at
-    %span.prepend-left-default Successfully updated #{time_ago_with_tooltip(@remote_mirror.last_successful_update_at)}.
-
-  %hr.clearfix
-
       - if @remote_mirror.last_error.present?
         .panel.panel-danger
           .panel-heading
@@ -99,25 +64,15 @@
             %pre
               :preserve
                 #{@remote_mirror.last_error.strip}
-
       = f.fields_for :remote_mirrors, @remote_mirror do |rm_form|
         .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = rm_form.label :enabled do
-            = rm_form.check_box :enabled
-            %strong
-              Remote Mirror Repository
-          .help-block
+          = rm_form.check_box :enabled, class: "pull-left"
+          .prepend-left-20
+            = rm_form.label :enabled, "Remote mirror repository", class: "label-light append-bottom-0"
+            %p.light.append-bottom-0
               Automatically update the remote mirror's branches, tags, and commits from this repository every hour.
-
         .form-group.has-feedback
-      = rm_form.label :url, class: 'control-label' do
-        %span Git repository URL
-      .col-sm-10
-        = rm_form.text_field :url, class: 'form-control', placeholder: 'https://username:password@gitlab.company.com/group/project.git'
-        .well.prepend-top-20
-          The requirements for the URL format are the same mentioned in the <strong>Pull from a remote repository</strong> section.
-
-  .form-actions
-    = f.submit "Save Changes", class: "btn btn-create"
+          = rm_form.label :url, "Git repository URL", class: "label-light"
+          = rm_form.text_field :url, class: "form-control", placeholder: 'https://username:password@gitlab.company.com/group/project.git'
+          = render "instructions"
+      = f.submit "Update", class: "btn btn-create"

app/views/shared/_mirror_trigger_builds_setting.html.haml

 .form-group
-  .col-sm-offset-2.col-sm-10
-    .checkbox
-      = f.label :mirror_trigger_builds do
-        = f.check_box :mirror_trigger_builds
-        %strong
-          Trigger builds for mirror updates
-      .help-block
+  = f.check_box :mirror_trigger_builds, class: "pull-left"
+  .prepend-left-20
+    = f.label :mirror_trigger_builds, "Trigger builds for mirror updates", class: "label-light"
+    %p.light.append-bottom-0
       Trigger builds when branches or tags are updated from the upstream repository.
       Depending on the activity of the upstream repository, this may greatly increase the load on your CI runners.
       Only enable this if you know they can handle the load.

app/views/shared/_mirror_update_button.html.haml

 - if @project.mirror? && can?(current_user, :push_code, @project)
+  .append-bottom-default
     - if @project.updating_mirror?
       %span.btn.disabled
-      = icon('refresh')
+        = icon("refresh spin")
         Updating…
     - else
       = link_to update_now_namespace_project_mirror_path(@project.namespace, @project), method: :post, class: "btn" do
-      = icon('refresh')
+        = icon("refresh")
         Update Now
+    - if @project.mirror_last_update_success?
+      %p.inline.prepend-left-10
+        Successfully updated #{time_ago_with_tooltip(@project.mirror_last_successful_update_at)}.

app/views/shared/_remote_mirror_update_button.html.haml

 - if @project.has_remote_mirror?
+  .append-bottom-default
     - if remote_mirror.update_in_progress?
       %span.btn.disabled
-      = icon('refresh')
+        = icon("refresh spin")
         Updating…
     - else
       = link_to update_now_namespace_project_mirror_path(@project.namespace, @project, sync_remote: true), method: :post, class: "btn" do
-      = icon('refresh')
+        = icon("refresh")
         Update Now
+    - if @remote_mirror.last_successful_update_at
+      %p.inline.prepend-left-10
+        Successfully updated #{time_ago_with_tooltip(@remote_mirror.last_successful_update_at)}.