Reorganized player buttons

app/assets/stylesheets/player.scss

@@ -1,19 +1,6 @@
+@import "opacity";
+
 .player {
-  .buttons {
-    text-align: center;
-    height: 36px;
-  }
-  .play {
-    border-radius: 21px !important;
-    padding: 11px 11px 11px 15px !important;
-    margin-top: -10px !important;
-  }
-  .pause {
-    font-weight: bold;
-    border-radius: 21px !important;
-    padding: 11px 16px 11px 16px !important;
-    display: none;
-  }
   .now-playing {
     text-align: center;
   }
@@ -34,21 +21,58 @@
       }
     }
   }
-  .secondary-buttons {
-    margin: 10px 0;
-    text-align: center;
-    a {
-      font-size: 11px;
-      color: #cacaca;
-      font-weight: bold;
-      text-decoration: none;
-      cursor: pointer;
-      
-      &:hover {
-        color: #b0b0b0;
+  .buttons {
+    clear: both;
+    height: 50px;
+    .secondary-buttons {
+      float: left;
+      width: 20px;
+      margin: -10px 0 0 20px;
+      text-align: center;
+      a {
+        display: block;
+        margin: -5px 0 0 0;
+        @include opacity(0.3);
+        cursor: pointer;
+        &.do_empty {
+          margin-top: -2px;
+        }
+        &:hover {
+          @include opacity(0.6);
+        }
+        &.on {
+          @include opacity(0.9);
+        }
       }
-      &.on {
-        color: #606060;
+    }
+    .primary-buttons {
+      float: left;
+      width: 200px;
+      margin: 10px 0 0 0;
+      text-align: center;
+      height: 36px;
+      .play {
+        border-radius: 21px !important;
+        padding: 11px 11px 11px 15px !important;
+        margin-top: -10px !important;
+      }
+      .pause {
+        font-weight: bold;
+        border-radius: 21px !important;
+        padding: 11px 16px 11px 16px !important;
+        display: none;
+      }
+    }
+    .quality-buttons {
+      float: left;
+      width: 20px;
+      a {
+        display: block;
+        @include opacity(0.4);
+        cursor: pointer;
+        &:hover {
+          @include opacity(0.8);
+        }
       }
     }
   }

app/views/layouts/application.html.haml

@@ -57,14 +57,20 @@
               .loaded
                 .played
             .buttons
-              %a.btn.small-round.prev «
-              %a.btn.large.play ►
-              %a.btn.large.pause II
-              %a.btn.small-round.next »
-            .secondary-buttons
-              %a.shuffle= (I18n.t 'player.shuffle').upcase
-              %a.repeat= (I18n.t 'player.repeat').upcase
-              %a.do_empty= (I18n.t 'player.do_empty').upcase
+              .secondary-buttons
+                %a.shuffle{ :title => I18n.t('player.shuffle') }= image_tag "icns/shuffle.png"
+                %a.repeat{ :title => I18n.t('player.repeat') }= image_tag "icns/repeat.png"
+                %a.do_empty{ :title => I18n.t('player.do_empty') }= image_tag "icns/empty.png"
+              .primary-buttons
+                %a.btn.small-round.prev «
+                %a.btn.large.play ►
+                %a.btn.large.pause II
+                %a.btn.small-round.next »
+              .quality-buttons
+                %a.q-good{ :title => I18n.t('player.thumbs_up') }= image_tag "icns/thumbs-up.png"
+                %a.q-bad{ :title => I18n.t('player.thumbs_down') }= image_tag "icns/thumbs-down.png"
+              
+              
 
           %ul.playlist