Restyle control buttons

src/components/app/controls/control-button/control-button.scss

@@ -1,5 +1,6 @@
 @import '_colors.scss';
 @import '_variables.scss';
+@import '_mixins.scss';
 
 .control-button {
   width: $buttonWidth;
@@ -9,24 +10,23 @@
   position: relative;
   cursor: pointer;
   margin: 0.25rem;
+  color: $primaryColor;
 
-  &:hover {
-    & > .svg-inline--fa {
-      color: $interactColor;
+  @include hoverStyle(#{&}) {
+    &:hover {
+      color: $primaryHoverColor;
+
+      &::after {
+        background: $primaryHoverColor;
+      }
     }
 
-    &::after {
-      background: $interactColor;
-    }
-  }
+    &:active {
+      color: $primaryActiveColor;
 
-  &:active {
-    & > .svg-inline--fa {
-      color: $activeInteractColor;
-    }
-
-    &::after {
-      background: $activeInteractColor;
+      &::after {
+        background: $primaryActiveColor;
+      }
     }
   }
 
@@ -35,23 +35,16 @@
   }
 
   &--is-primary {
-    background-color: $primaryColor;
-    color: white;
+    border: 1px solid $primaryColor;
     border-radius: 50%;
 
-    &:hover {
-      background-color: $interactColor;
-
-      & > .svg-inline--fa {
-        color: white;
+    @include hoverStyle(#{&}) {
+      &:hover {
+        border-color: $primaryHoverColor;
       }
-    }
 
-    &:active {
-      background-color: $activeInteractColor;
-
-      & > .svg-inline--fa {
-        color: white;
+      &:active {
+        border-color: $primaryActiveColor;
       }
     }
   }
@@ -59,13 +52,21 @@
   &--is-active {
     color: $highlightColor;
 
-    &:hover {
-      & > .svg-inline--fa {
-        color: $highlightInteractColor;
+    @include hoverStyle(#{&}) {
+      &:hover {
+        color: $highlightHoverColor;
+
+        &::after {
+          background: $highlightHoverColor;
+        }
       }
 
-      &::after {
-        background: $highlightInteractColor;
+      &:active {
+        color: $highlightActiveColor;
+
+        &::after {
+          background: $highlightActiveColor;
+        }
       }
     }
   }
@@ -93,6 +94,6 @@
 
   // Optically center the "play" icon
   & > .fa-play {
-    transform: translate(-36%, -50%);
+    transform: translate(-37%, -50%);
   }
 }

src/components/app/controls/control-button/index.jsx

@@ -4,9 +4,16 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';
 import './control-button.scss';
 
-const ControlButtonComponent = ({ onClick, faIcon, isPrimary, isActive }) => (
+const ControlButtonComponent = ({
+  onClick,
+  faIcon,
+  isPrimary,
+  isActive,
+  title,
+}) => (
   <button
     type="button"
+    title={title}
     className={classnames('control-button', {
       'control-button--is-primary': isPrimary,
       'control-button--is-active': isActive,
@@ -22,6 +29,7 @@ ControlButtonComponent.propTypes = {
   faIcon: propTypes.object.isRequired,
   isPrimary: propTypes.bool,
   isActive: propTypes.bool,
+  title: propTypes.string,
 };
 
 ControlButtonComponent.defaultProps = {