audit log UI update

Closes #13862

app/assets/stylesheets/framework/common.scss

@@ -14,6 +14,7 @@
 .prepend-left-10 { margin-left:10px }
 .prepend-left-default { margin-left:$gl-padding }
 .prepend-left-20 { margin-left:20px }
+.append-right-5 { margin-right: 5px }
 .append-right-10 { margin-right:10px }
 .append-right-20 { margin-right:20px }
 .append-bottom-10 { margin-bottom:10px }

app/helpers/icons_helper.rb

@@ -10,6 +10,15 @@ module IconsHelper
     options.include?(:base) ? fa_stacked_icon(names, options) : fa_icon(names, options)
   end
 
+  def audit_icon(names, options = {})
+    case names
+    when "standard"
+      names = "key"
+    end
+
+    options.include?(:base) ? fa_stacked_icon(names, options) : fa_icon(names, options)
+  end
+
   def spinner(text = nil, visible = false)
     css_class = 'loading'
     css_class << ' hide' unless visible

app/views/profiles/_event_table.html.haml

-.table-holder
-  %table.table#audits
-    %thead
-      %tr
-        %th Action
-        %th When
+%h5.prepend-top-0
+  History of authentications
 
-    %tbody
+%ul.well-list
   - events.each do |event|
-        %tr
-          %td
-            %span
+    %li
+      %span.description
+        = audit_icon(event.details[:with], class: "append-right-5")
         Signed in with
-              %b= event.details[:with]
+        = event.details[:with]
         authentication
-          %td #{time_ago_in_words event.created_at} ago
+      %span.pull-right
+        #{time_ago_in_words event.created_at} ago
+
 = paginate events, theme: "gitlab"

app/views/profiles/audit_log.html.haml

 - page_title "Audit Log"
 - header_title page_title, audit_log_profile_path
 
-.alert.alert-help.prepend-top-default
-  History of authentications
-
-.prepend-top-default
-= render 'event_table', events: @events
+.row.prepend-top-default
+  .col-lg-3.profile-settings-sidebar
+    %h3.prepend-top-0
+      = page_title
+    %p
+      This is a security log of important events involving your account.
+  .col-lg-9
+    = render 'event_table', events: @events