Upgrade Deps

client.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './components/app'
 import Menu from './components/menu'

components/admin/index.jsx

@@ -1,9 +1,7 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { store } from '../../client.js'
 import Local from '../connection/local.js'
-import Radium from 'radium'
 
-@Radium
 export default class Admin extends Component {
   constructor() {
     super()
@@ -50,7 +48,7 @@ export default class Admin extends Component {
   render() {
     return (
       <figure
-        style={[
+        css={[
           styles.drop,
           this.props.admin.display || this.state.dragging
             ? styles.show
@@ -63,7 +61,7 @@ export default class Admin extends Component {
         onDragLeave={this.handleDragLeave}
         onDrop={this.handleDrop}
       >
-        <span style={styles.span}>Drop music collection here</span>
+        <span css={styles.span}>Drop music collection here</span>
       </figure>
     )
   }

components/app/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { Global } from '@emotion/react'
 import Loading from '../loading'
 import Admin from '../admin'
 import Bar from '../bar'
@@ -7,11 +7,10 @@ import Status from '../status'
 import Library from '../library'
 import Showcase from '../showcase'
 import Playbar from '../playbar'
-import Radium, { StyleRoot, Style } from 'radium'
 
 const App = props => (
-  <StyleRoot>
-    <Style rules={styles} />
+  <main>
+    <Global styles={styles} />
     <Bar />
     <Admin admin={props.admin} />
     <Library library={props.library} player={props.player} />
@@ -24,10 +23,10 @@ const App = props => (
       admin={props.admin}
       metadata={props.metadata}
     />
-  </StyleRoot>
+  </main>
 )
 
-export default Radium(App)
+export default App
 
 const styles = {
   html: {

components/bar/index.jsx

@@ -1,9 +1,6 @@
-import React from 'react'
-import Radium from 'radium'
+const Bar = () => <nav css={styles.base} />
 
-const Bar = () => <nav style={styles.base} />
-
-export default Radium(Bar)
+export default Bar
 
 const styles = {
   base: {

components/button/index.jsx

@@ -1,9 +1,6 @@
-import React from 'react'
-import Radium from 'radium'
-
 const Button = props => (
   <button
-    style={[styles.base, props.disabled && styles.disabled]}
+    css={[styles.base, props.disabled && styles.disabled]}
     type={props.type}
     onClick={props.callback}
     disabled={props.disabled}
@@ -42,4 +39,4 @@ const styles = {
   }
 }
 
-export default Radium(Button)
+export default Button

components/close-button/index.jsx

@@ -1,23 +1,21 @@
-import React from 'react'
-import Radium from 'radium'
 import { store } from '../../client.js'
 
 const CloseButton = props => (
   <div
-    style={styles.base}
+    css={styles.base}
     onClick={() => {
       store.dispatch({ type: 'ESCAPE' })
       if (props.onClick) props.onClick()
     }}
   >
-    <svg style={styles.svg} viewBox="0 0 63.8 63.7">
+    <svg css={styles.svg} viewBox="0 0 63.8 63.7">
       <path d="M61.3 63.7c-.6 0-1.3-.2-1.8-.7L.7 4.3c-1-1-1-2.6 0-3.5 1-1 2.6-1 3.5 0L63 59.5c1 1 1 2.6 0 3.5-.5.5-1.1.7-1.7.7z" />
       <path d="M2.5 63.7c-.6 0-1.3-.2-1.8-.7-1-1-1-2.6 0-3.5L59.5.7c1-1 2.6-1 3.5 0 1 1 1 2.6 0 3.5L4.3 63c-.5.5-1.2.7-1.8.7z" />
     </svg>
   </div>
 )
 
-export default Radium(CloseButton)
+export default CloseButton
 
 const styles = {
   base: {

components/fuzz/index.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import ReactDOM from 'react-dom'
 const paper = require('paper/dist/paper-full')
 
@@ -61,7 +61,7 @@ export default class Fuzz extends Component {
         id="oscilloscope"
         height="100%"
         width="100%"
-        style={{
+        css={{
           opacity: 0.8,
           width: '100%',
           pointerEvents: 'none',

components/input/index.jsx

@@ -1,13 +1,10 @@
-import React from 'react'
-import Radium from 'radium'
-
 const Input = props => (
-  <div style={styles.base}>
-    <div style={{ padding: '0 .5em' }}>
-      {props.label && <label style={styles.label}>{props.label}</label>}
+  <div css={styles.base}>
+    <div css={{ padding: '0 .5em' }}>
+      {props.label && <label css={styles.label}>{props.label}</label>}
       <input
         type={props.type || 'text'}
-        style={styles.input}
+        css={styles.input}
         required={props.required}
         value={props.value}
         onChange={props.onChange}
@@ -17,7 +14,7 @@ const Input = props => (
   </div>
 )
 
-export default Radium(Input)
+export default Input
 
 const styles = {
   base: {

components/library/album.jsx

@@ -1,12 +1,10 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import ReactDOM from 'react-dom'
-import Radium from 'radium'
 import { store } from '../../client.js'
 import { rafThrottle } from '../utilities'
 import shallowCompare from 'react-addons-shallow-compare'
 import inView from 'in-view'
 
-@Radium
 export default class Album extends Component {
   constructor(props) {
     super()
@@ -50,18 +48,18 @@ export default class Album extends Component {
         onClick={this.handleClick}
         onMouseOver={this.activate}
         onMouseOut={this.reset}
-        style={[
+        css={[
           styles.base,
           this.props.newest ? { order: this.props.album.time } : { order: -2 }
         ]}
       >
-        <div style={this.state.fade ? styles.fade : styles.nonfade}>
+        <div css={this.state.fade ? styles.fade : styles.nonfade}>
           <div
             ref="album"
-            style={[styles.cover, cover, this.state.active ? styles.zoom : '']}
+            css={[styles.cover, cover, this.state.active ? styles.zoom : '']}
           />
         </div>
-        <span style={[this.state.active ? styles.active : '']}>
+        <span css={[this.state.active ? styles.active : '']}>
           {this.props.album.artist + ' - ' + this.props.album.title}
         </span>
       </li>

components/library/index.jsx

@@ -1,10 +1,8 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import Album from './album.jsx'
-import Radium from 'radium'
 import shallowCompare from 'react-addons-shallow-compare'
 import { store } from '../../client.js'
 
-@Radium
 export default class Library extends Component {
   componentDidMount() {
     if (localStorage.getItem('newest') === 'true')
@@ -18,7 +16,7 @@ export default class Library extends Component {
     return (
       <ul
         ref="library"
-        style={[
+        css={[
           styles.base,
           this.props.player.track
             ? { padding: '12.5vh 0 33vh' }
@@ -36,16 +34,16 @@ export default class Library extends Component {
               />
             )
         })}
-        <li style={styles.li} />
-        <li style={styles.li} />
-        <li style={styles.li} />
-        <li style={styles.li} />
-        <li style={styles.li} />
-        <li style={styles.li} />
-        <li style={styles.li} />
-        <li style={styles.li} />
-        <li style={styles.li} />
-        <li style={styles.li} />
+        <li css={styles.li} />
+        <li css={styles.li} />
+        <li css={styles.li} />
+        <li css={styles.li} />
+        <li css={styles.li} />
+        <li css={styles.li} />
+        <li css={styles.li} />
+        <li css={styles.li} />
+        <li css={styles.li} />
+        <li css={styles.li} />
       </ul>
     )
   }

components/loading/index.jsx

@@ -1,15 +1,12 @@
-import React from 'react'
-import Radium from 'radium'
-
 const Loading = props => (
   <section
-    style={[styles.base, props.loading.display ? styles.show : styles.hide]}
+    css={[styles.base, props.loading.display ? styles.show : styles.hide]}
   >
-    <span style={styles.span}>{props.loading.message}</span>
+    <span css={styles.span}>{props.loading.message}</span>
   </section>
 )
 
-export default Radium(Loading)
+export default Loading
 
 const styles = {
   base: {

components/playbar/index.jsx

@@ -1,10 +1,8 @@
-import React, { Component } from 'react'
-import Radium from 'radium'
+import { Component } from 'react'
 import ReactDOM from 'react-dom'
 import shallowCompare from 'react-addons-shallow-compare'
 import { rafThrottle } from '../utilities'
 
-@Radium
 export default class Playbar extends Component {
   constructor() {
     super()
@@ -40,14 +38,14 @@ export default class Playbar extends Component {
   render() {
     return (
       <div
-        style={[
+        css={[
           styles.playbar,
           this.props.playbar.display ? styles.show : styles.hide
         ]}
       >
         <audio id="xxx" />
         <div
-          style={{
+          css={{
             position: 'relative',
             height: 40,
             width: '100%',
@@ -58,24 +56,24 @@ export default class Playbar extends Component {
           onMouseLeave={() => this.setState({ hover: false })}
           onClick={this.scan}
         >
-          <div data-range style={styles.range} />
-          <div data-buffer style={styles.buffer} />
+          <div data-range css={styles.range} />
+          <div data-buffer css={styles.buffer} />
           <div
-            style={[
+            css={[
               styles.slider,
               this.state.hover ? { opacity: 1 } : { opacity: 0 },
               { transform: `translateX(${this.state.left}px)` || 0 }
             ]}
           />
         </div>
-        <div style={styles.panel}>
-          <span style={styles.span} key="previous" onClick={this.previous}>
+        <div css={styles.panel}>
+          <span css={styles.span} key="previous" onClick={this.previous}>
             previous
           </span>
-          <span style={styles.span} key="toggle" onClick={this.toggle}>
+          <span css={styles.span} key="toggle" onClick={this.toggle}>
             {this.props.playbar.toggle}
           </span>
-          <span style={styles.span} key="next" onClick={this.next}>
+          <span css={styles.span} key="next" onClick={this.next}>
             next
           </span>
         </div>

components/search/index.jsx

@@ -1,11 +1,9 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import key from 'key'
-import Radium from 'radium'
 import shallowCompare from 'react-addons-shallow-compare'
 import CloseButton from '../close-button'
 import { store } from '../../client.js'
 
-@Radium
 export default class Search extends Component {
   constructor() {
     super()
@@ -33,7 +31,7 @@ export default class Search extends Component {
   render() {
     return (
       <form
-        style={[
+        css={[
           styles.search,
           this.props.search.display ? styles.show : styles.hide
         ]}
@@ -43,7 +41,7 @@ export default class Search extends Component {
           ref="search"
           type="text"
           value={this.props.search.input}
-          style={styles.input}
+          css={styles.input}
           onChange={this.handleSearch}
         />
       </form>