noisey buttons

client/assets/styles/colours.less

@@ -5,7 +5,7 @@
 @white: #f5f5f5; // whitesmoke
 @purple: #9355b5; // 6lack - that far cover
 @yellow: #ffa100;
-@silver: #c0c0c0;
+@silver: #2c2c2c;
 
 @black: black;
 @gray: #222;

client/assets/styles/instance.less

@@ -54,11 +54,7 @@
 
     button {
         &.highlight {
-            color: black;
             background: @silver;
-            // border: 1px solid @white; (this bangs around the vbox)
-
-            // overwrite the classes on white svg elements
             svg {
                 stroke-width: 0.75em;
             }

client/assets/styles/styles.less

@@ -151,14 +151,16 @@ button, input {
     &:hover {
         color: whitesmoke;
         border-color: @gray-hover;
-        // filter: url("#noiseFilter");
     }
 
     &:focus {
         /*colour necesary to bash skellington*/
-
         outline: 0;
     }
+
+    &:active {
+        filter: url("#noiseFilter");
+    }
 }
 
 a {
@@ -291,6 +293,7 @@ li {
 
 .logo {
     height: 4em;
+    filter: url("#noiseFilter");
     background-image: url("../../assets/mnml.logo.text.svg");
     background-size: contain;
     background-repeat: no-repeat;
@@ -361,4 +364,12 @@ header {
     }
 }
 
+#noise {
+    height: 0;
+}
+
 @import 'styles.mobile.less';
+
+.highlight {
+    filter: url("#noiseFilter");
+}

client/assets/styles/vbox.less

@@ -147,16 +147,11 @@
         }
 
         &.highlight {
-            color: black;
             background: @silver;
             // overwrite the classes on white svg elements
             svg {
                 stroke-width: 0.75em;
             }
-
-            .white {
-                stroke: black;
-            }
         }
     }
 

client/src/components/front.page.jsx

@@ -8,7 +8,6 @@ const actions = require('./../actions');
 const VERSION = process.env.npm_package_version;
 
 const Welcome = require('./welcome');
-const NoiseLogo = require('./noise.logo');
 
 const addState = connect(
     function receiveState(state) {
@@ -72,7 +71,7 @@ function Play(args) {
 
     return (
         <main>
-            <NoiseLogo />
+            <div class="logo"/>
             <hr />
             {list()}
             <hr />

client/src/components/mnml.jsx

@@ -5,7 +5,7 @@ const Main = require('./main');
 // const Nav = require('./nav');
 const Controls = require('./controls');
 const FrontPage = require('./front.page');
-const NoiseLogo = require('./noise.logo');
+const Noise = require('./noise');
 
 const addState = connect(
     ({ game, instance, authenticated }) => ({ game, instance, authenticated })
@@ -24,6 +24,7 @@ function Mnml(args) {
 
     if (!authenticated && !instance && !game) return (
         <div id="mnml" class='front-page'>
+            <Noise />
             <FrontPage />
             <div id="rotate" class={rotateClass} ></div>
         </div>
@@ -33,6 +34,7 @@ function Mnml(args) {
         <div id="mnml">
             <Main />
             <Controls />
+            <Noise />
             <div id="rotate" class={rotateClass} ></div>
         </div>
     );

client/src/components/noise.jsx

@@ -2,7 +2,7 @@ const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
 
-class Logo extends Component {
+class Noise extends Component {
     constructor() {
         super();
         this.animations = [];
@@ -10,18 +10,16 @@ class Logo extends Component {
 
     render() {
         return (
-            <div class='logo' style={{ filter: 'url("#noiseFilter")' }}>
+            <svg
-                <svg
+                version="1.1"
-                    version="1.1"
+                id="noise"
-                    id="logo"
+                xmlns="http://www.w3.org/2000/svg"
-                    xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 400 400">
-                    viewBox="0 0 400 400">
+                <filter id='noiseFilter'>
-                    <filter id='noiseFilter'>
+                    <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" result="turbulence"></feTurbulence>
-                        <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" result="turbulence"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
-                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
-                    </filter>
+            </svg>
-                </svg>
-            </div>
         );
     }
 
@@ -74,4 +72,4 @@ class Logo extends Component {
     }
 }
 
-module.exports = Logo;
+module.exports = Noise;