Fix input element styling madness

website/src/ui/Dimmer.js

@@ -1,7 +1,6 @@
 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 {
@@ -10,6 +9,24 @@ export class Dimmer extends Component {
     children: PropTypes.node,
   }
 
+  static style = {
+    div: {
+      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)'
+    }
+  }
+
   constructor(props) {
     super(props)
     reactAutoBind(this)
@@ -21,7 +38,7 @@ export class Dimmer extends Component {
 
   render() {
     return this.props.active ? (
-      <div style={style.dimmer} onClick={this.preventPropagation}>
+      <div style={Dimmer.style.div} onClick={this.preventPropagation}>
         {this.props.children}
       </div>
     ) : null