ovidiuch · ovidiuch · Jul 5, 2015 · Jul 5, 2015 · Jul 5, 2015 · Jul 5, 2015
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-component-playground",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Isolated loader for React components",
   "main": "build/bundle.js",
   "repository": {

diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
@@ -207,20 +207,17 @@ module.exports = React.createClass({
   },
 
   _renderHomeButton: function() {
-    return <a ref="homeLink"
-                className="atom"
-                href={stringifyParams({})}
-                onClick={this.props.router.routeLink}>
-      <span className="electron">
-        <span className="ring"></span>
-      </span>
-      <span className="electron">
-        <span className="ring"></span>
-      </span>
-      <span className="electron">
-        <span className="ring"></span>
-      </span>
-      <span className="nucleus"></span>
+    var classes = classNames({
+      'button': true,
+      'play-button': true,
+      'selected-button': !this.constructor.isFixtureSelected(this.props)
+    });
+
+    return <a ref="homeButton"
+              className={classes}
+              href={stringifyParams({})}
+              onClick={this.props.router.routeLink}>
+      <span className="electron"></span>
     </a>;
   },
 

diff --git a/src/components/component-playground.less b/src/components/component-playground.less
@@ -9,19 +9,24 @@
 @left-nav-color: #adaaa4;
 @left-nav-color-selected: #dddcda;
 
-@header-height: 140px;
-
-@atom-size: 200px;
-@atom-nucleus-size: 30px;
-@atom-ring-width: 8px;
-@atom-ring-rotation: 70deg;
-@atom-rotation-duration: 20s;
-@atom-color: #61dafb;
-
-@header-menu-button-size: 50px;
-@header-menu-editor-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAB/ElEQVR4nL3WX4iMURjH8c/MjkJWhORPKEXKlUIkyeZPmyillb1y5dKFElfbXohLF3LhbmtLDUOaTYOolba4FCWSP+GGWGZtyp9xcc40b+Odmnm1+9Tbe3rOeZ7vec57nt9MrlQcNtWWn3ICCvE9ByewF/OQazP+D97hDEajbxNOYQg36pD5uI/1GTe6Cj/jeAPuYC72ow+lPM5GwEgMyHXw5LEYY+iKlf2OwC5cRm8eB/EDR/CmwypqqGIjnsY8u/E1zs/AxTwW4W1cnMU2C0e0BvfwTfi29XyP67erlhGwBbdxDZewJII+oTeO+//nCm/FLZTwGseif1lM/h49qGaFbIuAqxEw2DT/UeO7ZGrG7ajgSgvAI6GCz1khO3ATxRaAMezCeNJZ0L7tRBmzsQBHm+ZHsQ8TzYHtQnoioIzlQjcn7W70TaYFt3NcM2PyEaFh9+BBYr4iVDCJhVkhBczCK6GzJ3Bc6K0yDgidPqAhkv8kaNdOCj3wRajqOg5riOMAnqcFdnq7+vFM2HFfAkAQzFTlKAhaszSOf6Ws+Y51Tb4XGmoLK+N7PA2SF7SnG+elH18t7j75JAHduBDHlTRIrlQcXo2Hwt2v4kPawhaWwwrhBj4RBDO1T14Kcn1O+C1Y2wGEoFNDOJ0GqENE0KEOk7dt0/JvZVogfwHdM3Runhr5dwAAAABJRU5ErkJggg==);
-@header-menu-editor-icon-selected: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAB+UlEQVR4nL3WT4iNURjH8c995ypkREj+hFKkrBQiSSZ/mkTZjMzKytJCidVkMbG0kIXdrBSGdCddRI00xVKUxtz8CRtiuGNS/lyLc2737Xqn7n0189Tbe3rOOc/3POc9z++8hcrYqOm2ZNoJKMb3PJzEfixAocX5f/AO/RiOvi04jQHcqkMW4iE25lzoGvyM7U24h/k4iB4MJjgXAUNxQqGNJ8FSjKAjZvY7AjtwBd0JDuMHjuJNm1nUUMVmPI9x9uJr7J+FSwmW4G0cnMe2Clu0Dg/wTfi29XhP66erlhOwDXdxA5exLII+oTu2e//nCG/HHQziNY5H/4oY/D26UM0L2REB1yPgbFP/R43vkqsYd6KMa1MAnggZfM4L2YXbuDoFYAR7MJ52FrVuu1HCXCzCsab+YRzARPPEViFdEVDCSqGa03Y/+iazJreyXbNj8CGhYPfhUaq/LGQwicV5IUXMwSuhsidwQqitEg4Jld6nIZL/BGjVTgk18EXI6iaOaIhjHzIvp3ZPVy9eCCvuSQEIgpmpHEVBa5bH9q+MMd+xocn3UkNtYXV8j2dBEkF7OnFB9vbV4urTTxrQiYuxXc6CFCpjo2vxWDj7VXzIGjiFFbBKOIHPBMHMrJOKINfnhbtgfRsQgk4N4EwWgJBJmzHbtxn5W5kRyF+GYXb8gC07QAAAAABJRU5ErkJggg==);
-@header-menu-full-screen-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABxUlEQVR4nL3Wv2sUQRTA8c+eGsHCxipa2QSxUgRLC0WDGITkUgv+ABsRCxv/CEmpiCiIogZSBLUQCwUrY2GjoGArdmJCEHPgj2J3cG5uZ1Yi8cFxu+/te9+d92Nmq4X5uzZaes3/G/zK/N5mfC/gR8ZnDYdTyL7Ci3zK6D+jytjGsDeF5OQ5pjO2BZxTv3lRSpAVzOJb4ZlbuPEvkO24g62FZ/o4ux7ISnR9Qp2WNlAfD7C5uV+VSV0KeYHdeNIBmkkAyziiXtXPHOQdnjUBvzRBcqAZPEwAx7CE2ziN7/gQnKtmGKuWpY41gaci3RL2Y0sEOIrXie9QvLCStlwO1Hl/HOkORoCvGcBIvK45CaBXLbapDGBEuiBwEgda9FeU2/uvIbO470+RYym1dyvkYhOwBFjGITzqAI1jDrtSyBzmcaYAmMTLxhY3QwzaqZ61S+o0D0F66ra7iesZQCh+aIZ0jhbVG+pEo9uUQoJUOF8ABBkYHdjJCDAkpcKvZgAxqI+nhRidkG3Y0+G/Q73XrRvSU58XpzL2ccM16IQMCvZr2o/Zyx2AtXARCnxcdCYn8l773nYVH0VdlADuhZvqf34Sbaj8Bk6ycMLiKlQaAAAAAElFTkSuQmCC);
+@header-height: 70px; // 50 + 2 * 10 margins
+@header-button-size: @header-height - 2 * @default-spacing;
+
+@play-button-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABCklEQVR4nLXULUsFQRSH8d+VWwxWg2AUtImYbBaD6Ecwix/AojaxCFaboGISLAoaBKvF4lsQzOIHkNu8GNaB5fqys7szTxqYmfMM5/yZztnpidwMldbHmM8tWcENLjCVSxJYwgP2MZpLAl2s4RUbGM4hCYxgBy+KdnZySALjimDcaRCOWElgRhGOc0zmkgSW8SgyHE0l1AhHG0mgMhwpJIFyOGZzSQJjBuaUUtLDNiZwWd7oJijexxG28PbbgbaSa6zj/r9DTdv1hEUsVAmaSN6ximlcxV6KbVcPe9jFR82HVUr6iuxv+mOobSVRQ20qef4uHt3zOpJbHOIAn6kEg5K5lIXL5Pi7fvAF1F8uXM5LDawAAAAASUVORK5CYII=);
+@play-button-icon-selected: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABCUlEQVR4nLXUrUpEQRiH8d/KFoPVIBgFbSImm8Ugeglm8QIsahOLYLUJ6iUoaBCsFotfQVmreAGyzcVwHDisH2fOnDNPGpiZ9xne9890XnsvcjNSWp9iMbdkDdc4x0wuSWAF9zjEeC4JdLGBHrYwmkMSGMMenhXt7OSQBCYVwbiVEI5YSWBOEY4zTOeSBFbxIDIcqRJqhKOJJFAZjjYkgXI45nNJAhOG5tSmpI9dTOGivNFtofgAJ9jB228HmkqusIm7/w6ltusRy1iqEqRI3rGOWVzGXoptVx8H2MdHzYdVSgaK7G/7Y6hNJVFDTZU8fReP7nkdyQ2OcYTPtgTDkoU2C5fJ8Xf94Auuuy70BQy3gwAAAABJRU5ErkJggg==);
+@editor-button-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAB/ElEQVR4nL3WX4iMURjH8c/MjkJWhORPKEXKlUIkyeZPmyillb1y5dKFElfbXohLF3LhbmtLDUOaTYOolba4FCWSP+GGWGZtyp9xcc40b+Odmnm1+9Tbe3rOeZ7vec57nt9MrlQcNtWWn3ICCvE9ByewF/OQazP+D97hDEajbxNOYQg36pD5uI/1GTe6Cj/jeAPuYC72ow+lPM5GwEgMyHXw5LEYY+iKlf2OwC5cRm8eB/EDR/CmwypqqGIjnsY8u/E1zs/AxTwW4W1cnMU2C0e0BvfwTfi29XyP67erlhGwBbdxDZewJII+oTeO+//nCm/FLZTwGseif1lM/h49qGaFbIuAqxEw2DT/UeO7ZGrG7ajgSgvAI6GCz1khO3ATxRaAMezCeNJZ0L7tRBmzsQBHm+ZHsQ8TzYHtQnoioIzlQjcn7W70TaYFt3NcM2PyEaFh9+BBYr4iVDCJhVkhBczCK6GzJ3Bc6K0yDgidPqAhkv8kaNdOCj3wRajqOg5riOMAnqcFdnq7+vFM2HFfAkAQzFTlKAhaszSOf6Ws+Y51Tb4XGmoLK+N7PA2SF7SnG+elH18t7j75JAHduBDHlTRIrlQcXo2Hwt2v4kPawhaWwwrhBj4RBDO1T14Kcn1O+C1Y2wGEoFNDOJ0GqENE0KEOk7dt0/JvZVogfwHdM3Runhr5dwAAAABJRU5ErkJggg==);
+@editor-button-icon-selected: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAB+UlEQVR4nL3WT4iNURjH8c995ypkREj+hFKkrBQiSSZ/mkTZjMzKytJCidVkMbG0kIXdrBSGdCddRI00xVKUxtz8CRtiuGNS/lyLc2737Xqn7n0189Tbe3rOOc/3POc9z++8hcrYqOm2ZNoJKMb3PJzEfixAocX5f/AO/RiOvi04jQHcqkMW4iE25lzoGvyM7U24h/k4iB4MJjgXAUNxQqGNJ8FSjKAjZvY7AjtwBd0JDuMHjuJNm1nUUMVmPI9x9uJr7J+FSwmW4G0cnMe2Clu0Dg/wTfi29XhP66erlhOwDXdxA5exLII+oTu2e//nCG/HHQziNY5H/4oY/D26UM0L2REB1yPgbFP/R43vkqsYd6KMa1MAnggZfM4L2YXbuDoFYAR7MJ52FrVuu1HCXCzCsab+YRzARPPEViFdEVDCSqGa03Y/+iazJreyXbNj8CGhYPfhUaq/LGQwicV5IUXMwSuhsidwQqitEg4Jld6nIZL/BGjVTgk18EXI6iaOaIhjHzIvp3ZPVy9eCCvuSQEIgpmpHEVBa5bH9q+MMd+xocn3UkNtYXV8j2dBEkF7OnFB9vbV4urTTxrQiYuxXc6CFCpjo2vxWDj7VXzIGjiFFbBKOIHPBMHMrJOKINfnhbtgfRsQgk4N4EwWgJBJmzHbtxn5W5kRyF+GYXb8gC07QAAAAABJRU5ErkJggg==);
+@full-screen-button-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABxUlEQVR4nL3Wv2sUQRTA8c+eGsHCxipa2QSxUgRLC0WDGITkUgv+ABsRCxv/CEmpiCiIogZSBLUQCwUrY2GjoGArdmJCEHPgj2J3cG5uZ1Yi8cFxu+/te9+d92Nmq4X5uzZaes3/G/zK/N5mfC/gR8ZnDYdTyL7Ci3zK6D+jytjGsDeF5OQ5pjO2BZxTv3lRSpAVzOJb4ZlbuPEvkO24g62FZ/o4ux7ISnR9Qp2WNlAfD7C5uV+VSV0KeYHdeNIBmkkAyziiXtXPHOQdnjUBvzRBcqAZPEwAx7CE2ziN7/gQnKtmGKuWpY41gaci3RL2Y0sEOIrXie9QvLCStlwO1Hl/HOkORoCvGcBIvK45CaBXLbapDGBEuiBwEgda9FeU2/uvIbO470+RYym1dyvkYhOwBFjGITzqAI1jDrtSyBzmcaYAmMTLxhY3QwzaqZ61S+o0D0F66ra7iesZQCh+aIZ0jhbVG+pEo9uUQoJUOF8ABBkYHdjJCDAkpcKvZgAxqI+nhRidkG3Y0+G/Q73XrRvSU58XpzL2ccM16IQMCvZr2o/Zyx2AtXARCnxcdCYn8l773nYVH0VdlADuhZvqf34Sbaj8Bk6ycMLiKlQaAAAAAElFTkSuQmCC);
+
+@play-button-electron-size: 5px;
+@play-button-electron-color: #61dafb;
+@play-button-electron-duration: 5s;
+
+@keyframes roundandround {
+  to {
+    transform: rotate(360deg);
+  }
+}
 
 @fixture-line-height: 30px;
 @fixture-component-font-size: 16px;
