Make dropdown style on project page consistent

4 files changed, 55 insertions, 3 deletions

diff --git a/app/assets/javascripts/project.js b/app/assets/javascripts/project.js
index a3f7d69b98d..6e1744e8e72 100644
--- a/app/assets/javascripts/project.js
+++ b/app/assets/javascripts/project.js
@@ -10,14 +10,19 @@ import Cookies from 'js-cookie';
       const $projectCloneField = $('#project_clone');
       const $cloneBtnText = $('a.clone-dropdown-btn span');
 
+      const selectedCloneOption = $cloneBtnText.text().trim();
+      if (selectedCloneOption.length > 0) {
+        $(`a:contains('${selectedCloneOption}')`, $cloneOptions).addClass('is-active');
+      }
+
       $('a', $cloneOptions).on('click', (e) => {
         const $this = $(e.currentTarget);
         const url = $this.attr('href');
 
         e.preventDefault();
 
-        $('.active', $cloneOptions).not($this).removeClass('active');
-        $this.toggleClass('active');
+        $('.is-active', $cloneOptions).not($this).removeClass('is-active');
+        $this.toggleClass('is-active');
         $projectCloneField.val(url);
         $cloneBtnText.text($this.text());
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 3f934403147..572203bce34 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -722,3 +722,48 @@
   @include set-invisible;
   overflow: hidden;
 }
+
+// TODO: change global style and remove mixin
+@mixin new-style-dropdown {
+  .dropdown-menu {
+    li {
+      padding: 0 1px;
+
+      &.dropdown-header {
+        padding: 8px 16px;
+      }
+
+      a {
+        border-radius: 0;
+        padding: 8px 16px;
+
+        &.is-focused,
+        &:hover,
+        &:active,
+        &:focus {
+          background-color: $gray-darker;
+        }
+
+        &.is-active {
+          font-weight: inherit;
+
+          &::before {
+            top: 16px;
+          }
+        }
+      }
+    }
+
+    &.dropdown-menu-selectable {
+      li {
+        a {
+          padding: 8px 40px;
+
+          &.is-active::before {
+            left: 16px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index b3a90dff89a..d29421aa1b3 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -282,6 +282,8 @@
 }
 
 .project-repo-buttons {
+  @include new-style-dropdown;
+
   .project-action-button .dropdown-menu {
     max-height: 250px;
     overflow-y: auto;
diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml
index b4843eafdb7..3d9c90c38fe 100644
--- a/app/views/shared/_clone_panel.html.haml
+++ b/app/views/shared/_clone_panel.html.haml
@@ -11,7 +11,7 @@
         %span
           = default_clone_protocol.upcase
         = icon('caret-down')
-      %ul.dropdown-menu.dropdown-menu-right.clone-options-dropdown
+      %ul.dropdown-menu.dropdown-menu-selectable.dropdown-menu-right.clone-options-dropdown
         %li
           = ssh_clone_button(project)
         %li