better ui for protected branches page

app/views/projects/protected_branches/index.html.haml

@@ -3,13 +3,13 @@
   .span3
     = render "projects/repositories/filter"
   .span9
-    .alert
+    .alert.alert-info
       %p Protected branches designed to prevent push for all except #{link_to "masters", help_permissions_path, class: "vlink"}.
       %p This ability allows:
       %ul
         %li keep stable branches secured
         %li forced code review before merge to protected branches
-      %p Read more about project permissions #{link_to "here", help_permissions_path, class: "vlink"}
+      %p Read more about project permissions #{link_to "here", help_permissions_path, class: "underlined_link"}
     - if can? current_user, :admin_project, @project
       = form_for [@project, @protected_branch] do |f|
@@ -24,31 +24,30 @@
           .span3
             = f.select(:name, @project.open_branches.map { |br| [br.name, br.name] } , {include_blank: "Select branch"}, {class: "chosen span3"})
            
-          = f.submit 'Protect', class: "btn-primary btn"
-
+          = f.submit 'Protect', class: "btn-create btn"
     - unless @branches.empty?
-      %table
-        %thead
-          %tr
-            %th Name
-            %th Last commit
-            %th
-        %tbody
-          - @branches.each do |branch|
-            %tr
-              %td
-                = link_to project_commits_path(@project, branch.name) do
-                  %strong= branch.name
-                  - if @project.root_ref?(branch.name)
-                    %span.label default
-              %td
-                - if branch.commit
-                  = link_to project_commit_path(@project, branch.commit.id) do
-                    = truncate branch.commit.id.to_s, length: 10
-                  = time_ago_in_words(branch.commit.committed_date)
-                  ago
-                - else
-                  (branch was removed from repository)
-              %td
+      %h5 Already Protected:
+      %ul.bordered-list
+        - @branches.each do |branch|
+          %li
+            %h4
+              = link_to project_commits_path(@project, branch.name) do
+                %strong= branch.name
+                - if @project.root_ref?(branch.name)
+                  %span.label.label-info default
+                %span.label.label-success
+                  %i.icon-lock
+              .pull-right
                 - if can? current_user, :admin_project, @project
                   = link_to 'Unprotect', [@project, branch], confirm: 'Branch will be writable for developers. Are you sure?', method: :delete, class: "btn btn-remove btn-small"
+
+            - if commit = branch.commit
+              = link_to project_commit_path(@project, commit.id), class: 'commit_short_id' do
+                = commit.short_id
+              %span.light
+                = gfm escape_once(truncate(commit.title, length: 40))
+              %span
+                = time_ago_in_words(commit.committed_date)
+                ago
+            - else
+              (branch was removed from repository)