5 files changed, 42 insertions, 35 deletions
diff --git a/app/assets/javascripts/project.js b/app/assets/javascripts/project.js
index 36b6a5ed376..3131e71d9d6 100644
--- a/app/assets/javascripts/project.js
+++ b/app/assets/javascripts/project.js
@@ -17,13 +17,14 @@ export default class Project {
     $('a', $cloneOptions).on('click', (e) => {
       const $this = $(e.currentTarget);
       const url = $this.attr('href');
+      const activeText = $this.find('.dropdown-menu-inner-title').text();
 
       e.preventDefault();
 
       $('.is-active', $cloneOptions).not($this).removeClass('is-active');
       $this.toggleClass('is-active');
       $projectCloneField.val(url);
-      $cloneBtnText.text($this.text());
+      $cloneBtnText.text(activeText);
 
       return $('.clone').text(url);
     });
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 2c83b30500d..2dc0c288a6d 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -395,6 +395,18 @@
       }
     }
   }
+
+  .clone-dropdown-btn {
+    background-color: $white-light;
+  }
+
+  .clone-options-dropdown {
+    min-width: 240px;
+
+    .dropdown-menu-inner-content {
+      min-width: 320px;
+    }
+  }
 }
 
 .project-repo-buttons {
diff --git a/app/helpers/application_settings_helper.rb b/app/helpers/application_settings_helper.rb
index 5bb84984142..dccde46fa33 100644
--- a/app/helpers/application_settings_helper.rb
+++ b/app/helpers/application_settings_helper.rb
@@ -30,9 +30,9 @@ module ApplicationSettingsHelper
   def enabled_project_button(project, protocol)
     case protocol
     when 'ssh'
-      ssh_clone_button(project, 'bottom', append_link: false)
+      ssh_clone_button(project, append_link: false)
     else
-      http_clone_button(project, 'bottom', append_link: false)
+      http_clone_button(project, append_link: false)
     end
   end
 
diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb
index 8e8feeea1d8..d06cf2de2c3 100644
--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@@ -56,42 +56,36 @@ module ButtonHelper
     end
   end
 
-  def http_clone_button(project, placement = 'right', append_link: true)
-    klass = 'http-selector'
-    klass << ' has-tooltip' if current_user.try(:require_extra_setup_for_git_auth?)
-
+  def http_clone_button(project, append_link: true)
     protocol = gitlab_config.protocol.upcase
+    dropdown_description = http_dropdown_description(protocol)
+    append_url = project.http_url_to_repo if append_link
+
+    dropdown_item_with_description(protocol, dropdown_description, href: append_url)
+  end
+
+  def http_dropdown_description(protocol)
+    if current_user.try(:require_password_creation_for_git?)
+      _("Set a password on your account to pull or push via %{protocol}.") % { protocol: protocol }
+    else
+      _("Create a personal access token on your account to pull or push via %{protocol}.") % { protocol: protocol }
+    end
+  end
 
-    tooltip_title =
-      if current_user.try(:require_password_creation_for_git?)
-        _("Set a password on your account to pull or push via %{protocol}.") % { protocol: protocol }
-      else
-        _("Create a personal access token on your account to pull or push via %{protocol}.") % { protocol: protocol }
-      end
+  def ssh_clone_button(project, append_link: true)
+    dropdown_description = _("You won't be able to pull or push project code via SSH until you add an SSH key to your profile") if current_user.try(:require_ssh_key?)
+    append_url = project.ssh_url_to_repo if append_link
 
-    content_tag (append_link ? :a : :span), protocol,
-      class: klass,
-      href: (project.http_url_to_repo if append_link),
-      data: {
-        html: true,
-        placement: placement,
-        container: 'body',
-        title: tooltip_title
-      }
+    dropdown_item_with_description('SSH', dropdown_description, href: append_url)
   end
 
-  def ssh_clone_button(project, placement = 'right', append_link: true)
-    klass = 'ssh-selector'
-    klass << ' has-tooltip' if current_user.try(:require_ssh_key?)
+  def dropdown_item_with_description(title, description, href: nil)
+    button_content = content_tag(:strong, title, class: 'dropdown-menu-inner-title')
+    button_content << content_tag(:span, description, class: 'dropdown-menu-inner-content') if description
 
-    content_tag (append_link ? :a : :span), 'SSH',
-      class: klass,
-      href: (project.ssh_url_to_repo if append_link),
-      data: {
-        html: true,
-        placement: placement,
-        container: 'body',
-        title: _('Add an SSH key to your profile to pull or push via SSH.')
-      }
+    content_tag (href ? :a : :span),
+      button_content,
+      class: "#{title.downcase}-selector",
+      href: (href if href)
   end
 end
diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml
index 3d9c90c38fe..fba08092351 100644
--- a/app/views/shared/_clone_panel.html.haml
+++ b/app/views/shared/_clone_panel.html.haml
@@ -7,7 +7,7 @@
         %span
           = enabled_project_button(project, enabled_protocol)
     - else
-      %a#clone-dropdown.clone-dropdown-btn.btn{ href: '#', data: { toggle: 'dropdown' } }
+      %a#clone-dropdown.btn.clone-dropdown-btn{ href: '#', data: { toggle: 'dropdown' } }
         %span
           = default_clone_protocol.upcase
         = icon('caret-down')