Issue #509 - Ajusted the bottom pop up alignment

Ajusted the bottom aligment when the logout button is enable or not

2 files changed, 25 insertions, 10 deletions

diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
index e9f15222..c4a05a4b 100644
--- a/web-ui/app/scss/styles.scss
+++ b/web-ui/app/scss/styles.scss
@@ -24,17 +24,32 @@
 #user-settings-box {
   position: absolute;
   left: 20px;
-  bottom: 10px;
+  bottom: 0px;
   z-index: 1;
-  padding: 20px;
+  padding: 13px 18px;
   background-color: rgba(#3E3A37, 0.9);
+  min-width: 230px;
+ 
+  &.extra-bottom-space{
+    bottom: 33px
+  }
 
+  #user-settings-close {
+    float: right;
+  }
+  
   h1, i {
     font-size: 1.6em;
     color: white;
+    line-height: 1.2em;
+  }
+  
+  i.fa-user {
+    margin-right: 10px;
+    float: left;
   }
 
-  i {
+  i.fa-close{
     margin-left: 10px;
     float: right;
     cursor: pointer;
@@ -46,9 +61,7 @@
   }
 }
 
-#user-settings-box.extra-bottom-space {
-  bottom: 28px;
-}
+
 
 .arrow-box:before {
   right: 100%;
@@ -440,6 +453,8 @@ section {
       }
 
       ul#logout, ul#feedback, ul#user-settings-icon {
+        margin-bottom: 0;
+
         li {
           background-color: $navigation_background;
           padding: 5px 10px;
@@ -473,8 +488,6 @@ section {
         }
 
         &#user-settings-icon {
-            margin-bottom: 0;
-
             li {
                 color: white;
                 &:hover {
@@ -854,7 +867,7 @@ button {
 div.side-nav-bottom {
   width: 100%;
   position: fixed;
-  bottom: 0;
+  bottom: 20px;
   background-color: $navigation_background;
 
   .version {
diff --git a/web-ui/app/templates/page/user_settings_box.hbs b/web-ui/app/templates/page/user_settings_box.hbs
index bc6400ef..187d603b 100644
--- a/web-ui/app/templates/page/user_settings_box.hbs
+++ b/web-ui/app/templates/page/user_settings_box.hbs
@@ -1,5 +1,7 @@
 <header>
-  <h1 class="fa fa-user"> User Settings</h1>
   <span id="user-settings-close"><i class="fa fa-close"></i></span>
+   <i class="fa fa-user"></i>
+   <h1>User Settings</h1>
+   <i class="shortcut-label"></i>
 </header>
 <p>$account_email</p>