5 files changed, 50 insertions, 48 deletions
diff --git a/app/views/profiles/keys/_form.html.haml b/app/views/profiles/keys/_form.html.haml
index 2a8800de60e..4d78215ed3c 100644
--- a/app/views/profiles/keys/_form.html.haml
+++ b/app/views/profiles/keys/_form.html.haml
@@ -1,5 +1,5 @@
 %div
-  = form_for [:profile, @key], html: { class: 'form-horizontal js-requires-input' } do |f|
+  = form_for [:profile, @key], html: { class: 'js-requires-input' } do |f|
     - if @key.errors.any?
       .alert.alert-danger
         %ul
@@ -7,13 +7,11 @@
             %li= msg
 
     .form-group
-      = f.label :key, class: 'control-label'
-      .col-sm-10
-        = f.text_area :key, class: "form-control", rows: 8, autofocus: true, required: true
+      = f.label :key, class: 'label-light'
+      = f.text_area :key, class: "form-control", rows: 8, required: true
     .form-group
-      = f.label :title, class: 'control-label'
-      .col-sm-10= f.text_field :title, class: "form-control", required: true
+      = f.label :title, class: 'label-light'
+      = f.text_field :title, class: "form-control", required: true
 
-    .form-actions
+    .prepend-top-default
       = f.submit 'Add key', class: "btn btn-create"
-      = link_to "Cancel", profile_keys_path, class: "btn btn-cancel"
diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml
index 9bbccbc45ea..08a11fad001 100644
--- a/app/views/profiles/keys/_key.html.haml
+++ b/app/views/profiles/keys/_key.html.haml
@@ -1,11 +1,14 @@
-%tr
-  %td
-    = link_to path_to_key(key, is_admin) do
-      %strong= key.title
-  %td
-    %code.key-fingerprint= key.fingerprint
-  %td
-    %span.cgray
-      added #{time_ago_with_tooltip(key.created_at)}
-  %td
-    = link_to 'Remove', path_to_key(key, is_admin), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-sm btn-remove delete-key pull-right"
+%li.key-list-item
+  .pull-left.append-right-10
+    = icon 'key', class: "key-icon"
+  .pull-left
+    = link_to path_to_key(key, is_admin), class: "title" do
+      = key.title
+    .description
+      = key.fingerprint
+  .pull-right
+    %span.key-created-at
+      created #{time_ago_with_tooltip(key.created_at)} ago
+    = link_to path_to_key(key, is_admin), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-transparent prepend-left-10" do
+      %span.sr-only Remove
+      = icon('trash')
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index 3bd1f1af162..dd7615400dc 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -1,5 +1,5 @@
 - is_admin = defined?(admin) ? true : false
-.row
+.row.prepend-top-default
   .col-md-4
     .panel.panel-default
       .panel-heading
diff --git a/app/views/profiles/keys/_key_table.html.haml b/app/views/profiles/keys/_key_table.html.haml
index 8c9d546af4c..233d79d9467 100644
--- a/app/views/profiles/keys/_key_table.html.haml
+++ b/app/views/profiles/keys/_key_table.html.haml
@@ -1,19 +1,5 @@
 - is_admin = defined?(admin) ? true : false
 - if @keys.any?
-  .table-holder
-    %table.table
-      %thead.panel-heading
-        %tr
-          %th Title
-          %th Fingerprint
-          %th Added at
-          %th
-      %tbody
-        - @keys.each do |key|
-          = render 'profiles/keys/key', key: key, is_admin: is_admin
-- else
-  .nothing-here-block
-    - if is_admin
-      User has no ssh keys
-    - else
-      There are no SSH keys with access to your account.
+  %ul.well-list
+    - @keys.each do |key|
+      = render 'profiles/keys/key', key: key, is_admin: is_admin
diff --git a/app/views/profiles/keys/index.html.haml b/app/views/profiles/keys/index.html.haml
index c9a6a93f545..c6f0033a689 100644
--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -1,14 +1,29 @@
 - page_title "SSH Keys"
 - header_title page_title, profile_keys_path
+- is_admin = defined?(admin) ? true : false
 
-.top-area
-  .nav-text
-    Before you can add an SSH key you need to
-    = link_to "generate it.", help_page_path("ssh", "README")
-  .nav-controls
-    = link_to new_profile_key_path, class: "btn btn-new" do
-      = icon('plus')
-      Add SSH Key
-
-.prepend-top-default
-= render 'key_table'
+.row.prepend-top-default
+  .col-lg-3.profile-settings-sidebar
+    %h4.prepend-top-0
+      = page_title
+    %p
+      SSH keys allow you to establish a secure connection between your computer and GitLab.
+  .col-lg-9
+    %h5.prepend-top-0
+      Add an SSH key
+    %p
+      Before you can add an SSH key you need to
+      = link_to "generate it.", help_page_path("ssh", "README")
+    = render 'form'
+    %hr
+    %h5
+      Your SSH keys (#{@keys.count})
+    %div.append-bottom-default
+      - if @keys.any?
+        = render 'key_table'
+      - else
+        %p.profile-settings-message.text-center
+          - if is_admin
+            User has no ssh keys
+          - else
+            There are no SSH keys with access to your account.