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
-  %p.light
-    Set up your project to automatically have its branches, tags, and commits updated from an upstream repository every hour.
-  = 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
-        The repository failed to update #{time_ago_with_tooltip(@project.mirror_last_update_at)}.
-        - if @project.mirror_ever_updated_successfully?
-          Last successful update #{time_ago_with_tooltip(@project.mirror_last_successful_update_at)}.
-      .panel-body
-        %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
+.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_failed?
+        .panel.panel-danger
+          .panel-heading
+            The repository failed to update #{time_ago_with_tooltip(@project.mirror_last_update_at)}.
+            - if @project.mirror_ever_updated_successfully?
+              Last successful update #{time_ago_with_tooltip(@project.mirror_last_successful_update_at)}.
+          .panel-body
+            %pre
+              :preserve
+                #{@project.import_error.try(:strip)}
+      .form-group
+        = 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, "Git repository URL", class: "label-light"
+        = f.text_field :import_url, class: 'form-control', placeholder: 'https://username:password@gitlab.company.com/group/project.git'
+        = render "instructions"
+      .form-group
+        = 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
-          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.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.
-
-  .form-group
-    = f.label :mirror_user_id, class: 'control-label' do
-      Mirror user
-    .col-sm-10
-      = 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
-  %p.light
-    Set up the remote repository that you want to update with the content of the current repository every hour.
-  = 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
-        The remote repository failed to update #{time_ago_with_tooltip(@remote_mirror.last_update_at)}.
-        - if @remote_mirror.last_successful_update_at
-          Last successful update #{time_ago_with_tooltip(@remote_mirror.last_successful_update_at)}.
-      .panel-body
-        %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
-            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"
+          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
+      = 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_error.present?
+        .panel.panel-danger
+          .panel-heading
+            The remote repository failed to update #{time_ago_with_tooltip(@remote_mirror.last_update_at)}.
+            - if @remote_mirror.last_successful_update_at
+              Last successful update #{time_ago_with_tooltip(@remote_mirror.last_successful_update_at)}.
+          .panel-body
+            %pre
+              :preserve
+                #{@remote_mirror.last_error.strip}
+      = f.fields_for :remote_mirrors, @remote_mirror do |rm_form|
+        .form-group
+          = 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, "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
-        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.
+  = 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)
-  - if @project.updating_mirror?
-    %span.btn.disabled
-      = icon('refresh')
-      Updating…
-  - else
-    = link_to update_now_namespace_project_mirror_path(@project.namespace, @project), method: :post, class: "btn" do
-      = icon('refresh')
-      Update Now
+  .append-bottom-default
+    - if @project.updating_mirror?
+      %span.btn.disabled
+        = icon("refresh spin")
+        Updating…
+    - else
+      = link_to update_now_namespace_project_mirror_path(@project.namespace, @project), method: :post, class: "btn" do
+        = 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?
-  - if remote_mirror.update_in_progress?
-    %span.btn.disabled
-      = icon('refresh')
-      Updating…
-  - else
-    = link_to update_now_namespace_project_mirror_path(@project.namespace, @project, sync_remote: true), method: :post, class: "btn" do
-      = icon('refresh')
-      Update Now
+  .append-bottom-default
+    - if remote_mirror.update_in_progress?
+      %span.btn.disabled
+        = 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")
+        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)}.