@@ -52,85 +57,76 @@
     .header {
       position: relative;
       height: @header-height;
-      background: @default-darken-color;
       overflow: hidden;
 
-      .atom {
+      .button {
+        display: inline-block;
+        width: @header-button-size;
+        height: @header-button-size;
+        border-radius: 100%;
+        background-position: center center;
+        background-repeat: no-repeat;
+        color: @left-nav-color;
+
+        &:hover,
+        &.selected-button {
+          background-color: @left-nav-bgcolor-selected;
+        }
+      }
+
+      .play-button {
         position: absolute;
         top: @default-spacing;
-        left: (@left-nav-width - @atom-size) / 2;
-        width: @atom-size;
-        height: @atom-size;
-
-        .electron {
-          position: absolute;
-          width: 100%;
-          height: 100%;
+        left: @default-spacing;
+        background-image: @play-button-icon;
+        background-position: 15px center; // fine tune arrow position
 
-          &:nth-child(2) {
-            transform: rotateZ(60deg);
-          }
-
-          &:nth-child(3) {
-            transform: rotateZ(120deg);
-          }
-
-          .ring {
-            display: block;
-            width: 100%;
-            height: 100%;
-            border: @atom-ring-width solid @atom-color;
-            box-sizing: border-box;
-            border-radius: 50%;
-            transform: rotateX(@atom-ring-rotation);
-          }
+        &.selected-button {
+          background-image: @play-button-icon-selected;
         }
 
-        .nucleus {
+        .electron {
           position: absolute;
           top: 50%;
           left: 50%;
-          width: @atom-nucleus-size;
-          height: @atom-nucleus-size;
-          margin: 0.5 * -@atom-nucleus-size 0 0 0.5 * -@atom-nucleus-size;
-          background: @atom-color;
-          border-radius: 100%;
+          width: 0;
+          height: 0;
+          animation: roundandround @play-button-electron-duration infinite linear;
+
+          &:after {
+            content: '';
+            position: absolute;
+            top: -@header-button-size / 2;
+            margin: -@play-button-electron-size / 2  0 0
+                    -@play-button-electron-size / 2;
+            width: @play-button-electron-size;
+            height: @play-button-electron-size;
+            border-radius: 100%;
+            background: @play-button-electron-color;
+          }
         }
       }
 
       .menu {
         position: absolute;
         bottom: @default-spacing;
-        right: @default-spacing;
+        right: 0;
         margin: 0;
 
         .button {
-          display: inline-block;
-          width: @header-menu-button-size;
-          height: @header-menu-button-size;
-          border-radius: 3px;
-          background-color: fadeout(@left-nav-bgcolor, 10%);
-          background-position: center center;
-          background-repeat: no-repeat;
-          color: @left-nav-color;
-
-          &:hover,
-          &.selected-button {
-            background-color: fadeout(@left-nav-bgcolor-selected, 10%);
-          }
+          margin-right: @default-spacing;
+        }
 
-          &.fixture-editor-button {
-            margin-right: @default-spacing;
-            background-image: @header-menu-editor-icon;
+        .fixture-editor-button {
+          background-image: @editor-button-icon;
 
-            &.selected-button {
-              background-image: @header-menu-editor-icon-selected;
-            }
+          &.selected-button {
+            background-image: @editor-button-icon-selected;
           }
+        }
 
-          &.full-screen-button {
-            background-image: @header-menu-full-screen-icon;
-          }
+        .full-screen-button {
+          background-image: @full-screen-button-icon;
         }
       }
     }
@@ -141,6 +137,7 @@
       bottom: 0;
       left: 0;
       right: 0;
+      background: @default-darken-color;
       overflow-x: hidden;
       overflow-y: auto;
 
@@ -151,7 +148,6 @@
 
         .component {
           padding: 0.5 * @default-spacing 0;
-          border-top: 1px solid @default-darken-color;
 
           .component-name {
             display: block;

diff --git a/tests/components/component-playground/default/render/dom.js b/tests/components/component-playground/default/render/dom.js
@@ -61,4 +61,9 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
   it('should not render fixture editor', function() {
     expect(component.refs.editor).to.not.exist;
   });
+
+  it('should add selected class on home button', function() {
+    expect($(component.refs.homeButton.getDOMNode())
+           .hasClass('selected-button')).to.be.true;
+  });
 });
diff --git a/tests/components/component-playground/selected-fixture-and-editor/render/dom.js b/tests/components/component-playground/selected-fixture-and-editor/render/dom.js
@@ -24,9 +24,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
   });
 
   it('should add selected class on editor button', function() {
-    // XXX: Class is set on button parent
-    expect($(component.getDOMNode())
-           .find('.fixture-editor-button')
+    expect($(component.refs.editorButton.getDOMNode())
            .hasClass('selected-button')).to.be.true;
   });
 

diff --git a/tests/components/component-playground/selected-fixture/events/dom.js b/tests/components/component-playground/selected-fixture/events/dom.js
@@ -29,7 +29,7 @@ describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
   });
 
   it('should route link on home button', function() {
-    utils.Simulate.click(component.refs.homeLink.getDOMNode());
+    utils.Simulate.click(component.refs.homeButton.getDOMNode());
 
     expect(component.props.router.routeLink).to.have.been.called;
   });

diff --git a/tests/components/component-playground/selected-fixture/render/dom.js b/tests/components/component-playground/selected-fixture/render/dom.js
@@ -27,6 +27,11 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
     expect($previewContainer.hasClass(fixture.containerClassName)).to.be.true;
   });
 
+  it('should remove selected class on home button', function() {
+    expect($(component.refs.homeButton.getDOMNode())
+           .hasClass('selected-button')).to.be.false;
+  });
+
   it('should add extra class to selected fixture', function() {
     var $fixture = $component.find('.component-fixture.selected');