Better design for SSH keys page

app/assets/stylesheets/gitlab_bootstrap/common.scss

@@ -87,3 +87,10 @@ fieldset legend { font-size: 17px; }
   color: #333;
   text-shadow: 0 1px 1px #FFF;
 }
+
+pre.well-pre {
+  border: 1px solid #EEE;
+  background: #f9f9f9;
+  border-radius: 0;
+  color: #555;
+}

app/controllers/profiles/keys_controller.rb

@@ -2,7 +2,7 @@ class Profiles::KeysController < ApplicationController
   layout "profile"
   def index
-    @keys = current_user.keys.all
+    @keys = current_user.keys.order('id DESC').all
   end
   def show

app/views/profiles/keys/_form.html.haml

@@ -12,13 +12,12 @@
     .clearfix
       = f.label :key
       .input
+        %p.light
+          Paste your public key here. Read more about how generate it #{link_to "here", help_ssh_path}
         = f.text_area :key, class: [:xxlarge, :thin_area]
-        %p.hint
-          Paste your public key here. Read more about how generate it
-          = link_to "here", help_ssh_path
     .actions
-      = f.submit 'Save', class: "btn btn-save"
+      = f.submit 'Add key', class: "btn btn-create"
       = link_to "Cancel", profile_keys_path, class: "btn btn-cancel"

app/views/profiles/keys/_key.html.haml

-%tr
-  %td
-    = link_to profile_key_path(key) do
-      %strong= key.title
-  %td
-    %span.cgray
-      Added
-      = time_ago_in_words(key.created_at)
-      ago
-  %td
-    = link_to 'Remove', profile_key_path(key), confirm: 'Are you sure?', method: :delete, class: "btn btn-small btn-remove delete-key pull-right"
+%li
+  = link_to profile_key_path(key) do
+    %strong= key.title
+  %span.cgray
+    added
+    = time_ago_in_words(key.created_at)
+    ago
+  = link_to 'Remove', profile_key_path(key), confirm: 'Are you sure?', method: :delete, class: "btn btn-small btn-remove delete-key pull-right"

app/views/profiles/keys/edit.html.haml

-%h1 Editing key
-
-= render 'form'
-
-= link_to 'Show', profile_keys_path(key)
-\|
-= link_to 'Back', profile_keys_path

app/views/profiles/keys/index.html.haml

 %h3.page_title
   SSH Keys
-  = link_to "Add new", new_profile_key_path, class: "btn pull-right"
-%hr
-%p.slead
+  = link_to "Add SSH Key", new_profile_key_path, class: "btn pull-right btn-primary"
+%br
+%p.light
   SSH key allows you to establish a secure connection between your computer and GitLab
-%table#keys-table
-  %thead
-    %tr
-      %th Name
-      %th Added
-      %th
-  = render @keys
-  - if @keys.blank?
-    %tr
-      %td{colspan: 3}
-        %p.nothing_here_message There are no SSH keys with access to your account.
+%p.light
+  Before you can add ssh key you need to
+  = link_to "generate it", help_ssh_path
+
+.ui-box
+  %h5.title
+    SSH Keys (#{@keys.count})
+    .pull-right
+  %ul.well-list#keys-table
+    = render @keys
+    - if @keys.blank?
+      %li
+        %h3.nothing_here_message There are no SSH keys with access to your account.
+

app/views/profiles/keys/show.html.haml

-%h3.page_title
-  Public key:
-  = @key.title
-  %small
-    created at
-    = @key.created_at.stamp("Aug 21, 2011")
-.back_link
-  = link_to profile_keys_path do
-    ← To keys list
-%hr
-%pre= @key.key
+.row
+  .span4
+    .ui-box
+      %h5.title
+        SSH Key
+      %ul.well-list
+        %li
+          %span.light Title:
+          %strong= @key.title
+        %li
+          %span.light Created at:
+          %strong= @key.created_at.stamp("Aug 21, 2011")
+
+  .span8
+    %pre.well-pre
+      = @key.key
 .pull-right
   = link_to 'Remove', profile_key_path(@key), confirm: 'Are you sure?', method: :delete, class: "btn btn-remove delete-key"