Everything compiling again

website/src/ui/Dimmer.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import style from './Dimmer.style'
+import { reactAutoBind } from 'auto-bind2'
+
+export class Dimmer extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+  }
+
+  preventPropagation(e) {
+    e.stopPropagation()
+  }
+
+  render() {
+    return (
+      <div style={style.dimmer} onClick={this.preventPropagation}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+export default Radium(Dimmer)

website/src/ui/Dimmer.style.js

@@ -0,0 +1,17 @@
+export default {
+  dimmer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100vh',
+    width: '100vw',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 100,
+    background: 'rgba(25, 25, 30, 0.75)'
+  }
+}

website/src/ui/Loader.js

@@ -1,51 +1,43 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { keyframes, css } from 'emotion';
-import { onlyUpdateForKeys } from 'recompose';
-
-// This returns an animation
-const pulse = keyframes`
-  0% {transform: scale(1);opacity: 1}
-  45% {transform: scale(0.1);opacity: 0.7}
-  80% {transform: scale(1);opacity: 1}
-`;
+import React from 'react'
+import Radium from 'radium'
+import PropTypes from 'prop-types'
 
 class Loader extends React.Component {
-  style = i => css`{
-        background-color: ${this.props.color};
-        width: ${this.props.size}px;
-        height: ${this.props.size}px;
-        margin: ${this.props.margin};
-        border-radius: 100%;
-        display: inline-block;
-        animation: ${pulse} 0.75s ${i * 0.12}s infinite cubic-bezier(.2,.68,.18,1.08);
-        animation-fill-mode: both;
-    }`;
+  static propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.number,
+    margin: PropTypes.string
+  }
+
+  static defaultProps = {
+    color: '#000000',
+    size: 15,
+    margin: '2px'
+  }
+
+  style(i) {
+    return {
+      backgroundColor: `${this.props.color}`,
+      width: `${this.props.size}px`,
+      height: `${this.props.size}px`,
+      margin: `${this.props.margin}`,
+      borderRadius: '100%',
+      display: 'inline-block',
+      // 0% {transform: scale(1); opacity: 1} 45% {transform: scale(0.1); opacity: 0.7} 80% {transform: scale(1); opacity: 1} 0.75s ${i * 0.12}s infinite cubic-bezier(.2,.68,.18,1.08)
+      animation: ``,
+      animationFillMode: 'both'
+    }
+  }
 
   render() {
-    return this.props.loading ?
+    return (
       <div>
         <div className={this.style(1)} />
         <div className={this.style(2)} />
         <div className={this.style(3)} />
-      </div> : null;
+      </div>
+    )
   }
 }
 
-Loader.propTypes = {
-  loading: PropTypes.bool,
-  color: PropTypes.string,
-  size: PropTypes.number,
-  margin: PropTypes.string
-};
-
-Loader.defaultProps = {
-  loading: true,
-  color: '#000000',
-  size: 15,
-  margin: '2px'
-};
-
-const Component = onlyUpdateForKeys(['loading', 'color', 'size', 'margin'])(Loader);
-Component.defaultProps = Loader.defaultProps;
-export default Component;
+export default Radium(Loader)

website/src/ui/Modal.js

@@ -2,8 +2,9 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import style from './Modal.style'
 import { reactAutoBind } from 'auto-bind2'
+import Radium from 'radium'
 
-export class Modal extends Component {
+class Modal extends Component {
   static propTypes = {
     children: PropTypes.node
   }
@@ -27,3 +28,5 @@ export class Modal extends Component {
     )
   }
 }
+
+export default Radium(Modal)

website/src/ui/Modal.style.js

@@ -1,20 +1,4 @@
 export default {
-  dimmer: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '100vh',
-    width: '100vw',
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 100,
-    background: 'rgba(25, 25, 30, 0.75)'
-  },
-
   modal: {
     zIndex: 101,
     background: '#FFFFFF',