Improve Profile settings UI

app/assets/stylesheets/gitlab_bootstrap/avatar.scss

@@ -19,4 +19,5 @@
   &.s32 { width: 32px; height: 32px; margin-right: 10px; }
   &.s60 { width: 60px; height: 60px; margin-right: 12px; }
   &.s90 { width: 90px; height: 90px; margin-right: 15px; }
+  &.s160 { width: 160px; height: 160px; margin-right: 20px; }
 }

app/views/profiles/show.html.haml

-= image_tag avatar_icon(@user.email, 60), alt: '', class: 'avatar s60'
 %h3.page-title
-  = @user.name
-  %br
-  %small
-    = @user.email
-
-  .pull-right
-    = link_to destroy_user_session_path, class: "logout", method: :delete do
-      %small
-        %i.icon-signout
-        Logout
+  Profile settings
+%p.light
+  This information appears on your profile.
+  - if current_user.ldap_user?
+    Some options are unavailable for LDAP accounts
 %hr
 
+
+
 = form_for @user, url: profile_path, method: :put, html: { multipart: true, class: "edit_user form-horizontal" }  do |f|
   -if @user.errors.any?
     %div.alert.alert-error
@@ -40,9 +36,22 @@
         = f.label :twitter, class: "control-label"
         .controls= f.text_field :twitter, class: "input-xlarge"
       .control-group
-        = f.label :avatar, class: "control-label"
+        = f.label :bio, class: "control-label"
         .controls
+          = f.text_area :bio, rows: 6, class: "input-xlarge", maxlength: 250
+          %span.help-block Tell us about yourself in fewer than 250 characters.
+
+    .span5.pull-right
+      .light-well
+        = image_tag avatar_icon(@user.email, 160), alt: '', class: 'avatar s160'
+
+        .clearfix
           .profile-avatar-form-option
+            %p.light
+              You can upload an avatar here
+              %br
+              or change it at #{link_to "gravatar.com", "http://gravatar.com"}
+            %hr
             %a.choose-btn.btn.btn-small.js-choose-user-avatar-button
               %i.icon-paper-clip
               %span Choose File ...
@@ -50,52 +59,6 @@
             %span.file_name.js-avatar-filename File name...
             = f.file_field :avatar, class: "js-user-avatar-input hide"
           %span.help-block The maximum file size allowed is 200KB.
-      .control-group
-        = f.label :bio, class: "control-label"
-        .controls
-          = f.text_area :bio, rows: 6, class: "input-xlarge", maxlength: 250
-          %span.help-block Tell us about yourself in fewer than 250 characters.
-
-    .span5.pull-right
-      %fieldset.tips
-        %legend Tips:
-        %ul
-          %li
-            %p You can change your password on the Account page
-          - if Gitlab.config.gravatar.enabled
-            %li
-              %p You can upload an avatar here or change it at #{link_to "gravatar.com", "http://gravatar.com"}
-
-          - if Gitlab.config.omniauth.enabled && @user.provider?
-            %li
-              %p
-                You can login through #{@user.provider.titleize}!
-                = link_to "click here to change", account_profile_path
-          - if current_user.can_create_group?
-            %li
-              %p
-                Need a group for several dependent projects?
-                = link_to new_group_path, class: "btn btn-tiny" do
-                  Create a group
-      - unless current_user.projects_limit_left > 100
-        %fieldset
-          %legend
-            Personal projects:
-            %small.pull-right
-              %span= current_user.personal_projects.count
-              of
-              %span= current_user.projects_limit
-          .padded
-            .progress
-              .bar{style: "width: #{current_user.projects_limit_percent}%;"}
-
-      %fieldset
-        %legend
-          SSH public keys:
-          %span.pull-right
-            = link_to pluralize(current_user.keys.count, 'key'), profile_keys_path
-        .padded
-          = link_to "Add Public Key", new_profile_key_path, class: "btn btn-small"
 
   .form-actions
     = f.submit 'Save changes', class: "btn btn-save"

features/steps/profile/profile.rb

@@ -3,9 +3,7 @@ class Profile < Spinach::FeatureSteps
   include SharedPaths
 
   step 'I should see my profile info' do
-    page.should have_content "Profile"
-    page.should have_content @user.name
-    page.should have_content @user.email
+    page.should have_content "Profile settings"
   end
 
   step 'I change my contact info' do