Move user avatar and logout button to sidebarprofile-in-sidebar

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

4 files changed, 49 insertions, 19 deletions

diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
index 1e569978cc8..b69c5c4b574 100644
--- a/app/assets/stylesheets/generic/common.scss
+++ b/app/assets/stylesheets/generic/common.scss
@@ -342,9 +342,8 @@ table {
 }
 
 #nprogress .spinner {
-  top: auto !important;
-  bottom: 20px !important;
-  left: 20px !important;
+  top: 15px !important;
+  right: 10px !important;
 }
 
 .header-with-avatar {
diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss
index c4bafad6906..fe32b024f49 100644
--- a/app/assets/stylesheets/generic/header.scss
+++ b/app/assets/stylesheets/generic/header.scss
@@ -13,7 +13,7 @@ header {
     .container {
       width: 100% !important;
       padding: 0;
-
+      padding-right: 35px;
       background: #FFF;
       border-bottom: 1px solid #EEE;
       filter: none;
@@ -62,13 +62,21 @@ header {
       }
 
       .nav > li > a {
-        color: #666;
+        color: #888;
         font-size: 14px;
-        line-height: 32px;
-        padding: 6px 10px;
+        line-height: 19px;
+        padding: 0;
+        background-color: #f5f5f5;
+        margin: 9px 0;
+        margin-left: 10px;
+        border-radius: 40px;
+        height: 26px;
+        width: 26px;
+        line-height: 26px;
+        text-align: center;
 
         &:hover, &:focus, &:active {
-          background: none;
+          background-color: #EEE;
         }
       }
 
@@ -150,17 +158,6 @@ header {
     }
   }
 
-  .profile-pic {
-    padding: 0px !important;
-    width: 46px;
-    height: 46px;
-    margin-left: 5px;
-    img {
-      width: 46px;
-      height: 46px;
-    }
-  }
-
   /**
    *
    * Search box
@@ -184,6 +181,8 @@ header {
       padding: 4px 6px;
       padding-left: 25px;
       font-size: 13px;
+      background-color: #f5f5f5;
+      border-color: #f5f5f5;
     }
   }
 }
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
index 754c5b53020..a80b5850803 100644
--- a/app/assets/stylesheets/generic/sidebar.scss
+++ b/app/assets/stylesheets/generic/sidebar.scss
@@ -127,6 +127,20 @@
       left: 0px;
       width: 52px;
     }
+
+    .sidebar-user {
+      .username {
+        display: none;
+      }
+
+      .avatar {
+        margin-bottom: 10px;
+      }
+
+      .logout-holder {
+        text-align: center;
+      }
+    }
   }
 }
 
@@ -170,3 +184,15 @@
     @include expanded-sidebar;
   }
 }
+
+.sidebar-user {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 10px;
+  color: #fff;
+
+  .avatar {
+    margin-top: 5px;
+  }
+}
diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss
index 139b3cc1ac4..9b8e3d8e291 100644
--- a/app/assets/stylesheets/themes/gitlab-theme.scss
+++ b/app/assets/stylesheets/themes/gitlab-theme.scss
@@ -29,6 +29,12 @@
     .sidebar-wrapper {
       background: $color-darker;
       border-right: 1px solid $color-darker;
+
+      .sidebar-user {
+        a {
+          color: $color-light;
+        }
+      }
     }
 
     .nav-sidebar li {