Merge branch 'shrink-profile-info' into 'master'

Shrink profile info

## What does this MR do?
Updates design of profile page to match comps

## Screenshots (if relevant)
![Screen_Shot_2016-09-16_at_11.34.21_AM](/uploads/5c2f510e6cc64bf466309db8ec02b9e0/Screen_Shot_2016-09-16_at_11.34.21_AM.png)
![Screen_Shot_2016-09-16_at_11.35.20_AM](/uploads/ebd3471965340fce5a897dcfc1a5385c/Screen_Shot_2016-09-16_at_11.35.20_AM.png)

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
closes https://gitlab.com/gitlab-org/gitlab-ce/issues/18071

See merge request !6394

4 files changed, 42 insertions, 14 deletions

diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index f5223207f3a..2432ddb72f4 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -129,8 +129,6 @@
   position: relative;
 
   .avatar-holder {
-    margin-bottom: 16px;
-
     .avatar, .identicon {
       margin: 0 auto;
       float: none;
@@ -143,13 +141,7 @@
 
   .cover-title {
     color: $gl-header-color;
-    margin: 0;
-    font-size: 24px;
-    font-weight: normal;
-    margin-bottom: 10px;
-    color: #4c4e54;
     font-size: 23px;
-    line-height: 1.1;
 
     h1 {
       color: $gl-gray-dark;
@@ -213,6 +205,9 @@
       }
     }
   }
+  &.user-cover-block {
+    padding: 24px 0 0;
+  }
 
   .group-info {
 
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 2582cde5a71..9f2d53d5206 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -204,7 +204,7 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color: $gl-header-color;
+  color: $gl-title-color;
   font-weight: 600;
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 9f563a4de35..2f5e3ec8e44 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -102,7 +102,7 @@ $gl-grayish-blue:      #7f8fa4;
 $gl-gray:              $gl-text-color;
 $gl-gray-dark:         #313236;
 $gl-gray-light:        $gl-placeholder-color;
-$gl-header-color:      $gl-title-color;
+$gl-header-color:      #4c4e54;
 
 /*
  * Lists
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 6f58203f49c..0fcdaf94a21 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -93,8 +93,9 @@
 
 .profile-user-bio {
   // Limits the width of the user bio for readability.
-  max-width: 750px;
-  margin: auto;
+  max-width: 600px;
+  margin: 15px auto 0;
+  padding: 0 16px;
 }
 
 .user-avatar-button {
@@ -212,6 +213,28 @@
 }
 
 .user-profile {
+  .cover-controls a {
+    margin-left: 5px;
+  }
+  .profile-header {
+    margin: 0 auto;
+    .avatar-holder {
+      width: 90px;
+      display: inline-block;
+    }
+    .user-info {
+      display: inline-block;
+      text-align: left;
+      vertical-align: middle;
+      margin-left: 15px;
+      .handle {
+        color: $gl-gray-light;
+      }
+      .member-date {
+        margin-bottom: 4px;
+      }
+    }
+  }
   @media (max-width: $screen-xs-max) {
     .cover-block {
       padding-top: 20px;
@@ -219,16 +242,26 @@
 
     .cover-controls {
       position: static;
+      padding: 0 16px;
       margin-bottom: 20px;
+      display: -webkit-flex;
+      display: flex;
 
       .btn {
-        display: inline-block;
-        width: 46%;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        &:first-child {
+          margin-left: 0;
+        }
       }
     }
   }
 }
 
+.user-profile-nav {
+  margin-top: 15px;
+}
+
 table.u2f-registrations {
   th:not(:last-child), td:not(:last-child) {
     border-right: solid 1px transparent;