diff --git a/mobile/.expo/packager-info.json b/mobile/.expo/packager-info.json
index 76e10d9..dca2609 100644
--- a/mobile/.expo/packager-info.json
+++ b/mobile/.expo/packager-info.json
@@ -1,5 +1,5 @@
{
"expoServerPort": 19000,
"packagerPort": 19001,
- "packagerPid": 44581
+ "packagerPid": 76299
}
\ No newline at end of file
diff --git a/website/config/webpack.config.dev.js b/website/config/webpack.config.dev.js
index 364703a..2b3cbef 100644
--- a/website/config/webpack.config.dev.js
+++ b/website/config/webpack.config.dev.js
@@ -1,4 +1,4 @@
-feslint'use strict';
+'use strict';
const autoprefixer = require('autoprefixer');
const path = require('path');
diff --git a/website/src/Dialog/ProgressDialog.js b/website/src/Dialog/ProgressDialog.js
deleted file mode 100644
index 6809f39..0000000
--- a/website/src/Dialog/ProgressDialog.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Dimmer, Button, Progress } from '../ui'
-
-export class ProgressDialog extends React.Component {
- static propTypes = {
- open: PropTypes.bool.isRequired,
- message: PropTypes.string.isRequired,
- percent: PropTypes.number.isRequired,
- onCancel: PropTypes.func
- }
-
- render() {
- return (
-
-
-
-
-
-
- )
- }
-}
diff --git a/website/src/Dialog/WaitDialog.js b/website/src/Dialog/WaitDialog.js
index 371f1b7..c26a2c8 100644
--- a/website/src/Dialog/WaitDialog.js
+++ b/website/src/Dialog/WaitDialog.js
@@ -1,70 +1,18 @@
import React from 'react'
import PropTypes from 'prop-types'
-import { Dimmer, Loader } from '../ui'
+import { Dimmer, Loader, Text } from '../ui'
export class WaitDialog extends React.Component {
static propTypes = {
- active: PropTypes.bool.isRequired,
message: PropTypes.string.isRequired
}
render() {
return (
-
- {this.props.message}...
-
+
+
+ {this.props.message && {this.props.message}...}
+
)
}
}
-
-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}
-`;
-
-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;
- }`;
-
- render() {
- return this.props.loading ?
- : null;
- }
-}
-
-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;
diff --git a/website/src/Dialog/index.js b/website/src/Dialog/index.js
index 45631b0..b90cf5c 100644
--- a/website/src/Dialog/index.js
+++ b/website/src/Dialog/index.js
@@ -1,5 +1,4 @@
export { WaitDialog } from './WaitDialog'
-export { ProgressDialog } from './ProgressDialog'
export { YesNoMessageDialog } from './YesNoMessageDialog'
export { MessageDialog } from './MessageDialog'
export { ChangePasswordDialog } from './ChangePasswordDialog'
diff --git a/website/src/Profile/Profile.js b/website/src/Profile/Profile.js
index 4ea7017..d8453f7 100644
--- a/website/src/Profile/Profile.js
+++ b/website/src/Profile/Profile.js
@@ -1,7 +1,7 @@
import React from 'react'
import { ProfileForm } from './ProfileForm'
import { Constants, api } from '../helpers'
-import { WaitDialog, MessageDialog, ChangePasswordDialog, ProgressDialog, ChangeEmailDialog } from '../Dialog'
+import { WaitDialog, MessageDialog, ChangePasswordDialog, ChangeEmailDialog } from '../Dialog'
import { autoBind } from 'auto-bind2'
export class Profile extends React.Component {
@@ -165,11 +165,6 @@ export class Profile extends React.Component {
-
-
)
}
diff --git a/website/src/ui/Dimmer.js b/website/src/ui/Dimmer.js
index e69de29..b158433 100644
--- a/website/src/ui/Dimmer.js
+++ b/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 (
+
+ {this.props.children}
+
+ )
+ }
+}
+
+export default Radium(Dimmer)
diff --git a/website/src/ui/Dimmer.style.js b/website/src/ui/Dimmer.style.js
new file mode 100644
index 0000000..bcbf8b3
--- /dev/null
+++ b/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)'
+ }
+}
diff --git a/website/src/ui/Loader.js b/website/src/ui/Loader.js
index 764b15b..a703b51 100644
--- a/website/src/ui/Loader.js
+++ b/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 (
: null;
+
+ )
}
}
-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)
diff --git a/website/src/ui/Modal.js b/website/src/ui/Modal.js
index e281edd..1346719 100644
--- a/website/src/ui/Modal.js
+++ b/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)
diff --git a/website/src/ui/Modal.style.js b/website/src/ui/Modal.style.js
index 434c2bf..4b632f6 100644
--- a/website/src/ui/Modal.style.js
+++ b/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',