From 4dde61bad91d0c3d3b12455523632c932b7c8edc Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Tue, 3 Feb 2015 13:00:50 +0100
Subject: [PATCH] try cleanup and modularizing

---
 .../app/templates/layouts/dashboard.hbs       | 118 ++++-----
 assets/styles/app/_mixins/vars.sass           |  22 +-
 assets/styles/app/components/loader.sass      |  89 +++++++
 .../styles/app/components/travis-switch.sass  |   9 +-
 assets/styles/app/layout.sass                 |  64 ++---
 assets/styles/app/layouts/dashboard.sass      | 245 +++---------------
 assets/styles/app/layouts/footer.sass         |  72 +++++
 assets/styles/app/main/tools.sass             |   7 +-
 assets/styles/app/right.sass                  |   6 +-
 assets/styles/app/tabs.sass                   |   5 +-
 assets/styles/app/top.sass                    | 119 +++++----
 11 files changed, 372 insertions(+), 384 deletions(-)
 create mode 100644 assets/styles/app/components/loader.sass
 create mode 100644 assets/styles/app/layouts/footer.sass

diff --git a/assets/scripts/app/templates/layouts/dashboard.hbs b/assets/scripts/app/templates/layouts/dashboard.hbs
index 1ac1d2b1..17f13918 100644
--- a/assets/scripts/app/templates/layouts/dashboard.hbs
+++ b/assets/scripts/app/templates/layouts/dashboard.hbs
@@ -1,21 +1,17 @@
-<div class="wrapper">
-  <div id="top">
-    <div class="row">
-      <div class="small-2 medium-2 columns" id="logo">
-        <h1>{{#link-to "main"}}Home{{/link-to}}</h1>
-      </div>
-      <div class="small-4 medium-3 columns" id="nav">
+<div class="centered">
+  <div class="wrapper">
+    <div id="top">
+      <div class="row">
+        <div class="small-2 medium-2 columns" id="logo">
+          <h1>{{#link-to "main"}}Home{{/link-to}}</h1>
+        </div>
         <ul>
           <li><a href="#">Docs</a></li>
           <li><a href="#">Blog</a></li>
-        </ul>
-      </div>
-      <!-- <div class="small-4 medium-3 columns" id="status">
-        <div class="status-graph">Status Graph</div>
-      </div> -->
-      <div class="small-2 medium-5 columns no-padding" id="user">
-        <ul>
-          <li class="menu">
+        <!-- <div class="small-4 medium-3 columns" id="status">
+          <div class="status-graph">Status Graph</div>
+        </div> -->
+          <li class="menu float-right user">
             <p class="handle">
               {{#if auth.signedOut}}
                 <a class="signed-out" href="#" {{action "signIn" target="auth"}}>Sign in with GitHub</a>
@@ -28,59 +24,59 @@
               {{/if}}
             </p>
             <ul>
-              <li>Help</li>
+              <li><a href="#" title="">Help</a></li>
               <li><a href="/" {{action "signOut" target="auth"}}>Sign Out</a></li>
             </ul>
           </li>
         </ul>
       </div>
     </div>
+
+    {{yield}}
+
   </div>
 
-  {{yield}}
+  <footer>
+    <div class="row">
+      <div class="small-6 medium-4 large-4 columns">
+        <img src="/images/dashboard/footer-logo.svg">
+      </div>
+      <div class="small-6 medium-2 large-2 columns">
+        <h3>&copy;Travis CI, GmbH</h3>
+        <ul>
+          <li>Rigaer Straße 8</li>
+          <li>10247 Berlin, Germany</li>
+        </ul>
+      </div>
 
+      <div class="small-6 medium-2 large-2 columns">
+        <h3>Help</h3>
+        <ul>
+          <li><a href="#">Documentation</a></li>
+          <li><a href="#">Blog</a></li>
+          <li><a href="#">Email</a></li>
+          <li><a href="#">Live Chat</a></li>
+          <li><a href="#">Twitter</a></li>
+        </ul>
+      </div>
+
+      <div class="small-6 medium-2 large-2 columns">
+        <h3>Legal</h3>
+        <ul>
+          <li><a href="#">Imprint</a></li>
+          <li><a href="#">Terms of Service</a></li>
+          <li><a href="#">Privacy Policy</a></li>
+        </ul>
+      </div>
+
+      <div class="small-6 medium-2 large-2 columns">
+        <h3>Travis CI Status</h3>
+        <ul>
+          <li><div class="status-circle">Status:</div>
+              <a href="#">Travis CI Status</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </footer>
 </div>
-
-<footer>
-  <div class="row">
-    <div class="small-6 medium-4 large-4 columns">
-      <img src="/images/dashboard/footer-logo.svg">
-    </div>
-    <div class="small-6 medium-2 large-2 columns">
-      <h3>&copy;Travis CI, GmbH</h3>
-      <ul>
-        <li>Rigaer Straße 8</li>
-        <li>10247 Berlin, Germany</li>
-      </ul>
-    </div>
-
-    <div class="small-6 medium-2 large-2 columns">
-      <h3>Help</h3>
-      <ul>
-        <li><a href="#">Documentation</a></li>
-        <li><a href="#">Blog</a></li>
-        <li><a href="#">Email</a></li>
-        <li><a href="#">Live Chat</a></li>
-        <li><a href="#">Twitter</a></li>
-      </ul>
-    </div>
-
-    <div class="small-6 medium-2 large-2 columns">
-      <h3>Legal</h3>
-      <ul>
-        <li><a href="#">Imprint</a></li>
-        <li><a href="#">Terms of Service</a></li>
-        <li><a href="#">Privacy Policy</a></li>
-      </ul>
-    </div>
-
-    <div class="small-6 medium-2 large-2 columns">
-      <h3>Travis CI Status</h3>
-      <ul>
-        <li><div class="status-circle">Status:</div>
-            <a href="#">Travis CI Status</a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</footer>
diff --git a/assets/styles/app/_mixins/vars.sass b/assets/styles/app/_mixins/vars.sass
index 552368aa..34f63469 100644
--- a/assets/styles/app/_mixins/vars.sass
+++ b/assets/styles/app/_mixins/vars.sass
@@ -1,7 +1,9 @@
 
+$blue-grey: #404650
+
 $logo-red: #dc4136
 
-$topbar-bg: #404650
+$topbar-bg: $blue-grey
 $topbar-bg-darker: #31363d
 
 $main-repo-link-color: #50555b
@@ -10,4 +12,20 @@ $main-repo-hover-color: #607a84
 $travis-lint-color: #9b9d9e
 $travis-lint-bg: #fafafa
 
-$left-bg: #e9e9e7
\ No newline at end of file
+$left-bg: #e9e9e7
+
+// dashboard
+$pass-color: #3ba85d
+$fail-color: #d04729
+$error-color: #999999
+$start-color: #848032
+$start-bg-color: #D2CA24
+
+//wrapper
+$wrapper-bg-color: #f4f3ea
+
+// footer
+$footer-color: $blue-grey
+$footer-bg-color: #e0e0e0
+$footer-h3-color: #8f9ba2
+$footer-h3-corder-color: #ccd0d5
\ No newline at end of file
diff --git a/assets/styles/app/components/loader.sass b/assets/styles/app/components/loader.sass
new file mode 100644
index 00000000..c91719b4
--- /dev/null
+++ b/assets/styles/app/components/loader.sass
@@ -0,0 +1,89 @@
+
+
+#loader-container-large
+  margin-top: 2em
+  height     : 70px
+  text-align : center
+
+#loader-container-large .load-text
+  font-size   : 25px
+  line-height : 30px
+  font-weight : 300
+  margin-top  : 20px
+  font-weight: 400
+
+.loader-large
+  width    : 60px
+  height   : 60px
+  position : relative
+  margin   : 0 auto
+
+#loader-container-medium
+  height     : 40px
+  margin-top : 15px
+  text-align : center
+
+#loader-container-medium .load-text
+  vertical-align : 10px
+  display        : inline-block
+
+.loader-medium
+  width        : 30px
+  height       : 30px
+  position     : relative
+  display      : inline-block
+  margin       : 0 auto
+  margin-right : 10px
+
+#loader-container-small
+  height     : 20px
+  margin-top : 22px
+  text-align : center
+
+#loader-container-small .load-text
+  vertical-align : 3px
+  display        : inline-block
+
+.loader-small
+  width        : 15px
+  height       : 15px
+  position     : relative
+  display      : inline-block
+  margin       : 0 auto
+  margin-right : 5px
+
+.load-circle1, .load-circle2
+  width         : 100%
+  height        : 100%
+  border-radius : 50%
+  opacity       : 0.7
+  position      : absolute
+  top           : 0
+  left          : 0
+  -webkit-animation : bounce 1.5s infinite ease-in-out
+  animation         : bounce 1.5s infinite ease-in-out
+
+.load-circle1
+  background-color : #347389
+
+.load-circle2
+  background-color : #bdc5c5
+  -webkit-animation-delay : -0.5s
+  animation-delay         : -0.5s
+
+@-webkit-keyframes bounce
+  0%, 100%
+    -webkit-transform : scale(0.0)
+
+  60%
+    -webkit-transform : scale(1.0)
+
+
+@keyframes bounce
+  0%, 100%
+    transform         : scale(0.0)
+    -webkit-transform : scale(0.0)
+  60%
+    transform: scale(1.0)
+    -webkit-transform : scale(1.0)
+
diff --git a/assets/styles/app/components/travis-switch.sass b/assets/styles/app/components/travis-switch.sass
index c93ddc64..0ca98cdf 100644
--- a/assets/styles/app/components/travis-switch.sass
+++ b/assets/styles/app/components/travis-switch.sass
@@ -1,6 +1,11 @@
 .settings-row
   margin-top: 20px
 
+.settings-row,
+.short-settings-element
+  & > *
+    box-sizing: content-box
+
 a.travis-switch
   margin: 0 10px 0 0
 
@@ -26,8 +31,8 @@ p.settings-row
   &:before
     content: ""
     position: absolute
-    top: 1px
-    left: 1px
+    top: 2px
+    left: 2px
     width: 3.5em
     height: 1.9em
     background: #e9e9e7
diff --git a/assets/styles/app/layout.sass b/assets/styles/app/layout.sass
index 3c444de4..6af179d9 100644
--- a/assets/styles/app/layout.sass
+++ b/assets/styles/app/layout.sass
@@ -1,40 +1,13 @@
 @import "app/_mixins/all"
 
-$left-width: 250px
 
-// @mixin display-flex
-//   display: -webkit-flex
-//   display: -moz-flex
-//   display: -ms-flexbox
-//   display: flex
-
-// @mixin flex($grow, $shrink, $size)
-//   -ms-flex:     $grow $shrink $size
-//   -webkit-flex: $grow $shrink $size
-//   -moz-flex:    $grow $shrink $size
-//   flex:         $grow $shrink $size
-
-// html, body
-//   min-height: 100vh
-
-// body > div:first-child
-//   min-height: 100vh
+.centered .row
+  max-width: 1024px
 
 .main, .profile-view
   position: relative
   width: 100%
   min-height: 100vh
-  // margin-top: 40px
-  //@include display-flex
-
-// #top
-//   position: absolute
-//   top: -40px
-//   left: 0
-//   width: 100%
-//   min-width: 930px
-//   height: 55px
-//   z-index: 1000
 
 #auth, #not-found, #simple
   #top
@@ -47,7 +20,6 @@ $left-width: 250px
 #left, #right
   position: relative
   min-height: 100%
-  //@include flex(0, 0, 25em)
 
 #left
   float: left
@@ -55,14 +27,6 @@ $left-width: 250px
   background-color: #fbfbfa
   border-right: 1px solid $color-border-normal
 
-@media #{$medium-up}
-  #left
-    width: grid-calc(8, 24)
-@media #{$large-up}
-  #left
-    width: grid-calc(5, 24)
-    max-width: 300px
-
 .duration_label
   display: inline-block
   height: 11px
@@ -78,13 +42,27 @@ $left-width: 250px
   padding: 20px 30px 80px
 
 @media #{$medium-up}
-  #main
-    width: grid-calc(16, 24)
+  #left
+    width: grid-calc(3, 12)
+    float: left
+  #right
+    width: grid-calc(2, 12)
     float: right
-@media #{$medium-up}
+  // #main
+  //   width: grid-calc(16, 12)
+  //   float: right
   #main
-    width: grid-calc(19, 24)
-    float: right
+    width: grid-calc(7, 12)
+    float: left
+
+
+@media #{$large-up}
+  // #left
+  //   width: grid-calc(5, 24)
+  //   max-width: 300px
+  // #main
+  //   width: grid-calc(19, 24)
+  //   float: right
 
 .travis-lint
   background-color: $travis-lint-bg
diff --git a/assets/styles/app/layouts/dashboard.sass b/assets/styles/app/layouts/dashboard.sass
index 3bdc28e9..4b8cef5f 100644
--- a/assets/styles/app/layouts/dashboard.sass
+++ b/assets/styles/app/layouts/dashboard.sass
@@ -1,3 +1,9 @@
+/*
+ * Dashboard
+ * @todo: split into components: filter, search, tiles
+ */
+
+@import "app/_mixins/all"
 
 .current-org-avatar
   display     : inline-block
@@ -7,7 +13,7 @@
   margin : -5px 5px 0 0
 
 #filters-search
-  background    : #ffffff
+  background    : $white
   font-size     : 14px
   padding       : 5px 0 5px 0
   max-height    : 44px
@@ -24,7 +30,7 @@
   z-index    : 1000
 
 #filters ul li
-  background   : #fff
+  background   : $white
   position     : relative
   display      : inline-block
   padding      : 10px 0 10px 0
@@ -32,8 +38,6 @@
   margin-top   : 0
   cursor       : pointer
   border-radius         : 0px
-  -webkit-border-radius : 0px
-  -moz-border-radius    : 0px
 
 #filters li.filters-start:hover
   background-color : #fff
@@ -48,8 +52,6 @@
   opacity    : 0
   visibility : hidden
   box-shadow         : 2px 1px 4px 0px rgba(148,145,138,0.4)
-  -webkit-box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4)
-  -moz-box-shadow    : 2px 1px 4px 0px rgba(148,145,138,0.4)
 
 #filters ul li ul li
   display      : block
@@ -70,29 +72,27 @@
   height           : 20px
   margin-right     : 5px
   text-indent      : -9999px
-  border-radius         : 100px
-  -webkit-border-radius : 100px
-  -moz-border-radius    : 100px
+  border-radius    : 100px
 
-.org-travisci
-  background      : url('/images/dashboard/orgs-travisci.png') no-repeat
-  background-size : contain
+// .org-travisci
+//   background      : url('/images/dashboard/orgs-travisci.png') no-repeat
+//   background-size : contain
 
-.org-saltinejustine
-  background      : url('/images/dashboard/orgs-saltinejustine.png') no-repeat
-  background-size : contain
+// .org-saltinejustine
+//   background      : url('/images/dashboard/orgs-saltinejustine.png') no-repeat
+//   background-size : contain
 
-.org-openkarma
-  background      : url('/images/dashboard/orgs-openkarma.png') no-repeat
-  background-size : contain
+// .org-openkarma
+//   background      : url('/images/dashboard/orgs-openkarma.png') no-repeat
+//   background-size : contain
 
-.org-eurucamp
-  background      : url('/images/dashboard/orgs-eurucamp.png') no-repeat
-  background-size : contain
+// .org-eurucamp
+//   background      : url('/images/dashboard/orgs-eurucamp.png') no-repeat
+//   background-size : contain
 
 #filters ul li ul li:hover
   background : #5e869a
-  color      : #ffffff
+  color      : $white
 
 #filters ul li:hover ul
   display    : block
@@ -111,7 +111,7 @@
   z-index    : 1000
 
 #views ul li
-  background   : #fff
+  background   : $white
   position     : relative
   display      : inline-block
   padding      : 10px 0 10px 0
@@ -151,7 +151,7 @@
 
 #views ul li ul li:hover
   background : #5e869a
-  color      : #ffffff
+  color      : $white
 
 #views ul li:hover ul
   display    : block
@@ -204,15 +204,13 @@
   padding     : 30px 0 10px 0
 
 .tile
-  background    : #fff
+  background    : $white
   min-height    : 125px
   color         : #9d9fa1
   font-size     : 14px
   margin-bottom : 20px
   padding       : 0 10px 0 0
   border-radius         : 4px
-  -webkit-border-radius : 4px
-  -moz-border-radius    : 4px
 
   .duration
     background-image: url('/images/dashboard/time.svg')
@@ -225,8 +223,6 @@
     background-repeat: no-repeat
     background-position: 0 1px
 
-
-
   .finished
     background-image: url('/images/dashboard/cal.svg')
     background-size : 11px 11px
@@ -239,7 +235,7 @@
     margin-bottom: 0
 
 .build-bar
-  position        : absolute
+  position: absolute
   background:
     repeat: no-repeat
     position: 7px 10px
@@ -261,53 +257,43 @@
 .passed
   .build-bar
     background:
-      color: #3ba85d
+      color: $pass-color
       image: url('/images/dashboard/status-passed.svg')
-  
-
   .org,
   .repo a,
   .build-status a
-    color: #3ba85d
-
+    color: $pass-color
 
 .failed
   .build-bar
     background:
-      color: #d04729
+      color: $fail-color
       image: url('/images/dashboard/status-failed.svg')
-  
-
   .org,
   .repo a,
   .build-status a
-    color: #d04729
-
+    color: $fail-color
 
 .started
   .build-bar
     background:
-      color: #D2CA24
+      color: $start-bg-color
       image: url('/images/dashboard/status-pending.svg')
-  
-
   .org,
   .repo a,
   .build-status a
-    color: #848032
+    color: $start-color
 
 
 .errored
   .build-bar
     background:
-      color: #999999
+      color: $error-color
       image: url('/images/dashboard/status-errored.svg')
-  
-
   .org,
   .repo a,
   .build-status a
-    color: #999999
+    color: $error-color
 
 
 .tile .build-information
@@ -326,8 +312,6 @@
   line-height   : 20px
   text-overflow : ellipsis
 
-
-
 .tile .star-feature
   position        : absolute
   top             : 0
@@ -344,180 +328,19 @@
   margin-left     : 5px
   text-indent     : -9999px
 
-footer
-  padding          : 20px 0
-  background-color : #e0e0e0
-  min-height       : 334px
-  font-size        : 12px
-  line-height      : 22px
-  margin-top      : -334px /* sticky footer */
-
-.wrapper
-  padding-bottom: 334px
-  min-height: 100%
-  height: auto
-  background-color: #f4f3ea
-@media (min-width: 640px)
-  .wrapper
-    padding-bottom: 204px
-
-  footer
-    margin-top: -204px
-    min-height: 204px
-
-
-footer h3
-  font-size   : 15px
-  margin  : 0 0 10px 0
-  padding-top : 6px
-  font-weight : 400
-  color       : #8f9ba2
-  border-top  : solid 4px #ccd0d5
-
-footer .row p
-  display : inline-block
-  margin  : 0
-
-footer .row ul,
-footer .row li
-  display         : block
-  color           : #404650
-  line-height     : 22px
-  padding         : 0
-  margin-top      : 0
-  list-style-type : none
-
-footer a
-  text-decoration : none
-  display         : inline-block
-  color           : #404650
-
-footer a:hover,
-footer a:active
-  text-decoration : underline
-
-a 
-  text-decoration : none
-  display         : block
-  color           : #404650
-
-.status-circle
-  background   : #3ba85d
-  display      : inline-block
-  height       : 11px
-  width        : 11px
-  text-indent  : -9999px
-  margin-right : 5px
-  border-radius         : 100px
-  -webkit-border-radius : 100px
-  -moz-border-radius    : 100px
-  vertical-align: middle
 
 
 @media only screen and (min-width: 64.063em)
   #top img
     margin : -7px 0 0 10px
 
-
 @media only screen and (min-width: 640px)
   #top #status li
     display : inline-block
 
-
   #user p
     display : inline-block
 
-
   #search
     float : right
 
-
-
-
-#loader-container-large
-  margin-top: 2em
-  height     : 70px
-  text-align : center
-
-#loader-container-large .load-text
-  font-size   : 25px
-  line-height : 30px
-  font-weight : 300
-  margin-top  : 20px
-  font-weight: 400
-
-.loader-large
-  width    : 60px
-  height   : 60px
-  position : relative
-  margin   : 0 auto
-
-#loader-container-medium
-  height     : 40px
-  margin-top : 15px
-  text-align : center
-
-#loader-container-medium .load-text
-  vertical-align : 10px
-  display        : inline-block
-
-.loader-medium
-  width        : 30px
-  height       : 30px
-  position     : relative
-  display      : inline-block
-  margin       : 0 auto
-  margin-right : 10px
-
-#loader-container-small
-  height     : 20px
-  margin-top : 22px
-  text-align : center
-
-#loader-container-small .load-text
-  vertical-align : 3px
-  display        : inline-block
-
-.loader-small
-  width        : 15px
-  height       : 15px
-  position     : relative
-  display      : inline-block
-  margin       : 0 auto
-  margin-right : 5px
-
-.load-circle1, .load-circle2
-  width         : 100%
-  height        : 100%
-  border-radius : 50%
-  opacity       : 0.7
-  position      : absolute
-  top           : 0
-  left          : 0
-  -webkit-animation : bounce 1.5s infinite ease-in-out
-  animation         : bounce 1.5s infinite ease-in-out
-
-.load-circle1
-  background-color : #347389
-
-.load-circle2
-  background-color : #bdc5c5
-  -webkit-animation-delay : -0.5s
-  animation-delay         : -0.5s
-
-@-webkit-keyframes bounce
-  0%, 100%
-    -webkit-transform : scale(0.0)
-
-  60%
-    -webkit-transform : scale(1.0)
-
-
-@keyframes bounce
-  0%, 100%
-    transform         : scale(0.0)
-    -webkit-transform : scale(0.0)
-  60%
-    transform: scale(1.0)
-    -webkit-transform : scale(1.0)
-
diff --git a/assets/styles/app/layouts/footer.sass b/assets/styles/app/layouts/footer.sass
new file mode 100644
index 00000000..bc30331d
--- /dev/null
+++ b/assets/styles/app/layouts/footer.sass
@@ -0,0 +1,72 @@
+/*
+ * Footer on the dashboard
+ */
+
+footer
+  padding          : 20px 0
+  background-color : $footer-bg-color
+  min-height       : 334px
+  font-size        : 12px
+  line-height      : 22px
+  margin-top      : -334px /* sticky footer */
+
+.wrapper
+  padding-bottom: 334px
+  min-height: 100%
+  height: auto
+  background-color: $wrapper-bg-color
+@media (min-width: 640px)
+  .wrapper
+    padding-bottom: 204px
+
+  footer
+    margin-top: -204px
+    min-height: 204px
+
+
+footer h3
+  font-size   : 15px
+  margin  : 0 0 10px 0
+  padding-top : 6px
+  font-weight : 400
+  color       : $footer-h3-color
+  border-top  : solid 4px $footer-h3-corder-color
+
+footer .row p
+  display : inline-block
+  margin  : 0
+
+footer .row ul,
+footer .row li
+  display         : block
+  color           : $footer-color
+  line-height     : 22px
+  padding         : 0
+  margin-top      : 0
+  list-style-type : none
+
+footer a
+  text-decoration : none
+  display         : inline-block
+  color           : $footer-color
+
+footer a:hover,
+footer a:active
+  text-decoration : underline
+
+a 
+  text-decoration : none
+  display         : block
+  color           : $footer-color
+
+.status-circle
+  background   : $pass-color
+  display      : inline-block
+  height       : 11px
+  width        : 11px
+  text-indent  : -9999px
+  margin-right : 5px
+  border-radius         : 100px
+  -webkit-border-radius : 100px
+  -moz-border-radius    : 100px
+  vertical-align: middle
diff --git a/assets/styles/app/main/tools.sass b/assets/styles/app/main/tools.sass
index 3593b272..5e3dbc7d 100644
--- a/assets/styles/app/main/tools.sass
+++ b/assets/styles/app/main/tools.sass
@@ -11,7 +11,7 @@
   & > a.menu-popup-button
     display: inline-block
     text-align: left
-    margin-top: -31px
+    margin-top: -32px
     color: #fff
     font-size: 13px
     padding: 3px 24px 0 25px
@@ -33,13 +33,14 @@
     display: none
     position: absolute
     right: 0
-    top: -3px
+    top: -4px
     width: 140px
     background-color: #a6adad
     @include border-bottom-radius(4px)
     a
       display: block
-      color: #ffffff
+      color: $white
+      font-size: $font-size-small
       padding: 5px 25px 5px 25px
       &:hover:not(.disabled)
         background-color: #909393
diff --git a/assets/styles/app/right.sass b/assets/styles/app/right.sass
index b7f96f8d..7c0b1642 100644
--- a/assets/styles/app/right.sass
+++ b/assets/styles/app/right.sass
@@ -2,11 +2,11 @@
 
 #profile
   #right
-    min-width: 180px
-    max-width: 180px
+    //min-width: 180px
+    //max-width: 180px
     padding: 13px 20px 80px 20px
     background-color: #E9E9E7
-    float: right
+    //float: right
     border-left: 1px solid $color-border-normal
 
     h4
diff --git a/assets/styles/app/tabs.sass b/assets/styles/app/tabs.sass
index e0124b57..e96e71bf 100644
--- a/assets/styles/app/tabs.sass
+++ b/assets/styles/app/tabs.sass
@@ -17,9 +17,8 @@
     height: 29px
     li
       display: inline-block
-
-    &:hover
-      background-color: $color-bg-tab-hover
+      &:hover
+        background-color: $color-bg-tab-hover
 
   .active
     background-color: $color-bg-tab-active
diff --git a/assets/styles/app/top.sass b/assets/styles/app/top.sass
index a8f263ef..55566ab4 100644
--- a/assets/styles/app/top.sass
+++ b/assets/styles/app/top.sass
@@ -101,6 +101,11 @@
   .menu.community
     min-width: 120px
 
+  .user
+    text-align: right
+    a
+      padding-right: 0
+
   .menu.profile
     .signing-in
       background: inline-image('ui/spinner.svg') no-repeat 110px 22px
@@ -132,9 +137,9 @@
       &.signed-in .signed-in
         display: block
 
-      img
-        float: right
-        margin: 13px 0 0 10px
+      // img
+      //   float: right
+      //   margin: 13px 0 0 10px
 
     &:not(.signed-in):hover ul
       display: none
@@ -158,61 +163,63 @@
 //   width       : 78px
 //   text-indent : -9999px
 
-#user
-  text-align : right
-  cursor     : pointer
+// #user
+//   text-align : right
+//   cursor     : pointer
 
-#user p
-  display : none
+// #user p
+//   display : none
 
-// #top img
-//   float  : right
-//   margin : -7px 10px 0 10px
-//   width  : 30px
-//   height : 30px
-//   border-radius: 100px
-
-#user ul
-  text-align : left
-  display    : inline
-  margin     : 0
-  padding    : 15px 0 17px 0
-  list-style : none
-  z-index    : 1000
-
-#user ul li ul
-  padding    : 0
-  position   : absolute
-  top        : 55px
-  right      : 0
-  width      : 150px
-  display    : none
-  opacity    : 0
-  visibility : hidden
-
-#user ul li ul li
-  background  : $topbar-bg
-  color       : $white
-  display     : block
-  line-height : 18px
-  padding     : 8px 18px
-  margin      : 0
-
-#user ul li ul li:last-child
-  border-bottom-left-radius  : 4px
-  border-bottom-right-radius : 4px
-
-#user ul li ul li:hover
-  background : #5e869a
-  color      : $white
-  a
-    color: $white
+#top img
+  float  : right
+  margin : 14px 0 0 10px
+  width  : 30px
+  height : 30px
+  border-radius: 100px
 
 
-#user ul li:hover ul
-  display    : block
-  opacity    : 1
-  visibility : visible
-#user .handle a
-  display: inline
+
+// #user ul
+//   text-align : left
+//   display    : inline
+//   margin     : 0
+//   padding    : 15px 0 17px 0
+//   list-style : none
+//   z-index    : 1000
+
+// #user ul li ul
+//   padding    : 0
+//   position   : absolute
+//   top        : 55px
+//   right      : 0
+//   width      : 150px
+//   display    : none
+//   opacity    : 0
+//   visibility : hidden
+
+// #user ul li ul li
+//   background  : $topbar-bg
+//   color       : $white
+//   display     : block
+//   line-height : 18px
+//   padding     : 8px 18px
+//   margin      : 0
+
+// #user ul li ul li:last-child
+//   border-bottom-left-radius  : 4px
+//   border-bottom-right-radius : 4px
+
+// #user ul li ul li:hover
+//   background : #5e869a
+//   color      : $white
+//   a
+//     color: $white
+
+
+// #user ul li:hover ul
+//   display    : block
+//   opacity    : 1
+//   visibility : visible
+// #user .handle a
+//   display: inline