Add styles to git stars

Author: Jordan Lovett

lib/MetaCPAN/Web/Model/ReleaseInfo.pm

@@ -93,9 +93,9 @@ sub _fetch {
         my $release = $data->{release};
         my $dist    = $data->{distribution};
 
-        $data->{chat}   = $self->_get_chat( $release, $dist );
-        $data->{issues} = $self->_get_issues( $release, $dist );
-        $data->{github} = $data->{distribution}->{repo}->{github};
+        $data->{chat}       = $self->_get_chat( $release, $dist );
+        $data->{issues}     = $self->_get_issues( $release, $dist );
+        $data->{github}     = $dist->{repo}->{github};
         $data->{repository} = $self->_get_repository( $release, $dist );
 
         Future->done($data);

root/inc/favorite.tx

@@ -12,8 +12,8 @@
 </div>
 %% if $github && $repository.url {
   <div class="star-rating">
-    <a href="[% $repository.url %]" target="_blank" class="btn btn-primary">
-      ⭐ Starred <span class="badge badge-primary">[% $github.stars %]</span>
+    <a href="[% $repository.url %]" target="_blank" class="btn btn-primary" title="View on GitHub">
+      ⭐ Starred <span>[% $github.stars %]</span>
       <span class="sr-only">GitHub stars</span>
     </a>
   </div>

root/static/less/global.less

@@ -110,11 +110,10 @@ a.favorite {
     display: inline-block;
     line-height: 1;
     text-align: right;
-    min-width: 25px;
     position: relative;
-    top: -1px;
     font-size: @font-size-base;
     font-weight: normal;
+    height: 100%;
     min-width: 35px;
     cursor: pointer;
 
@@ -236,6 +235,30 @@ a.ellipsis:hover * {
     margin-bottom: 1px;
 }
 
+.star-rating {
+    & a.btn.btn-primary {
+        padding: 1px 3px;
+        font-size: 0.9em;
+        background: #f0f0f0 linear-gradient(to bottom, #fbfbfb, #f0f0f0);
+        color: #000;
+        min-width: 25px;
+        position: relative;
+        font-size: @font-size-base;
+        font-weight: normal;
+        min-width: 35px;
+        border-color: #e0e0e0;
+        line-height: 1.54em;
+
+        &:hover {
+            background: #36c linear-gradient(to bottom, #69f, #36c);
+            color: #fff;
+            border-color: #36c;
+            opacity: 1;
+            text-decoration: none;
+        }
+    }
+}
+
 /* Contributors list on release pages
 * see /release/Plack for example
 */