arrows for buttons

4 files changed, 72 insertions, 2 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 2ded32dba12..31a093fadd5 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -101,11 +101,70 @@
     margin-top: 12px;
     margin-bottom: 0px;
 
+    .count-buttons {
+      display: block;
+    }
+
     .btn {
       @include btn-gray;
-
+      text-transform: none;
+    }
+    .count-with-arrow {
+      display: inline-block;
+      position: relative;
+      margin-left: 4px;
+
+      .arrow {
+
+          &:before {
+            content: '';
+            display: inline-block;
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-color: transparent;
+            border-style: solid;
+            top: 50%;
+            left: 0;
+            margin-top: -6px;
+            border-width: 7px 5px 7px 0;
+            border-right-color: #dce0e5;
+          }
+
+          &:after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-color: transparent;
+            border-style: solid;
+            top: 50%;
+            left: 1px;
+            margin-top: -9px;
+            border-width: 10px 7px 10px 0;
+            border-right-color: #FFF;
+        }
+      }
       .count {
+        @include btn-gray;
         display: inline-block;
+        background: white;
+        border-radius: 2px;
+        border-width: 1px;
+        border-style: solid;
+        font-size: 13px;
+        font-weight: 600;
+        line-height: 20px;
+        padding: 11px 16px;
+        letter-spacing: .4px;
+        padding: 10px;
+        text-align: center;
+        vertical-align: middle;
+        touch-action: manipulation;
+        cursor: pointer;
+        background-image: none;
+        white-space: nowrap;
+        margin: 0 11px 0px 4px;
       }
     }
   }
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index c1669ac046b..4420861c9dc 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -27,7 +27,7 @@
         = icon('rss')
 
   .project-repo-buttons
-    .split-one
+    .split-one.count-buttons
       = render 'projects/buttons/star'
       = render 'projects/buttons/fork'
 
diff --git a/app/views/projects/buttons/_fork.html.haml b/app/views/projects/buttons/_fork.html.haml
index 2d3abf09051..133531887a2 100644
--- a/app/views/projects/buttons/_fork.html.haml
+++ b/app/views/projects/buttons/_fork.html.haml
@@ -4,10 +4,15 @@
       = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: 'Go to your fork', class: 'btn has_tooltip' do
         = icon('code-fork fw')
         Fork
+      %div.count-with-arrow
+        %span.arrow
         %span.count
           = @project.forks_count
     - else
       = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn has_tooltip' do
         = icon('code-fork fw')
+        Fork
+      %div.count-with-arrow
+        %span.arrow
         %span.count
           = @project.forks_count
diff --git a/app/views/projects/buttons/_star.html.haml b/app/views/projects/buttons/_star.html.haml
index 41a3ec6d90f..27d63cc4cec 100644
--- a/app/views/projects/buttons/_star.html.haml
+++ b/app/views/projects/buttons/_star.html.haml
@@ -1,6 +1,9 @@
 - if current_user
   = link_to toggle_star_namespace_project_path(@project.namespace, @project), class: 'btn star-btn toggle-star has_tooltip', method: :post, remote: true, title: "Star project" do
     = icon('star fw')
+    Star
+  %div.count-with-arrow
+    %span.arrow
     %span.count
       = @project.star_count
 
@@ -15,5 +18,8 @@
 - else
   = link_to new_user_session_path, class: 'btn has_tooltip star-btn', title: 'You must sign in to star a project' do
     = icon('star fw')
+    Star
+  %div.count-with-arrow
+    %span.arrow
     %span.count
       = @project.star_count