Improve header with avatar for group and user pages

app/assets/stylesheets/generic/common.scss

@@ -355,3 +355,22 @@ table {
   bottom: 20px !important;
   left: 20px !important;
 }
+
+.header-with-avatar {
+  h3 {
+    margin: 0;
+    font-weight: bold;
+  }
+
+  .username {
+    font-size: 18px;
+    color: #666;
+    margin-top: 8px;
+  }
+
+  .description {
+    font-size: 16px;
+    color: #666;
+    margin-top: 8px;
+  }
+}

app/assets/stylesheets/pages/profile.scss

@@ -41,11 +41,6 @@
   }
 }
 
-.user-show-username {
-  font-weight: 200;
-  color: #666;
-}
-
 /*
  * Appearance settings
  *

app/views/groups/show.html.haml

 .dashboard
-  %div
+  .header-with-avatar.clearfix
     = image_tag group_icon(@group), class: "avatar group-avatar s90"
-    .clearfix
-      %h2
+    %h3
       = @group.name
+    .username
+      @#{@group.path}
     - if @group.description.present?
-        %p
+      .description
         = escaped_autolink(@group.description)
   %hr
   .row

app/views/users/_profile.html.haml

@@ -25,7 +25,3 @@
       %li
         %span.light Location:
         %strong= user.location
-    - unless user.bio.blank?
-      %li
-        %span.light Bio:
-        %span= user.bio

app/views/users/show.html.haml

@@ -2,21 +2,25 @@
   = link_to '#aside', class: 'show-aside' do
     %i.fa.fa-angle-left
   %section.col-md-8
-    %h3.page-title
+    .header-with-avatar
       = image_tag avatar_icon(@user.email, 90), class: "avatar avatar-tile s90", alt: ''
+      %h3
         = @user.name
         - if @user == current_user
           .pull-right
-          = link_to profile_path, class: 'btn' do
+            = link_to profile_path, class: 'btn btn-sm' do
               %i.fa.fa-pencil-square-o
               Edit Profile settings
-      %br
-      %span.user-show-username #{@user.username}
-      %br
-      %small member since #{@user.created_at.stamp("Nov 12, 2031")}
+      .username
+        @#{@user.username}
+      .description
+        - if @user.bio.present?
+          = @user.bio
+
     .clearfix
 
     - if @groups.any?
+      .prepend-top-20
         %h4 Groups
         = render 'groups', groups: @groups
         %hr