Fix layout of shortcut keys in dropdown

2 files changed, 22 insertions, 29 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 95494ff8569..06b6a9da4fa 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -191,26 +191,19 @@
     display: none;
   }
 
-  &.shortcuts span{
-    display: inline-block;
-    width: 140px;
-  }
-
   &.shortcuts .kbd {
+    background-color: $gray-light;
+    color: $gl-text-color;
+    border: 1px solid $gray-darkest;
+    box-shadow: 0 -1px 0 $gray-darkest inset;
     display: inline-block;
-    padding: 3px 5px;
+    vertical-align: top;
+    padding: 3px 0;
+    margin-right: 5px;
     font-size: 11px;
     line-height: 10px;
-    color: #555;
-    vertical-align: middle;
-    background-color: #fcfcfc;
-    border-width: 1px;
-    border-style: solid;
-    border-color: #ccc #ccc #bbb;
-    border-image: none;
     border-radius: 3px;
-    box-shadow: 0 -1px 0 #bbb inset;
-    width: 21px;
+    width: 20px;
     text-align: center;
   }
 
diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index 92231b03896..cc2d70aa55b 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -1,16 +1,16 @@
 %ul
   = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: {class: "#{project_tab_class} home"}) do
     = link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do
-      %span
-        Projects
       .kbd
         P
+      %span
+        Projects
   = nav_link(path: 'dashboard#activity') do
     = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do
-      %span
-        Activity
       .kbd
         A
+      %span
+        Activity
   - if koding_enabled?
     = nav_link(controller: :koding) do
       = link_to koding_path, title: 'Koding' do
@@ -18,36 +18,36 @@
           Koding
   = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
     = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups', title: 'Groups' do
-      %span
-        Groups
       .kbd
         G
+      %span
+        Groups
   = nav_link(controller: 'dashboard/milestones') do
     = link_to dashboard_milestones_path, class: 'dashboard-shortcuts-milestones', title: 'Milestones' do
-      %span
-        Milestones
       .kbd
         L
+      %span
+        Milestones
   = nav_link(path: 'dashboard#issues') do
     = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do
+      .kbd
+        I
       %span
         Issues
       .badge= number_with_delimiter(cached_assigned_issuables_count(current_user, :issues, :opened))
-      .kbd
-        I
   = nav_link(path: 'dashboard#merge_requests') do
     = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'dashboard-shortcuts-merge_requests' do
+      .kbd
+        M
       %span
         Merge Requests
       .badge= number_with_delimiter(cached_assigned_issuables_count(current_user, :merge_requests, :opened))
-      .kbd
-        M
   = nav_link(controller: 'dashboard/snippets') do
     = link_to dashboard_snippets_path, class: 'dashboard-shortcuts-snippets', title: 'Snippets' do
-      %span
-        Snippets
       .kbd
         S
+      %span
+        Snippets
   %li.divider
   %li
     = link_to "Help", help_path, title: 'About GitLab CE', class: 'about-gitlab'