style(player): clean up

brianedsauer · Sep 3, 2016 · 4310136 · 4310136
1 parent edf9d48
commit 4310136
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/components/Player/index.js b/src/components/Player/index.js
@@ -47,6 +47,16 @@ class Player extends React.Component {
     const { user, title, stream_url } = track;
     const { username } = entities.users[user];
 
+    const isMuted = !volume;
+
+    const muteClass = classNames(
+      'fa',
+      {
+        'fa-volume-up': !isMuted,
+        'fa-volume-off': isMuted,
+      }
+    );
+
     const playClass = classNames(
       'fa',
       {
@@ -101,7 +111,7 @@ class Player extends React.Component {
         </div>
         <div className="player-content-action">
           <ButtonInline onClick={() => onSetToggle(toggleTypes.VOLUME)}>
-            <i className="fa fa-volume-up" /> {volume}
+            <i className={muteClass} />
           </ButtonInline>
         </div>
         <div className="player-content-action">

diff --git a/styles/components/player.scss b/styles/components/player.scss
@@ -32,7 +32,6 @@
     &-action {
       font-size: $bigIcon;
       cursor: pointer;
-      text-align: center;
 
       &:hover {
         color: $mainColor;
@@ -48,7 +47,7 @@
     }
 
     div {
-      margin: auto $paddingVW;
+      margin: auto $padding;
     }
 
   }

diff --git a/styles/custom/variable.scss b/styles/custom/variable.scss
@@ -1,5 +1,4 @@
 $padding: 20px;
-$paddingVW: 2vw;
 
 $fontColor: #A0A0A0;